Skip to content

F
founder_vue
Commit fae106a3 by 张超军
Options

Merge branch 'dev_zwpt' of http://47.92.108.28/changchao/founder_vue into dev_zwpt

parents 72f3cebe 0afcdc14
Showing with 343 additions and 72 deletions
src/views/SystemManage/GroupManage.vue
......@@ -106,24 +106,38 @@
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="roleNames"
label="组角色"
:width="newWidth"
show-overflow-tooltip
>
<el-table-column prop="roleNames" label="组角色" :width="newWidth">
<template slot-scope="scope">
<div
class="tags"
v-for="item in scope.row.roleNames &&
scope.row.roleNames.split(',')"
:key="item"
>
{{ item }}
<div class="tagsBox">
<div
class="tags"
v-for="item in strArr(scope.row.roleNames).arr"
:key="item"
>
{{ item }}
</div>
<el-tooltip
class="item"
effect="dark"
placement="right"
style="width: auto !important"
v-if="strArr(scope.row.roleNames).length > 3"
>
<span style="margin-left: 5px">...</span>
<div slot="content" class="tooTipBtn">
<div
v-for="item in scope.row.roleNames &&
scope.row.roleNames.split(',')"
:key="item"
>
{{ item }}
</div>
</div>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column width="200">
<el-table-column :width="width1">
<template slot-scope="scope">
<div class="set-btn" @click="setRole(scope.row)">角色设置</div>
</template>
......@@ -159,7 +173,7 @@
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作" width="150">
<el-table-column prop="active" label="操作" :width="width4">
<template slot-scope="scope">
<div @click="offMultiple()">
<Confirmation content="编辑用户">
......@@ -366,43 +380,86 @@
</div>
<div class="info">
<div class="header">
<img src="@/assets/img/person.png" alt="" />
<div>组角色</div>
<div class="delbtn">
<img src="@/assets/img/del.png" alt="" />
<span>删除</span>
</div>
</div>
<div class="default-role-group">
<div
class="default-btn"
v-for="item in checkItem.roleNames &&
checkItem.roleNames.split(',')"
:key="item"
:title="item"
>
<span>{{ item }}</span>
<div class="triangle">
<i class="el-icon-close"></i>
<div class="infor_card">
<div>
<div class="label">系统角色</div>
<div class="content">
<div
class="contentItem"
v-for="item in checkItem.roleNames &&
checkItem.roleNames.split(',')"
:key="item"
:title="item"
>
<img src="@/assets/img/jianhao.png" alt="" />
<p>{{ item || 1 }}</p>
</div>
</div>
</div>
<div>
<div class="label">自定义角色：</div>
<div class="content">
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
<div class="add-btn">
<i class="el-icon-plus"></i>
添加完成
<div class="header">
<img src="@/assets/img/person.png" alt="" />
<div>可添加角色</div>
</div>
<div class="add-role-group">
<div
class="default-btn"
v-for="item in userArr"
:key="item.id"
:title="item.name"
>
<span>{{ item.name }}</span>
<img src="@/assets/img/jiahao.png" alt="" />
</div>
<div class="default-btn custom">
<span>高级认定员</span>
<img src="@/assets/img/jiahao.png" alt="" />
<div class="default-role-group">
<div class="infor_card danlan">
<div>
<div class="label">系统角色</div>
<div class="content">
<div class="contentItem" v-for="item in userArr" :key="item.id">
<img src="@/assets/img/jiahao.png" alt="" />
<p>{{ item.name }}</p>
</div>
</div>
</div>
<div>
<div class="label">自定义角色：</div>
<div class="content">
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
<div class="contentItem">
<img src="@/assets/img/jianhao.png" alt="" />
<p>指纹入库员</p>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -520,6 +577,7 @@ export default {
this.width1 = (this.width1 * w2) / w1;
this.width2 = (this.width2 * w2) / w1;
this.width3 = (this.width3 * w2) / w1;
this.width4 = (this.width4 * w2) / w1;
this.width5 = (this.width5 * w2) / w1;
this.btnwidth = (this.btnwidth * w2) / w1;
},
......@@ -561,6 +619,7 @@ export default {
width3: 90,
width2: 400,
width1: 200,
width4: 150,
height: 550,
btnwidth: 200,
title: { roletitle: "角色设置", usertitle: "用户设置", unitname: "" },
......@@ -676,12 +735,12 @@ export default {
map.forEach((i) => {
if (i.length > num) num = i.length;
});
if (num > 3) num = 3;
// if (num > 3) num = 3;
console.log(num, 22222222222);
if (num == 3) {
width = 3 * 175;
} else {
width = 155 * num;
if (num <= 3) {
width = num * 150;
} else if (num > 3) {
width = 460;
}
width = (width * w2) / w1;
return width;
......@@ -715,6 +774,20 @@ export default {
this.searchParams.rolename = "";
this.search();
},
strArr(str) {
let arr = str.split(",");
let newArr = [];
if (arr.length > 3) {
newArr = arr.slice(0, 3);
} else {
newArr = arr;
}
let obj = {
arr: newArr,
length: arr.length,
};
return obj;
},
// 清除所有选项
toggleSelection(rows) {
if (rows) {
......
src/views/SystemManage/UserPermission.vue
<template>
<el-container class="manage-page" direction="vertical">
<!-- 0停用 1启用-->
<div class="header" :class="{ down: status === '0', up: status === '1' }">
<div class="title" :class="{ down: status === '0', up: status === '1' }">
<div class="title-status">
<div
class="header"
:class="{
down: status === '0',
up: status === '1' || status === '2',
danlu: status === '3',
}"
>
<div
class="title"
:class="{
down: status === '0',
up: status === '1' || status === '2',
green: status === '3',
}"
>
<div
:class="{
'title-status': true,
textRed: status == '0',
textBlue: status == '1' || status == '2',
textGreen: status == '3',
}"
>
<div v-if="status === '0'" class="circle-red"></div>
<div v-if="status === '1'" class="circle-blue"></div>
{{ status === "0" ? "停用" : status === "1" ? "启用" : "无状态" }}
<div
v-if="status === '1' || status === '2'"
class="circle-blue"
></div>
<div v-if="status === '3'" class="circle-green"></div>
{{ status === "0" ? "停用" : "启用" }}
</div>
</div>
<div class="info">
......@@ -70,7 +95,9 @@
<div class="role-info">
<!-- 角色权限菜单列-->
<div class="menus">
<div class="div3">
<div
:class="{ div3: true, danlan: status === '2' || status === '3' }"
>
<el-checkbox v-model="roleMenus[0].flag">
{{ roleMenus[0].name }}
</el-checkbox>
......@@ -81,7 +108,7 @@
{{ roleMenus[2].name }}
</el-checkbox>
</div>
<div class="div3">
<div :class="{ div3: true, danhuang: status === '3' }">
<el-checkbox v-model="roleMenus[3].flag">
{{ roleMenus[3].name }}
</el-checkbox>
......@@ -113,7 +140,9 @@
</div>
</div>
<div class="content">
<div class="div3">
<div
:class="{ div3: true, danlan: status === '2' || status === '3' }"
>
<div
class="line"
v-for="item in printCollectMenus"
......@@ -133,8 +162,11 @@
>
<el-checkbox v-model="item.flag"> {{ item.name }}</el-checkbox>
</div>
<p class="userText" v-if="status == '2' || status == '3'">
<span>用户权限</span>
</p>
</div>
<div class="div3">
<div :class="{ div3: true, danhuang: status === '3' }">
<div
class="line"
v-for="item in comprehensiveMenus"
......@@ -142,6 +174,9 @@
>
<el-checkbox v-model="item.flag"> {{ item.name }}</el-checkbox>
</div>
<p class="groupText" v-if="status == '3'">
<span>用户组权限</span>
</p>
</div>
<div class="div1">
<div class="line" v-for="item in seniorMenus" :key="item.code">
......@@ -198,7 +233,8 @@ export default {
return {
id: "",
rolename: "",
status: "1",
//0 停用 1 无角色无用户组 2有角色无用户组 3有角色有用户组
status: "2",
userData: {},
funFlag: false,
dataFlag: false,
......
src/views/SystemManage/scss/group.scss
.tooTipBtn {
padding: 10px;
> div{
width: 100px;
height: 24px;
background: #5E5E5E;
border-radius: 4px;
text-align: center;
margin-bottom: 15px;
line-height: 24px;
&:last-of-type{
margin-bottom: 0;
}
}
}
.manage-page {
width: 100%;
padding: 24px;
font-family: MicrosoftYaHei;
div {
display: inline-block;
}
......@@ -126,10 +142,18 @@
}
}
}
.table-data {
height: 580px;
width: 100%;
.tagsBox {
display: flex;
.el-tooltip {
width: auto !important;
}
}
.tags {
flex-shrink: 0;
width: 140px;
height: 24px;
background: #f0f3f6;
......@@ -502,9 +526,9 @@
//border: 1px solid darkblue;
position: absolute;
right: 24px;
.addBtn{
border-color: #055fe7!important;
color: #055fe7!important;
.addBtn {
border-color: #055fe7 !important;
color: #055fe7 !important;
}
.btn {
width: 96px;
......@@ -592,8 +616,9 @@
.roleDialog {
box-sizing: border-box;
position: absolute;
top: calc(50% - 257px);
left: calc(50% - 471.5px);
top: 50%;
left: 50%;
transform: translateX(-60%) translateY(-55%);
z-index: 1000;
width: 626px;
padding-bottom: 20px;
......@@ -632,22 +657,97 @@
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: flex-start;
margin-bottom: 10px;
align-items: center;
&::before {
content: "";
display: inline-block;
width: 4px;
height: 16px;
background-color: #055fe7;
border-radius: 2px;
margin-right: 10px;
}
> img {
width: 12px;
height: 14px;
margin-right: 5px;
}
}
//border: saddlebrown 1px solid;
.default-role-group {
width: 578px;
max-height: 125px;
overflow: 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;
padding: 0 0 10px 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.line {
height: 1px;
width: 100%;
background: #eeeeee;
margin: 15px 0;
}
.danlan {
background-color: #f7f9fb;
padding: 10px 0;
}
.infor_card {
width: 100%;
display: flex;
flex-flow: column;
> div {
width: 100%;
.label {
color: #666666;
vertical-align: top;
margin-top: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
padding: 0 10px;
width: 105px;
box-sizing: border-box;
}
.content {
// display: inline-table;
width: calc(100% - 105px);
max-height: 140px !important;
overflow: auto;
.contentItem {
width: calc((100% - 75px) / 3);
height: 32px;
background: #f6f8fa;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #ffffff;
border-radius: 4px;
position: relative;
text-align: center;
margin-right: 25px;
margin-bottom: 5px;
margin-top: 7px;
> p {
line-height: 32px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding: 0 10px;
}
> img {
position: absolute;
top: -6px;
right: -6px;
}
}
}
&:first-of-type {
margin-bottom: 10px;
}
}
}
.default-btn {
position: relative;
margin: 5px 0;
......
src/views/SystemManage/scss/userpermission.scss
......@@ -3,6 +3,52 @@
padding: 24px;
padding-top: 12px;
font-family: MicrosoftYaHei;
.danlan {
background-color: #f5f9fe;
}
.danhuang{
background-color: #FFFBF0;
position: relative;
}
.textGreen{
color: #00AA73;
}
.textRed{
color: #fe0000;
}
.textBlue{
color: #055FE7;
}
.groupText{
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 32px;
font-size: 16px;
font-weight: normal;
text-align: center;
box-shadow: 1px -1px 1px 0px rgba(247, 199, 116, 0.6);
background: #FFFCF4;
border-radius: 0px 0px 0px 15px;
color: #FF9400;
border: 1px solid #F7C774;
}
.userText {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 32px;
box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.5), 1px -1px 1px 0px rgba(5, 95, 231, 0.28);
background: #f5f9fe;
border-radius: 0px 12px 0px 15px;
font-size: 16px;
font-weight: normal;
color: #055fe7;
border: 1px solid #055fe7;
text-align: center;
}
div {
display: inline-block;
}
......@@ -19,11 +65,14 @@
&.up {
background: #f2f7fe;
}
&.danlu {
background-color: #e9f9f4;
}
.title {
width: 96px;
height: 96px;
border-radius: 16px;
transform: rotate(40deg);
transform: translateX(-20px) rotate(40deg);
position: relative;
left: -23px;
top: -17px;
......@@ -33,11 +82,14 @@
&.up {
background: #ddebff;
}
&.green {
background-color: #C7EFE2;
}
.title-status {
position: relative;
top: 28px;
left: 30px;
transform: rotate(-40deg);
transform: translateX(15px) translateY(-10px) rotate(-40deg);
.circle-red {
width: 8px;
height: 8px;
......@@ -56,6 +108,15 @@
-webkit-border-radius: 50%;
z-index: 100;
}
.circle-green {
width: 8px;
height: 8px;
background-color: #00b47a;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
z-index: 100;
}
}
}
.info {
......@@ -231,6 +292,7 @@
.content {
width: 100%;
.div3 {
position: relative;
width: 100%;
height: 117px;
border-bottom: 1px solid #eeeeee;
......
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