添加账号管理权限页面

src/router/routes/routes-file-two.ts

@@ -6,7 +6,7 @@ const HomeRoutes = {
   name: 'UserManagement',
   redirect: '/userManagement/role',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-  meta: { title: '用户管理', elSvgIcon: 'Fold' },
+  meta: { title: '权限管理', elSvgIcon: 'Fold' },
   children: [
     {
       path: 'permission',
@@ -45,6 +45,13 @@ const HomeRoutes = {
       meta: { title: '角色授权', elSvgIcon: 'Fold', icon: 'table' },
       component: () => import('@/views/userManagement/role/auth.vue'),
     },
+    {
+      path: 'accountAuth',
+      name: 'AccountAuth',
+      hidden: true,
+      meta: { title: '账号权限', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/userManagement/account/auth.vue'),
+    },
   ],
 }
 

src/theme/index.scss

@@ -24,13 +24,17 @@
     box-shadow: 0 0 0 1px #ac014d inset;
   }
 }
-.el-radio__input.is-checked .el-radio__inner {
+.el-radio__input.is-checked .el-radio__inner,
+.el-checkbox__input.is-checked .el-checkbox__inner {
   background: #ac014d;
   border-color: #ac014d;
 }
 .el-radio__input.is-checked + .el-radio__label {
   color: #ac014d;
 }
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #303133;
+}
 .el-form-item__label {
   color: #303133;
   font-weight: 400;
@@ -93,7 +97,13 @@
     background-color: #ac014d;
   }
 }
-
+.el-button--primary.is-link {
+  color: #ac014d;
+  &:hover,
+  &:focus {
+    color: #ac014d;
+  }
+}
 .el-button--danger {
   color: #fff;
   border-color: #ac014d;

src/views/userManagement/account/auth.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="auth scroll-y">
+    <div class="flex auth-content">
+      <div class="role-info auth-list">
+        <div class="box strategy-top">
+          <div class="manageTitle">账号信息</div>
+          <div class="role-info-content t30">
+            <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
+              <el-form-item label="角色名称" prop="roleName">
+                <el-input disabled v-model="ruleForm.roleName" size="default" placeholder="请输入角色名称" />
+              </el-form-item>
+              <el-form-item label="角色描述" prop="roleDesc">
+                <el-input disabled v-model="ruleForm.roleDesc" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
+              </el-form-item>
+              <el-form-item label="是否启用" prop="roleStatus">
+                <el-radio-group disabled v-model="ruleForm.roleStatus">
+                  <el-radio label="1">启用</el-radio>
+                  <el-radio label="2"> 禁用</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div class="box strategy-bottom strategy">
+          <div class="manageTitle">登录策略</div>
+          <div class="strategy-content">
+            <el-scrollbar>
+              <el-checkbox-group v-model="checkboxGroup" size="default">
+                <el-row :gutter="16">
+                  <el-col :span="8" v-for="item in groupData" :key="item.id">
+                    <div class="strategy-content-list">
+                      <el-checkbox class="ck" :title="item.label" :label="item.value">
+                        {{ item.label }}
+                      </el-checkbox>
+                      <el-button style="margin-top:8px" size="default" type="primary" link>查看</el-button>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-checkbox-group>
+            </el-scrollbar>
+          </div>
+        </div>
+      </div>
+      <div class="box auth-list">
+        <div class="manageTitle">角色</div>
+        <div class="strategy auth-tree">
+          <div class="strategy-content">
+            <el-scrollbar>
+              <el-checkbox-group v-model="roleGroup" size="default">
+                <el-row :gutter="16">
+                  <el-col :span="8" v-for="item in roleData" :key="item.id">
+                    <div class="strategy-content-list">
+                      <el-checkbox class="ck" :title="item.label" :label="item.value">
+                        {{ item.label }}
+                      </el-checkbox>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-checkbox-group>
+            </el-scrollbar>
+          </div>
+        </div>
+      </div>
+      <div class="box auth-list">
+        <div class="manageTitle">权限名称</div>
+        <div class="auth-name flex-wrap">
+          <span class="auth-name-list"> <span class="icon icon-time"></span> 时效规则有</span>
+          <span class="auth-name-list"> <span class="icon icon-date"></span> 数据规则有</span>
+          <span class="auth-name-list"> <span class="icon icon-ic_display_edit"></span> 显示及编辑权限</span>
+          <span class="auth-name-list"> <span class="icon icon-ic_display"></span> 显示权限</span>
+        </div>
+        <div class="auth-box">
+          <div class="strategy-content">
+            <el-scrollbar>
+              <el-row :gutter="16">
+                <el-col :span="8" v-for="item in roleData" :key="item.id">
+                  <div class="strategy-content-list">
+                    <div class="flex info">
+                      <div class="name">{{item.label}}</div>
+                      <el-button size="default" type="primary" link>查看</el-button>
+                    </div>
+                    <div class="auth-name flex-wrap">
+                      <span class="auth-name-list"> <span class="icon icon-time"></span></span>
+                      <span class="auth-name-list"> <span class="icon icon-date"></span></span>
+                      <span class="auth-name-list"> <span class="icon icon-ic_display_edit"></span></span>
+                      <span class="auth-name-list"> <span class="icon icon-ic_display"></span> </span>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-scrollbar>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount } from "vue";
+const ruleForm = reactive({
+  roleName: "11",
+  roleDesc: "22",
+  roleStatus: "2",
+});
+const checkboxGroup = ref([1, 2]);
+const roleGroup = ref([1, 2]);
+const groupData = [
+  {
+    label: "策略名称",
+    value: 1,
+    id: 1,
+  },
+];
+const roleData = [
+  {
+    label: "系统开发工程师",
+    value: 1,
+    id: 1,
+  },
+];
+onBeforeMount(() => {
+  for (let i = 0; i < 50; i++) {
+    groupData.push({
+      label: "策略名称",
+      value: i + 2,
+      id: i + 2,
+    });
+    roleData.push({
+      label: "系统开发工程师",
+      value: i + 2,
+      id: i + 2,
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.auth {
+  &-content {
+    height: 100%;
+  }
+  &-list {
+    flex: 1;
+    margin-right: 24px;
+    &:last-child {
+      margin-right: 0;
+    }
+    .strategy-top {
+      height: 310px;
+    }
+    .strategy-bottom {
+      height: calc(100% - 335px);
+    }
+    .strategy {
+      margin-top: 24px;
+      &-content {
+        height: calc(100% - 24px);
+        &-list {
+          padding: 8px 16px 16px 16px;
+          height: 80px;
+          background: #f5f7fa;
+          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          margin-top: 16px;
+          :deep .ck {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row-reverse;
+            .el-checkbox__label {
+              max-width: 80%;
+              overflow: hidden;
+              padding-left: 0;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+    .auth-tree {
+      margin-top: 14px;
+      height: calc(100% - 44px);
+      .strategy-content {
+        height: 100%;
+      }
+    }
+    .auth-name {
+      margin-top: 16px;
+      &-list {
+        color: #afb4bf;
+        margin-right: 30px;
+        &:last-child {
+          margin-right: 0;
+        }
+        .icon {
+          width: 14px;
+          height: 14px;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          margin-right: 8px;
+          position: relative;
+          top: 2px;
+        }
+        .icon-time {
+          background-image: url("@/assets/index/ic_time.png");
+        }
+        .icon-date {
+          background-image: url("@/assets/index/ic_date.png");
+        }
+        .icon-ic_display_edit {
+          background-image: url("@/assets/index/ic_display_edit.png");
+        }
+        .icon-ic_display {
+          background-image: url("@/assets/index/ic_display.png");
+        }
+      }
+    }
+    .auth-box {
+      margin-top: 14px;
+      height: calc(100% - 70px);
+      .strategy-content {
+        height: 100%;
+      }
+      .auth-name-list {
+        margin-right: 0;
+      }
+      .info {
+        margin-top: 6px;
+        .name {
+          max-width: 80%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/userManagement/account/index.vue

@@ -153,7 +153,7 @@ const btnClick = (index, row, param) => {
     ruleForm.roleStatus = row.status;
     ruleForm.rolePwd = row.pwd;
   } else {
-    router.push("/userManagement/auth");
+    router.push("/userManagement/accountAuth");
   }
 };
 const delRest = () => {