角色分配权限 加角色名称

src/views/system/role/components/role-auth.vue

@@ -6,21 +6,27 @@
     :visible="visible"
     @update:visible="updateVisible"
   >
-    <el-scrollbar
-      v-loading="authLoading"
-      style="height: 60vh"
-      wrap-style="overflow-x: hidden;"
-    >
-      <el-tree
-        ref="tree"
-        show-checkbox
-        :data="authData"
-        node-key="id"
-        :default-expand-all="true"
-        :props="{ label: 'name' }"
-        :default-checked-keys="checkedKeys"
-      >
-<!--  <el-tree
+    <el-form ref="form" :model="data" label-width="100px">
+      <el-form-item label="角色名称">
+        <el-tag>{{ data.name }}</el-tag>
+      </el-form-item>
+
+      <el-form-item label="权限范围">
+        <el-scrollbar
+          v-loading="authLoading"
+          style="height: 60vh"
+          wrap-style="overflow-x: hidden;"
+        >
+          <el-tree
+            ref="tree"
+            show-checkbox
+            :data="authData"
+            node-key="id"
+            :default-expand-all="true"
+            :props="{ label: 'name' }"
+            :default-checked-keys="checkedKeys"
+          >
+            <!--  <el-tree
         ref="tree"
         show-checkbox
         check-strictly
@@ -31,14 +37,17 @@
         :default-checked-keys="checkedKeys"
         @check="handleCheck"
       >-->
-        <!-- <template v-slot="{ data }">
+            <!-- <template v-slot="{ data }">
           <span>
             <i :class="data.icon"></i>
             <span> {{ data.name }}</span>
           </span>
         </template> -->
-      </el-tree>
-    </el-scrollbar>
+          </el-tree>
+        </el-scrollbar>
+      </el-form-item>
+    </el-form>
+
     <template v-slot:footer>
       <el-button @click="updateVisible(false)">取消</el-button>
       <el-button type="primary" :loading="loading" @click="save">
@@ -49,121 +58,121 @@
 </template>
 
 <script>
-  import { listRoleMenus, updateRoleMenus } from '@/api/system/role';
-  import { listMenus } from '@/api/system/menu';
+import { listRoleMenus, updateRoleMenus } from '@/api/system/role';
+import { listMenus } from '@/api/system/menu';
 
-  export default {
-    props: {
-      // 弹窗是否打开
-      visible: Boolean,
-      // 当前角色数据
-      data: Object
-    },
-    data() {
-      return {
-        // 权限数据
-        authData: [],
-        // 权限数据请求状态
-        authLoading: false,
-        // 提交状态
-        loading: false,
-        // 角色权限选中的keys
-        checkedKeys: [],
-        ids: []
-      };
+export default {
+  props: {
+    // 弹窗是否打开
+    visible: Boolean,
+    // 当前角色数据
+    data: Object
+  },
+  data() {
+    return {
+      // 权限数据
+      authData: [],
+      // 权限数据请求状态
+      authLoading: false,
+      // 提交状态
+      loading: false,
+      // 角色权限选中的keys
+      checkedKeys: [],
+      ids: []
+    };
+  },
+  methods: {
+    async getMenus() {
+      this.authData = [];
+      const res = await listMenus();
+      this.authData = this.$util.toTreeData({
+        data: res,
+        idKey: 'id',
+        pidKey: 'parentId'
+      });
+      // 回显选中的数据;
+      const cks = [];
+      this.$util.eachTreeData(this.authData, (d) => {
+        let falg = this.ids.indexOf(d.id) >= 0; // 检查是否选中该数据; 选中则保留flg=
+        if (falg && !d.children?.length) {
+          cks.push(d.id);
+        }
+      });
+      this.checkedKeys = cks;
     },
-    methods: {
-      async getMenus() {
-        this.authData = [];
-        const res = await listMenus();
-        this.authData = this.$util.toTreeData({
-          data: res,
-          idKey: 'id',
-          pidKey: 'parentId'
-        });
-        // 回显选中的数据;
-        const cks = [];
-        this.$util.eachTreeData(this.authData, (d) => {
-          let falg = this.ids.indexOf(d.id) >= 0; // 检查是否选中该数据; 选中则保留flg=
-          if (falg && !d.children?.length) {
-            cks.push(d.id);
+    /* 查询权限数据 */
+    query() {
+      if (!this.data) {
+        return;
+      }
+      this.authLoading = true;
+      listRoleMenus(this.data.id)
+        .then((data) => {
+          this.ids = [];
+          if (data && data.length > 0) {
+            this.ids = data.map((item) => item.resourceId);
           }
+          this.getMenus();
+          this.authLoading = false;
+          // 转成树形结构的数据
+        })
+        .catch((e) => {
+          this.authLoading = false;
+          // this.$message.error(e.message);
         });
-        this.checkedKeys = cks;
-      },
-      /* 查询权限数据 */
-      query() {
-        if (!this.data) {
-          return;
-        }
-        this.authLoading = true;
-        listRoleMenus(this.data.id)
-          .then((data) => {
-            this.ids = [];
-            if (data && data.length > 0) {
-              this.ids = data.map((item) => item.resourceId);
-            }
-            this.getMenus();
-            this.authLoading = false;
-            // 转成树形结构的数据
-          })
-          .catch((e) => {
-            this.authLoading = false;
-            // this.$message.error(e.message);
-          });
-      },
-      /* 保存权限分配 */
-      save() {
-        this.loading = true;
-        const ids = this.$refs.tree
-          .getCheckedKeys()
-          .concat(this.$refs.tree.getHalfCheckedKeys());
-        console.log(ids);
+    },
+    /* 保存权限分配 */
+    save() {
+      this.loading = true;
+      const ids = this.$refs.tree
+        .getCheckedKeys()
+        .concat(this.$refs.tree.getHalfCheckedKeys());
+      console.log(ids);
 
-        updateRoleMenus({
-          roleId: this.data.id,
-          resourceIds: ids
+      updateRoleMenus({
+        roleId: this.data.id,
+        resourceIds: ids
+      })
+        .then((msg) => {
+          this.loading = false;
+          this.$message.success(msg.data);
+          this.updateVisible(false);
         })
-          .then((msg) => {
-            this.loading = false;
-            this.$message.success(msg.data);
-            this.updateVisible(false);
-          })
-          .catch((e) => {
-            this.loading = false;
-            // this.$message.error(e.message);
-          });
-      },
-      /* 更新visible */
-      updateVisible(value) {
-        this.$emit('update:visible', value);
-      },
-      handleCheck(data,node){
-        console.log(data);
-        const  _this = this
-        // 获取当前节点是否被选中
-        const isChecked = this.$refs.tree.getNode(data).checked
-        // 如果当前节点被选中，则遍历上级节点和下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
-        if(isChecked){
-          // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
-          data.children && setChildrenChecked(data.children,true)
-        }else{
-          // 如果节点取消选中，不做处理
-        }
-        function setChildrenChecked(node,isChecked){
-          node.forEach(item => {
-            item.children && setChildrenChecked(item.children,isChecked)
-            _this.$refs.tree.setChecked(item.id,isChecked)
-          })
-        }
-      }
+        .catch((e) => {
+          this.loading = false;
+          // this.$message.error(e.message);
+        });
     },
-    watch: {
-      visible(visible) {
-        if (visible) {
-          this.query();
-        }
+    /* 更新visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value);
+    },
+    handleCheck(data, node) {
+      console.log(data);
+      const _this = this;
+      // 获取当前节点是否被选中
+      const isChecked = this.$refs.tree.getNode(data).checked;
+      // 如果当前节点被选中，则遍历上级节点和下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
+      if (isChecked) {
+        // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
+        data.children && setChildrenChecked(data.children, true);
+      } else {
+        // 如果节点取消选中，不做处理
+      }
+      function setChildrenChecked(node, isChecked) {
+        node.forEach((item) => {
+          item.children && setChildrenChecked(item.children, isChecked);
+          _this.$refs.tree.setChecked(item.id, isChecked);
+        });
+      }
+    }
+  },
+  watch: {
+    visible(visible) {
+      if (visible) {
+        this.query();
       }
     }
-  };
+  }
+};
 </script>