Skip to content

F
founder_vue
Commit 0d8a0f98 by liyuhang19990520
Options

用户用户组适配

parent fae106a3
Showing with 363 additions and 89 deletions
src/views/SystemManage/GroupManage.vue
......@@ -173,7 +173,7 @@
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作" :width="width4">
<el-table-column prop="active" label="操作" width="auto">
<template slot-scope="scope">
<div @click="offMultiple()">
<Confirmation content="编辑用户">
......
src/views/SystemManage/PermissionManage.vue
......@@ -90,34 +90,57 @@
<el-table-column
prop="policeNumber"
label="警号"
show-overflow-tooltip
:width="userWidths.width2"
>
</el-table-column>
<el-table-column
prop="userGroupNames"
label="用户组"
show-overflow-tooltip
:width="userWidths.width3"
>
</el-table-column>
<el-table-column
prop="unitName"
label="所属单位"
:width="userWidths.width5"
show-overflow-tooltip
:width="userWidths.width3"
>
</el-table-column>
<el-table-column
prop="roleNames"
label="角色"
:width="userWidths.width4"
:width="newWidth"
show-overflow-tooltip
>
<template slot-scope="scope">
<div
class="tags"
v-for="item in scope.row.roleNames &&
scope.row.roleNames.split(',')"
>
{{ 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>
......@@ -131,13 +154,19 @@
<div
v-for="(item, index) in scope.row.permissionNames &&
scope.row.permissionNames.split(',')"
:key="index"
>
{{ index > 0 ? "/" : "" }}
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="启用状态" width="110">
<el-table-column
prop="status"
label="启用状态"
width="auto"
align="center"
>
<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>
......@@ -150,7 +179,11 @@
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作">
<el-table-column
prop="active"
label="操作"
:width="userWidths.width1"
>
<template slot-scope="scope">
<img
style="
......@@ -257,21 +290,46 @@
align="center"
>
</el-table-column>
<el-table-column
prop="roleNames"
label="角色"
:width="groupWidths.width2"
show-overflow-tooltip
>
<el-table-column prop="roleNames" label="组角色" :width="newWidth2">
<template slot-scope="scope">
<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>
<!-- <template slot-scope="scope">
<div
class="tags"
v-for="item in scope.row.roleNames &&
scope.row.roleNames.split(',')"
:key="item"
>
{{ item }}
</div>
</template>
</template> -->
</el-table-column>
<el-table-column
prop="userCount"
......@@ -300,7 +358,6 @@
<div class="set-btn" :width="groupWidths.btnwidth">用户列表</div>
</template>
</el-table-column>
<el-table-column
prop="permissionNames"
label="权限"
......@@ -311,6 +368,7 @@
<div
v-for="(item, index) in scope.row.permissionNames &&
scope.row.permissionNames.split(',')"
:key="index"
>
{{ index > 0 ? "/" : "" }}
{{ item }}
......@@ -318,11 +376,7 @@
</template>
</el-table-column>
<el-table-column
prop="status"
label="启用状态"
align="center"
>
<el-table-column prop="status" label="启用状态" align="center">
<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>
......@@ -335,7 +389,11 @@
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作" width="70">
<el-table-column
prop="active"
label="操作"
:width="userWidths.width1"
>
<template slot-scope="scope">
<img
style="
......@@ -413,7 +471,7 @@ export default {
// 用户列表的表格宽度
userWidths: {
width4: 350,
width3: 200,
width3: 130,
width2: 100,
width5: 220,
width1: 120,
......@@ -469,6 +527,56 @@ export default {
) + 1
);
},
newWidth() {
let w1 = 1920;
let w2 = window.innerWidth;
let map = this.userTableData.map((i) => i.roleNames.split(","));
let num = 0;
let width;
map.forEach((i) => {
if (i.length > num) num = i.length;
});
if (num <= 3) {
width = num * 150;
if (num == 1) {
width += 100;
} else if (num == 2) {
width += 50;
} else if (num == 3) {
width = 480;
}
} else if (num > 3) {
width = 500;
}
width = (width * w2) / w1;
return width;
},
newWidth2() {
let w1 = 1920;
let w2 = window.innerWidth;
let map = this.groupTableData.map((i) => i.roleNames.split(","));
let num = 0;
let width;
map.forEach((i) => {
if (i.length > num) num = i.length;
});
if (num <= 3) {
width = num * 150;
if (num == 1) {
width += 100;
} else if (num == 2) {
width += 50;
} else if (num == 3) {
width = 480;
}
} else if (num > 3) {
width = 500;
}
width = (width * w2) / w1;
return width;
},
// 计算总页数
groupTpage() {
return (
......@@ -486,6 +594,20 @@ export default {
this.searchUser();
this.key1 += 1;
},
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;
},
getGroup() {
this.isUser = false;
this.isGroup = true;
......
src/views/SystemManage/UserManage.vue
......@@ -107,11 +107,26 @@
>
<el-table-column type="selection" height width="auto">
</el-table-column>
<el-table-column prop="username" label="用户名" :width="width1">
<el-table-column
prop="username"
label="用户名"
:width="width1"
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="name" label="姓名" :width="width1">
<el-table-column
prop="name"
label="姓名"
:width="width1"
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="policeNumber" label="警号" :width="width2">
<el-table-column
prop="policeNumber"
label="警号"
:width="width2"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="userGroupNames"
......@@ -120,22 +135,41 @@
:width="width3"
>
</el-table-column>
<el-table-column prop="unitName" label="所属单位" :width="width5">
</el-table-column>
<el-table-column
prop="roleNames"
label="角色"
:width="width4"
prop="unitName"
label="所属单位"
:width="width3"
show-overflow-tooltip
>
</el-table-column>
<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>
......@@ -156,7 +190,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="启用状态" :width="width1">
<el-table-column prop="status" label="启用状态" align="center">
<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>
......@@ -169,7 +203,7 @@
}}
</template>
</el-table-column>
<el-table-column prop="active" label="操作">
<el-table-column prop="active" label="操作" :width="width2">
<template slot-scope="scope">
<div @click="offMultiple()">
<Confirmation content="编辑用户">
......@@ -539,7 +573,7 @@ export default {
};
return {
width4: 350,
width3: 200,
width3: 130,
width2: 100,
width5: 220,
width1: 100,
......@@ -666,6 +700,31 @@ export default {
};
},
computed: {
newWidth() {
let w1 = 1920;
let w2 = window.innerWidth;
let map = this.tableData.map((i) => i.roleNames.split(","));
let num = 0;
let width;
map.forEach((i) => {
if (i.length > num) num = i.length;
});
if (num <= 3) {
width = num * 150;
if (num == 1) {
width += 100;
} else if (num == 2) {
width += 50;
} else if (num == 3) {
width = 480;
}
} else if (num > 3) {
width = 500;
}
width = (width * w2) / w1;
return width;
},
// 计算总页数
Tpage() {
return (
......@@ -714,6 +773,20 @@ export default {
}
});
},
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;
},
// 编辑
submitEditForm(formName) {
this.$refs.editFormParams.validate((valid) => {
......
src/views/SystemManage/scss/group.scss
.tooTipBtn {
padding: 10px;
> div{
> div {
width: 100px;
height: 24px;
background: #5E5E5E;
background: #5e5e5e;
border-radius: 4px;
text-align: center;
margin-bottom: 15px;
line-height: 24px;
&:last-of-type{
&:last-of-type {
margin-bottom: 0;
}
}
......@@ -160,6 +160,9 @@
border-radius: 4px;
text-align: center;
margin-right: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.circle-red {
width: 8px;
......
src/views/SystemManage/scss/permission.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;
......@@ -7,30 +21,30 @@
display: inline-block;
}
//用户和用户组切换按钮
.header{
width:100%;
.btns{
.header {
width: 100%;
.btns {
width: 260px;
height: 40px;
.btn{
.btn {
text-align: center;
width: 129px;
height: 32px;
font-size: 14px;
color: #282F3C;
background: #F6F8FA;
color: #282f3c;
background: #f6f8fa;
border-radius: 2px;
line-height: 32px;
cursor: pointer;
&.active{
background: #055FE7;
color: #FFFFFF;
&.active {
background: #055fe7;
color: #ffffff;
}
}
}
}
}
// 用户
.user{
.user {
width: 100%;
height: 870px;
.search {
......@@ -59,7 +73,7 @@
}
}
.btn {
position:absolute;
position: absolute;
top: 125px;
right: 24px;
width: 95px;
......@@ -73,24 +87,44 @@
cursor: pointer;
}
}
.table{
.table {
height: 750px;
width: 100%;
margin-top: 10px;
border-top: 1px solid #EEEEEE;
.tags{
width: 100px;
border-top: 1px solid #eeeeee;
.tagsBox {
display: flex;
.el-tooltip {
width: auto !important;
}
}
.tags {
flex-shrink: 0;
width: 140px;
height: 24px;
background: #F0F3F6;
background: #f0f3f6;
border-radius: 4px;
text-align: center;
margin-right: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.circle-red{
width: 8px; height: 8px; background-color:#FE0000; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
.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%;
.circle-blue {
width: 8px;
height: 8px;
background-color: #055fe7;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
}
.footer {
......@@ -138,7 +172,7 @@
}
}
// 用户组
.group{
.group {
width: 100%;
height: 870px;
.search {
......@@ -166,7 +200,7 @@
//margin-top: 8px;
}
}
.clear{
.clear {
width: 38px;
border: none;
height: 22px;
......@@ -176,7 +210,7 @@
font-weight: 350;
color: #333333;
text-align: center;
position:absolute;
position: absolute;
top: 130px;
right: 124px;
cursor: pointer;
......@@ -188,7 +222,7 @@
}
}
.btn {
position:absolute;
position: absolute;
top: 125px;
right: 24px;
width: 95px;
......@@ -202,43 +236,63 @@
cursor: pointer;
}
}
.table{
.table {
height: 750px;
width: 100%;
margin-top: 10px;
border-top: 1px solid #EEEEEE;
.tags{
width: 100px;
border-top: 1px solid #eeeeee;
.tagsBox {
display: flex;
.el-tooltip {
width: auto !important;
}
}
.tags {
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 140px;
height: 24px;
background: #F0F3F6;
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-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%;
.circle-blue {
width: 8px;
height: 8px;
background-color: #055fe7;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.group-item{
.group-item {
width: 70px;
height: 24px;
background: #F0F3F6;
background: #f0f3f6;
border-radius: 12px;
font-size: 16px;
font-weight: bold;
color: #282F3C;
color: #282f3c;
line-height: 24px;
text-align: center;
margin-right: 12px;
}
.set-btn{
.set-btn {
width: 56px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #055FE7;
color: #055fe7;
line-height: 22px;
cursor: pointer;
//position: absolute;
......@@ -308,4 +362,4 @@
padding: 0;
font-weight: 400;
}
}
\ No newline at end of file
}
src/views/SystemManage/scss/user.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;
......@@ -135,7 +150,14 @@
.table-data {
height: 580px;
width: 100%;
.tagsBox {
display: flex;
.el-tooltip {
width: auto !important;
}
}
.tags {
flex-shrink: 0;
width: 140px;
height: 24px;
overflow: hidden;
......@@ -163,6 +185,7 @@
-webkit-border-radius: 50%;
}
}
.footer {
width: 1544px;
//width: calc(100vw - 367px);
......
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