feat: 事件管理开发

src/renderer/views/knowledge/components/EventManager/index.vue

@@ -2,27 +2,26 @@
  * @Author: kongbeiwu lishaohua-520@qq.com
  * @Date: 2025-12-22 01:11:57
  * @LastEditors: kongbeiwu lishaohua-520@qq.com
- * @LastEditTime: 2025-12-25 15:18:48
+ * @LastEditTime: 2025-12-29 13:20:57
  * @FilePath: /project/zn-ai/src/renderer/views/knowledge/components/EventManagement/index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div>
-    <el-button class="button" type="primary" :icon="Plus">添加事件</el-button>
+    <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">添加事件</el-button>
     <div class="zn-table mt-[20px]">
-      <el-table :data="tableData" class="zn-table" style="width: 100%"
-        show-overflow-tooltip>
+      <el-table :data="tableData" class="zn-table" style="width: 100%" show-overflow-tooltip>
         <el-table-column prop="date" label="事件名称" width="180" align="center" />
         <el-table-column prop="name" label="事件描述" width="180" align="center" />
-        <el-table-column prop="address" label="生效时间" align="center" /> 
+        <el-table-column prop="address" label="生效时间" align="center" />
         <el-table-column prop="address" label="结束事件" align="center" />
         <el-table-column prop="address" label="关联图片" align="center" />
-        <el-table-column prop="address" label="启用/停用" align="center" >
+        <el-table-column prop="address" label="启用/停用" align="center">
           <template #default="scope">
             <el-switch v-model="scope.row.switch" size="small" />
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
             <el-button link size="small" type="primary">
               查看图片
@@ -35,10 +34,45 @@
       </el-table>
     </div>
   </div>
+  <!-- 添加事件弹窗 -->
+  <el-dialog v-model="dialogVisible" title="添加事件" width="500" :before-close="handleClose" :modal="false"
+    :close-on-click-modal="false" :close-on-press-escape="false">
+    <div class="p-[20px]">
+      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-position="top"
+        label-width="auto">
+        <el-form-item label="事件名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="事件描述" prop="des">
+          <el-input v-model="ruleForm.des" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="生效时间段" prop="time">
+          <el-date-picker type="daterange" v-model="ruleForm.time" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期">
+            <template #suffix>
+              <el-icon class="el-input__icon">
+                <calendar />
+              </el-icon>
+            </template>
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm(ruleFormRef)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
+import type { FormInstance } from 'element-plus'
 type TableData = {
   address: string
   date: string
@@ -59,10 +93,51 @@ const tableData: TableData[] = [
     switch: true,
   },
 ];
+
+
+interface RuleForm {
+  name: string
+  des: string
+  time: string[]
+}
+const ruleFormRef = ref<any>();
+const rules = ref<any>({
+  name: [
+    { required: true, message: '请输入活动名称', trigger: 'blur' },
+    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
+  ],
+  des: [
+    { required: true, message: '请输入活动描述', trigger: 'blur' },
+    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
+  ],
+  time: [
+    { required: true, message: '请选择生效时间段', trigger: 'change' },
+  ],
+});
+const ruleForm = reactive<RuleForm>({
+  name: '',
+  des: '',
+  time: [],
+});
+const dialogVisible = ref(false);
+const handleClose = (done: () => void) => {
+  done();
+  // dialogVisible.value = false;
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
 </script>
 
 <style scoped>
- :deep(.el-button.button) {
+:deep(.el-button.button) {
   background: linear-gradient(180deg, #4A8FF9 0%, rgba(0, 0, 0, 0) 100%), #2B7FFF;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.24);
   border-radius: 8px 8px 8px 8px;