<template>
<div class="page-data">
<!--搜素框-->
<div class="page-filter">
<page-filter
:query.sync="groupFilterInfo.query"
:filter-list="groupFilterInfo.list"
@handleClick="handleClick"
/>
</div>
<div class="page-content">
<!--表格-->
<div class="h-100">
<page-table
tabIndex
pagination
:api-url="groupTableInfo.url"
:refresh="groupTableInfo.refresh"
:data.sync="groupTableInfo.data"
:query="groupFilterInfo.query"
:init-curpage="groupTableInfo.initCurpage"
:field-list="groupTableInfo.fieldList"
:handle="groupTableInfo.handle"
@handleClick="handleClick"
/>
</div>
</div>
<!--弹窗-->
<el-dialog
class="page-data-dialog"
:width="dialogInfo.width"
append-to-body
:title="dialogInfo.title[dialogInfo.type]"
:visible.sync="dialogInfo.visible"
:before-close="handleClose"
>
<!--关联项目-->
<template v-if="dialogInfo.type === 'relatePlat'">
<div class="page-filter">
<el-form :inline="true" :model="relatePlatQuery" ref="relatePlatQuery" size="medium">
<el-form-item label="">
<el-input v-model="relatePlatQuery.searchStr" clearable placeholder="请输入项目名称/编号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('platSearch')">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="page-content">
<el-row :gutter="20" class="h-100">
<el-col :span="10" class="h-100 flex flex-d">
<div class="table-title">未关联项目列表</div>
<page-table
class="flex-1"
checkBox
pagination
type="unRelatePlat"
:api-url="relatePlatTableInfo.url"
:refresh="relatePlatTableInfo.refresh"
:data.sync="unRelatePlatTableInfo.data"
:query="unRelatePlatTableInfo.query"
:init-curpage="relatePlatTableInfo.initCurpage"
:field-list="relatePlatTableInfo.fieldList"
@handleClick="handleClick"
@handleEvent="handleEvent"
/>
</el-col>
<el-col :span="4" class="h-100">
<div class="btn-group">
<el-button
type="primary"
size="small"
icon="el-icon-d-arrow-right"
:disabled="isCanInsertPlat"
@click="handleClick('insertPlat')"
>添加</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-d-arrow-left"
:disabled="isCanRemovePlat"
@click="handleClick('removePlat')"
>移除</el-button
>
</div>
</el-col>
<el-col :span="10" class="h-100 flex flex-d">
<div class="table-title">已关联项目列表</div>
<page-table
class="flex-1"
checkBox
pagination
type="isRelatePlat"
:api-url="relatePlatTableInfo.url"
:refresh="relatePlatTableInfo.refresh"
:data.sync="isRelatePlatTableInfo.data"
:query="isRelatePlatTableInfo.query"
:init-curpage="relatePlatTableInfo.initCurpage"
:field-list="relatePlatTableInfo.fieldList"
@handleClick="handleClick"
@handleEvent="handleEvent"
/>
</el-col>
</el-row>
</div>
</template>
<!--添加用户-->
<template v-if="dialogInfo.type === 'addUser'">
<page-form
:ref-obj.sync="userFormInfo.ref"
size="medium"
:data="userFormInfo.data"
:field-list="userFormInfo.fieldList"
:rules="userFormInfo.rules"
:list-type-info="listTypeInfo"
@handleClick="handleClick"
/>
</template>
<!--关联用户-->
<template v-if="dialogInfo.type === 'relateUser'">
<div class="page-filter">
<el-form :inline="true" :model="relateUserQuery" ref="relateUserQuery" size="medium">
<el-form-item label="">
<el-input v-model="relateUserQuery.searchStr" clearable placeholder="请输入用户名/姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('userSearch')">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="page-content">
<el-row :gutter="20" class="h-100">
<el-col :span="10" class="h-100 flex flex-d">
<div class="table-title">未关联用户列表</div>
<page-table
class="flex-1"
checkBox
pagination
type="unRelateUser"
:api-url="relateUserTableInfo.url"
:refresh="relateUserTableInfo.refresh"
:data.sync="unRelateUserTableInfo.data"
:query="unRelateUserTableInfo.query"
:init-curpage="relateUserTableInfo.initCurpage"
:field-list="relateUserTableInfo.fieldList"
@handleClick="handleClick"
@handleEvent="handleEvent"
/>
</el-col>
<el-col :span="4" class="h-100">
<div class="btn-group">
<el-button
type="primary"
size="small"
icon="el-icon-d-arrow-right"
:disabled="isCanInsertUser"
@click="handleClick('insertUser')"
>添加</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-d-arrow-left"
:disabled="isCanRemoveUser"
@click="handleClick('removeUser')"
>移除</el-button
>
</div>
</el-col>
<el-col :span="10" class="h-100 flex flex-d">
<div class="table-title">已关联用户列表</div>
<page-table
class="flex-1"
checkBox
pagination
type="isRelateUser"
:api-url="relateUserTableInfo.url"
:refresh="relateUserTableInfo.refresh"
:data.sync="isRelateUserTableInfo.data"
:query="isRelateUserTableInfo.query"
:init-curpage="relateUserTableInfo.initCurpage"
:field-list="relateUserTableInfo.fieldList"
@handleClick="handleClick"
@handleEvent="handleEvent"
/>
</el-col>
</el-row>
</div>
</template>
<!--添加/修改用户组-->
<template v-if="dialogInfo.type === 'addGroup' || dialogInfo.type === 'update'">
<page-form
:ref-obj.sync="groupFormInfo.ref"
:data="groupFormInfo.data"
:field-list="groupFormInfo.fieldList"
:rules="groupFormInfo.rules"
@handleClick="handleClick"
/>
</template>
<div class="dialot-footer" slot="footer">
<template v-if="dialogInfo.type !== 'relatePlat' && dialogInfo.type !== 'relateUser'">
<el-button type="primary" size="small" @click="handleClick('save')" :loading="btnLoading">保存</el-button>
</template>
<el-button size="small" @click="handleClick('close')">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { message } from "./../../util/item";
export default {
data() {
// 验证电话
let checkPhone = (rule, value, callback) => {
let check = this.$validate({ label: "手机号", value, rules: ["notnull","phone"] });
if (!check.result) {
callback(new Error(check.message));
} else {
callback();
}
};
return {
//用户组搜索相关
groupFilterInfo: {
query: {
searchStr: ""
},
list: [
{type: "input", label: "用户组名称", value: "searchStr", hideLabel: true },
{type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "searchGroup", show: true},
{type: "button", label: "添加用户组", btType: "primary", icon: "el-icon-circle-plus-outline", event: "addGroup", show: true, has: "m11-6-1"}
]
},
//用户组表格相关
groupTableInfo: {
url: this.nozzle.allUserGroupList, //接口地址
refresh: 1,
initCurpage: 1,
data: [],
fieldList: [
{ label: "用户组名称", value: "groupName", minWidth: 100, tooltip: true },
{ label: "用户组描述", value: "description", minWidth: 150, tooltip: true },
{ label: "创建时间", value: "createTime", minWidth: 150, tooltip: true },
],
handle: {
fixed: "right",
label: "操作",
width: "280",
btList: [
{ label: "添加用户", size: "small", type: "text", event: "addUser", show: true, has: 'm11-6-4' },
{ label: "关联用户", size: "small", type: "text", event: "relateUser", show: true, has: 'm11-6-4' },
{ label: "关联项目", size: "small", type: "text", event: "relatePlat", show: true, has: 'm11-6-5' },
{ label: "修改", size: "small", type: "text", event: "update", show: true, has: 'm11-6-3' },
{ label: "删除", size: "small", type: "text", event: "delGroup", show: true, has: 'm11-6-2' }
]
}
},
//关联项目表格通用相关
relatePlatTableInfo: {
url: this.nozzle.groupRelatePlatform, //接口地址
refresh: 1,
initCurpage: 1,
fieldList: [
{ label: "项目编号", value: "platformCode", minWidth: 100, tooltip: true},
{ label: "项目名称", value: "name", minWidth: 150, tooltip: true},
]
},
//已关联项目表格相关
isRelatePlatTableInfo: {
data: [],
query: {
sign: ""
},
selectList: []
},
//未关联项目表格相关
unRelatePlatTableInfo: {
data: [],
query: {
sign: "unbound"
},
selectList: []
},
//关联项目搜索相关
relatePlatQuery: {
searchStr: "",
groupId: ""
},
//关联用户表格通用相关
relateUserTableInfo: {
url: this.nozzle.userGroupUserList, //接口地址
refresh: 1,
initCurpage: 1,
fieldList: [
{ label: "用户名", value: "login", minWidth: 120, tooltip: true },
{ label: "姓名", value: "realName", minWidth: 100, tooltip: true },
{ label: "电话", value: "mobile", minWidth: 120, tooltip: true }
]
},
//已关联用户表格相关
isRelateUserTableInfo: {
data: [],
query: {
sign: ""
},
selectList: []
},
//未关联用户表格相关
unRelateUserTableInfo: {
data: [],
query: {
sign: "unbound"
},
selectList: []
},
//关联用户搜索相关
relateUserQuery: {
searchStr: "",
groupId: ""
},
//按钮loading
btnLoading: false,
//弹窗相关
dialogInfo: {
title: {
update: "编辑用户组",
addGroup: "添加用户组",
relatePlat: ""
},
type: "",
visible: false,
width: "80%"
},
//列表相关
listTypeInfo: {
deptTree: [],
userType: [{ key: "普通用户", value: 0 }, { key: "超级管理员", value: 1 }],
roleList: [],
},
//用户弹窗相关
userDialogInfo: {
title: {
addUser: "添加用户",
addGroup: "添加用户组"
},
width: "80%",
type: "",
visible: false
},
//用户表单相关
userFormInfo: {
ref: null,
data: {
id: undefined,
login: "",
realName: "",
userType: 0,
orgId: null,
groupId: undefined,
groupName: "",
roleId: undefined,
mobile: "",
roleType: 0,
},
fieldList: [
{ label: "用户名", value: "login", type: "input", required: true },
{ label: "姓名", value: "realName", type: "input", required: true },
{ label: "手机号", value: "mobile", type: "input", required: true, validator: checkPhone },
{ label: "用户类型", value: "userType", type: "select", list: "userType", disabled: true },
{ label: "所属部门", value: "orgId", type: "treeselect", list: "deptTree", required: true },
{ label: "所属分组", value: "groupName", type: "input", disabled: true },
{ label: "所属角色", value: "roleId", type: "select", list: "roleList", required: true }
],
rules: {},
treeOptions: []
},
//用户组表单相关
groupFormInfo: {
ref: null,
data: {
id: undefined,
groupName: "",
description: ""
},
fieldList: [
{ label: "用户组名称", value: "groupName", type: "input", required: true },
{ label: "用户组描述", value: "description", type: "textarea", limit: true }
],
rules: {}
}
};
},
watch: {
"dialogInfo.visible"(val) {
if (!val) {
this.isRelatePlatTableInfo.data = [];
this.unRelatePlatTableInfo.data = [];
this.isRelateUserTableInfo.data = [];
this.unRelateUserTableInfo.data = [];
this.relateUserQuery = {
searchStr: ""
};
this.relatePlatQuery = {
searchStr: ""
};
if (this.userFormInfo.ref) {
this.userFormInfo.ref.resetFields();
}
if (this.groupFormInfo.ref) {
this.groupFormInfo.ref.resetFields();
}
const type = this.dialogInfo.type;
this.resetForm(type);
}
},
"dialogInfo.type"(val) {
this.dialogInfo.width = (val === "addUser" || val === "addGroup" || val === "update") ? "500px" : "80%";
},
"relatePlatQuery.searchStr"(val) {
Object.assign(this.isRelatePlatTableInfo.query, this.relatePlatQuery);
Object.assign(this.unRelatePlatTableInfo.query, this.relatePlatQuery);
},
"relateUserQuery.searchStr"(val) {
Object.assign(this.isRelateUserTableInfo.query, this.relateUserQuery);
Object.assign(this.unRelateUserTableInfo.query, this.relateUserQuery);
}
},
computed: {
//移除按钮是否可点击
isCanRemovePlat() {
return this.isRelatePlatTableInfo.selectList.length ? false : true;
},
//添加按钮是否可点击
isCanInsertPlat() {
return this.unRelatePlatTableInfo.selectList.length ? false : true;
},
//移除按钮是否可点击
isCanRemoveUser() {
return this.isRelateUserTableInfo.selectList.length ? false : true;
},
//添加按钮是否可点击
isCanInsertUser() {
return this.unRelateUserTableInfo.selectList.length ? false : true;
},
...mapGetters(["allDept"])
},
mounted() {
this.initRules();
this.groupTableInfo.refresh = Math.random();
this.initRoles();
},
methods: {
// 初始化验证
initRules() {
const userFormInfo = this.userFormInfo;
const groupFormInfo = this.groupFormInfo;
userFormInfo.rules = this.$initRules(userFormInfo.fieldList);
groupFormInfo.rules = this.$initRules(groupFormInfo.fieldList);
},
// 初始化角色
initRoles() {
this.$http.post(this.nozzle.roleGetRoles, {
current: 0,
size: 0,
data: {
searchStr: "",
type: 0
}
}).then(res => {
if(res.data.code === 1) {
this.listTypeInfo.roleList = res.data.data.map(item => {
return{
key: item.roleName,
value: item.roleId
}
})
}
})
},
//点击事件
handleClick(event, data) {
switch (event) {
//用户组搜索
case "searchGroup":
this.groupTableInfo.initCurpage = Math.random();
this.groupTableInfo.refresh = Math.random();
break;
//关联项目按钮
case "relatePlat":
this.dialogInfo.type = event;
this.relatePlatQuery.groupId = data.id;
this.dialogInfo.visible = true;
setTimeout(() => {
Object.assign(this.isRelatePlatTableInfo.query, this.relatePlatQuery);
Object.assign(this.unRelatePlatTableInfo.query, this.relatePlatQuery);
this.relatePlatTableInfo.refresh = Math.random();
}, 0);
break;
//关联项目搜索
case "platSearch":
this.relatePlatTableInfo.initCurpage = Math.random();
this.relatePlatTableInfo.refresh = Math.random();
break;
//绑定项目与用户组
case "insertPlat":
this.handleAjaxPlat("unbound",this.nozzle.bindPlatformToGroup);
break;
//解绑项目与用户组
case "removePlat":
this.handleAjaxPlat("",this.nozzle.removePlatformFromGroup);
break;
//关联用户按钮
case "relateUser":
this.dialogInfo.type = event;
this.dialogInfo.visible = true;
this.relateUserQuery.groupId = data.id;
setTimeout(() => {
Object.assign(this.isRelateUserTableInfo.query, this.relateUserQuery);
Object.assign(this.unRelateUserTableInfo.query, this.relateUserQuery);
this.relateUserTableInfo.refresh = Math.random();
}, 0);
break;
//关联用户搜索
case "userSearch":
this.relateUserTableInfo.initCurpage = Math.random();
this.relateUserTableInfo.refresh = Math.random();
break;
//绑定用户与用户组
case "insertUser":
this.handleAjaxUser("unbound",this.nozzle.bindUserToGroup);
break;
//解绑用户与用户组
case "removeUser":
this.handleAjaxUser("",this.nozzle.removeUserFromGroup);
break;
//用户添加按钮
case "addUser":
this.dialogInfo.type = event;
this.userFormInfo.data["groupName"] = data.groupName;
this.userFormInfo.data["groupId"] = data.id;
this.listTypeInfo.deptTree = this.allDept;
this.dialogInfo.visible = true;
break;
//用户组添加按钮
case "addGroup":
this.dialogInfo.type = event;
this.dialogInfo.visible = true;
break;
//用户组编辑按钮
case "update":
this.dialogInfo.type = event;
this.dialogInfo.visible = true;
for (let key in data) {
if (key in this.groupFormInfo.data) {
this.groupFormInfo.data[key] = data[key];
}
}
break;
//用户组删除按钮
case "delGroup":
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(res =>{
this.$http.post(this.nozzle.userGroupDelete,{data:{id:data.id}}).then(res =>{
if(res.data.code === 1) {
this.groupTableInfo.refresh = Math.random();
this.groupTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? 'success' : 'error',
showClose: true,
})
}).catch(e =>{
message(e);
})
}).catch(() =>{})
break;
//关闭
case "close":
this.dialogInfo.visible = false;
break;
//保存用户组/用户
case "save":
const type = this.dialogInfo.type;
const formName = (type === "addGroup" || type === "update") ? this.groupFormInfo : this.userFormInfo;
let params, api;
formName.ref.validate(valid => {
if (valid) {
this.btnLoading = true;
if (type === "addUser") {
//添加用户绑定到用户组
api = this.nozzle.addUserToGroup;
const data = {...this.userFormInfo.data};
params = data;
}else{
//添加保存用户组
api = this.nozzle.createOrUpdateGroup;
const data = {...this.groupFormInfo.data};
params = { data: data };
}
this.$http.post(api, params).then(res => {
if (res.data.code === 1 || res.data.code === 200) {
this.dialogInfo.visible = false;
this.groupTableInfo.refresh = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true
});
this.btnLoading = false;
})
.catch(e => {
console.log(e);
this.btnLoading = false;
});
}
});
break;
}
},
//关闭弹窗
handleClose() {
this.dialogInfo.visible = false;
},
//表格checkbox选择事件
handleEvent(event, data) {
switch (event) {
//关联项目
case "isRelatePlat":
this.isRelatePlatTableInfo.selectList = data;
break;
//未关联项目
case "unRelatePlat":
this.unRelatePlatTableInfo.selectList = data;
break;
//关联用户
case "isRelateUser":
this.isRelateUserTableInfo.selectList = data;
break;
//未关联用户
case "unRelateUser":
this.unRelateUserTableInfo.selectList = data;
break;
}
},
//重置表单
resetForm(type) {
switch (type) {
case "addUser":
this.userFormInfo.data = {
id: undefined,
login: "",
realName: "",
userType: 0,
orgId: null,
groupId: undefined,
groupName: "",
roleId: undefined,
mobile: ""
};
break;
case "addGroup":
case "update":
this.groupFormInfo.data = {
id: undefined,
groupName: "",
description: ""
};
break;
}
},
//请求接口处理结果
handleAjax(url, params) {
this.$http.post(url, params).then(res => {
if (res.data.code === 1 || res.data.code === 200) {
this.dialogInfo.visible = false;
this.projectTableInfo.refresh = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true
});
this.btnLoading = false;
})
.catch(e => {
console.log(e);
this.btnLoading = false;
});
},
//操作用户与用户组之间的绑定与解绑
handleAjaxUser(type, api) {
const tableInfo = type === "unbound" ? this.unRelateUserTableInfo : this.isRelateUserTableInfo;
const userIds = tableInfo.selectList.map( item => item.id);
const params = {
groupId: tableInfo.query.groupId,
userIds: userIds
};
this.$http.post(api, { data: params }).then(res => {
if (res.data.code === 1) {
this.relateUserQuery.searchStr = "";
this.relateUserTableInfo.refresh = Math.random();
this.relateUserTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true
});
})
},
//操作项目与用户组之间的绑定与解绑
handleAjaxPlat(type, api) {
const tableInfo = type === "unbound" ? this.unRelatePlatTableInfo : this.isRelatePlatTableInfo;
const platforms = tableInfo.selectList.map( item => parseInt(item.platformCode));
const params = {
groupId: tableInfo.query.groupId,
platforms: platforms
};
this.$http.post(api, { data: params }).then(res => {
if (res.data.code === 1) {
this.relatePlatQuery.searchStr = "";
this.relatePlatTableInfo.refresh = Math.random();
this.relatePlatTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true
});
})
}
}
};
</script>
<style lang="scss" scoped>
.btn-group {
height: 100%;
@include fdaj(center, center);
/deep/ .el-button + .el-button {
margin-left: 0;
margin-top: 10px;
}
}
/deep/ .el-dialog {
@include fd();
@include wh(80%, 60%);
max-height: 60%;
margin-top: 10vh !important;
.el-dialog__body {
@include fd();
flex: 1;
padding-bottom: 0;
overflow-y: auto;
}
}
.table-title{
@include hl(30px,30px);
color: #409EFF;
text-align: center;
font-size: 16px;
margin-bottom: 10px;
}
.userDialog {
/deep/ .el-form-item {
.el-form-item__label {
width: 120px;
padding-right: 15px;
}
}
}
</style>
