修改菜单+权限+图表渲染

web/src/components/EditCom.vue

@@ -38,17 +38,18 @@
               scroll: { y: 500 }
             }"
           >
-            <template #is_add="recordList">
-              <a-checkbox v-model:checked="recordList.is_add"></a-checkbox>
+            <template #is_add="{ record, index }">
+              <a-checkbox v-model:checked="record.is_add"></a-checkbox>
             </template>
-            <template #is_del="recordList">
-              <a-checkbox v-model:checked="recordList.is_del"></a-checkbox>
+
+            <template #is_del="{ record, index }">
+              <a-checkbox v-model:checked="record.is_del"></a-checkbox>
             </template>
-            <template #is_edit="recordList">
-              <a-checkbox v-model:checked="recordList.is_edit"></a-checkbox>
+            <template #is_edit="{ record, index }">
+              <a-checkbox v-model:checked="record.is_edit"></a-checkbox>
             </template>
-            <template #isQuery="recordList">
-              <a-checkbox v-model:checked="recordList.isQuery"></a-checkbox>
+            <template #is_view="{ record, index }">
+              <a-checkbox v-model:checked="record.is_view"></a-checkbox>
             </template>
           </TreeTable>
         </template>
@@ -120,7 +121,7 @@ export default {
         role: 'roleConfirm',
         device: 'deviceConfirm',
         station: 'stationConfirm',
-        serviceApi: 'serviceApiConfirm',
+        serviceApi: 'serviceApiConfirm'
         // permission: 'permissionConfirm',
       },
       form: {},
@@ -304,30 +305,127 @@ export default {
       try {
         const menuApi = {
           add: '/insertRole',
-          edit: '/deleteRole'
+          edit: '/updateRole'
         }
-        const { selectedRowKeys } = this.$refs.treeTable[0]
-        console.log(selectedRowKeys, 'selectedRowKeys')
+        const { selectedRowKeys ,selectedArr} = this.$refs.treeTable[0]
+        console.log(selectedRowKeys,selectedArr, 'selectedRowKeys')
+        // const  arr = selectedArr.map((item) => ({
+        //   ...item,
+
+        //   // 转换操作权限为布尔值
+        //   ...this.getPerOperBoolean(item),
+        //   // 递归处理children
+        //   children: item.children
+        //     ? item.children.map((child) => ({
+        //       ...child,
+        //       ...this.getPerOperBoolean(child),
+
+        //     }))
+        //     : []
+        // }))
+        // console.log(arr,"arr")
+
+        const data=this.filterTreeData(selectedRowKeys,this.$refs.treeTable[0].tableData)
+        const  arr = data.map((item) => ({
+          ...item,
+
+          // 转换操作权限为布尔值
+          ...this.getPerOperBoolean(item),
+          // 递归处理children
+          children: item.children
+            ? item.children.map((child) => ({
+              ...child,
+              ...this.getPerOperBoolean(child),
+
+            }))
+            : []
+        }))
         const paramsDate = {
-          ...this.form
+          ...this.form,
+          permission:arr
         }
 
-        // if (this.action == 'edit') {
-        //   paramsDate.role_id = this.record.role_id
-        // }
+        if (this.action == 'edit') {
+          paramsDate.role_id = this.record.role_id
+        }
 
-        // const res = await postReq(menuApi[this.action], paramsDate)
-        // if (res.errcode === 0) {
-        //   setTimeout(() => {
-        //     this.handleback()
-        //   }, 1000)
-        // } else {
-        //   throw res
-        // }
+        const res = await postReq(menuApi[this.action], paramsDate)
+        if (res.errcode === 0) {
+          setTimeout(() => {
+            this.handleback()
+          }, 1000)
+        } else {
+          throw res
+        }
       } catch (error) {
         console.log(error, 'roleConfirm')
       }
     },
+    // 定义筛选树形数据的函数
+    filterTreeData(list1, list2) {
+      const keySet = new Set(list1);
+
+      // 递归处理节点的函数
+      const filterNode = (node) => {
+        // 创建新节点对象（浅拷贝）
+        const newNode = Object.assign({}, node);
+
+        // 临时删除children属性以便处理
+        const { children, ...rest } = newNode;
+
+        // 处理子节点
+        let newChildren = [];
+        if (children) {
+          newChildren = children
+            .map((child) => filterNode(child))
+            .filter((child) => child !== null);
+        }
+
+        // 重建新节点
+        const resultNode = Object.assign(rest, {});
+
+        if (newChildren.length > 0) {
+          resultNode.children = newChildren;
+        }
+
+        // 判断是否保留节点
+        if (keySet.has(node.key)) {
+          return resultNode;
+        }
+
+        // 保留有符合条件子节点的父节点（移除自身key）
+        if (newChildren.length > 0) {
+          return resultNode;
+        }
+
+        return null;
+      };
+
+      // 处理根节点
+      const result = list2
+        .map((node) => filterNode(node))
+        .filter((node) => node !== null);
+
+      return result;
+    },
+    getPerOperBoolean(data) {
+      return {
+        is_add: Boolean(data.is_add)? '1' : '0',
+        is_del: Boolean(data.is_del)? '1' : '0',
+        is_edit: Boolean(data.is_edit)?  '1' : '0',
+        is_view: Boolean(data.is_view)?  '1' : '0'
+      }
+    },
+    getPermissionData(keys,list){
+      const arr=[]
+      // list.forEach(item=>{
+      //   if(keys.include(item.key)){
+      //     arr.push(item)
+      //     if()
+      //   }
+
+      // })
+    },
     async stationConfirm() {
       try {
         const menuApi = {
@@ -363,10 +461,9 @@ export default {
         const paramsDate = {
           ...this.form,
           is_open: Number(is_open),
-          attrs: JSON.stringify({rated_capacity, rated_current, rated_voltage, reted_power})
+          attrs: JSON.stringify({ rated_capacity, rated_current, rated_voltage, reted_power })
         }
 
-
         if (this.action == 'edit') {
           paramsDate.device_id = this.record.device_id
         }
@@ -451,6 +548,6 @@ export default {
 }
 
 :deep(.treeTable) {
-  width: 550px !important;
+  width: 750px !important;
 }
 </style>