Skip to content

F
founder_vue
Commit e52ad435 by maxiaohan
Options

用户组管理+新增用户 静态页面

parent 2a151cbd
Showing with 653 additions and 6 deletions
src/views/SystemManage/GroupManage.vue
<template><div>用户组管理</div></template>
<template>
<el-container class="manage-page" direction="vertical">
<!-- 标题-->
<div class="title">用户组管理</div>
<div class="clear-btn" @click="clear">清空</div>
<div class="search">
<div class="search-item">
<div class="label">用户组：</div>
<el-select class="search-info" placeholder="请输入并选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="search-item">
<div class="label">用户名：</div>
<el-input class="search-info" placeholder="请输入用户名"></el-input>
</div>
<div class="search-item">
<div class="label">姓名：</div>
<el-select class="search-info" placeholder="请输入并选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="search-item">
<div class="label">用户所属单位代码：</div>
<el-select class="search-info" placeholder="请输入并选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="search-item">
<div class="label">组角色：</div>
<el-select class="search-info" placeholder="请输入并选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="btn">筛选用户组</div>
</div>
<div class="operation">
<div class="btn1" @click="batch">批量操作</div>
<div class="btns">
<div class="btn1">删除</div>
<div class="add" @click="open">
<svg-icon
style="width: 13px;height: 13px;margin-bottom: -1px;margin-right: 4px "
icon-class="ic_add"
/>新增用户组
</div>
</div>
</div>
<el-tag
style="width:100%;color:#666666;margin-bottom:16px"
v-show="isShowTip"
>
<i class="el-icon-info" style="color:#055FE7;font-size:15px"></i>
已选择
<span style="color:#055FE7">{{ multipleSelection.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:20px;"
@click="toggleSelection()"
>清除</el-link
>
</el-tag>
<div class="table-data">
<el-table
highlight-current-row
ref="multipleTable"
:data="tableData"
class="table"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" height width="auto" v-if="isSelected">
</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="启用状态" width="100">
</el-table-column>
<el-table-column prop="address" label="操作"></el-table-column>
</el-table>
</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"
>
</el-pagination>
</div>
</div>
<!-- 新增弹窗-->
<div
class="addUserDialogBg"
v-show="isShowAddUserDialogBg"
@click="canceladd"
></div>
<div class="addUserDialog" v-show="isShowAddUserDialog">
<div class="head-title">
<div class="left">新增用户组</div>
<div class="close" @click="canceladd">
<img src="@/assets/img/manage/close.png" alt="" />
</div>
</div>
<div class="info">
<div class="info-item">
<div class="label">*组名称：</div>
<el-input class="input-info" placeholder="请输入组名称"></el-input>
</div>
<div class="info-item">
<div class="label">用户组描述：</div>
<el-input
class="input-info"
placeholder="请输入用户组描述"
></el-input>
</div>
<div class="info-item">
<div class="label">加入组用户：</div>
<el-select class="input-info" placeholder="请选择组用户">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="info-item">
<div class="label">加入组角色：</div>
<el-select class="input-info" placeholder="请选择组角色">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="info-item">
<div class="label">启用状态：</div>
<el-radio-group
class="radio-info"
v-model="status"
@change="searchStyle"
>
<el-radio :label="0">启用</el-radio>
<el-radio :label="1">停用</el-radio>
</el-radio-group>
</div>
</div>
<div class="addbtns">
<div class="add" @click="add">确定</div>
<div class="cancel" @click="canceladd">取消</div>
</div>
</div>
</el-container>
</template>
<script>
import "@/icons/ic_add.svg";
export default {
name: "GroupManage"
name: "GroupManage",
data() {
return {
username: "",
userdesc: "",
unitcode: "",
auth: "",
status: "",
searchOptions: "",
reqParam: {
userdesc: "",
page: {
total: 0,
pageSize: 10,
currPage: 1
}
},
// 选中数据
multipleSelection: [],
isShowTip: false, //批量操作提示
isSelected: false, // 是否批量操作
// 是否展示认定完成确认框背景
isShowAddUserDialogBg: false,
// 是否展示认定完成确认框
isShowAddUserDialog: false,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
options: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}
],
value: ""
};
},
computed: {
// 计算总页数
Tpage() {
return (
Math.floor(this.reqParam.page.total / this.reqParam.page.pageSize) + 1
);
}
},
methods: {
clear() {
console.info("清空方法");
},
// 搜索方式
searchStyle(val) {
// console.log(val, '搜索方式')
this.searchOptions = val;
// console.log(this.reqParam.page.searchOptions)
},
// 清除所有选项
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
console.log(this.multipleSelection);
},
// 选择数据
handleSelectionChange(val) {
this.multipleSelection = val;
console.info(this.multipleSelection);
if (this.multipleSelection.length) {
this.isShowTip = true;
} else {
this.isShowTip = false;
}
},
//是否是批量操作
batch() {
this.isSelected = !this.isSelected;
},
// 当期页发生变化
handleCurrPageChange: function(val) {
this.reqParam.page.currPage = val;
// this.search();
},
// 每页展示数量发生变化
handleSizeChange: function(val) {
this.reqParam.page.pageSize = val;
// this.search();
},
// 打开新增弹窗
open() {
this.isShowAddUserDialog = true;
this.isShowAddUserDialogBg = true;
},
// 关闭新增弹窗
canceladd() {
this.isShowAddUserDialog = false;
this.isShowAddUserDialogBg = false;
},
// 新增方法
add() {
this.isShowAddUserDialog = false;
this.isShowAddUserDialogBg = false;
this.$message.success("新增成功！");
}
}
};
</script>
<style scoped></style>
<style scoped lang="scss">
@import "scss/group";
</style>
src/views/SystemManage/UserManage.vue
......@@ -118,7 +118,7 @@
<div class="table-data">
<el-table
highlight-current-row
ref="singleTable"
ref="multipleTable"
:data="tableData"
class="table"
@selection-change="handleSelectionChange"
......@@ -409,5 +409,5 @@ export default {
};
</script>
<style scoped lang="scss">
@import "./scss/adduser.scss";
@import "scss/user";
</style>
src/views/SystemManage/scss/group.scss 0 → 100644
.manage-page {
width: 100%;
padding: 24px;
font-family: MicrosoftYaHei;
div {
display: inline-block;
}
.title {
width: 80px;
height: 24px;
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
.clear-btn {
width: 28px;
border: none;
height: 22px;
padding: 0;
margin: 0 12px 0 12px;
font-size: 14px;
font-weight: 350;
color: #333333;
text-align: center;
cursor: pointer;
&:hover {
color: #055fe7;
}
&:active {
color: #055fe7;
}
}
.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;
}
}
.btn {
position:absolute;
top: 110px;
right: 24px;
width: 95px;
height: 32px;
background: #055fe7;
border-radius: 4px;
line-height: 32px;
color: #ffffff;
font-size: 14px;
text-align: center;
cursor: pointer;
}
}
.operation {
width: 100%;
height: 45px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
padding-top: 16px;
border-top: 1px #eeeeee solid;
.btn1 {
width: 96px;
height: 32px;
border-radius: 4px;
color: #2e3846;
font-size: 14px;
border: 1px solid #aeb5c2;
cursor: pointer;
line-height: 32px;
text-align: center;
&:hover {
border: #055fe7 1px solid;
color: #055fe7;
}
&:active {
border: #055fe7 1px solid;
color: #055fe7;
}
}
.btns {
.add {
width: 120px;
height: 32px;
line-height: 32px;
font-size: 14px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #aeb5c2;
margin-left: 16px;
text-align: center;
cursor: pointer;
&:hover {
border: #055fe7 1px solid;
color: #055fe7;
}
&:active {
border: #055fe7 1px solid;
color: #055fe7;
}
}
}
}
.table-data {
height: 580px;
width: 100%;
}
.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;
}
.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 {
height: 48px;
background: #f6f8fa;
font-size: 14px;
color: #282f3c;
}
//表格内容样式
/deep/.el-table td,
.el-table tr {
height: 55px;
background: #ffffff;
font-size: 14px;
color: #333333;
padding: 0;
font-weight: 400;
}
}
//新增用户 背景
.addUserDialogBg {
position: absolute;
top: 0;
left: 0;
z-index: 500;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
filter: blur(2px);
}
//新增用户信息
.addUserDialog{
box-sizing: border-box;
position: absolute;
top: calc(50% - 257px);
left: calc(50% - 471.5px);
z-index: 1000;
width: 890px;
height: 410px;
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;
}
.close {
cursor: pointer;
width: 13px;
height: 13px;
img {
object-fit: contain;
}
}
}
.info{
width: 100%;
display: flex;
flex-direction: column;
justify-content:center;
padding-left: 230px;
padding-top: 10px;
margin-top: 10px;
margin-bottom: 10px;
.info-item{
margin-top:3px;
margin-bottom: 6px;
width: 400px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
.label {
width: 105px;
height: 35px;
font-size: 14px;
color: #333333;
line-height: 35px;
}
.input-info{
width: 264px;
height: 35px;
background: #FFFFFF;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
}
.radio-info{
margin-top: 10px;
width: 264px;
height: 35px;
}
}
}
.addbtns{
border-top:1px solid #EEEEEE ;
padding-top: 20px;
width: 100%;
text-align: center;
.add{
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: 24px;
}
.cancel{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/SystemManage/scss/adduser.scss → src/views/SystemManage/scss/user.scss
......@@ -59,6 +59,9 @@
}
}
.btn {
position:absolute;
top: 110px;
right: 24px;
width: 95px;
height: 32px;
background: #055fe7;
......
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