角色权限表单优化

ebike-operate/src/views/SysManage/RoleManage/index.vue

@@ -63,12 +63,12 @@
     :dataSource="dataSource"
     :scroll="{ x: 'max-content' }"
   >
-    <template #bodyCell="{ column }">
+    <template #bodyCell="{ column ,record}">
       <template v-if="column.key === 'action'">
         <a-space>
           <a>排序</a>
           <a-divider type="vertical" />
-          <a @click="handleAdd('编辑角色')">编辑</a>
+          <a @click="handleAdd('编辑角色',record)">编辑</a>
           <a-divider type="vertical" />
           <a>删除</a>
         </a-space>
@@ -88,7 +88,7 @@
   </a-modal>
 </template>
 <script setup>
-import { ref, onMounted, reactive,nextTick } from 'vue';
+import { ref, onMounted, reactive, nextTick } from 'vue';
 import { message } from 'ant-design-vue'
 import { callUser } from '@/apis/call.js'
 import config from '@/utils/config.js'
@@ -185,21 +185,36 @@ const getData = async () => {
   });
 }
 
-const handleAdd = async (title) => {
+const handleAdd = async (title, record) => {
   openTitle.value = title;
   open.value = true;
   nextTick(() => {
     if (formModel.value) {
-      formModel.value.openForm({});
+      const params = record == null ? {} : {
+        roleName: record['roleName'],
+        roleDescription: record['roleDescription'],
+        roleId: record['roleId']
+      }
+      formModel.value.openForm(params);
     } else {
       console.log('formModel is not ready yet');
     }
   });
 }
 
+const handleOkModal = () => {
+  formModel.value.formSave(bres => {
+    open.value = false;
+    if (bres) {
+      getData()
+    }
+  });
+}
+
+
 const handleCancelModal = () => {
   formModel.value.resetAll(bres => {
-    if(bres) open.value = false;
+    if (bres) open.value = false;
   });
 }
 

ebike-operate/src/views/form/rolemanage/RoleManage.vue

@@ -46,10 +46,7 @@
           :wrapper-col="{ span: 21 }"
           name="roleDescription"
         >
-          <a-tabs
+          <a-tabs v-model:activeKey="activeKey">
-            v-model:activeKey="activeKey"
-            @click="clickTab"
-          >
             <a-tab-pane
               key="1"
               tab="运营后台"
@@ -58,8 +55,8 @@
                 <a-tree
                   v-if="treeDataByWeb.length"
                   defaultExpandAll
-                  v-model:checkedKeys="checkedKeys"
+                  v-model:checkedKeys="checkedKeysByWeb"
-                  @check="checkNode"
+                  @check="checkNodeByWeb"
                   v-model:tree-data="treeDataByWeb"
                   checkable
                 >
@@ -78,8 +75,8 @@
               <div style="border: solid 1px #ddd;margin-top: -15px;">
                 <a-tree
                   v-if="treeDataByApplet.length"
-                  v-model:checkedKeys="checkedKeys"
+                  v-model:checkedKeys="checkedKeysByApplet"
-                  @check="checkNode"
+                  @check="checkNodeByApplet"
                   :tree-data="treeDataByApplet"
                   defaultExpandAll
                   checkable
@@ -106,37 +103,54 @@ import _ from 'lodash'
 const formRef = ref();
 const form = ref({});
 const activeKey = ref("1")
-const checkedKeys = ref([])
+const checkedKeysByWeb = ref([])
+const checkedKeysByApplet = ref([])
 const treeDataByWeb = ref([])
 const treeDataByApplet = ref([])
 const treeDataList = ref([])
 
 const openForm = (params = {}) => {
-  loadData(params);
+  form.value = { ...params }
+  loadPermissionsList(params['roleId']);
 };
 
-const loadData = () => {
+const loadPermissionsList = (roleId = null) => {
   callUser("/permissions/list", {}, "get").then((res) => {
     if (res.code != 200) {
       message.error(res.message)
-      treeData.value = []
+      treeDataByWeb.value = []
+      treeDataByApplet.value = []
       return
     }
     const dataList = res.data.map((item) => {
       return { ...item, key: item.permId }
     })
     treeDataList.value = dataList;
-    const newDataList = buildTreeWithChildren(dataList, 1)
+    const newDataListByWeb = buildTreeWithChildren(dataList, 1)
-    treeDataByWeb.value = [{ description: "全部", key: "all", children: [...newDataList] }]
+    const newDataList = buildTreeWithChildren(dataList, 2)
+    treeDataByWeb.value = [{ description: "全部", key: "all", children: [...newDataListByWeb] }]
+    treeDataByApplet.value = [{ description: "全部", key: "all", children: [...newDataList] }]
+    if (roleId) {
+      callUser("/rolePermissions/getRolePermissionsByRoleId/" + roleId, {}, "get").then((res) => {
+        if (res.code == 200) {
+          const checkKeys = res.data.map(item => {
+            return item['permId'];
+          })
+          checkedKeysByWeb.value = checkedKeysByApplet.value = checkKeys;
+        }
+      })
+    }
   });
 }
 
-const clickTab = (e) => {
+const checkNodeByWeb = (checkNodes) => {
-  debugger
+  const newcheckNodes = checkNodes.filter(item => item != "all")
+  checkedKeysByWeb.value = newcheckNodes
 }
 
-const checkNode = (checkNodes) => {
+const checkNodeByApplet = (checkNodes) => {
-  debugger
+  const newcheckNodes = checkNodes.filter(item => item != "all")
+  checkedKeysByApplet.value = newcheckNodes
 }
 
 const buildTreeWithChildren = (data, where) => {