feat: 事件管理开发

2025-12-29 17:28:28 +08:00
parent eff4967057
commit 5dd68d8dc5
4 changed files with 191 additions and 30 deletions
--- a/src/renderer/styles/index.css
+++ b/src/renderer/styles/index.css
@@ -64,3 +64,55 @@ body {
 .el-table th.el-table__cell {
  background-color: #F5F7FA!important;
 }
+.el-dialog {
+  padding: 0!important;
+  border-radius: 20px!important;
+}
+.el-dialog__header {
+  padding: 16px 20px!important;
+  border-bottom: 1px solid #E5E8EE;
+}
+.el-dialog__title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #171717;
+}
+.el-dialog__close {
+  font-size: 14px;
+  font-weight: 600;
+  color: #525866;
+}
+.dialog-footer {
+  padding: 16px 20px!important;
+  border-top: 1px solid #E5E8EE;
+}
+.dialog-footer .el-button {
+  border-radius: 8px!important;
+  padding: 8px 10px!important;
+  font-weight: 500;
+  font-size: 14px;
+}
+.dialog-footer .el-button--primary {
+  background: #2B7FFF!important;
+  border-color: #2B7FFF!important;
+}
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before {
+  content: ""!important;
+  margin-left: 0px!important;
+}
+
+.el-form-item__label {
+  font-weight: 400;
+  font-size: 14px!important;
+  color: #171717!important;
+}
+.el-input__wrapper {
+  border-radius: 8px!important;
+  /* border: 1px solid #E5E8EE; */
+}
+
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:after, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:after {
+  content: "*";
+  color: #FF4949;
+  margin-left: 3px;
+}
--- a/src/renderer/views/knowledge/components/EventManager/index.vue
+++ b/src/renderer/views/knowledge/components/EventManager/index.vue
@@ -2,16 +2,15 @@
 * @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" />
@@ -22,7 +21,7 @@
            <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,6 +93,47 @@ 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>
--- a/src/renderer/views/knowledge/index.vue
+++ b/src/renderer/views/knowledge/index.vue
@@ -1,29 +1,17 @@
+<!--
+ * @Author: kongbeiwu lishaohua-520@qq.com
+ * @Date: 2025-12-28 16:08:45
+ * @LastEditors: kongbeiwu lishaohua-520@qq.com
+ * @LastEditTime: 2025-12-29 13:48:26
+ * @FilePath: /project/zn-ai/src/renderer/views/knowledge/index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-  <div class="bg-white box-border w-full h-full p-[20px]">
-    <TitleSection title="知识库管理" desc="内容管理" />
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="事件管理" name="first">
-        <EventManager />
-      </el-tab-pane>
-      <el-tab-pane label="房型管理" name="second">
-        <RoomTypeManager />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
+  <knowledgePage />
 </template>

 <script setup lang="ts" name="Knowledge">
-import TitleSection from '@renderer/components/TitleSection/index.vue'
-import EventManager from './components/EventManager/index.vue'
-import RoomTypeManager from './components/RoomTypeManager/index.vue'
-import { ref } from 'vue';
-import type { TabsPaneContext } from 'element-plus';
-
-const activeName = ref('first');
-
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
-};
+import knowledgePage from './page.vue';
 </script>
 <style scoped>
 :deep(.el-tabs__item) {
--- a/src/renderer/views/knowledge/page.vue
+++ b/src/renderer/views/knowledge/page.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Author: kongbeiwu lishaohua-520@qq.com
+ * @Date: 2025-12-29 13:45:28
+ * @LastEditors: kongbeiwu lishaohua-520@qq.com
+ * @LastEditTime: 2025-12-29 13:45:54
+ * @FilePath: /project/zn-ai/src/renderer/views/knowledge/page.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="bg-white box-border w-full h-full p-[20px]">
+    <TitleSection title="知识库管理" desc="内容管理" />
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="事件管理" name="first">
+        <EventManager />
+      </el-tab-pane>
+      <el-tab-pane label="房型管理" name="second">
+        <RoomTypeManager />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts" name="KnowledgePage">
+import TitleSection from '@renderer/components/TitleSection/index.vue'
+import EventManager from './components/EventManager/index.vue'
+import RoomTypeManager from './components/RoomTypeManager/index.vue'
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+
+const activeName = ref('first');
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+};
+</script>
+<style scoped>
+:deep(.el-tabs__item) {
+  color: #99A0AE;
+}
+:deep(.el-tabs__item.is-active) {
+  color: #2B7FFF;
+}
+:deep(.el-tabs__active-bar) {
+  background-color: #2B7FFF;
+}
+</style>