微调

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

@@ -0,0 +1,235 @@
+<template>
+
+   <div class="dictiontary-list-detail child-router">
+         <!-- 主体区域：左侧树 + 右侧表格 -->
+    <el-row :gutter="20" class="main-content">
+      <!-- 左侧树 -->
+      <el-col :span="6">
+        <div class="tree-container">
+          <el-tree
+            @node-click="clickNode"
+            :expand-on-click-node="false"
+            :highlight-current="true"
+            :data="TreeData"
+            node-key="id"
+            :default-expanded-keys="treeExpandData"
+            :props="defaultProps"
+            ref="tree"
+          ></el-tree>
+        </div>
+      </el-col>
+
+      <!-- 右侧表格 -->
+      <el-col :span="18">
+        <TableHeader>
+          <template #select>
+             <el-form-item label="">
+                    <el-page-header @back="$emit('close')">
+                        <template #content>
+                            <span class="text-large font-600 mr-3">报告字典管理</span>
+                        </template>
+                    </el-page-header>
+                </el-form-item>
+            <el-form-item label="过滤筛选">
+              <el-input
+                style="width: 240px"
+                v-model="tableStore.table.params.searchValue"
+                clearable
+                placeholder="请输入筛选数据"
+                maxlength="32"
+                show-word-limit
+              />
+            </el-form-item>
+          </template>
+          <template #operation>
+            <el-button :icon="Plus" type="primary" @click="addTemplate">新增配置项</el-button>
+          </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+      </el-col>
+    </el-row>
+
+
+      <!-- 新增 -->
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="30%"
+      @close="closeDialog"
+    >
+      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
+        <el-form-item label="父节点:" prop="pid">
+          <el-select v-model="form.pid" style="width: 100%" placeholder="请选择父节点" clearable>
+            <el-option
+              v-for="item in secondLevelNode"
+              :key="item.id"
+              :label="item.reportDescribe"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称:" prop="name" class="top">
+          <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
+        </el-form-item>
+        <el-form-item label="描述:" prop="reportDescribe" class="top">
+          <el-input type="textarea" placeholder="请输入描述" v-model.trim="form.reportDescribe"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="addFn">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+ 
+</template>
+
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage } from 'element-plus'
+import {
+    getDictTree,
+    getReportDictList,
+    addDict,
+    updateDict,
+    deleteDict
+} from '@/api/system-boot/ReportTemplate'
+
+// 弹出框是否可见
+const dialogVisible = ref<boolean>(false)
+const dialogTitle = ref('新增配置项')
+const formRef = ref()
+const props = defineProps({
+  type: {
+    type: Number,
+    default: undefined
+  }
+})
+
+const formData = reactive({
+  searchValue: '',
+  id: '0',
+  type: props.type
+})
+
+const form = reactive({
+  name: '',
+  reportDescribe: '',
+  pid: '',
+  sort: 0,
+  type: props.type
+})
+
+const rules = {
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
+  pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
+}
+
+const tableStore = new TableStore({
+    url: '/system-boot/reportDict/getReportDictList',
+    method: 'POST',
+    column: [
+        { title: '配置项名称', field: 'name' },
+        { title: '配置项描述', field: 'reportDescribe' },
+        { title: '上级节点', field: 'pidName' },
+        {
+             title: '操作',fixed: 'right',
+            width: '180',
+            render: 'buttons',
+        
+            buttons: [
+                {
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        popupEditRef.value.open('编辑', {
+                            ...row,
+                            openDescribe: props.detail.openDescribe,
+                            openLevel: props.detail.openLevel,
+                            typeName: props.detail.name + row.name,
+                            typeId: props.detail.id
+                        })
+                    }
+                },
+                {
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该字典类型吗？'
+                    },
+                    click: row => {
+                            deleteDict([row.id]).then(() => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        
+    }
+})
+
+provide('tableStore', tableStore)
+const addTemplate = () => {
+  dialogTitle.value = '新增配置项'
+  dialogVisible.value = true
+  Object.assign(form, {
+    name: '',
+    reportDescribe: '',
+    pid: '',
+    sort: 0,
+    type: props.type
+  })
+}
+
+const addFn = () => {
+  formRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      try {
+        await addDict(form)
+        ElMessage.success('新增成功')
+        dialogVisible.value = false
+     
+      } catch (error) {
+        ElMessage.error('新增失败')
+      }
+    }
+  })
+}
+
+const closeDialog = () => {
+  dialogVisible.value = false
+  formRef.value?.resetFields()
+}
+
+onMounted(() => {
+    tableStore.index()
+})
+
+</script>
+
+<style scoped>
+.back {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 29px;
+  color: #409eff;
+  cursor: pointer;
+}
+</style>

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()
 })