【修改】预留单按钮限制

src/views/setting/role.vue

@@ -6,14 +6,7 @@
     <div class="mymain-container">
       <div class="btn-group clearfix">
         <div class="fl">
-          <el-button
-            size="small"
-            type="primary"
-            icon="el-icon-plus"
-            @click="addOrEdit('add')"
-            v-if="checkBtnRole('add')"
-            >新增角色</el-button
-          >
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')" v-if="checkBtnRole('add')">新增角色</el-button>
         </div>
         <div class="fr">
           <ImportButton :imUrl="'stock/importToll'" @importSuccess="getList" />
@@ -21,15 +14,7 @@
       </div>
 
       <div class="table">
-        <el-table
-          v-loading="listLoading"
-          :data="dataList"
-          element-loading-text="Loading"
-          border
-          fit
-          highlight-current-row
-          stripe
-        >
+        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
           <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
           <el-table-column align="center" label="角色" prop="name"></el-table-column>
           <el-table-column align="center" label="允许访问系统" prop="visitSysStatus" width="120">
@@ -37,31 +22,18 @@
               <el-switch
                 v-model="scope.row.visitSysStatus"
                 :disabled="scope.row.type === 1 || scope.row.type === 2"
-                @change="changeStatus(scope.row.adminRoleId, scope.row.visitSysStatus)"
-              >
+                @change="changeStatus(scope.row.adminRoleId, scope.row.visitSysStatus)">
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column align="center" label="操作" width="180">
             <template slot-scope="scope">
-              <el-button type="text" @click="setMenuRole(scope.row.adminRoleId)" v-if="checkBtnRole('detail')"
-                >设置权限</el-button
-              >
+              <el-button type="text" @click="setMenuRole(scope.row.adminRoleId)" v-if="checkBtnRole('detail')">设置权限</el-button>
               <template v-if="checkBtnRole('detail')">
-                <el-button
-                  type="text"
-                  @click="addOrEdit('edit', scope.row.adminRoleId)"
-                  v-if="scope.row.adminRoleId != 1"
-                  >编辑</el-button
-                >
+                <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">编辑</el-button>
               </template>
               <template v-if="checkBtnRole('del')">
-                <el-popconfirm
-                  style="margin-left: 10px"
-                  title="确定删除吗？"
-                  @onConfirm="handleDelete(scope.row.adminRoleId)"
-                  v-if="scope.row.adminRoleId != 1"
-                >
+                <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">
                   <el-button slot="reference" type="text">删除</el-button>
                 </el-popconfirm>
               </template>
@@ -79,21 +51,14 @@
             :page-sizes="[10, 20, 30, 50]"
             :page-size="10"
             layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal"
-          >
+            :total="listTotal">
           </el-pagination>
         </div>
       </div>
     </div>
 
     <!-- 新增编辑 -->
-    <el-dialog
-      :title="addFormType == 'add' ? '新增角色' : '编辑角色'"
-      :visible.sync="addFormVisible"
-      :show-close="false"
-      width="40%"
-      :close-on-click-modal="false"
-    >
+    <el-dialog :title="addFormType == 'add' ? '新增角色':'编辑角色'" :visible.sync="addFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
       <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
         <el-form-item label="角色名" prop="name">
           <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
@@ -106,56 +71,37 @@
     </el-dialog>
 
     <!-- 设置权限 -->
-    <el-dialog
-      title="设置权限"
-      :visible.sync="roleFormVisible"
-      :show-close="false"
-      width="40%"
-      :close-on-click-modal="false"
-      custom-class="tree-dialog"
-      top="50px"
-    >
+    <el-dialog title="设置权限" :visible.sync="roleFormVisible" :show-close="false" width="40%" :close-on-click-modal="false" custom-class="tree-dialog" top="50px">
       <el-tree
         :data="menuRoleList"
         show-checkbox
-        :check-strictly="false"
+        :check-strictly="true"
         :default-expand-all="true"
         :expand-on-click-node="false"
         node-key="moduleId"
         ref="tree"
         highlight-current
-        :props="defaultProps"
-      >
+        :props="defaultProps">
         <span class="custom-tree-node" slot-scope="{ node, data }">
           <span>{{ node.label }}</span>
           <span v-if="data.type < 3">
             <el-button type="text" size="mini" @click="() => quickSelection(data)">一键全选</el-button>
-            <el-button type="text" size="mini" @click="() => quickCancel(data)" style="color: #f56c6c"
-              >一键取消</el-button
-            >
+            <el-button type="text" size="mini" @click="() => quickCancel(data)" style="color: #f56c6c">一键取消</el-button>
           </span>
         </span>
       </el-tree>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="roleFormVisible = false">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
+        <el-button @click="roleFormVisible = false">{{editId != 1 ? '取 消':'关 闭'}}</el-button>
         <el-button type="primary" @click="submitRoleForm" v-if="editId != 1">确 定</el-button>
       </div>
     </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import {
-  getRoleList,
-  addRole,
-  editRole,
-  getRoleDetail,
-  deleteRole,
-  getMenuList,
-  getMenuRoleIds,
-  setMenuRole
-} from '@/api/setting'
+import { getRoleList, addRole, editRole, getRoleDetail, deleteRole, getMenuList, getMenuRoleIds, setMenuRole } from '@/api/setting'
 
 export default {
   data() {
@@ -167,14 +113,16 @@ export default {
       pageSize: 10, // 每页数量
       listTotal: 0, // 列表总数
 
-      editId: null,
+      editId:  null,
       addFormType: 'add',
       addFormVisible: false,
       addForm: {
-        name: '' // 角色名
+        name: '', // 角色名
       },
       addFormRules: {
-        name: [{ required: true, message: '请输入角色名', trigger: 'blur' }]
+        name: [
+          { required: true, message: '请输入角色名', trigger: 'blur' }
+        ],
       },
 
       roleFormVisible: false,
@@ -183,14 +131,17 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'moduleName'
-      }
+      },
     }
   },
   computed: {
-    ...mapGetters(['userid', 'name'])
+    ...mapGetters([
+      'userid',
+      'name'
+    ])
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     // 查询按钮权限
@@ -199,52 +150,52 @@ export default {
       // if(!btnRole) {return true}
       // let index = btnRole.indexOf(value);
       // return index >= 0 ? true : false;
-      return true
+      return true;
     },
 
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
 
       let params = {
         pageNum: this.currentPage,
         pageSize: this.pageSize
-      }
+      };
 
       getRoleList(params).then(res => {
-        this.dataList = res.data.records
-        this.listTotal = res.data.total
-        this.listLoading = false
+        this.dataList = res.data.records;
+        this.listTotal = res.data.total;
+        this.listLoading = false;
       })
     },
 
     // 更改每页数量
     handleSizeChange(val) {
-      this.pageSize = val
-      this.currentPage = 1
-      this.getList()
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getList();
     },
 
     // 更改当前页
     handleCurrentChange(val) {
-      this.currentPage = val
-      this.getList()
+      this.currentPage = val;
+      this.getList();
     },
 
     // 操作 - 删除
     handleDelete(id) {
-      deleteRole({ adminRoleId: id }).then(res => {
-        this.getList()
-        this.$successMsg()
+      deleteRole({adminRoleId: id}).then(res => {
+        this.getList();
+        this.$successMsg();
       })
     },
 
     // 新增编辑
     addOrEdit(type, id) {
-      this.addFormType = type
-      this.addFormVisible = true
-      if (type == 'edit') {
-        this.editId = id
-        getRoleDetail({ adminRoleId: id }).then(res => {
+      this.addFormType = type;
+      this.addFormVisible = true;
+      if(type == 'edit') {
+        this.editId = id;
+        getRoleDetail({adminRoleId: id}).then(res => {
           this.addForm = {
             name: res.data.name
           }
@@ -253,30 +204,30 @@ export default {
     },
 
     // 取消 新增编辑
-    cancelAddForm() {
-      this.addFormVisible = false
-      this.$refs.addForm.resetFields()
+    cancelAddForm(){
+      this.addFormVisible = false;
+      this.$refs.addForm.resetFields();
     },
 
     // 提交 新增编辑
     submitAddForm() {
-      this.$refs.addForm.validate(valid => {
+      this.$refs.addForm.validate((valid) => {
         if (valid) {
           let params = {
             name: this.addForm.name
           }
-          if (this.addFormType == 'edit') {
-            params.adminRoleId = this.editId
+          if(this.addFormType == 'edit') {
+            params.adminRoleId = this.editId;
             editRole(params).then(res => {
-              this.cancelAddForm()
-              this.getList()
-              this.$successMsg('编辑成功')
+              this.cancelAddForm();
+              this.getList();
+              this.$successMsg('编辑成功');
             })
           } else {
             addRole(params).then(res => {
-              this.cancelAddForm()
-              this.getList()
-              this.$successMsg('新增成功')
+              this.cancelAddForm();
+              this.getList();
+              this.$successMsg('新增成功');
             })
           }
         }
@@ -285,13 +236,13 @@ export default {
 
     // 设置权限 - 获取列表
     setMenuRole(id) {
-      this.roleFormVisible = true
-      this.editId = id
-      getMenuList({ adminUserId: this.userid }).then(res => {
-        this.menuRoleList = res.data
+      this.roleFormVisible = true;
+      this.editId = id;
+      getMenuList({adminUserId: this.userid}).then(res => {
+        this.menuRoleList = res.data;
       })
-      getMenuRoleIds({ adminRoleId: id }).then(res => {
-        this.$refs.tree.setCheckedKeys(res.data)
+      getMenuRoleIds({adminRoleId: id}).then(res => {
+        this.$refs.tree.setCheckedKeys(res.data);
       })
     },
 
@@ -299,68 +250,68 @@ export default {
     submitRoleForm() {
       let params = {
         adminModuleIds: this.$refs.tree.getCheckedKeys().join(','),
-        adminRoleId: this.editId
+        adminRoleId: this.editId,
       }
       setMenuRole(params).then(res => {
-        this.roleFormVisible = false
-        this.getList()
-        this.$successMsg()
+        this.roleFormVisible = false;
+        this.getList();
+        this.$successMsg();
       })
     },
 
     // 一键全选
     quickSelection(data) {
-      let nowChecked = this.$refs.tree.getCheckedKeys()
-      let thisId = data.moduleId
-      let childId = []
-      if (data.children.length) {
-        childId = this.familyTree(data.children)
+      let nowChecked = this.$refs.tree.getCheckedKeys();
+      let thisId = data.moduleId;
+      let childId = [];
+      if(data.children.length) {
+        childId = this.familyTree(data.children);
       }
 
-      let setChecked = nowChecked.concat([thisId]).concat(childId)
+      let setChecked = nowChecked.concat([thisId]).concat(childId);
 
-      this.$refs.tree.setCheckedKeys(setChecked)
+      this.$refs.tree.setCheckedKeys(setChecked);
     },
 
     // 一键取消
     quickCancel(data) {
-      let nowChecked = this.$refs.tree.getCheckedKeys()
-      let thisId = data.moduleId
-      let childId = []
-      if (data.children.length) {
-        childId = this.familyTree(data.children)
+      let nowChecked = this.$refs.tree.getCheckedKeys();
+      let thisId = data.moduleId;
+      let childId = [];
+      if(data.children.length) {
+        childId = this.familyTree(data.children);
       }
 
-      let setChecked = nowChecked
-      if (setChecked.indexOf(thisId) >= 0) {
-        setChecked.splice(setChecked.indexOf(thisId), 1)
+      let setChecked = nowChecked;
+      if(setChecked.indexOf(thisId) >= 0) {
+        setChecked.splice(setChecked.indexOf(thisId), 1);
       }
 
-      if (childId.length) {
+      if(childId.length) {
         for (var i = 0; i < childId.length; i++) {
-          if (setChecked.indexOf(childId[i]) >= 0) {
-            setChecked.splice(setChecked.indexOf(childId[i]), 1)
+          if(setChecked.indexOf(childId[i]) >= 0) {
+            setChecked.splice(setChecked.indexOf(childId[i]), 1);
           }
         }
       }
 
-      this.$refs.tree.setCheckedKeys(setChecked)
+      this.$refs.tree.setCheckedKeys(setChecked);
     },
 
     // 递归子id
     familyTree(arr) {
-      var temp = []
+      var temp = [];
       var forFn = function (list) {
         for (var i = 0; i < list.length; i++) {
-          var item = list[i]
+          var item = list[i];
           if (item.children) {
-            temp.push(item.moduleId)
-            forFn(item.children)
+            temp.push(item.moduleId);
+            forFn(item.children);
           }
         }
-      }
-      forFn(arr)
-      return temp
+      };
+      forFn(arr);
+      return temp;
     },
 
     changeStatus(id, status) {
@@ -368,37 +319,38 @@ export default {
         adminRoleId: id,
         visitSysStatus: status
       }).then(res => {
-        this.getList()
-        this.$successMsg('编辑成功')
+        this.getList();
+        this.$successMsg('编辑成功');
       })
     }
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-::v-deep .tree-dialog {
-  .el-dialog__body {
-    padding: 20px;
-    .el-tree {
-      max-height: calc(100vh - 140px - 54px - 70px);
-      overflow-y: scroll;
-      padding: 0 30px;
-      > .el-tree-node {
-        padding: 15px 0;
-        border: 1px dashed #ddd;
-        margin-bottom: 15px;
-        border-radius: 10px;
+  ::v-deep .tree-dialog {
+    .el-dialog__body {
+      padding: 20px;
+      .el-tree {
+        max-height: calc(100vh - 140px - 54px - 70px);
+        overflow-y: scroll;
+        padding: 0 30px;
+        >.el-tree-node {
+          padding: 15px 0;
+          border: 1px dashed #ddd;
+          margin-bottom: 15px;
+          border-radius: 10px;
+        }
       }
     }
   }
-}
-::v-deep .custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-}
+  ::v-deep .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
 </style>