数据权限改为不可点击状态，置灰

src/views/SystemManage/RoleManage.vue

 <template>
-  <el-container class="manage-page" direction="vertical">
-    <div class="sider" @click="resetEdit('screen')">
+  <el-container
+    class="manage-page"
+    direction="vertical"
+  >
+    <div
+      class="sider"
+      @click="resetEdit('screen')"
+    >
       <div class="btns">
-        <div class="add" @click.stop="add">
+        <div
+          class="add"
+          @click.stop="add"
+        >
           <i
             style="
               width: 0.8125rem;
@@ -21,17 +30,28 @@
           @mouseenter="copybz = true"
           @mouseleave="copybz = false"
         >
-          <img v-if="!copybz" src="../../assets/img/role/copy.png" />
+          <img
+            v-if="!copybz"
+            src="../../assets/img/role/copy.png"
+          />
           <!-- copy_xuan -->
-          <img v-else src="../../assets/img/copy_xuan.png" />
+          <img
+            v-else
+            src="../../assets/img/copy_xuan.png"
+          />
         </div>
       </div>
       <div class="default-role">
-        <div v-for="item in defaultRoleBtns" :key="item.id" class="roleItemBox">
+        <div
+          v-for="item in defaultRoleBtns"
+          :key="item.id"
+          class="roleItemBox"
+        >
           <div
             @click.stop="copy(item.id)"
             @mouseenter="$set(item, 'enter', true)"
-            @mouseleave="$set(item, 'enter', false)">
+            @mouseleave="$set(item, 'enter', false)"
+          >
             <svg-icon
               icon-class="copy"
               v-show="fuzhi"
@@ -56,7 +76,10 @@
       </div>
       <div class="hr"></div>
       <div class="diy-roles">
-        <div class="delbtns" v-if="roleArr.includes('H-3-5')">
+        <div
+          class="delbtns"
+          v-if="roleArr.includes('H-3-5')"
+        >
           <div
             class="delicon"
             v-if="!delimgBoo && diyRoleList.length > 0"
@@ -80,7 +103,10 @@
             :hintBoo="true"
             :disaledToolTipe="true"
           >
-            <div slot="reference" class="delicon2">
+            <div
+              slot="reference"
+              class="delicon2"
+            >
               <img
                 style="width: 0.85rem; height: 0.85rem; cursor: pointer"
                 src="../../assets/img/qbryk/delcolor.png"
@@ -89,20 +115,34 @@
             </div>
           </Confirmation>
         </div>
-        <div class="autoPlay" ref="diyRoles">
+        <div
+          class="autoPlay"
+          ref="diyRoles"
+        >
           <el-checkbox-group v-model="btnCheckList">
-            <div v-for="item in diyRoleList" :key="item.id" class="chooseItem">
-              <el-checkbox :label="item.id" class="checkChoose" v-if="delimgBoo">1</el-checkbox>
-              <div @click.stop="() => {}"
+            <div
+              v-for="item in diyRoleList"
+              :key="item.id"
+              class="chooseItem"
+            >
+              <el-checkbox
+                :label="item.id"
+                class="checkChoose"
+                v-if="delimgBoo"
+              >1</el-checkbox>
+              <div
+                @click.stop="() => {}"
                 :class="{
                   'diy-role-item': true,
                   active: item.id === diyRoleItemIndex,
-                  delWidth: delimgBoo,}">
+                  delWidth: delimgBoo,}"
+              >
                 <div
                   v-show="!item.edit"
                   class="diy-edit-title"
                   :title="item.value"
-                  @click="chooseDiyRoleItem(item)">
+                  @click="chooseDiyRoleItem(item)"
+                >
                   {{ item.value }}
                 </div>
                 <el-input
@@ -133,21 +173,38 @@
         </div>
       </div>
     </div>
-    <div class="main" @click="resetEdit('screen')">
+    <div
+      class="main"
+      @click="resetEdit('screen')"
+    >
       <div class="header">
         <div class="btns">
-          <div class="btn" :class="{ active: funFlag }" @click="funAuth">
+          <div
+            class="btn"
+            :class="{ active: funFlag }"
+            @click="funAuth"
+          >
             功能权限
           </div>
-          <div class="btn" :class="{ active: dataFlag }" @click="dataAuth">
+          <div
+            class="btn zh"
+            :class="{ active: dataFlag }"
+            @click="dataAuth"
+          >
             数据权限
           </div>
         </div>
         <div class="save">
-          <div class="btn" @click="save">保存</div>
+          <div
+            class="btn"
+            @click="save"
+          >保存</div>
         </div>
       </div>
-      <el-checkbox-group v-model="checkList" :disabled="disabled">
+      <el-checkbox-group
+        v-model="checkList"
+        :disabled="disabled"
+      >
         <div class="role-info">
           <!--            角色权限菜单列-->
           <div class="menus">
@@ -382,7 +439,7 @@ export default {
       //console.info(val);
     },
     diyRoleItemIndex: {
-      handler(val, oldval) {
+      handler (val, oldval) {
         this.oldCurrtId = oldval;
         let arr = [...this.diyRoleList, ...this.defaultRoleBtns];
         let obj = arr.find((i) => i.id == val);
@@ -393,7 +450,7 @@ export default {
     // checkItem: null
     btnType: {
       immediate: true,
-      handler(val, oldval) {
+      handler (val, oldval) {
         this.oldBtnType = oldval;
         if (val == "default") {
           this.disabled = true;
@@ -403,7 +460,7 @@ export default {
       },
     },
   },
-  data() {
+  data () {
     return {
       // 功能权限标志 数据权限标志
       editurl: require("@/assets/img/edit.png"),
@@ -447,7 +504,7 @@ export default {
   },
   methods: {
     // 获取权限列表
-    getPermissionDataLists() {
+    getPermissionDataLists () {
       this.$axios.get("/security/permissions").then((res) => {
         if (res.data.code == 200 && res.data.detail.length > 0) {
           let result = res.data.detail;
@@ -459,7 +516,7 @@ export default {
       });
     },
     // 将同级数据转化为树形结构
-    listToTree(dataSource) {
+    listToTree (dataSource) {
       // datasource是平级的数据来源
       return dataSource.filter((e) => {
         const pid = e.parentId;
@@ -475,16 +532,16 @@ export default {
         return resultArr.length === 0;
       });
     },
-    mouseenter(item) {
+    mouseenter (item) {
       item.enter = true;
       //console.log(item);
     },
     //修改并复制权限单击出现图标，再点击后图标消失
-    copy2() {
+    copy2 () {
       this.fuzhi = !this.fuzhi;
     },
     // 点击图标后复制操作
-    copy(id) {
+    copy (id) {
       let diyRoleItemIndex = id;
       //如果有没有保存的角色权限则先进行保存后复制
       if (this.customAddUser.length > 0) {
@@ -528,7 +585,7 @@ export default {
       //console.info(item);
     },
     // 保存
-    save() {
+    save () {
       let self = this;
       //如果是添加角色
       if (this.customAddUser.length > 0) {
@@ -603,7 +660,7 @@ export default {
       }
     },
     //选中主的全选子的，取消主的取消全部子的
-    handleCheckAllChange(boo, id) {
+    handleCheckAllChange (boo, id) {
       let obj = this.permissionDataList.find((i) => i.id == id);
       let sonArr = obj.children.map((i) => i.id);
       if (boo) {
@@ -629,7 +686,7 @@ export default {
       }
     },
     //获取权限id集合
-    getRoleIds(index) {
+    getRoleIds (index) {
       let arr = [];
       this.permissionDataList.forEach((i, x) => {
         if (x <= index) {
@@ -640,7 +697,7 @@ export default {
       return arr;
     },
     // 获取角色列表 和 角色权限列表
-    search(ids, boo, loading) {
+    search (ids, boo, loading) {
       this.$axios
         .get("/security/roles", { loading: boo ? false : null })
         .then((res) => {
@@ -679,10 +736,10 @@ export default {
             this.$message.error("获取角色信息失败！");
           }
         })
-        .catch((failResponse) => {});
+        .catch((failResponse) => { });
     },
     // 删除
-    del() {
+    del () {
       //删除前的一系列判断
       if (this.btnCheckList.length <= 0) {
         this.$message.error("请选择角色后操作");
@@ -731,7 +788,7 @@ export default {
       });
     },
     // 新增
-    add() {
+    add () {
       if (this.customAddUser.length > 0) {
         this.$message.warning("请先保存后再进行添加!");
         return;
@@ -762,13 +819,13 @@ export default {
       }, 20);
     },
     //查看用户组的信息
-    viewGroupItem(id) {
+    viewGroupItem (id) {
       let arr = [...this.diyRoleList, ...this.defaultRoleBtns];
       let obj = arr.find((i) => i.id == id);
       return JSON.parse(JSON.stringify(obj));
     },
     //修改名
-    editName(item) {
+    editName (item) {
       if (
         this.customAddUser.length > 0 &&
         item.id == this.customAddUser[0].id
@@ -785,7 +842,7 @@ export default {
       this.editUserRole(obj);
     },
     //修改角色权限并本地赋值
-    editUserRole(params) {
+    editUserRole (params) {
       this.$axios({
         method: "put",
         url: "/security/roles",
@@ -811,22 +868,22 @@ export default {
       });
     },
     // 编辑
-    edit() {
+    edit () {
       //console.info("编辑数据");
     },
     // 选中默认权限
-    chooseDefaultRoleItem(item) {
+    chooseDefaultRoleItem (item) {
       this.btnType = "default";
       this.viewSelect(item);
       this.diyRoleItemIndex = item.id;
     },
     // 选中的权限
-    viewSelect(item) {
+    viewSelect (item) {
       this.checkList =
         (item.permissions && item.permissions.map((i) => i.id)) || [];
     },
     // 选中自定义某个权限
-    chooseDiyRoleItem(item) {
+    chooseDiyRoleItem (item) {
       this.btnType = "custom";
       if (item.id !== this.diyRoleItemIndex) {
         this.resetEdit();
@@ -835,7 +892,7 @@ export default {
       this.viewSelect(item);
     },
     // 编辑以后出现输入框的一系列细节
-    editDiyRoleItem(item) {
+    editDiyRoleItem (item) {
       let edit = item.edit;
       let index = this.diyRoleList.findIndex((i) => i.id == item.id);
       if (!edit && typeof edit != Boolean) edit = false;
@@ -855,7 +912,7 @@ export default {
       this.$forceUpdate();
     },
     //重置编辑状态
-    resetEdit(type) {
+    resetEdit (type) {
       if (type == "screen") {
       }
 
@@ -869,31 +926,32 @@ export default {
      *
      * 下面两个暂时没什么用。可以删除
      */
-    funAuth() {
+    funAuth () {
       this.funFlag = true;
       this.dataFlag = false;
       //console.info("功能权限");
     },
-    dataAuth() {
-      this.funFlag = false;
-      this.dataFlag = true;
+    dataAuth () {
+      // this.funFlag = false;
+      // this.dataFlag = true;
+
       //console.info("数据权限");
     },
     //取消删除后，将选择的角色全部取消选中并让选择框消失
-    cancel() {
+    cancel () {
       this.delimgBoo = !this.delimgBoo;
       this.btnCheckList = [];
     },
   },
-  created() {
+  created () {
     this.search();
     this.getPermissionDataLists();
   },
-  mounted() {
+  mounted () {
     this.funFlag = true;
   },
   computed: {
-    roleArr() {
+    roleArr () {
       return this.$store.state.layout.Menu;
     },
   },
@@ -1093,11 +1151,11 @@ export default {
 }
 </style>
 <style scoped lang="scss">
-  /deep/ .el-table .el-table__body tr.current-row > td {
-    background-color: transparent !important;
-  }
+/deep/ .el-table .el-table__body tr.current-row > td {
+  background-color: transparent !important;
+}
 
-  /deep/ .el-table .el-table__body tr:hover > td {
-    background-color: transparent !important;
-  }
+/deep/ .el-table .el-table__body tr:hover > td {
+  background-color: transparent !important;
+}
 </style>