From d9a4c361c29597d38c302f4d415006adc1f60c4f Mon Sep 17 00:00:00 2001
From: "idiotalex@163.com" <idiotalex@163.com>
Date: Sat, 20 Feb 2021 16:09:13 +0800
Subject: [PATCH] update role dynamic page

---
 web-vue/src/api/role.js          |  16 ++++
 web-vue/src/pages/role/index.vue | 126 ++++++++++++++++++++-----------
 2 files changed, 100 insertions(+), 42 deletions(-)

diff --git a/web-vue/src/api/role.js b/web-vue/src/api/role.js
index 6eae27354..861a936d4 100644
--- a/web-vue/src/api/role.js
+++ b/web-vue/src/api/role.js
@@ -57,4 +57,20 @@ export function getRoleDynamicList(params) {
     timeout: 0,
     data: params
   })
+}
+
+/**
+ * editRoleDynamic
+ * @param {
+ *  id: 角色 ID
+ *  dynamic: dynamic
+ * } params 
+ */
+export function editRoleDynamic(params) {
+  return axios({
+    url: '/user/role/saveDynamic.json',
+    method: 'post',
+    timeout: 0,
+    data: params
+  })
 }
\ No newline at end of file
diff --git a/web-vue/src/pages/role/index.vue b/web-vue/src/pages/role/index.vue
index 73bc19dba..023bb4a6a 100644
--- a/web-vue/src/pages/role/index.vue
+++ b/web-vue/src/pages/role/index.vue
@@ -27,22 +27,25 @@
     </a-modal>
     <!-- 动态区 -->
     <a-modal v-model="editDynamicVisible" title="角色动态" @ok="handleEditDynamicOk" :maskClosable="false">
-      <a-collapse @change="changeCollapse">
-          <a-collapse-panel v-for="item in dynamicList.filter(ele => !ele.parent)" :key="item.id" :header="item.name">
-            <a-tree checkStrictly checkable defaultExpandAll :selectable="false"
-              :tree-data="item.dynamicList" 
-              :replaceFields="replaceFields" @check="checkDynamicNode"/>
-          </a-collapse-panel>
-      </a-collapse>
+      <a-spin :spinning="spinning" :delay="500">
+        <a-collapse @change="changeCollapse">
+            <a-collapse-panel v-for="item in dynamicList.filter(ele => !ele.parent)" :key="item.id" :header="item.name">
+              <a-tree checkable defaultExpandAll :selectable="false"
+                :tree-data="item.dynamicList" 
+                :replaceFields="replaceFields" @check="checkDynamicNode"/>
+            </a-collapse-panel>
+        </a-collapse>
+      </a-spin>
     </a-modal>
   </div>
 </template>
 <script>
-import { getRoleList, getRoleFeature, editRole, deleteRole, getDynamicList, getRoleDynamicList } from '../../api/role';
+import { getRoleList, getRoleFeature, editRole, deleteRole, getDynamicList, getRoleDynamicList, editRoleDynamic } from '../../api/role';
 export default {
   data() {
     return {
       loading: false,
+      spinning: false,
       list: [],
       // 权限列表
       featureList: [],
@@ -52,6 +55,7 @@ export default {
       temp: {},
       // tree 选中的值
       checkedKeys: {},
+      checkedDynamicKeys: [],
       replaceFields: {
         children: 'children',
         key: 'id',
@@ -221,6 +225,7 @@ export default {
     },
     // 分配权限
     async handlePermission(record) {
+      this.checkedDynamicKeys = [];
       this.temp = Object.assign({}, record);
       const res = await getDynamicList();
       if (res.code === 200) {
@@ -235,6 +240,7 @@ export default {
         const index = this.dynamicList.findIndex(p => p.id === key);
         // load = true 表示已经加载过了
         if (!this.dynamicList[index].load) {
+          this.spinning = true;
           const params = {
             id: this.temp.id,
             dynamic: key
@@ -242,52 +248,88 @@ export default {
           getRoleDynamicList(params).then(res => {
             if (res.code === 200) {
               // 禁用 id = PROJECT
-              res.data.forEach(p => {
-                if (p.children) {
-                  p.children.forEach(ele => {
-                    if (ele.id === 'PROJECT') {
-                      ele.disabled = true;
-                    }
-                  })
-                }
-              })
+              // res.data.forEach(p => {
+              //   if (p.children) {
+              //     p.children.forEach(ele => {
+              //       if (ele.id === 'PROJECT') {
+              //         ele.disabled = true;
+              //       }
+              //     })
+              //   }
+              // })
               this.dynamicList[index].dynamicList = res.data;
               this.dynamicList[index].load = true;
               this.dynamicList = [...this.dynamicList];
+              this.spinning = false;
             }
           })
         }
       })
     },
     // 选择 dynamic
-    checkDynamicNode(checkedKeys, e) {
-      console.log(checkedKeys)
-      // const checked = e.checked;
-      const node = e.node.dataRef;
-      node.checkedKeys = checkedKeys;
-      // // 如果选中父节点，子节点默认选中
-      // if (checked && node.children) {
-      //   node.children.forEach(ele => {
-      //     if (!node.checkedKeys) {
-      //       node.checkedKeys = {};
-      //     }
-      //     if (!node.checkedKeys.checked) {
-      //       node.checkedKeys.checked = [];
-      //     }
-      //     node.checkedKeys.checked.push(ele.id);
-      //   })
-      // }
-      // // 如果取消选中父节点，子节点也取消选中
-      // if (!checked && node.children) {
-      //   node.children.forEach(ele => {
-      //     const index = node.checkedKeys.checked.findIndex(id => ele.id === id);
-      //     node.checkedKeys.checked.splice(index, 1);
-      //   })
-      // }
+    checkDynamicNode(checkedKeys) {
+      this.checkedDynamicKeys = checkedKeys;
     },
     // 编辑 dynamic
     handleEditDynamicOk() {
-      console.log(this.dynamicList);
+      let dynamic = {};
+      this.dynamicList.forEach(ele => {
+        if (!ele.parent) {
+          dynamic[ele.id] = [];
+          if (ele.dynamicList) {
+            ele.dynamicList.forEach(p => {
+              let children = this.doChildrenParam(p);
+              // 判断该节点是否选中
+              const index = this.checkedDynamicKeys.findIndex(checkedId => p.id === checkedId);
+              if (index > -1) {
+                let temp = {
+                  id: p.id,
+                  title: p.title
+                }
+                if (children.length > 0) {
+                  temp.children = children;
+                }
+                dynamic[ele.id].push(temp)
+              }
+            })
+          }
+        }
+      })
+      // 组装参数
+      const params = {
+        id: this.temp.id,
+        dynamic: JSON.stringify(dynamic)
+      }
+      // 提交数据
+      editRoleDynamic(params).then(res => {
+        if (res.code === 200) {
+          this.$notification.success({
+            message: res.msg,
+            duration: 2
+          });
+          this.editDynamicVisible = false;
+        }
+      })
+    },
+    // 处理 dynamic 参数
+    doChildrenParam(element) {
+      let children = [];
+      // 判断 children 是否存在
+      if (element.children && element.children.length > 0) {
+        element.children.forEach(c => {
+          let temp = {
+            id: c.id,
+            title: c.title
+          }
+          // 判断 children 是否存在
+          let tempChildren = this.doChildrenParam(c);
+          if (tempChildren.length > 0) {
+            temp.children = tempChildren;
+          }
+          children.push(temp);
+        })
+      }
+      return children;
     }
   }
 }