用户管理

src/assets/styles/element-ui-costom.scss

@@ -25,6 +25,25 @@
     }
   }
 }
+.view-mode {
+  .el-dialog {
+    .el-dialog__body {
+      position: relative;
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        z-index: 8;
+        background-color: transparent;
+      }
+    }
+  }
+}
 .el-dialog__header {
   padding: 15px 20px;
   .el-dialog__title {

src/modules/base/components/ModifyRole.vue

@@ -1,6 +1,11 @@
 <template>
   <el-dialog
-    class="modify-role"
+    :class="[
+      'modify-role',
+      {
+        'view-mode': viewMode,
+      },
+    ]"
     :visible.sync="modalIsShow"
     :title="title"
     :close-on-click-modal="false"
@@ -57,7 +62,11 @@
       :menus="menus"
     ></privilege-set>
     <div slot="footer">
-      <el-button type="primary" :disabled="isSubmit" @click="submit"
+      <el-button
+        v-if="!viewMode"
+        type="primary"
+        :disabled="isSubmit"
+        @click="submit"
         >确认</el-button
       >
       <el-button @click="cancel">取消</el-button>
@@ -68,7 +77,7 @@
 <script>
 import { DATA_PRIVILEGE_TYPE } from "../../../constants/enumerate";
 import { updateRole, privilegeList, roleBoundPrivileges } from "../api";
-import PrivilegeSet from "./PrivilegeSet";
+import PrivilegeSet from "./PrivilegeSet.vue";
 // import navs from "./privilege/navs.json";
 
 const initModalForm = {
@@ -90,6 +99,10 @@ export default {
         return {};
       },
     },
+    viewMode: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     isEdit() {

src/modules/base/views/RoleManage.vue

@@ -69,12 +69,19 @@
         <el-table-column class-name="action-column" label="操作" width="180px">
           <template slot-scope="scope">
             <el-button
-              v-if="checkPrivilege('link', 'edit')"
+              v-if="checkPrivilege('link', 'edit') && !scope.row.defaultRole"
               class="btn-primary"
               type="text"
               @click="toEdit(scope.row)"
               >编辑</el-button
             >
+            <el-button
+              v-if="scope.row.defaultRole"
+              class="btn-primary"
+              type="text"
+              @click="toView(scope.row)"
+              >查看</el-button
+            >
             <el-button
               v-if="checkPrivilege('link', 'Manager')"
               class="btn-primary"
@@ -118,6 +125,7 @@
       v-if="checkPrivilege('button', 'add') || checkPrivilege('link', 'edit')"
       ref="ModifyRole"
       :instance="curRole"
+      :view-mode="viewMode"
       @modified="getList"
     ></modify-role>
     <!-- ModifyRoleUser -->
@@ -128,7 +136,7 @@
 <script>
 import { ABLE_TYPE } from "@/constants/enumerate";
 import { roleListPage, ableRole, deleteRole } from "../api";
-import ModifyRole from "../components/ModifyRole";
+import ModifyRole from "../components/ModifyRole.vue";
 import ModifyRoleUser from "../components/ModifyRoleUser";
 
 export default {
@@ -150,6 +158,7 @@ export default {
       curRole: {},
       ABLE_TYPE,
       ROLE_TYPE: {},
+      viewMode: false,
     };
   },
   mounted() {
@@ -180,6 +189,12 @@ export default {
     },
     toEdit(row) {
       this.curRole = row;
+      this.viewMode = false;
+      this.$refs.ModifyRole.open();
+    },
+    toView(row) {
+      this.curRole = row;
+      this.viewMode = true;
       this.$refs.ModifyRole.open();
     },
     toEditUser(row) {