角色页面菜单权限父子关联问题修改

src/views/system/role/index.vue

@@ -87,12 +87,12 @@
         <el-table-column label="操作" class-name="small-padding fixed-width" width="200px">
           <template slot-scope="scope">
             <coolbutton style="color: #49cec9" :type="typeParent" :name="updateName" :size="size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
-<!--                       <el-button-->
-<!--                         v-hasPermi="['sys:role:update']"-->
-<!--                         size="mini"-->
-<!--                         type="text"-->
-<!--                         @click="handleMenu(scope.row)"-->
-<!--                       >数据权限</el-button>-->
+            <el-button
+              v-hasPermi="['sys:role:update']"
+              size="mini"
+              type="text"
+              @click="handleMenu(scope.row)"
+            >数据权限</el-button>
             <el-button
               size="mini"
               type="text"
@@ -125,19 +125,19 @@
           <el-radio v-model="form.flag" label="1">启用</el-radio>
           <el-radio v-model="form.flag" label="0">停用</el-radio>
         </el-form-item>
-<!--        <el-form-item label="菜单权限">-->
-<!--          <el-tree-->
-<!--            ref="menu"-->
-<!--            class="tree-border"-->
-<!--            :data="menuOptions"-->
-<!--            show-checkbox-->
-<!--            node-key="id"-->
-<!--            empty-text="加载中，请稍后"-->
-<!--            :props="defaultProps"-->
-<!--            :default-expanded-keys="updateMenu"-->
-<!--          />-->
-<!--&lt;!&ndash;          @check-change="handleMenuCheckChange"&ndash;&gt;-->
-<!--        </el-form-item>-->
+        <el-form-item label="菜单权限">
+          <el-tree
+            ref="menu"
+            :check-strictly="true"
+            :data="menuOptions"
+            show-checkbox
+            node-key="id"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+            :default-expanded-keys="updateMenu"
+            @check="handleCheck"
+          />
+        </el-form-item>
         <el-form-item label="备注">
           <el-input v-model.trim="form.remarks" maxlength="200" show-word-limit type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -151,11 +151,12 @@
     <!-- 分配角色数据权限对话框 -->
     <el-dialog
       class="roleDialog"
-      @close='getList'
       title="数据权限信息"
       :visible.sync="openDataScope"
       width="900px"
-      append-to-body>
+      append-to-body
+      @close="getList"
+    >
       <el-row>
         <el-col style="width: 43%">
           <el-form ref="form" :model="form" :rules="rules" label-width="70px">
@@ -163,8 +164,8 @@
               <el-input v-model.trim="form.roleName" placeholder="请输入角色名称" show-word-limit :maxlength="30" :disabled="true" />
             </el-form-item>
             <el-table
-              highlight-current-row
               v-loading="loading"
+              highlight-current-row
               :data="menuList"
               row-key="businessId"
               :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -192,10 +193,10 @@
         <el-col style="width: 55%">
           <el-form :model="form" label-width="80px">
             <el-form-item label="菜单名称" prop="roleName">
-              <el-input v-model="form.menuName" placeholder="未选择菜单名称" disabled style = "width: 300px"/>
+              <el-input v-model="form.menuName" placeholder="未选择菜单名称" disabled style="width: 300px" />
             </el-form-item>
-            <el-form-item label="权限范围" style = "width: 300px">
-              <el-select v-model="form.dataScope" style = "width: 300px">
+            <el-form-item label="权限范围" style="width: 300px">
+              <el-select v-model="form.dataScope" style="width: 300px">
                 <el-option
                   v-for="item in dataScopeOptions"
                   :key="item.value"
@@ -217,7 +218,7 @@
                 :default-expanded-keys="customSizeTree"
                 @check-change="handleDeptCheckChange"
               />
-<!--              修改 :check-strictly="!form.deptCheckStrictly" 改为 check-strictly -->
+              <!--              修改 :check-strictly="!form.deptCheckStrictly" 改为 check-strictly -->
             </el-form-item>
           </el-form>
         </el-col>
@@ -369,6 +370,40 @@ export default {
     this.getList()
   },
   methods: {
+    /** 菜单权限check事件*/
+    handleCheck(data, { checkedKeys }) {
+      if (checkedKeys.includes(data.id)) { // 选中
+        const node = this.$refs.menu.getNode(data.id) // getNode(node-key)
+        this.selectChildren(data, true) // 选中子节点
+        this.parentNodesChange(node) // 选中父节点
+      } else {
+        this.selectChildren(data, false) // 取消子节点
+      }
+    },
+    /** 选中子节点*/
+    selectChildren(data, checked) {
+      data && data.children && data.children.map(item => {
+        this.$refs.menu.setChecked(item.id, checked)
+        if (data.children) {
+          this.selectChildren(item, checked)
+        }
+      })
+    },
+    /** 父级递归*/
+    parentNodesChange(node) {
+      // console.log(node);
+      if (node.parent) {
+        for (const key in node) {
+          if (key == 'id') {
+            // console.log(node[key]);
+            this.$refs.menu.setChecked(node, true)
+          }
+        }
+        if (node.parent && node.id !== 0) {
+          this.parentNodesChange(node.parent)
+        }
+      }
+    },
     /** 查询角色列表 */
     getList() {
       this.loading = true
@@ -420,6 +455,7 @@ export default {
     },
     // 树状图节点点击选中事件
     handleMenuCheckChange(data, check, subCheck) { // data为选中节点信息，check选中状态
+      console.log('树状图节点点击选中事件', data, check)
       if (data.children !== undefined && data.children !== null) { // 是否包含子节点
         this.checkNode(data.children, check) // 调用checkNode方法
       }
@@ -633,14 +669,14 @@ export default {
         if (valid) {
           this.form.menuCheckStrictly = 0
           if (this.form.businessId !== undefined) {
-            // this.form.menuIds = this.getMenuAllCheckedKeys()
+            this.form.menuIds = this.getMenuAllCheckedKeys()
             updateRole(this.form).then(response => {
               this.msgSuccess('修改成功')
               this.open = false
               this.getList()
             })
           } else {
-            // this.form.menuIds = this.getMenuAllCheckedKeys()
+            this.form.menuIds = this.getMenuAllCheckedKeys()
             addRole(this.form).then(response => {
               this.msgSuccess('新增成功')
               this.open = false

src/views/system/user/index.vue

@@ -475,16 +475,16 @@ export default {
       queryParams: {
         page: 1,
         rows: 10,
-        username: undefined,
-        email: undefined,
-        phone: undefined,
-        nickName: undefined,
-        idNumber: undefined,
-        userType: undefined,
-        allowLogin: undefined,
-        flag: undefined,
-        deptId: undefined,
-        name: undefined
+        username: '',
+        email: '',
+        phone: '',
+        nickName: '',
+        idNumber: '',
+        userType: '',
+        allowLogin: '',
+        flag: '',
+        deptId: '',
+        name: ''
       },
       // 表单校验
       rules: {
@@ -657,18 +657,18 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        userId: undefined,
-        deptId: undefined,
-        phone: undefined,
-        username: undefined,
-        userType: undefined,
-        nickName: undefined,
-        password: undefined,
-        idNumber: undefined,
-        email: undefined,
-        sex: undefined,
+        userId: '',
+        deptId: '',
+        phone: '',
+        username: '',
+        userType: '',
+        nickName: '',
+        password: '',
+        idNumber: '',
+        email: '',
+        sex: '',
         flag: 1,
-        remark: undefined,
+        remark: '',
         postIds: [],
         roleIds: []
       }