|
|
@@ -1,10 +1,38 @@
|
|
|
<script>
|
|
|
import publicFunc from "@/utils/publicFunc";
|
|
|
+import { requireImg } from "@/utils/requireImg";
|
|
|
+import authAction from "./authAction.vue";
|
|
|
export default {
|
|
|
+ components: { authAction },
|
|
|
data() {
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: "终端类型",
|
|
|
+ dataIndex: "deviceType",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "模块名称",
|
|
|
+ dataIndex: "modelName",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "功能权限",
|
|
|
+ dataIndex: "functionAuth",
|
|
|
+ },
|
|
|
+ ];
|
|
|
return {
|
|
|
- checkedUsers:[],
|
|
|
- tableData: [],
|
|
|
+ visible: {
|
|
|
+ roleGroup: false,
|
|
|
+ user: false,
|
|
|
+ },
|
|
|
+ inputName:"",
|
|
|
+ columns,
|
|
|
+ checkedObj: {
|
|
|
+ groupChecked: "",
|
|
|
+ systemChecked: "",
|
|
|
+ },
|
|
|
+ checkedUsers: [],
|
|
|
+ userListGroup: [],
|
|
|
+ keyDictObj: {},
|
|
|
roleListData: [
|
|
|
{
|
|
|
id: publicFunc.buildGuid("group"),
|
|
|
@@ -17,21 +45,106 @@ export default {
|
|
|
id: publicFunc.buildGuid("system"),
|
|
|
label: "空间管理系统",
|
|
|
type: "system",
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智能看板",
|
|
|
+ functionAuth: "信息查看，组织添加，人员更新，人员删除",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智享生活",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "数智双探",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "移动端",
|
|
|
+ modelName: "智慧安防",
|
|
|
+ functionAuth: "信息查看，组织添加，人员更新，人员删除",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
id: publicFunc.buildGuid("system"),
|
|
|
type: "system",
|
|
|
label: "停车管理系统",
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智能看板",
|
|
|
+ functionAuth: "信息查看，组织添加，人员更新，人员删除",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智享生活",
|
|
|
+ functionAuth: "信息查看，组织添加，人员更新，人员删除",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "移动端",
|
|
|
+ modelName: "智慧安防",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
id: publicFunc.buildGuid("system"),
|
|
|
type: "system",
|
|
|
label: "能源管理系统",
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智能看板",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智享生活",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "移动端",
|
|
|
+ modelName: "智慧安防",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "移动端",
|
|
|
+ modelName: "智慧安防",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
id: publicFunc.buildGuid("system"),
|
|
|
type: "system",
|
|
|
label: "中枢",
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "PC",
|
|
|
+ modelName: "智享生活",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: publicFunc.buildGuid("system"),
|
|
|
+ deviceType: "移动端",
|
|
|
+ modelName: "智慧安防",
|
|
|
+ functionAuth: "全部功能",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
],
|
|
|
userListData: [
|
|
|
@@ -39,34 +152,170 @@ export default {
|
|
|
id: publicFunc.buildGuid("user"),
|
|
|
label: "超级管理员",
|
|
|
type: "user",
|
|
|
- value:"超级管理员"
|
|
|
},
|
|
|
{
|
|
|
id: publicFunc.buildGuid("user"),
|
|
|
label: "普通管理员",
|
|
|
type: "user",
|
|
|
- value:"普通管理员"
|
|
|
},
|
|
|
{
|
|
|
id: publicFunc.buildGuid("user"),
|
|
|
label: "决策组",
|
|
|
type: "user",
|
|
|
- value:"决策组"
|
|
|
},
|
|
|
{
|
|
|
id: publicFunc.buildGuid("user"),
|
|
|
label: "普通用户",
|
|
|
type: "user",
|
|
|
- value: "普通用户",
|
|
|
},
|
|
|
],
|
|
|
+ tableData: [],
|
|
|
+ // 选中后添加的角色权限组
|
|
|
+ addedRoleMap: new Map(),
|
|
|
+ addedRoleArr: [],
|
|
|
+ // 树选择
|
|
|
+ treeData: [],
|
|
|
+ value: undefined,
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
mounted() {
|
|
|
// this.initRoleData();
|
|
|
},
|
|
|
- watch: {},
|
|
|
- methods: {},
|
|
|
+ watch: {
|
|
|
+ checkedObj: {
|
|
|
+ handler(value) {
|
|
|
+ if (value.groupChecked != "" && value.systemChecked != "") {
|
|
|
+ // 显示右侧的权限列表数据
|
|
|
+ this.tableData = [];
|
|
|
+ this.systemListData.forEach((v) => {
|
|
|
+ if (v.label === value.systemChecked) {
|
|
|
+ v.modelList.forEach((ele) => {
|
|
|
+ this.tableData.push({
|
|
|
+ key: ele.id,
|
|
|
+ deviceType: ele.deviceType || "--",
|
|
|
+ modelName: ele.modelName || "--",
|
|
|
+ functionAuth: ele.functionAuth || "--",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (
|
|
|
+ this.addedRoleMap.has(
|
|
|
+ `${value.groupChecked}-${value.systemChecked}`
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.checkedUsers = this.addedRoleMap.get(
|
|
|
+ `${value.groupChecked}-${value.systemChecked}`
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.checkedUsers = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ // immediate: true,
|
|
|
+ },
|
|
|
+ checkedUsers(data) {
|
|
|
+ if (
|
|
|
+ this.checkedObj.groupChecked != "" &&
|
|
|
+ this.checkedObj.systemChecked != ""
|
|
|
+ ) {
|
|
|
+ // group-system，作为key单独存
|
|
|
+ this.addedRoleMap.set(
|
|
|
+ `${this.checkedObj.groupChecked}-${this.checkedObj.systemChecked}`,
|
|
|
+ data
|
|
|
+ );
|
|
|
+ this.addedRoleArr = [];
|
|
|
+ if (data.length > 0) {
|
|
|
+ this.addedRoleMap.forEach((v, i) => {
|
|
|
+ v.forEach((ele, index) => {
|
|
|
+ this.addedRoleArr.push({
|
|
|
+ id: publicFunc.buildGuid("checked"),
|
|
|
+ group: i.split("-")[0],
|
|
|
+ system: i.split("-")[1],
|
|
|
+ role: ele,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ requireImg,
|
|
|
+ groupClick(data) {
|
|
|
+ this.checkedObj.groupChecked = data;
|
|
|
+ },
|
|
|
+ systemClick(data) {
|
|
|
+ this.checkedObj.systemChecked = data;
|
|
|
+ },
|
|
|
+ // 删除添加的角色权限组列
|
|
|
+ deleteEvent(data) {
|
|
|
+ let targetArr = this.addedRoleMap
|
|
|
+ .get(`${data.group}-${data.system}`)
|
|
|
+ .filter((v) => {
|
|
|
+ return v !== data.role;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 删除后该系统还有别的角色
|
|
|
+ if (targetArr.length > 0) {
|
|
|
+ this.addedRoleMap.set(`${data.group}-${data.system}`, targetArr);
|
|
|
+ // 同步配置权限列表
|
|
|
+ this.checkedUsers = this.addedRoleMap.get(
|
|
|
+ `${this.checkedObj.groupChecked}-${this.checkedObj.systemChecked}`
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ // 删除全部角色
|
|
|
+ this.addedRoleMap.delete(`${data.group}-${data.system}`);
|
|
|
+ this.checkedObj.groupChecked = "";
|
|
|
+ this.checkedObj.systemChecked = "";
|
|
|
+ this.checkedUsers = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ this.addedRoleArr = this.addedRoleArr.filter((v) => {
|
|
|
+ return v.id !== data.id;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ // 获取key及其对应的数据
|
|
|
+ this.userListGroup = this.userListData.map((v) => {
|
|
|
+ this.keyDictObj[v.label] = v.id;
|
|
|
+ return {
|
|
|
+ content: v.label,
|
|
|
+ value: v.label,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.roleListData.forEach((v, i) => {
|
|
|
+ this.keyDictObj[v.label] = v.id;
|
|
|
+ });
|
|
|
+ this.systemListData.forEach((v, i) => {
|
|
|
+ this.keyDictObj[v.label] = v.id;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onChange(checkedValues) {
|
|
|
+ console.log(checkedValues);
|
|
|
+ },
|
|
|
+ // 打开新建角色权限组对话框
|
|
|
+ createRoleDialog() {
|
|
|
+ this.visible.roleGroup = true;
|
|
|
+ console.log("添加角色权限组");
|
|
|
+ },
|
|
|
+ // 打开添加用户对话框
|
|
|
+ createUserDialog() {
|
|
|
+ this.visible.user = true;
|
|
|
+ console.log("添加用户事件");
|
|
|
+ },
|
|
|
+ addRoleGroupEvent() {
|
|
|
+ console.log("保存新建的角色权限组");
|
|
|
+ },
|
|
|
+ onTreeSelectChange() {},
|
|
|
+ onTreeSearch() {},
|
|
|
+ cancelEvent() {},
|
|
|
+ confirmEvent() {},
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<template>
|
|
|
@@ -74,49 +323,179 @@ export default {
|
|
|
<div class="auth-role-title">配置权限</div>
|
|
|
<div class="auth-role-content">
|
|
|
<div class="left-box">
|
|
|
- <div class="left-box-list">
|
|
|
- <div
|
|
|
- class="left-box-list-item"
|
|
|
- v-for="item in roleListData"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <div class="group-icon"></div>
|
|
|
- <div class="text">{{ item.label }}</div>
|
|
|
+ <div class="left-box-inner">
|
|
|
+ <div class="left-box-inner-list">
|
|
|
+ <div class="add-role-group-box">
|
|
|
+ <div class="add-role-group-btn" @click="createRoleDialog">
|
|
|
+ 新建角色权限组
|
|
|
+ </div>
|
|
|
+ <a-modal
|
|
|
+ v-model="visible.roleGroup"
|
|
|
+ title="新建角色权限组"
|
|
|
+ @ok="addRoleGroupEvent"
|
|
|
+ >
|
|
|
+ 组名：<a-input placeholder="请输入名称" v-model="inputName"></a-input>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="left-box-inner-list-item"
|
|
|
+ v-for="item in roleListData"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ active: checkedObj.groupChecked === item.label }"
|
|
|
+ @click="groupClick(item.label)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="checkedObj.groupChecked === item.label"
|
|
|
+ :src="requireImg('auth/group_blue.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="requireImg('auth/group_gray.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <div class="text">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="left-box-list">
|
|
|
- <div
|
|
|
- class="left-box-list-item"
|
|
|
- v-for="item in systemListData"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <div class="system-icon"></div>
|
|
|
- <div class="text">{{ item.label }}</div>
|
|
|
+ <div class="left-box-inner-list">
|
|
|
+ <div
|
|
|
+ class="left-box-inner-list-item"
|
|
|
+ v-for="item in systemListData"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ active: checkedObj.systemChecked === item.label }"
|
|
|
+ @click="systemClick(item.label)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="icon-img"
|
|
|
+ v-if="checkedObj.systemChecked === item.label"
|
|
|
+ :src="requireImg('auth/system_blue.png')"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="icon-img"
|
|
|
+ v-else
|
|
|
+ :src="requireImg('auth/system_gray.png')"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="text">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-box-inner-list">
|
|
|
+ <a-checkbox-group
|
|
|
+ :options="userListGroup"
|
|
|
+ v-model="checkedUsers"
|
|
|
+ @change="onChange"
|
|
|
+ >
|
|
|
+ <template #label="value">
|
|
|
+ <img
|
|
|
+ v-if="checkedUsers.includes(value.content)"
|
|
|
+ :src="requireImg('auth/role_blue.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="requireImg('auth/role_gray.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color: checkedUsers.includes(value.content)
|
|
|
+ ? '#66beff'
|
|
|
+ : '#7f7f7f',
|
|
|
+ }"
|
|
|
+ >{{ value.content }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-checkbox-group>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="left-box-list">
|
|
|
- <a-checkbox-group :options="userListData" :value="checkedUsers"></a-checkbox-group>
|
|
|
- <!-- <div
|
|
|
- class="left-box-list-item"
|
|
|
- v-for="item in userListData"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <div class="role-icon"></div>
|
|
|
- <div class="text">{{ item.label }}</div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-box">
|
|
|
<div class="title">权限列表</div>
|
|
|
- <a-table :data-source="tableData" bordered></a-table>
|
|
|
+ <a-table
|
|
|
+ :data-source="tableData"
|
|
|
+ :columns="columns"
|
|
|
+ :scroll="{ y: 230 }"
|
|
|
+ bordered
|
|
|
+ ></a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="auth-role-infolist">
|
|
|
+ <div class="auth-role-infolist-inner">
|
|
|
+ <div
|
|
|
+ class="auth-role-infolist-inner-item"
|
|
|
+ v-for="item in addedRoleArr"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div class="left-content">
|
|
|
+ <a-breadcrumb separator=">">
|
|
|
+ <a-breadcrumb-item>
|
|
|
+ <img
|
|
|
+ :src="requireImg('auth/group_blue.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <span class="selected-item">{{ item.group }}</span>
|
|
|
+ </a-breadcrumb-item>
|
|
|
+ <a-breadcrumb-item>
|
|
|
+ <img
|
|
|
+ :src="requireImg('auth/system_blue.png')"
|
|
|
+ class="icon-img"
|
|
|
+ />
|
|
|
+ <span class="selected-item">{{ item.system }}</span>
|
|
|
+ </a-breadcrumb-item>
|
|
|
+ <a-breadcrumb-item>
|
|
|
+ <img :src="requireImg('auth/role_blue.png')" class="icon-img" />
|
|
|
+ <span class="selected-item">{{ item.role }}</span>
|
|
|
+ </a-breadcrumb-item>
|
|
|
+ </a-breadcrumb>
|
|
|
+ </div>
|
|
|
+ <div class="close-btn" @click="deleteEvent(item)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="auth-role-select">
|
|
|
+ <div class="auth-role-select-inner">
|
|
|
+ <div class="top-section">
|
|
|
+ <div class="top-section-inner">
|
|
|
+ <div class="top-section-inner-title">选择人员</div>
|
|
|
+ <div class="top-section-inner-select">
|
|
|
+ <a-tree-select
|
|
|
+ show-search
|
|
|
+ v-model="value"
|
|
|
+ multiple
|
|
|
+ :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
|
|
|
+ placeholder="请选择查询内容"
|
|
|
+ style="width: 100%"
|
|
|
+ tree-checkable
|
|
|
+ allow-clear
|
|
|
+ :tree-data="treeData"
|
|
|
+ tree-default-expand-all
|
|
|
+ ></a-tree-select>
|
|
|
+ </div>
|
|
|
+ <div class="top-section-inner-button">
|
|
|
+ <div class="add-user-btn" @click="createUserDialog">
|
|
|
+ <div class="add-user-btn-icon"><div class="img"></div></div>
|
|
|
+ <div class="add-user-btn-text">添加用户</div>
|
|
|
+ </div>
|
|
|
+ <a-modal v-model="visible.user" title="添加用户"></a-modal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-section">
|
|
|
+ <div class="bottom-section-extra-box"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="auth-role-footer">
|
|
|
+ <div class="auth-role-footer-inner">
|
|
|
+ <div class="cancel-btn" @click="cancelEvent">取消</div>
|
|
|
+ <div class="confirm-btn" @click="confirmEvent">确认</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="auth-role-infolist">123</div>
|
|
|
- <div class="auth-role-select"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<style lang="less" scoped>
|
|
|
+@fontDefaultColor: #7f7f7f;
|
|
|
@fontColor: #66beff;
|
|
|
.auth-role {
|
|
|
width: 100%;
|
|
|
@@ -126,7 +505,7 @@ export default {
|
|
|
&-title {
|
|
|
width: 100%;
|
|
|
height: 5%;
|
|
|
- background: rgba(200, 200, 255, 0.5);
|
|
|
+ // background: rgba(200, 200, 255, 0.5);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
@@ -136,7 +515,7 @@ export default {
|
|
|
}
|
|
|
&-content {
|
|
|
width: 100%;
|
|
|
- height: 45%;
|
|
|
+ height: 50%;
|
|
|
// background: peachpuff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -144,59 +523,94 @@ export default {
|
|
|
.left-box {
|
|
|
height: 100%;
|
|
|
width: 48%;
|
|
|
- background: peachpuff;
|
|
|
+ background: #fafafa;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- &-list {
|
|
|
- height: 100%;
|
|
|
- width: 32%;
|
|
|
- overflow: auto;
|
|
|
- // background: palevioletred;
|
|
|
- &-item {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- background: rgba(100, 100, 150, 0.2);
|
|
|
- color: @fontColor;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- .group-icon,
|
|
|
- .system-icon,
|
|
|
- .role-icon {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- }
|
|
|
- .group-icon {
|
|
|
- background: url("@/assets/images/auth/group_gray.png") no-repeat
|
|
|
- center;
|
|
|
- &.active {
|
|
|
- background: url("@/assets/images/auth/group_blue.png") no-repeat
|
|
|
- center;
|
|
|
- }
|
|
|
- }
|
|
|
- .system-icon {
|
|
|
- background: url("@/assets/images/auth/system_gray.png") no-repeat
|
|
|
- center;
|
|
|
- &.active {
|
|
|
- background: url("@/assets/images/auth/system_blue.png") no-repeat
|
|
|
- center;
|
|
|
+ justify-content: center;
|
|
|
+ &-inner {
|
|
|
+ width: calc(100% - 10px);
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ &-list {
|
|
|
+ height: 100%;
|
|
|
+ width: 32%;
|
|
|
+ border: 1px solid rgb(240, 241, 242);
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .ant-checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /deep/ .ant-checkbox-group-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // background: rgba(100, 100, 150, 0.2);
|
|
|
+ color: @fontDefaultColor;
|
|
|
+ padding-left: 30px;
|
|
|
+ .icon-img {
|
|
|
+ width: 19.5px;
|
|
|
+ height: 19.5px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .role-icon {
|
|
|
- background: url("@/assets/images/auth/role_gray.png") no-repeat
|
|
|
- center;
|
|
|
- &.active {
|
|
|
- background: url("@/assets/images/auth/role_blue.png") no-repeat
|
|
|
- center;
|
|
|
+
|
|
|
+ .add-role-group-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .add-role-group-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ width: 150px;
|
|
|
+ height: 25px;
|
|
|
+ background: #2ea8e6;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .text {
|
|
|
- width: calc(100% - 35px);
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ width: 100%;
|
|
|
height: 40px;
|
|
|
+ padding-left: 10px;
|
|
|
+ color: @fontDefaultColor;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon-img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: rgb(224, 239, 250, 0.8);
|
|
|
+ color: @fontColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: calc(100% - 35px);
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -204,7 +618,7 @@ export default {
|
|
|
.right-box {
|
|
|
height: 100%;
|
|
|
width: 45%;
|
|
|
- background: rgb(255, 165, 0, 0.1);
|
|
|
+ // background: rgb(255, 165, 0, 0.1);
|
|
|
.title {
|
|
|
width: 100%;
|
|
|
height: 12%;
|
|
|
@@ -225,13 +639,176 @@ export default {
|
|
|
}
|
|
|
&-infolist {
|
|
|
width: 100%;
|
|
|
- height: 10%;
|
|
|
- background: yellowgreen;
|
|
|
+ height: 15%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ &-inner {
|
|
|
+ background: #fafafa;
|
|
|
+ width: calc(96% - 5px);
|
|
|
+ height: calc(100% - 5px);
|
|
|
+ border: 1px solid rgba(240, 241, 242, 0.3);
|
|
|
+ overflow: auto;
|
|
|
+ &-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
+ .left-content {
|
|
|
+ width: 60%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ .selected-item {
|
|
|
+ color: @fontColor;
|
|
|
+ }
|
|
|
+ .icon-img {
|
|
|
+ width: 19.5px;
|
|
|
+ height: 19.5px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .close-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ right: 30px;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url("@/assets/images/auth/close.png") no-repeat center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
&-select {
|
|
|
width: 100%;
|
|
|
- height: 10%;
|
|
|
- background: burlywood;
|
|
|
+ height: 19%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ &-inner {
|
|
|
+ width: calc(96% - 5px);
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ background: #fafafa;
|
|
|
+ border: 1px solid rgba(240, 241, 242, 0.3);
|
|
|
+ overflow: auto;
|
|
|
+ .top-section {
|
|
|
+ width: 100%;
|
|
|
+ height: 30%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &-inner {
|
|
|
+ height: 100%;
|
|
|
+ width: 98%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &-title {
|
|
|
+ width: 8%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ &-select {
|
|
|
+ width: 82%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ &-button {
|
|
|
+ width: 10%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .add-user-btn {
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &-icon {
|
|
|
+ width: 30%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ background: url("@/assets/images/auth/plus-square.png")
|
|
|
+ no-repeat center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-text {
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #2ea8e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-section {
|
|
|
+ width: 100%;
|
|
|
+ height: 70%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &-extra-box {
|
|
|
+ background: #fff;
|
|
|
+ width: calc(90% - 10px);
|
|
|
+ height: calc(90% - 10px);
|
|
|
+ border: 1px solid rgba(240, 241, 242, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-footer {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 5%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &-inner {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .cancel-btn,
|
|
|
+ .confirm-btn {
|
|
|
+ width: 80px;
|
|
|
+ height: 25px;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .cancel-btn {
|
|
|
+ background: #b3b3b3;
|
|
|
+ }
|
|
|
+ .confirm-btn {
|
|
|
+ background: #2ea8e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
Bella
