Skip to content

F
founder_vue
Commit 734553c8 by maxiaohan
Options

权限管理 用户列表、用户组列表

parent 58cb3749
Showing with 720 additions and 228 deletions
src/views/SystemManage/AuthManage.vue
<template>
<el-container class="manage-page" direction="vertical">
<!--权限管理-->
<dvi class="header">
<div class="header">
<!-- 用户和用户组的切换按钮-->
<div class="btns">
<div class="btn" :class="{ active: isUser }" @click="getUser">
用户列表
......@@ -9,128 +10,413 @@
<div class="btn" :class="{ active: isGroup }" @click="getGroup">
用户组列表
</div>
<el-button @click="add">add</el-button>
<el-button @click="edit">edit</el-button>
<el-button @click="del">del</el-button>
<el-button @click="search">search</el-button>
</div> </dvi
><br />
<div class="search">
<div class="search-item">
<div class="label">用户组：</div>
<div class="input">请输入并选择</div>
</div>
<div class="search-item">
<div class="label">用户名：</div>
<div class="input">请输入并选择</div>
</div>
<div class="search-item">
<div class="label">姓名：</div>
<div class="input">请输入并选择</div>
</div>
<div class="search-item">
<div class="label">用户所属单位代码：</div>
<div class="input">请输入并选择</div>
</div>
<div class="search-item">
<div class="label">组角色：</div>
<div class="input">请输入并选择</div>
</div>
<div class="btns">
<div class="btn-clear">清空</div>
<div class="btn-search">筛选用户组</div>
</div>
</div>
<div class="main">
<div v-if="isUser" class="user">
<br />
<!-- 用户-->
<div v-if="isUser" class="user">
<!-- 用户搜索框-->
<div class="search">
<div class="search-item">
<div class="label">用户名：</div>
<el-input
class="search-info"
v-model="userSearchParams.username"
placeholder="请输入用户名"
></el-input>
</div>
<div class="search-item">
<div class="label">姓名：</div>
<el-input
class="search-info"
v-model="userSearchParams.truename"
placeholder="请输入姓名"
/>
</div>
<div class="search-item">
<div class="label">用户组：</div>
<el-input
class="search-info"
v-model="userSearchParams.groupname"
placeholder="请输入用户组名"
/>
</div>
<div class="search-item">
<div class="label">单位代码：</div>
<el-input
class="search-info"
v-model="userSearchParams.unitcode"
placeholder="请输入单位代码"
/>
</div>
<div class="search-item">
<div class="label">角色：</div>
<el-input
class="search-info"
v-model="userSearchParams.roleName"
placeholder="请输入角色"
/>
</div>
<div class="search-item">
<div class="label">权限：</div>
<el-input
class="search-info"
v-model="userSearchParams.permissionname"
placeholder="请输入权限"
></el-input>
</div>
<div class="btn" @click="searchUser">筛选用户</div>
</div>
<!-- 用户表格-->
<div class="table">
<el-table
height="720"
:height="height"
style="width: 100%;"
highlight-current-row
ref="userMultipleTable"
ref="multipleTable"
:data="userTableData"
class="table"
@selection-change="userHandleSelectionChange"
>
<el-table-column prop="date" label="用户名"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="address" label="警号"> </el-table-column
><el-table-column prop="date" label="用户组"> </el-table-column>
<el-table-column prop="name" label="所属单位"> </el-table-column>
<el-table-column prop="address" label="角色"> </el-table-column
><el-table-column prop="date" label="权限"> </el-table-column>
<el-table-column prop="name" label="启用状态"> </el-table-column>
<el-table-column prop="address" label="操作"></el-table-column>
<el-table-column prop="username" label="用户名" :width="width1">
</el-table-column>
<el-table-column prop="truename" label="姓名" :width="width1">
</el-table-column>
<el-table-column prop="policemanid" label="警号" :width="width2">
</el-table-column>
<el-table-column prop="group" label="用户组" :width="width3">
</el-table-column>
<el-table-column prop="unitname" label="所属单位" :width="width5">
</el-table-column>
<el-table-column
prop="roleName"
label="角色"
:width="width4"
show-overflow-tooltip
>
<template slot-scope="scope">
<div
class="tags"
v-for="item in scope.row.roleName &&
scope.row.roleName.split(',')"
>
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column
prop="groupid_list"
label="权限"
:width="width5"
show-overflow-tooltip
>
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.permissionname &&
scope.row.permissionname.split(',')"
>
{{ index > 0 ? "/" : "" }}
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="启用状态" :width="width1">
<template slot-scope="scope">
<div v-if="scope.row.status === '0'" class="circle-red"></div>
<div v-if="scope.row.status === '1'" class="circle-blue"></div>
{{
scope.row.status === "0"
? "停用"
: scope.row.status === "1"
? "启用"
: "无状态"
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作">
<template slot-scope="scope">
<img
style="width: 1.125rem;height: 1.125rem;margin-right: 1.125rem;cursor: pointer"
src="../../assets/img/qbryk/bj.png"
@click="userEdit(scope.row.userId)"
/>
<!-- <img-->
<!-- style="width: 1.125rem;height: 1.125rem;cursor: pointer"-->
<!-- src="../../assets/img/qbryk/del.png"-->
<!-- @click="del(scope.row.userId)"-->
<!-- />-->
</template>
</el-table-column>
</el-table>
</div>
<div v-if="isGroup" class="group">
<!-- 用户分页-->
<div class="footer">
<span class="count"
>共{{ userSearchParams.page.count }} 条记录 第{{
userSearchParams.page.page
}}/{{ userTpage }}页</span
>
<div class="page">
<el-pagination
class="paging"
background
@size-change="userHandleSizeChange"
@current-change="userHandleCurrPageChange"
:current-page="userSearchParams.page.page"
:page-size="userSearchParams.page.total"
layout="prev, pager, next"
:total="userSearchParams.page.count"
>
</el-pagination>
</div>
</div>
</div>
<!-- 用户组-->
<div v-if="isGroup" class="group">
<!-- 用户组搜索框-->
<div class="search">
<div class="search-item">
<div class="label">用户组：</div>
<el-input
v-model="groupSearchParams.groupname"
class="search-info"
placeholder="请输入用户名"
></el-input>
</div>
<div class="search-item">
<div class="label">用户名：</div>
<el-input
v-model="groupSearchParams.username"
class="search-info"
placeholder="请输入用户名"
></el-input>
</div>
<div class="search-item">
<div class="label">姓名：</div>
<el-input
v-model="groupSearchParams.truename"
class="search-info"
placeholder="请输入用户名"
></el-input>
</div>
<div class="search-item">
<div class="label">用户所属单位名称：</div>
<el-input
v-model="groupSearchParams.unitcode"
class="search-info"
placeholder="请输入单位名称"
></el-input>
</div>
<div class="search-item">
<div class="label">组角色：</div>
<el-input
v-model="groupSearchParams.rolename"
class="search-info"
placeholder="请输入角色名"
></el-input>
</div>
<div class="clear" @click="groupClear">清空</div>
<div class="btn" @click="searchGroup">筛选用户组</div>
</div>
<!-- 用户组表格-->
<div class="table">
<el-table
height="720"
:height="height"
highlight-current-row
ref="groupMultipleTable"
ref="multipleTable"
:data="groupTableData"
class="table"
@selection-change="groupHandleSelectionChange"
>
<el-table-column prop="date" label="用户组"> </el-table-column>
<el-table-column prop="name" label="组角色"> </el-table-column>
<el-table-column prop="address" label="组成员"> </el-table-column>
<el-table-column prop="date" label="启用状态"> </el-table-column>
<el-table-column prop="address" label="操作"></el-table-column>
</el-table-column>
<el-table-column prop="groupname" label="用户组" :width="groupWidths.width1">
</el-table-column>
<el-table-column
prop="rolename"
label="组角色"
:width="groupWidths.width2"
show-overflow-tooltip
>
<template slot-scope="scope">
<div
class="tags"
v-for="item in scope.row.rolename &&
scope.row.rolename.split(',')"
>
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column prop="username" label="组成员" :width="groupWidths.width3">
<template slot-scope="scope">
<div class="group-item">
<svg-icon
style="width: 1rem;height: .8125rem;margin-bottom: -0.0625rem;"
icon-class="group-item"
/>
{{ scope.row.username.split(",").length }}
</div>
<!-- <div class="set-btn">-->
<!-- 用户设置-->
<!-- </div>-->
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div
class="set-btn"
:width="groupWidths.btnwidth"
>
用户设置
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="启用状态" :width="groupWidths.width3">
<template slot-scope="scope">
<div v-if="scope.row.status === '0'" class="circle-red"></div>
<div v-if="scope.row.status === '1'" class="circle-blue"></div>
{{
scope.row.status === "0"
? "停用"
: scope.row.status === "1"
? "启用"
: "无状态"
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作">
<template slot-scope="scope">
<img
style="width: 1.125rem;height: 1.125rem;margin-right: 1.125rem;cursor: pointer"
src="../../assets/img/qbryk/bj.png"
@click="openedit(scope.row.id)"
/>
<!-- <img-->
<!-- style="width: 1.125rem;height: 1.125rem;cursor: pointer"-->
<!-- src="../../assets/img/qbryk/del.png"-->
<!-- @click="del(scope.row.id)"-->
<!-- />-->
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="footer">
<span class="count"
>共{{ reqParam.page.total }} 条记录 第{{ reqParam.page.currPage }}/{{
Tpage
}}页</span
>
<div class="page">
<el-pagination
class="paging"
background
@size-change="handleSizeChange"
@current-change="handleCurrPageChange"
:current-page="reqParam.page.currPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="reqParam.page.pageSize"
layout="prev, pager, next"
:total="reqParam.page.total"
<!-- 用户组分页-->
<div class="footer">
<span class="count"
>共{{ groupSearchParams.page.count }} 条记录 第{{
groupSearchParams.page.page
}}/{{ groupTpage }}页</span
>
</el-pagination>
<div class="page">
<el-pagination
class="paging"
background
@size-change="groupHandleSizeChange"
@current-change="groupHandleCurrPageChange"
:current-page="groupSearchParams.page.page"
:page-size="groupSearchParams.page.total"
layout="prev, pager, next"
:total="groupSearchParams.page.count"
>
</el-pagination>
</div>
</div>
</div>
</el-container>
</template>
<script>
import "@/icons/group-item.svg";
export default {
name: "AuthManage",
created() {
let w1 = 1920;
let w2 = window.innerWidth;
this.userWidths.height = (this.userWidths.height * w2) / w1;
this.userWidths.width1 = (this.userWidths.width1 * w2) / w1;
this.userWidths.width2 = (this.userWidths.width2 * w2) / w1;
this.userWidths.width3 = (this.userWidths.width3 * w2) / w1;
this.userWidths.width4 = (this.userWidths.width4 * w2) / w1;
this.userWidths.width5 = (this.userWidths.width5 * w2) / w1;
this.groupWidths.height = (this.groupWidths.height * w2) / w1;
this.groupWidths.width1 = (this.groupWidths.width1 * w2) / w1;
this.groupWidths.width2 = (this.groupWidths.width2 * w2) / w1;
this.groupWidths.width3 = (this.groupWidths.width3 * w2) / w1;
this.groupWidths.btnwidth = (this.groupWidths.btnwidth * w2) / w1;
},
data() {
return {
reqParam: {
userdesc: "",
page: {
total: 0,
pageSize: 10,
currPage: 1
}
},
isUser: false,
isGroup: false,
userTableData: [],
groupTableData: [],
// 选中user的数据
userMultipleSelection: [],
// 选中group的数据
groupMultipleSelection: []
// 用户列表的表格宽度
userWidths: {
width4: 350,
width3: 200,
width2: 100,
width5: 220,
width1: 100,
height: 480
},
// 搜索用户
userSearchParams: {
username: "",
truename: "",
unitcode: "",
roleName: "",
permissionname: "",
groupname: "",
page: {
total: 20,
count: 0,
page: 1
}
},
src: require("@/assets/img/police-badge.png"),
groupTableData: [],
// 用户组列表的表格宽度
groupWidths: {
width3: 110,
width2: 400,
width1: 200,
height: 480,
btnwidth: 200,
},
// 搜索用户组
groupSearchParams: {
groupname: "",
username: "",
userId: "",
truename: "",
unitcode: "",
roleId: "",
rolename: "",
page: {
total: 20,
count: 0,
page: 1
}
}
};
},
computed: {
// 计算总页数
Tpage() {
userTpage() {
return (
Math.floor(this.reqParam.page.total / this.reqParam.page.pageSize) + 1
Math.floor(
this.userSearchParams.page.count / this.userSearchParams.page.total
) + 1
);
},
// 计算总页数
groupTpage() {
return (
Math.floor(
this.groupSearchParams.page.count / this.groupSearchParams.page.total
) + 1
);
}
},
......@@ -138,41 +424,113 @@ export default {
getUser() {
this.isUser = true;
this.isGroup = false;
this.userClear();
this.searchUser();
},
getGroup() {
this.isUser = false;
this.isGroup = true;
this.groupClear();
this.searchGroup();
},
// 选择数据
userHandleSelectionChange(val) {
this.userMultipleSelection = val;
console.info("选择的数据", this.userMultipleSelection);
if (this.userMultipleSelection.length) {
this.isShowTip = true;
} else {
this.isShowTip = false;
}
// 用户清空
userClear() {
this.userSearchParams.roleName = "";
this.userSearchParams.groupname = "";
this.userSearchParams.truename = "";
this.userSearchParams.unitcode = "";
this.userSearchParams.page.page = 1;
this.userSearchParams.page.total = 20;
this.userSearchParams.username = "";
this.userSearchParams.permissionname = "";
this.searchUser()
},
// 选择数据
groupHandleSelectionChange(val) {
this.groupMultipleSelection = val;
console.info("选择的数据", this.groupMultipleSelection);
if (this.groupMultipleSelection.length) {
this.isShowTip = true;
} else {
this.isShowTip = false;
}
// 用户组清空
groupClear() {
this.groupSearchParams.page.page = 1; //必填
this.groupSearchParams.page.total = 20; //必填
this.groupSearchParams.groupname = "";
this.groupSearchParams.username = "";
this.groupSearchParams.truename = "";
this.groupSearchParams.unitcode = "";
this.groupSearchParams.rolename = "";
this.searchGroup()
},
// 当期页发生变化
handleCurrPageChange: function(val) {
this.reqParam.page.currPage = val;
// this.search();
// 用户当期页发生变化
userHandleCurrPageChange: function(val) {
this.userSearchParams.page.page = val;
this.searchUser();
},
// 每页展示数量发生变化
handleSizeChange: function(val) {
this.reqParam.page.pageSize = val;
// this.search();
// 用户每页展示数量发生变化
userHandleSizeChange: function(val) {
this.userSearchParams.page.total = val;
this.searchUser();
},
// 获取用户信息
searchUser() {
var user = new URLSearchParams();
user.append("username", this.userSearchParams.username);
user.append("truename", this.userSearchParams.truename);
user.append("roleName", this.userSearchParams.roleName);
user.append("unitcode", this.userSearchParams.unitcode);
user.append("permissionname", this.userSearchParams.permissionname);
user.append("groupname", this.userSearchParams.groupname);
user.append("page", this.userSearchParams.page.page);
user.append("total", this.userSearchParams.page.total);
// todo 多条件筛选
this.$axios
.post("/login/user/queryUserList", user)
.then(res => {
this.userTableData = res.data.data;
this.userSearchParams.page.total = res.data.total;
this.userSearchParams.page.page = res.data.page;
this.userSearchParams.page.count = res.data.count;
this.$message.success(res.message);
})
.catch(failResponse => {});
},
// 编辑用户权限
userEdit(id) {},
// 用户组当前页发生变化
groupHandleCurrPageChange: function(val) {
this.groupSearchParams.page.page = val;
this.searchGroup();
},
// 用户组每页展示数量发生变化
groupHandleSizeChange: function(val) {
this.groupSearchParams.page.total = val;
this.searchGroup();
},
// 获取用户组信息
searchGroup() {
console.info("用户组筛选条件=====>", this.groupSearchParams);
var usergroup = new URLSearchParams();
usergroup.append("page", this.groupSearchParams.page.page); //必填
usergroup.append("total", this.groupSearchParams.page.total); //必填
usergroup.append("groupname", this.groupSearchParams.groupname);
usergroup.append("username", this.groupSearchParams.username);
usergroup.append("truename", this.groupSearchParams.truename);
usergroup.append("unitcode", this.groupSearchParams.unitcode);
usergroup.append("rolename", this.groupSearchParams.rolename);
// todo 多条件筛选
this.$axios
.post("/login/usergroup/queryUserGroupList", usergroup)
.then(res => {
console.log(res.data);
this.groupTableData = res.data.data;
this.groupSearchParams.page.total = res.data.total;
this.groupSearchParams.page.page = res.data.page;
this.groupSearchParams.page.count = res.data.count;
this.$message.success(res.message);
})
.catch(failResponse => {});
},
groupEdit(id) {},
// 新增权限
add() {
var permission = new URLSearchParams();
permission.append("menuname", "菜单30");
......@@ -197,6 +555,7 @@ export default {
})
.catch(failResponse => {});
},
// 删除权限
del() {
var permission = new URLSearchParams();
permission.append("menuId", "888");
......@@ -208,6 +567,7 @@ export default {
})
.catch(failResponse => {});
},
// 编辑权限
edit() {
var permission = new URLSearchParams();
permission.append("menuId", "777");
......@@ -237,6 +597,7 @@ export default {
})
.catch(failResponse => {});
},
// 刷新
search() {
var permission = new URLSearchParams();
// permission.append("menuId", "要删除的权限id");
......@@ -255,6 +616,9 @@ export default {
},
mounted() {
this.isUser = true;
if (this.isUser) {
this.searchUser();
}
}
};
</script>
......
src/views/SystemManage/GroupManage.vue
......@@ -6,19 +6,6 @@
<div class="search">
<div class="search-item">
<div class="label">用户组：</div>
<!-- <el-select-->
<!-- v-model="searchParams.groupname"-->
<!-- class="search-info"-->
<!-- placeholder="请输入并选择"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in options"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<el-input
v-model="searchParams.groupname"
class="search-info"
......@@ -43,12 +30,6 @@
</div>
<div class="search-item">
<div class="label">用户所属单位名称：</div>
<!-- <el-select-->
<!-- v-model="searchParams.unitcode"-->
<!-- class="search-info"-->
<!-- placeholder="请输入并选择"-->
<!-- >-->
<!-- </el-select>-->
<el-input
v-model="searchParams.unitcode"
class="search-info"
......@@ -57,12 +38,6 @@
</div>
<div class="search-item">
<div class="label">组角色：</div>
<!-- <el-select-->
<!-- v-model="searchParams.roleId"-->
<!-- class="search-info"-->
<!-- placeholder="请输入并选择"-->
<!-- >-->
<!-- </el-select>-->
<el-input
v-model="searchParams.rolename"
class="search-info"
......
src/views/SystemManage/RoleManage.vue
......@@ -358,6 +358,7 @@ export default {
del(id) {
console.info("删除数据", id);
this.diyRoleList.splice(id, 1);
this.diyRoleItemIndex = -1;
// var sysRole = new URLSearchParams();
// sysRole.append("roleId", "16");
// this.$axios
......
src/views/SystemManage/UserManage.vue
......@@ -499,7 +499,6 @@ export default {
}
};
return {
width5: 180,
width4: 350,
width3: 200,
width2: 100,
......
src/views/SystemManage/scss/auth.scss
......@@ -6,6 +6,7 @@
div {
display: inline-block;
}
//用户和用户组切换按钮
.header{
width:100%;
.btns{
......@@ -28,113 +29,265 @@
}
}
}
.search{
width:100%;
height:58px;
border-bottom: 1px solid #EEEEEE;
padding-top: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
.search-item{
width: auto;
margin-right: 17px;
.label{
// 用户
.user{
width: 100%;
height: 870px;
.search {
width: 100%;
height: 50px;
.search-item {
width: auto;
height: 22px;
font-size: 14px;
color: #333333;
line-height: 22px;
margin-right: 5px;
height: 32px;
margin: 5px 16px 5px 0;
.label {
width: auto;
height: 32px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 32px;
margin: 8px;
}
.search-info {
width: 155px;
height: 32px;
background: #ffffff;
border-radius: 4px;
//border: 1px solid #e6e6e8;
//margin-top: 8px;
}
}
.input{
width: 156px;
.btn {
position:absolute;
top: 125px;
right: 24px;
width: 95px;
height: 32px;
background: #FFFFFF;
background: #055fe7;
border-radius: 4px;
border: 1px solid #E6E6E8;
line-height: 32px;
color: #ffffff;
font-size: 14px;
text-align: center;
cursor: pointer;
}
}
.btns{
width: 180px;
.table{
height: 750px;
width: 100%;
margin-top: 10px;
.tags{
width: 100px;
height: 24px;
background: #F0F3F6;
border-radius: 4px;
text-align: center;
margin-right: 3px;
}
.circle-red{
width: 8px; height: 8px; background-color:#FE0000; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
}
.circle-blue{
width: 8px; height: 8px; background-color:#055FE7; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
}
}
.footer {
width: 1544px;
//width: calc(100vw - 367px);
position: absolute;
right: 24px;
text-align: center;
.btn-clear{
width: 50px;
height: 23px;
bottom: 27px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.count {
font-size: 14px;
color: #055FE7;
line-height: 23px;
cursor: pointer;
font-family: MicrosoftYaHei;
color: #666666;
}
.paging {
float: right;
}
/deep/.el-pager {
.number {
background-color: transparent;
}
.number.active {
background-color: #055fe7 !important;
box-shadow: 0px 12px 16px 1px rgba(0, 21, 51, 0.03);
border-radius: 6px;
}
.el-icon.more.btn-quicknext.el-icon-more,
.el-icon.more.btn-quickprev.el-icon-more {
background-color: transparent !important;
}
}
/deep/ .btn-prev,
/deep/ .btn-next {
background-color: transparent !important;
}
/deep/ .el-pagination__sizes {
position: absolute;
right: 0;
}
.btn-search{
width: 110px;
/deep/ .btn-next {
//margin-right: 120px !important;
}
}
}
// 用户组
.group{
width: 100%;
height: 870px;
.search {
width: 100%;
height: 50px;
.search-item {
width: auto;
height: 32px;
margin: 5px 16px 5px 0;
.label {
width: auto;
height: 32px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 32px;
margin: 8px;
}
.search-info {
width: 155px;
height: 32px;
background: #ffffff;
border-radius: 4px;
//border: 1px solid #e6e6e8;
//margin-top: 8px;
}
}
.clear{
width: 38px;
border: none;
height: 22px;
padding: 0;
margin: 0 12px 0 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 32px;
background: #055FE7;
font-weight: 350;
color: #333333;
text-align: center;
position:absolute;
top: 130px;
right: 124px;
cursor: pointer;
&:hover {
color: #055fe7;
}
&:active {
color: #055fe7;
}
}
.btn {
position:absolute;
top: 125px;
right: 24px;
width: 95px;
height: 32px;
background: #055fe7;
border-radius: 4px;
margin-left: 10px;
line-height: 32px;
color: #ffffff;
font-size: 14px;
text-align: center;
cursor: pointer;
}
}
}
.main{
.user{
width: 1550px;
height:700px;
}
.group{
.table{
height: 750px;
width: 100%;
height: 700px;
}
}
.footer {
width: 1544px;
//width: calc(100vw - 367px);
position: absolute;
bottom: 27px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.count {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
}
.paging {
float: right;
}
/deep/.el-pager {
.number {
background-color: transparent;
margin-top: 10px;
.tags{
width: 100px;
height: 24px;
background: #F0F3F6;
border-radius: 4px;
text-align: center;
margin-right: 3px;
}
.number.active {
background-color: #055fe7 !important;
box-shadow: 0px 12px 16px 1px rgba(0, 21, 51, 0.03);
border-radius: 6px;
.circle-red{
width: 8px; height: 8px; background-color:#FE0000; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
}
.el-icon.more.btn-quicknext.el-icon-more,
.el-icon.more.btn-quickprev.el-icon-more {
background-color: transparent !important;
.circle-blue{
width: 8px; height: 8px; background-color:#055FE7; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
}
.group-item{
width: 70px;
height: 24px;
background: #F0F3F6;
border-radius: 12px;
font-size: 16px;
font-weight: bold;
color: #282F3C;
line-height: 24px;
text-align: center;
margin-right: 12px;
}
.set-btn{
width: 56px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #055FE7;
line-height: 22px;
cursor: pointer;
//position: absolute;
//right: 100px;
}
}
/deep/ .btn-prev,
/deep/ .btn-next {
background-color: transparent !important;
}
/deep/ .el-pagination__sizes {
.footer {
width: 1544px;
//width: calc(100vw - 367px);
position: absolute;
right: 0;
}
/deep/ .btn-next {
//margin-right: 120px !important;
bottom: 27px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.count {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
}
.paging {
float: right;
}
/deep/.el-pager {
.number {
background-color: transparent;
}
.number.active {
background-color: #055fe7 !important;
box-shadow: 0px 12px 16px 1px rgba(0, 21, 51, 0.03);
border-radius: 6px;
}
.el-icon.more.btn-quicknext.el-icon-more,
.el-icon.more.btn-quickprev.el-icon-more {
background-color: transparent !important;
}
}
/deep/ .btn-prev,
/deep/ .btn-next {
background-color: transparent !important;
}
/deep/ .el-pagination__sizes {
position: absolute;
right: 0;
}
/deep/ .btn-next {
//margin-right: 120px !important;
}
}
}
//表格表头样式
/deep/.el-table th,
.el-table tr {
......
src/views/SystemManage/scss/role.scss
......@@ -81,9 +81,8 @@
//border: saddlebrown 1px solid;
width: 215px;
height: 366px;
display: flex;
flex-direction: column;
padding-top: 10px;
//display: flex;
//flex-direction: column;
overflow:scroll;
.diy-role-item{
width: 190px;
......@@ -93,7 +92,8 @@
font-size: 14px;
color: #333333;
line-height: 40px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: -22px;
cursor: pointer;
overflow: hidden;
&.active{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment