报告模版配置

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

@@ -1,8 +1,37 @@
 <template>
+  <div class="dictiontary-list-detail child-router">
+    <!-- 上方一整块：筛选和操作按钮 -->
+    <el-row class="main-content">
+      <el-col :span="24">
+        <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>
+      </el-col>
+    </el-row>
 
-   <div class="dictiontary-list-detail child-router">
-         <!-- 主体区域：左侧树 + 右侧表格 -->
-    <el-row :gutter="20" class="main-content">
+    <!-- 下方左右两块：左侧树 + 右侧表格 -->
+    <el-row :gutter="20" class="main-content mt20">
       <!-- 左侧树 -->
       <el-col :span="6">
         <div class="tree-container">
@@ -21,36 +50,11 @@
 
       <!-- 右侧表格 -->
       <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"
@@ -59,20 +63,27 @@
     >
       <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-tree-select
+            v-model="form.pid"
+            style="width: 100%"
+            placeholder="请选择父节点"
+            :data="TreeData"
+            node-key="id"
+            :props="defaultProps"
+            clearable
+            :disabled="isEditMode"
+             check-strictly
+          />
         </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-input
+            type="textarea"
+            placeholder="请输入描述"
+            v-model.trim="form.reportDescribe"
+          ></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -81,7 +92,6 @@
       </template>
     </el-dialog>
   </div>
- 
 </template>
 
 <script setup lang="ts">
@@ -92,12 +102,12 @@ import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { ElMessage } from 'element-plus'
 import {
-    getReportDictList,
-    addDict,
-    deleteDict
+  updateDict,
+  addDict,
+  deleteDict,
+  getDictTree
 } from '@/api/system-boot/ReportTemplate'
 
-
 // 弹出框是否可见
 const dialogVisible = ref<boolean>(false)
 const dialogTitle = ref('新增配置项')
@@ -113,21 +123,127 @@ const props = defineProps({
   }
 })
 const TreeData = computed(() => props.treeData)
-const secondLevelNode = ref<any[]>([]);
 const treeExpandData = ref([])
+const tree = ref(null)
+
+// Administration.vue
+const emit = defineEmits(['refreshTree'])
+
+// 刷新左侧树数据
+const refreshTreeData = () => {
+  emit('refreshTree') // 触发父组件刷新树数据
+}
+
+const formData = reactive({
+  searchValue: '',
+  id: 0,
+  type: props.type
+})
+
+const form = reactive({
+  id: 0,
+  name: '',
+  reportDescribe: '',
+  pid: '',
+  sort: 0,
+  type: props.type
+})
+
+const defaultProps = {
+  children: 'children',
+  label: 'reportDescribe',
+  value: 'id' // 指定节点的值字段
+}
+
+const rules = {
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
+  pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
+}
+
+// 判断是否为编辑模式
+const isEditMode = computed(() => dialogTitle.value === '编辑配置项')
+
+const tableStore = new TableStore({
+  url: '/system-boot/reportDict/getReportDictList',
+  method: 'POST',
+  showPage: false,
+  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 => {
+            dialogTitle.value = '编辑配置项'
+            dialogVisible.value = true
+            Object.assign(form, {
+              id: row.id,
+              name: row.name,
+              reportDescribe: row.reportDescribe,
+              pid: row.pid,
+              sort: row.sort,
+              type: props.type
+            })
+          }
+        },
+        {
+          title: '删除',
+          type: 'danger',
+          icon: 'el-icon-Delete',
+          render: 'confirmButton',
+          popconfirm: {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            confirmButtonType: 'danger',
+            title: '确定删除该字典类型吗？'
+          },
+          click: row => {
+            let data = {
+              id: row.id
+            }
+            deleteDict(data).then(() => {
+              ElMessage.success('删除成功')
+              tableStore.index()
+              refreshTreeData()
+            })
+          }
+        }
+      ]
+    }
+  ],
+  resetCallback: () => {
+    tableStore.table.params.id = formData.id
+  }
+})
+
+tableStore.table.params.id = 0
+tableStore.table.params.searchValue = ''
+tableStore.table.params.type = props.type
+provide('tableStore', tableStore)
 
 const setDefaultExpandedKeys = (treeData: any[]) => {
   const firstLevelIds = treeData.map(item => item.id)
   treeExpandData.value = firstLevelIds
 }
 
-
-// 默认选中第一个节点
+// 默认选中第一个节点并触发事件
 const selectFirstNode = () => {
   if (props.treeData.length > 0 && tree.value) {
     const firstNodeId = props.treeData[0].id
     tree.value.setCurrentKey(firstNodeId)
     formData.id = firstNodeId
+    const firstNode = props.treeData[0]
+    handleNodeClick(firstNode)
   }
 }
 
@@ -145,131 +261,19 @@ watch(
   { immediate: true }
 )
 
-const tree = ref(null)
-
-const formData = reactive({
-  searchValue: '',
-  id: 0,
-  type: props.type
-})
-
-const form = reactive({
-  name: '',
-  reportDescribe: '',
-  pid: '',
-  sort: 0,
-  type: props.type
-})
-
-const defaultProps = {
-  children: 'children',
-  label: 'reportDescribe'
-}
-
-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: getReportDictList(formData),
-    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 selectedNodePath = ref<any[]>([]);
-
 // 处理节点点击事件
 const handleNodeClick = (node: any) => {
-  // 获取当前节点的完整路径
-  const nodePath = tree.value?.getNodePath(node);
-
-  // 更新当前选中节点的路径
-  selectedNodePath.value = nodePath || [];
-
-  // 设置当前节点 ID 到 formData
-  formData.id = node.id;
-
-  // 动态生成父节点选项（排除当前节点本身）
-  secondLevelNode.value = (nodePath || []).slice(0, -1).map((item: any) => ({
-    id: item.id,
-    reportDescribe: item.reportDescribe
-  }));
-
-  // 调用 tableStore.index()
-  tableStore.index();
-};
-
-// 监听 selectedNodePath 变化
-watch(selectedNodePath, (newPath) => {
-  if (Array.isArray(newPath)) {
-    secondLevelNode.value = newPath.slice(0, -1).map((item: any) => ({
-      id: item.id,
-      reportDescribe: item.reportDescribe
-    }));
-  } else {
-    console.warn('selectedNodePath is not an array:', newPath);
-    secondLevelNode.value = []; // 清空选项
-  }
-});
+  formData.id = node.id
+  tableStore.table.params.id = node.id
+  tableStore.table.params.type = props.type
+  tableStore.index()
+}
 
 const addTemplate = () => {
   dialogTitle.value = '新增配置项'
   dialogVisible.value = true
   Object.assign(form, {
+    id: 0,
     name: '',
     reportDescribe: '',
     pid: '',
@@ -282,12 +286,18 @@ const addFn = () => {
   formRef.value.validate(async (valid: boolean) => {
     if (valid) {
       try {
-        await addDict(form)
-        ElMessage.success('新增成功')
+        if (dialogTitle.value === '编辑配置项') {
+          await updateDict(form)
+          ElMessage.success('编辑成功')
+        } else {
+          await addDict(form)
+          ElMessage.success('新增成功')
+        }
         dialogVisible.value = false
-     
+        tableStore.index()
+        refreshTreeData()
       } catch (error) {
-        ElMessage.error('新增失败')
+        ElMessage.error(dialogTitle.value === '编辑配置项' ? '编辑失败' : '新增失败')
       }
     }
   })
@@ -299,18 +309,36 @@ const closeDialog = () => {
 }
 
 onMounted(() => {
-    //tableStore.index()
+  selectFirstNode()
 })
-
 </script>
 
 <style scoped>
-.back {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  font-size: 29px;
-  color: #409eff;
-  cursor: pointer;
+.dictiontary-list-detail {
+  padding: 10px;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.main-content {
+  margin-bottom: 20px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+
+
+.tree-container {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  height: 100%;
+}
+
+:deep(.el-tree) {
+  height: 100%;
+  overflow-y: auto;
 }
 </style>