Skip to content

F
founder_vue
Commit 7b275455 by maxiaohan
Options

用户组管理 

样式调整
角色设置和用户设置
parent 5a2faa21
Showing with 537 additions and 42 deletions
src/views/SystemManage/GroupManage.vue
......@@ -42,7 +42,7 @@
></el-input>
</div>
<div class="search-item">
<div class="label">用户所属单位代码：</div>
<div class="label">用户所属单位名称：</div>
<!-- <el-select-->
<!-- v-model="searchParams.unitcode"-->
<!-- class="search-info"-->
......@@ -52,7 +52,7 @@
<el-input
v-model="searchParams.unitcode"
class="search-info"
placeholder="请输入单位代码"
placeholder="请输入单位名称"
></el-input>
</div>
<div class="search-item">
......@@ -130,9 +130,11 @@
</template>
</el-table-column>
<el-table-column :width="btnwidth">
<div class="set-btn" @click="setRole">
角色设置
</div>
<template slot-scope="scope">
<div class="set-btn" @click="setRole(scope.row)">
角色设置
</div>
</template>
</el-table-column>
<el-table-column prop="username" label="组成员" :width="width3">
<template slot-scope="scope">
......@@ -149,9 +151,11 @@
</template>
</el-table-column>
<el-table-column>
<div class="set-btn" :width="btnwidth" @click="setUser">
用户设置
</div>
<template slot-scope="scope">
<div class="set-btn" :width="btnwidth" @click="setUser(scope.row)">
用户设置
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="启用状态" :width="width3">
<template slot-scope="scope">
......@@ -340,31 +344,127 @@
</div>
</div>
<!-- 角色设置 -->
<el-dialog
class="dialog"
:title="title.roletitle"
:visible.sync="visible.setRoleVisible"
>
<div slot="title">
<img class="title-img" :src="src" alt="" />
<span>{{ title.roletitle }}</span>
<div
class="roleDialogBg"
v-show="isShowRoleDialogBg"
@click="cancelrole"
></div>
<div class="roleDialog" v-show="isShowRoleDialog">
<div class="head-title">
<div class="left">
<img class="title-img" :src="src" alt="" />
{{ title.unitname }}
</div>
<div class="close" @click="cancelrole">
<img src="@/assets/img/manage/close.png" alt="" />
</div>
</div>
</el-dialog>
<div class="info">
<div class="header">
<div>
组角色
</div>
<div>
完成
</div>
</div>
<div class="default-role-group">
<div class="default-btn">指纹入库员</div>
<div class="default-btn">综合认定员</div>
<div class="default-btn">高级认定员</div>
</div>
<div class="add-btn">添加完成</div>
<div class="add-role-group">
<div class="default-btn">指纹入库员</div>
<div class="default-btn">综合认定员</div>
<div class="default-btn">高级认定员</div>
<div class="default-btn">指纹入库员</div>
<div class="default-btn">综合认定员</div>
<div class="default-btn">高级认定员</div>
</div>
</div>
<div class="addbtns">
<div class="btn1">保存</div>
<div class="btn2" @click="cancelrole">取消</div>
</div>
</div>
<!-- 用户设置 -->
<el-dialog
class="dialog"
:title="title.usertitle"
:visible.sync="visible.setUserVisible"
>
<div slot="title">
<img class="title-img" :src="src" alt="" />
<span>{{ title.usertitle }}</span>
<div
class="userDialogBg"
v-show="isShowUserDialogBg"
@click="canceluser"
></div>
<div class="userDialog" v-show="isShowUserDialog">
<div class="head-title">
<div class="left">
<img class="title-img" :src="src" alt="" />
{{ title.unitname }}
</div>
<div class="close" @click="canceluser">
<img src="@/assets/img/manage/close.png" alt="" />
</div>
</div>
<div class="user-dialog">
<div class="header">1</div>
<div class="user-table">2</div>
<div class="info">
<div class="header">
<div class="btn" @click="userBatch">批量操作</div>
<div class="btn-right">
<el-checkbox v-model="userStatus" @click="handleCheckChange"
>停用</el-checkbox
>
<div class="btn" @click="delUserDatas">删除</div>
<div class="btn" @click="addUserDatas">
<svg-icon
style="width: .8125rem;height: .8125rem;margin-bottom: -0.0625rem;margin-right: -.25rem"
icon-class="ic_add"
/>
添加组成员
</div>
</div>
</div>
<el-tag class="tag" v-show="isShowUserTip">
<i class="el-icon-info" style="color:#055FE7;font-size:.9375rem"></i>
已选择
<span style="color:#055FE7">{{ userMultipleSelection.length }}</span>
项​
<span v-html="'&nbsp;&nbsp;'"></span>
​服务调用总计:<span v-html="'&nbsp;&nbsp;'"></span>36.4万
<el-link
type="primary"
:underline="false"
style="margin-left: 1.25rem"
@click="toggleUserSelection()"
>清除</el-link
>
</el-tag>
<div class="user-table">
<el-table
ref="userMultipleTable"
highlight-current-row
:data="userTableData"
@selection-change="userHandleSelectionChange"
>
<el-table-column
type="selection"
height
width="auto"
v-if="isUserSelected"
>
</el-table-column>
<el-table-column prop="username" label="用户名"> </el-table-column>
<el-table-column prop="truename" label="姓名"> </el-table-column>
<el-table-column prop="policemanid" label="警号"> </el-table-column>
<el-table-column prop="group" label="用户组"> </el-table-column>
<el-table-column prop="unitname" label="所属单位">
</el-table-column>
</el-table>
</div>
</div>
<div class="addbtns">
<div class="btn1">确认</div>
<div class="btn2" @click="canceluser">取消</div>
</div>
</el-dialog>
</div>
</el-container>
</template>
......@@ -422,8 +522,8 @@ export default {
width2: 400,
width1: 200,
height: 565,
btnwidth: 150,
title: { roletitle: "角色设置", usertitle: "用户设置" },
btnwidth: 200,
title: { roletitle: "角色设置", usertitle: "用户设置", unitname: "" },
visible: { setRoleVisible: false, setUserVisible: false },
src: require("@/assets/img/police-badge.png"),
// 选中数据
......@@ -493,7 +593,18 @@ export default {
{ validator: validateRoleId, trigger: "blur", required: true }
], //角色ID
status: [{ validator: validateStatus, trigger: "blur", required: true }] // 启用状态
}
},
// 用户设置
userStatus: false, // 是否停用
userTableData: [], // 用户设置 table数据
userMultipleSelection: [], // 用户设置 选中的用户
isShowUserTip: false, // 用户设置 是否清空选项
allUserList: [], // 用户设置 全部用户
isUserSelected: false, // 用户设置 批量操作
isShowUserDialogBg: false, // 用户设置 背景
isShowUserDialog: false, // 用户设置 弹窗
isShowRoleDialogBg: false, // 角色设置 背景
isShowRoleDialog: false // 角色设置 弹窗
};
},
computed: {
......@@ -528,7 +639,7 @@ export default {
}
console.log(this.multipleSelection);
},
// 选择数据
// 选择用户组数据
handleSelectionChange(val) {
this.multipleSelection = val;
console.info(this.multipleSelection);
......@@ -538,9 +649,48 @@ export default {
this.isShowTip = false;
}
},
// 用户设置的清除所有选项
toggleUserSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.userMultipleTable.toggleRowSelection(row);
});
} else {
this.$refs.userMultipleTable.clearSelection();
}
console.log(this.userMultipleSelection);
},
// 用户设置的选择用户数据
userHandleSelectionChange(val) {
this.userMultipleSelection = val;
console.info(this.userMultipleSelection);
if (this.userMultipleSelection.length) {
this.isShowUserTip = true;
} else {
this.isShowUserTip = false;
}
},
// 用户设置 批量操作
userBatch() {
this.isUserSelected = !this.isUserSelected;
this.toggleUserSelection();
},
// 用户设置 是否可用
handleCheckChange() {
// if(this.userStatus === true){
//
// }
// if (this.userStatus=== false)
console.info(this.userStatus);
},
// 用户设置 删除用户
delUserDatas() {},
// 用户设置 新增用户
addUserDatas() {},
//是否是批量操作
batch() {
this.isSelected = !this.isSelected;
this.toggleSelection();
},
// 当期页发生变化
handleCurrPageChange: function(val) {
......@@ -595,15 +745,30 @@ export default {
this.isShowEditGroupDialog = false;
this.isShowEditGroupDialogBg = false;
},
// 关闭角色设置弹窗
cancelrole() {
this.isShowRoleDialog = false;
this.isShowRoleDialogBg = false;
},
// 关闭用户设置弹窗
canceluser() {
this.isShowUserDialog = false;
this.isShowUserDialogBg = false;
},
// 打开用户设置弹窗
setUser() {
this.visible.setUserVisible = true;
setUser(row) {
// this.visible.setUserVisible = true;
this.isShowUserDialog = true;
this.isShowUserDialogBg = true;
this.title.unitname = row.groupname;
},
// 打开角色弹窗
setRole() {
this.visible.setRoleVisible = true;
setRole(row) {
// this.visible.setRoleVisible = true;
this.isShowRoleDialog = true;
this.isShowRoleDialogBg = true;
this.title.unitname = row.groupname;
},
// 新增用户组
submitForm(formName) {
this.$refs.addFormParams.validate(valid => {
......
src/views/SystemManage/UserManage.vue
......@@ -788,6 +788,7 @@ export default {
//是否是批量操作
batch() {
this.isSelected = !this.isSelected;
this.toggleSelection();
},
// 当期页发生变化
handleCurrPageChange: function(val) {
......
src/views/SystemManage/scss/group.scss
......@@ -15,7 +15,7 @@
line-height: 24px;
}
.clear-btn {
width: 28px;
width: 38px;
border: none;
height: 22px;
padding: 0;
......@@ -243,10 +243,56 @@
.user-dialog{
.header{
//border: saddlebrown 1px solid;
width: 823px;
height: 40px;
width: 780px;
height: 45px;
padding: 0;
.btn{
width: 96px;
height: 32px;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
color: #2E3846;
text-align: center;
cursor: pointer;
}
.btn-right{
//border: 1px solid darkblue;
position: absolute;
right: 24px;
.btn{
width: 96px;
height: 32px;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
color: #2E3846;
line-height: 32px;
text-align: center;
margin-left: 15px;
}
}
// 未选中字体颜色
/deep/ .el-checkbox {
font-size: 14px;
color: #333333;
font-weight: 400;
}
/deep/ .el-checkbox__input .el-checkbox__inner:hover {
border-color: #055fe7;
}
// 选中样式
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
font-size: 14px;
font-weight: 400;
color: #333333;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
background: #055fe7;
border-color: #055fe7;
}
}
.user-table{}
}
}
/deep/ .el-dialog{
......@@ -355,4 +401,285 @@
cursor:pointer;
}
}
}
// 用户设置
.userDialogBg{
position: absolute;
top: 0;
left: 0;
z-index: 500;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
filter: blur(2px);
}
.userDialog{
box-sizing: border-box;
position: absolute;
top: calc(50% - 257px);
left: calc(50% - 471.5px);
z-index: 1000;
width: 890px;
height: 540px;
background: #ffffff;
box-shadow: 0px 14px 30px 0px rgba(0, 21, 51, 0.25);
border-radius: 6px;
.head-title {
box-sizing: border-box;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 14px 32px;
border-bottom:1px solid #EEEEEE ;
.left {
font-size: 16px;
color: #282f3c;
.title-img{
width: 21px;
height: 21px;
margin-right:8px;
}
}
.close {
cursor: pointer;
width: 13px;
height: 13px;
img {
object-fit: contain;
}
}
}
.info{
padding: 12px 24px 12px 24px;
.header{
width: 780px;
height: 45px;
padding: 0;
.btn{
width: 96px;
height: 32px;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
color: #2E3846;
text-align: center;
cursor: pointer;
}
.btn-right{
//border: 1px solid darkblue;
position: absolute;
right: 24px;
.btn{
width: 96px;
height: 32px;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
color: #2E3846;
line-height: 32px;
text-align: center;
margin-left: 15px;
}
}
// 未选中字体颜色
/deep/ .el-checkbox {
font-size: 14px;
color: #333333;
font-weight: 400;
}
/deep/ .el-checkbox__input .el-checkbox__inner:hover {
border-color: #055fe7;
}
// 选中样式
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
font-size: 14px;
font-weight: 400;
color: #333333;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
background: #055fe7;
border-color: #055fe7;
}
}
.tag{
width:100%;color:#666666;margin-bottom:1rem
}
.user-table{
width: 100%;
}
}
.addbtns{
width: 100%;
text-align: center;
.btn1{
width: 72px;
height: 40px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
color: #2E3846;
line-height: 40px;
margin-right: 15px;
cursor: pointer;
}
.btn2{
width: 72px;
height: 40px;
background: #055FE7;
border-radius: 4px;
font-size: 14px;
color: #FFFFFF;
line-height: 40px;
cursor: pointer;
}
}
}
// 角色设置 背景
.roleDialogBg{
position: absolute;
top: 0;
left: 0;
z-index: 500;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
filter: blur(2px);
}
.roleDialog{
box-sizing: border-box;
position: absolute;
top: calc(50% - 257px);
left: calc(50% - 471.5px);
z-index: 1000;
width: 626px;
height: 440px;
background: #ffffff;
box-shadow: 0px 14px 30px 0px rgba(0, 21, 51, 0.25);
border-radius: 6px;
.head-title {
box-sizing: border-box;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 14px 32px;
border-bottom:1px solid #EEEEEE ;
.left {
font-size: 16px;
color: #282f3c;
.title-img{
width: 21px;
height: 21px;
margin-right:8px;
}
}
.close {
cursor: pointer;
width: 13px;
height: 13px;
img {
object-fit: contain;
}
}
}
.info{
padding: 24px;
.header{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom:10px
}
//border: saddlebrown 1px solid;
.default-role-group{
width: 578px;
height: auto;
background: #FDFEFF;
box-shadow: 1px 0px 3px 0px rgba(5, 95, 231, 0.3), -1px 1px 3px 0px rgba(5, 95, 231, 0.24);
border-radius: 4px;
padding: 16px;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap:wrap;
.default-btn{
width: 160px;
height: 32px;
background: #F6F8FA;
border-radius: 4px;
font-size: 14px;
color: #333333;
line-height:32px;
text-align: center;
margin-right: 16px;
}
}
.add-btn{
width: 80px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #055FE7;
line-height: 22px;
margin: 16px 0 16px 0;
}
.add-role-group{
width: 578px;
height: 111px;
background: #F6F8FA;
box-shadow: 1px 0px 3px 0px rgba(5, 95, 231, 0.3), -1px 1px 3px 0px rgba(5, 95, 231, 0.24);
border-radius: 4px;
padding: 16px;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap:wrap;
.default-btn{
width: 160px;
height: 32px;
background: #F6F8FA;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #FFFFFF;
border-radius: 4px;
font-size: 14px;
color: #333333;
line-height:32px;
text-align: center;
margin-right: 16px;
}
}
}
.addbtns{
width: 100%;
text-align: center;
.btn1{
width: 72px;
height: 40px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
color: #2E3846;
line-height: 40px;
cursor: pointer;
margin-right: 15px;
}
.btn2{
width: 72px;
height: 40px;
background: #055FE7;
border-radius: 4px;
font-size: 14px;
color: #FFFFFF;
line-height: 40px;
cursor: pointer;
}
}
}
\ No newline at end of file
src/views/cxyrd/QueryConfirm.vue
......@@ -958,6 +958,7 @@ export default {
// 批量操作
batch() {
this.isSelected = !this.isSelected;
this.toggleSelection();
},
/**
* @description: 清除所有选项
......
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