微调

src/views/system/ReportConfiguration/components/disposition.vue

@@ -1,22 +1,76 @@
 <template>
     <div class="default-main">
-
         <TableHeader ref="TableHeaderRef">
             <template v-slot:select>
                 <el-form-item label="模板类型">
-                 
                     <el-select v-model="tableStore.table.params.type" placeholder="Select" size="large">
                         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                     </el-select>
                 </el-form-item>
             </template>
             <template #operation>
-                <el-button icon="el-icon-Memo" type="primary" @click="add">报告字典管理</el-button>
+                <el-button icon="el-icon-Memo" type="primary" @click="openReportDictionary">报告字典管理</el-button>
                 <el-button icon="el-icon-Plus" type="primary" @click="add">新增模版</el-button>
             </template>
         </TableHeader>
         <Table ref="tableRef" />
 
+        <Administration
+            :type="tableStore.table.params.type"
+            v-if="showDictionary"
+            @close="closeReportDictionary"
+            />
+
+
+         <el-dialog
+            :title="title"
+            v-model="dialogVisible" 
+            v-if="dialogVisible"
+            width="40%"
+            >
+            <el-row :gutter="20">
+                <el-col :span="11">
+                    <div class="grid-content">
+                        <el-tree
+                        :data="data"
+                        show-checkbox
+                        node-key="id"
+                        :props="defaultProps"
+                        :default-checked-keys="treeCheckedData"
+                        :default-expanded-keys="treeExpandData"
+                        @check-change="handleCheckChange"
+                        ref="tree"
+                        >
+                        </el-tree>
+                    </div
+                >
+                </el-col>
+                <el-col :span="13">
+                    <el-form ref="formRef" :rules="rules" :model="form" label-width="60px">
+                    <el-form-item label="名称:" prop="name">
+                    <el-input
+                        v-model.trim="form.name"
+                        placeholder="请输入名称"
+                    ></el-input>
+                    </el-form-item>
+                    <el-form-item label="描述:" prop="code" class="top">
+                    <el-input
+                        type="textarea"
+                        :rows="2"
+                        placeholder="请输入描述"
+                        v-model.trim="form.code"
+                    >
+                    </el-input>
+                    </el-form-item> </el-form
+                >
+                </el-col>
+            </el-row>
+             <template #footer>
+                <el-button @click="closeDialog">取 消</el-button>
+                <el-button type="primary" @click="addDetermine">确定</el-button>
+            </template>
+        </el-dialog>
+
     </div>
 </template>
 <script setup lang="ts">
@@ -24,19 +78,65 @@ import { ref, onMounted, provide, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
-import { delTemplate } from '@/api/harmonic-boot/luckyexcel'
-import { useDictData } from '@/stores/dictData'
+import { addData,updateData,deleteData,getList,getDictTree } from '@/api/system-boot/MonitoringPoint'
 import { ElMessage } from 'element-plus'
+import Administration from '@/views/system/ReportConfiguration/components/Administration.vue'
+
 defineOptions({
     name: 'BusinessAdministrator/ReportTemplate/ReportConfiguration'
 })
+
+const showDictionary = ref(false)
+const formRef = ref(null)
+const tree = ref(null)
+// 弹出框标题
+const title = ref<string>('新增模板')
+
+// 弹出框是否可见
+const dialogVisible = ref<boolean>(false)
+// 是否为编辑模式
+const isEdit = ref<boolean>(false)
+// 表单数据
+const form = ref({
+  id: '',
+  name: '',
+  code: '',
+  type: 0,
+})
+
+// 表单验证规则
+const rules = {
+  name: [
+    { required: true, message: '请输入名称', trigger: 'blur' }
+  ],
+  code: [
+    { required: true, message: '请输入描述', trigger: 'blur' }
+  ]
+}
+
+// 树形控件相关数据（假设）
+const data = ref([]) // 树形数据源
+const defaultProps = {
+  children: 'children',
+  label: 'label'
+}
+const treeCheckedData = ref([]) // 默认选中的节点
+const treeExpandData = ref([]) // 默认展开的节点
+
 const options = ([
     { value: '0', label: '监测点报告' },
     { value: '1', label: '区域报告' },
-
 ])
 
+const openReportDictionary = () => {
+  console.log('点击了报告字典管理按钮')
+  showDictionary.value = true
+  console.log('showDictionary 当前值:', showDictionary.value)
+}
 
+const closeReportDictionary = () => {
+  showDictionary.value = false
+}
 
 const tableStore: any = new TableStore({
     url: '/system-boot/EventTemplate/getList',
@@ -58,7 +158,16 @@ const tableStore: any = new TableStore({
                     icon: 'el-icon-Plus',
                     render: 'basicButton',
                     click: row => {
-
+                        isEdit.value = true
+                        title.value = '编辑模板'
+                        dialogVisible.value = true
+                        // 回显表单数据
+                        form.value = {
+                            id: row.id,
+                            name: row.name,
+                            code: row.code,
+                            type: row.type
+                        }
                     }
                 },
 
@@ -75,7 +184,8 @@ const tableStore: any = new TableStore({
                         title: '确定删除？'
                     },
                     click: row => {
-                        delTemplate({ tempId: row.id, deptId: row.deptId }).then(res => {
+                        let data = [row.id];
+                        deleteData(data).then(res => {
                             ElMessage.success('删除成功')
                             tableStore.index()
                         })
@@ -93,8 +203,51 @@ tableStore.table.params.type = '0'
 provide('tableStore', tableStore)
 
 const add = () => {
-
+    isEdit.value = true
+    title.value = '新增模板'
+    dialogVisible.value = true
+    // 初始化表单数据
+    form.value = {
+        id: '',
+        name: '',
+        code: '',
+        type: tableStore.table.params.type
+    }
+  
 }
+
+const addDetermine = () => {
+  if (formRef.value) {
+    formRef.value.validate((valid: boolean) => {
+      if (valid) {
+        if (isEdit.value) {
+          // 编辑逻辑
+          updateData(form.value).then(res => {
+            ElMessage.success('编辑模板成功')
+            closeDialog()
+            tableStore.index()
+          })
+        } else {
+          // 新增逻辑
+          addData(form.value).then(res => {
+            ElMessage.success('新增模板成功')
+            closeDialog()
+            tableStore.index()
+          })
+        }
+      }
+    })
+  }
+}
+
+const closeDialog = () => {
+  dialogVisible.value = false
+  // 重置表单
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
 onMounted(() => {
     tableStore.index()
 })