标签管理修改

src/views/label/index.vue

@@ -18,7 +18,24 @@
         添加标签
       </el-button>
     </div>
-    <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" :header-cell-style="{ backgroundColor: '#fafafa', height: '40px' }">
+    <!-- <el-tree
+        :data="treeData"
+        :props="defaultProps"
+        node-key="id"
+        default-expand-all
+        :highlight-current="true"
+        @node-click="handleNodeClick"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>{{ data.name }}</span>
+          <span>
+            <el-button size="mini" type="text" @click="toShowDetail(data.id)">查看详情</el-button>
+            <el-button size="mini" type="text" @click="toEditArticle(data.id)">编辑</el-button>
+            <el-button size="mini" type="text" @click="deleteArticle(data.id)">删除</el-button>
+          </span>
+        </span>
+      </el-tree> -->
+      <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" :header-cell-style="{ backgroundColor: '#fafafa', height: '40px' }">
       <el-table-column prop="moduleName" label="模块名称" show-overflow-tooltip></el-table-column>
       <el-table-column prop="parentName" label="父标签" show-overflow-tooltip></el-table-column>
       <el-table-column prop="name" label="标签名称" show-overflow-tooltip></el-table-column>
@@ -72,6 +89,11 @@ const addLabelDialogRef = ref();
 const editLabelDialog = defineAsyncComponent(() => import('/@/views/label/editDialog.vue'));
 const editLabelDialogRef = ref();
 
+interface Tree {
+  label: string
+  children?: Tree[]
+}
+
 // 表格数据
 const state = reactive({
 tableData: {
@@ -93,6 +115,13 @@ const moduleList = ref([]);
 // 标签列表
 const labelList = ref([]);
 
+//增加树形节点
+const treeData = ref([]);
+const defaultProps = {
+  children: 'children',
+  label: 'name'
+};
+
 // 引入 api 请求接口
 const labelapi = labelApi();
 
@@ -119,6 +148,7 @@ const getTableData = async() => {
     if(res?.success){
       state.tableData.data = res.data.records;
       state.tableData.total = res.data.total;
+      buildTreeData();  
     }else{
       ElMessage.error('标签列表获取失败！');
     }
@@ -128,6 +158,27 @@ const getTableData = async() => {
   }
 };
 
+const buildTreeData = () => {
+  const moduleMap = {};
+
+  // 准备模块节点
+  state.tableData.data.forEach(item => {
+    if (!moduleMap[item.moduleName]) {
+      moduleMap[item.moduleName] = {
+        name: item.moduleName,
+        children: []
+      };
+    }
+    moduleMap[item.moduleName].children.push({ ...item });
+  });
+
+  treeData.value = Object.values(moduleMap);
+  console.log(treeData.value);  // 检查结构
+};
+
+const handleNodeClick = (data: Tree) => {
+  console.log(data)
+}
 
 // 模块选择
 const handleChangeModule = async(val: any) => {
@@ -147,24 +198,6 @@ const handleChangeModule = async(val: any) => {
   }
 };
 
-// // 模块选择
-// const handleChangeModule = async(val) => {
-//   try {
-//     if (!val) {
-//       labelList.value = []; 
-//       state.tableData.data = [];
-//       state.tableData.total = 0;
-//       return;
-//     }
-//     const op = moduleList.value.find(item => item.moduleName === val);
-//     if (op) {
-//       state.tableData.param.moduleid = op.id;
-//       await getTableData();
-//     }
-//   } catch (error) {
-//     ElMessage.error('标签列表获取失败！');
-//   }
-// }
 
 // 重置
 const reset = (index = 0) =>{
@@ -233,13 +266,13 @@ const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
 //   return row.articletype === 1 ? '外链' : '图文';
 // }
 
-// 分页改变
+//分页改变
 const onHandleSizeChange = (val: number) => {
   state.tableData.param.size = val;
   getTableData();
 };
 
-// 分页改变
+//分页改变
 const onHandleCurrentChange = (val: number) => {
   state.tableData.param.current = val;
   getTableData();
@@ -250,76 +283,19 @@ onMounted(() => {
   getTableData();
 });
 
-// const totalData = ref([]); // 用于存储所有数据
-
-// // 获取模块列表
-// const getModuleList = async () => {
-//   try {
-//     let res = await labelapi.getModuleList();
-//     if (res?.success) {
-//       moduleList.value = res.data;
-//       await getAllData(); // 获取所有模块对应的数据
-//     } else {
-//       ElMessage.error('模块列表获取失败！');
-//     }
-//   } catch (error) {
-//     ElMessage.error('模块列表获取失败！');
-//   }
-// };
-
-// // 获取所有模块的数据
-// const getAllData = async () => {
-//   try {
-//     const requests = moduleList.value.map(module => labelapi.getLabelList({ moduleid: module.id, current: 1, size: 10 })); // 请求所有模块数据
-//     const results = await Promise.all(requests);
-
-//     totalData.value = results
-//       .filter(res => res?.success) // 过滤成功的请求
-//       .flatMap(res => res.data.records || []); // 合并所有数据
-
-//     state.tableData.total = totalData.value.length;
-//     updatePageData(); // 更新到当前页显示的数据
-//   } catch (error) {
-//     ElMessage.error('标签列表获取失败！');
-//   } finally {
-//     state.tableData.loading = false;
-//   }
-// };
-
-// // 根据当前页和每页大小更新数据显示
-// const updatePageData = () => {
-//   const start = (state.tableData.param.current - 1) * state.tableData.param.size;
-//   const end = start + state.tableData.param.size;
-//   state.tableData.data = totalData.value.slice(start, end);
-// };
-
-// // 分页改变
-// const onHandleSizeChange = (val) => {
-//   state.tableData.param.size = val;
-//   updatePageData(); // 更新显示的数据
-// };
-
-// const onHandleCurrentChange = (val) => {
-//   state.tableData.param.current = val;
-//   updatePageData(); // 更新显示的数据
-// };
-
-// onMounted(() => {
-//   getModuleList();
-// });
 
 </script>
 
 <style scoped lang="scss">
 .system-dept-container {
-:deep(.el-card__body) {
+  :deep(.el-card__body) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  .el-table {
     flex: 1;
+    overflow: auto;
+    .el-tree {
+      flex: 1;
+    }
   }
 }
-}
 </style>