|
|
|
@ -4,13 +4,19 @@ |
|
|
|
<!--侧边部门数据--> |
|
|
|
<div class="elect-cont-left"> |
|
|
|
<div class="head-container"> |
|
|
|
<el-input v-model="deptName" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" /> |
|
|
|
<el-input v-model="filterText" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" /> |
|
|
|
</div> |
|
|
|
<div class="container-left"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" /> |
|
|
|
<el-tree ref="tree" v-loading="crud.loading" :data="fondsDatas" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys="defaultExpandedKeys" node-key="id" highlight-current :filter-node-method="filterNode" @node-click="handleNodeClick"> |
|
|
|
<template slot-scope="{ node, data }"> |
|
|
|
<div :class="{'top-level': data.id === 0}"> |
|
|
|
<span style="color: #0C0E1E;"> |
|
|
|
{{ data.fondsName }} |
|
|
|
<span style="color: #545B65;">{{ data.deptsName }}</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
</el-tree> |
|
|
|
</div> |
|
|
|
<!--用户数据--> |
|
|
|
<div class="elect-cont-right"> |
|
|
|
@ -39,8 +45,8 @@ |
|
|
|
<span class="dialog-left-bottom" /> --> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px"> |
|
|
|
<el-form-item label="账号" prop="username"> |
|
|
|
<el-input v-model="form.username" @keydown.native="keydown($event)" /> |
|
|
|
<el-form-item label="账号" prop="userName"> |
|
|
|
<el-input v-model="form.userName" @keydown.native="keydown($event)" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="电话" prop="phone"> |
|
|
|
<el-input v-model.number="form.phone" /> |
|
|
|
@ -51,17 +57,29 @@ |
|
|
|
<el-form-item label="邮箱" prop="email"> |
|
|
|
<el-input v-model="form.email" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属全宗" prop="dept.id"> |
|
|
|
<treeselect v-model="form.dept.id" :options="depts" placeholder="选择全宗" /> |
|
|
|
<el-form-item label="所属全宗" prop="fondsId"> |
|
|
|
<!-- <treeselect v-model="form.fondsId" :options="fondsOptions" placeholder="选择全宗" :normalizer="fondsNormalizer" @input="changeFonds" /> --> |
|
|
|
<el-select v-model="form.fondsId" placeholder="请选择" style="width: 225px;" @change="changeFondsValue($event)"> |
|
|
|
<el-option |
|
|
|
v-for="(item,index) in fondsOptions" |
|
|
|
:key="index" |
|
|
|
:label="item.fondsName" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属部门" prop="dept.id"> |
|
|
|
<treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" placeholder="选择部门" /> |
|
|
|
<el-form-item label="所属部门" prop="deptsId"> |
|
|
|
<!-- <treeselect v-model="form.deptsId" :options="depts" :load-options="loadDepts" placeholder="选择部门" /> --> |
|
|
|
<treeselect |
|
|
|
v-model="form.deptsId" |
|
|
|
:options="depts" |
|
|
|
:load-options="loadDepts" |
|
|
|
placeholder="选择部门" |
|
|
|
:normalizer="normalizer" |
|
|
|
> |
|
|
|
<div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div> |
|
|
|
</treeselect> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="岗位" prop="jobs" class="is-required"> |
|
|
|
<el-select v-model="jobDatas" style="width: 184px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeJob"> |
|
|
|
<el-option v-for="item in jobs" :key="item.name" :label="item.name" :value="item.id" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item label="性别" prop="gender"> |
|
|
|
<el-radio-group v-model="form.gender"> |
|
|
|
<el-radio label="男">男</el-radio> |
|
|
|
@ -69,13 +87,23 @@ |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="状态" prop="enabled"> |
|
|
|
<!-- <el-radio-group v-model="form.enabled" :disabled="form.id === user.id"> |
|
|
|
<el-radio v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">{{ item.display_name }}</el-radio> |
|
|
|
</el-radio-group> --> |
|
|
|
<el-radio-group v-model="form.enabled" :disabled="form.id === user.id"> |
|
|
|
<el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{ item.label }}</el-radio> |
|
|
|
<el-radio :label="1">激活</el-radio> |
|
|
|
<el-radio :label="0">禁用</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item style="margin-bottom: 0;" label="角色" prop="roles" class="is-required selecct-dropdown"> |
|
|
|
<el-select v-model="roleDatas" style="width: 584x" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole"> |
|
|
|
<el-option v-for="item in roles" :key="item.name" :disabled="level !== 1 && item.level <= level" :label="item.name" :value="item.id" /> |
|
|
|
<el-form-item style="width: 100%;" label="角色" prop="roles" class="is-required selecct-dropdown"> |
|
|
|
<el-select v-model="roleDatas" style="width: 584px" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole"> |
|
|
|
<!-- :disabled="level !== 1 && item.level <= level" --> |
|
|
|
<el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.id" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item style="margin-bottom: 0;" label="岗位" prop="jobs" class="is-required"> |
|
|
|
<el-select v-model="jobDatas" style="width: 584px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeJob"> |
|
|
|
<el-option v-for="item in jobs" :key="item.postName" :label="item.postName" :value="item.id" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -149,7 +177,8 @@ |
|
|
|
import { getToken } from '@/utils/auth' |
|
|
|
import crudUser, { resetpassword } from '@/api/system/user' |
|
|
|
import { isvalidPhone } from '@/utils/validate' |
|
|
|
import { getDepts, getDeptSuperior } from '@/api/system/dept' |
|
|
|
import { getDepts, FetchSonDepts } from '@/api/system/dept' |
|
|
|
import { FetchFondsAll } from '@/api/system/fonds' |
|
|
|
import { getAll, getLevel } from '@/api/system/role' |
|
|
|
import { getAllJob } from '@/api/system/job' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
@ -162,9 +191,10 @@ import Treeselect from '@riophae/vue-treeselect' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|
|
|
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|
|
|
import Vue from 'vue' |
|
|
|
let userRoles = [] |
|
|
|
let userJobs = [] |
|
|
|
const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null } |
|
|
|
const defaultForm = { id: null, userName: null, nickName: null, gender: '男', email: null, enabled: null, fondsId: null, roles: [], jobs: [], deptsId: null, phone: null } |
|
|
|
export default { |
|
|
|
name: 'User', |
|
|
|
components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker }, |
|
|
|
@ -185,14 +215,14 @@ export default { |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
// var validateJob = (rule, value, callback) => { |
|
|
|
// console.log(value) |
|
|
|
// if (this.jobDatas.length > 0) { |
|
|
|
// callback() |
|
|
|
// } else { |
|
|
|
// callback(new Error('请选择岗位')) |
|
|
|
// } |
|
|
|
// } |
|
|
|
var validateJob = (rule, value, callback) => { |
|
|
|
console.log(value) |
|
|
|
if (this.jobDatas.length > 0) { |
|
|
|
callback() |
|
|
|
} else { |
|
|
|
callback(new Error('请选择岗位')) |
|
|
|
} |
|
|
|
} |
|
|
|
return { |
|
|
|
headers: { |
|
|
|
Authorization: getToken() |
|
|
|
@ -205,7 +235,11 @@ export default { |
|
|
|
height: document.documentElement.clientHeight - 180 + 'px;', |
|
|
|
deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [], |
|
|
|
jobDatas: [], roleDatas: [], // 多选时使用 |
|
|
|
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }, |
|
|
|
fondsDatas: [], |
|
|
|
fondsOptions: [], |
|
|
|
filterText: '', |
|
|
|
defaultExpandedKeys: [], |
|
|
|
defaultProps: { children: 'children', label: 'fondsName' }, |
|
|
|
permission: { |
|
|
|
add: ['admin', 'user:add'], |
|
|
|
edit: ['admin', 'user:edit'], |
|
|
|
@ -215,8 +249,9 @@ export default { |
|
|
|
{ key: '1', display_name: '激活' }, |
|
|
|
{ key: '0', display_name: '锁定' } |
|
|
|
], |
|
|
|
|
|
|
|
rules: { |
|
|
|
username: [ |
|
|
|
userName: [ |
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
|
|
|
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } |
|
|
|
], |
|
|
|
@ -231,7 +266,7 @@ export default { |
|
|
|
phone: [ |
|
|
|
{ required: true, trigger: 'blur', validator: validPhone } |
|
|
|
], |
|
|
|
'dept.id': [ |
|
|
|
'deptsId': [ |
|
|
|
{ required: true, trigger: 'blur', message: '请选择部门' } |
|
|
|
], |
|
|
|
gender: [ |
|
|
|
@ -239,11 +274,10 @@ export default { |
|
|
|
], |
|
|
|
enabled: [ |
|
|
|
{ required: true, trigger: 'change', message: '请选择状态' } |
|
|
|
], |
|
|
|
jobs: [ |
|
|
|
{ trigger: 'blur', validator: validateJob } |
|
|
|
] |
|
|
|
// , |
|
|
|
// jobs: [ |
|
|
|
// { trigger: 'blur', validator: validateJob } |
|
|
|
// ] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -252,6 +286,11 @@ export default { |
|
|
|
'user' |
|
|
|
]) |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
filterText(val) { |
|
|
|
this.$refs.tree.filter(val) |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.crud.msg.add = '新增成功，默认密码：123456' |
|
|
|
}, |
|
|
|
@ -261,8 +300,16 @@ export default { |
|
|
|
that.height = document.documentElement.clientHeight - 180 + 'px;' |
|
|
|
} |
|
|
|
console.log(this.user) |
|
|
|
this.getFondsDatas() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getAutoNameUnknown(name) { |
|
|
|
if (name.lastIndexOf('unknown') > -1) { |
|
|
|
return name.split('(')[0] |
|
|
|
} else { |
|
|
|
return name |
|
|
|
} |
|
|
|
}, |
|
|
|
[CRUD.HOOK.beforeRefresh]() { |
|
|
|
if (this.blurryTime) { |
|
|
|
this.crud.query.startTime = this.blurryTime[0] |
|
|
|
@ -270,15 +317,17 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
clickRowHandler(row) { |
|
|
|
// this.$refs.table.toggleRowSelection(row) // 单击选中 |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
this.$refs.table.toggleRowSelection(row) |
|
|
|
}, |
|
|
|
handlePwdReset() { |
|
|
|
this.resetVisible = true |
|
|
|
}, |
|
|
|
// 重置密码 |
|
|
|
pwdReset(data) { |
|
|
|
const params = data.map(item => { return item.username }) |
|
|
|
const params = data.map(item => { return item.userName }) |
|
|
|
this.btnLoading = true |
|
|
|
console.log(params) |
|
|
|
resetpassword(params).then(res => { |
|
|
|
if (res === 'SUCCESS') { |
|
|
|
this.$message({ |
|
|
|
@ -320,13 +369,58 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
getFondsDatas() { |
|
|
|
const parent = {} |
|
|
|
parent.id = 0 |
|
|
|
parent.fondsName = '全宗选择' |
|
|
|
FetchFondsAll().then(res => { |
|
|
|
res.forEach(item => { |
|
|
|
item.children = item.depts |
|
|
|
}) |
|
|
|
parent.children = res |
|
|
|
this.fondsDatas.push(parent) |
|
|
|
this.fondsOptions = res |
|
|
|
// this.fondsOptions = JSON.parse(JSON.stringify(this.fondsDatas)) |
|
|
|
// this.fondsOptions[0].children.map(item => { |
|
|
|
// console.log(item) |
|
|
|
// delete item.children |
|
|
|
// }) |
|
|
|
this.$nextTick(() => { |
|
|
|
Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].id) |
|
|
|
this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].id) |
|
|
|
this.handleNodeClick(this.fondsDatas[0].children[0]) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
filterNode(value, data) { |
|
|
|
if (!value) return true |
|
|
|
return data.fondsName.indexOf(value) !== -1 |
|
|
|
}, |
|
|
|
changeFonds(val) { |
|
|
|
console.log('val', val) |
|
|
|
}, |
|
|
|
changeFondsValue(value) { |
|
|
|
this.depts = [] |
|
|
|
var obj = {} |
|
|
|
obj = this.fondsOptions.find(function(item) { |
|
|
|
return item.id === value |
|
|
|
}) |
|
|
|
this.form.deptsId = null |
|
|
|
const params = { |
|
|
|
'fondsId': obj.id, |
|
|
|
'fondsName': obj.fondsName, |
|
|
|
'status': 1 |
|
|
|
} |
|
|
|
this.getDepts(params) |
|
|
|
}, |
|
|
|
// 新增与编辑前做的操作 |
|
|
|
[CRUD.HOOK.afterToCU](crud, form) { |
|
|
|
console.log(form) |
|
|
|
this.getRoles() |
|
|
|
if (form.id == null) { |
|
|
|
this.getDepts() |
|
|
|
} else { |
|
|
|
this.getSupDepts(form.dept.id) |
|
|
|
// this.getSupDepts(form.deptsId) |
|
|
|
} |
|
|
|
this.getRoleLevel() |
|
|
|
this.getJobs() |
|
|
|
@ -339,7 +433,7 @@ export default { |
|
|
|
}, |
|
|
|
// 初始化编辑时候的角色与岗位 |
|
|
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
|
|
|
this.getJobs(this.form.dept.id) |
|
|
|
this.getJobs(this.form.deptsId) |
|
|
|
this.jobDatas = [] |
|
|
|
this.roleDatas = [] |
|
|
|
userRoles = [] |
|
|
|
@ -358,7 +452,7 @@ export default { |
|
|
|
}, |
|
|
|
// 提交前做的操作 |
|
|
|
[CRUD.HOOK.afterValidateCU](crud) { |
|
|
|
if (!crud.form.dept.id) { |
|
|
|
if (!crud.form.deptsId) { |
|
|
|
this.$message({ |
|
|
|
message: '部门不能为空', |
|
|
|
type: 'warning' |
|
|
|
@ -402,9 +496,14 @@ export default { |
|
|
|
}) |
|
|
|
}, 100) |
|
|
|
}, |
|
|
|
getDepts() { |
|
|
|
getDepts({ enabled: true }).then(res => { |
|
|
|
getDepts(params) { |
|
|
|
getDepts(params).then(res => { |
|
|
|
this.depts = res.content.map(function(obj) { |
|
|
|
if (obj.sonNum !== 0) { |
|
|
|
obj.hasChildren = true |
|
|
|
} else { |
|
|
|
obj.hasChildren = false |
|
|
|
} |
|
|
|
if (obj.hasChildren) { |
|
|
|
obj.children = null |
|
|
|
} |
|
|
|
@ -412,28 +511,16 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
getSupDepts(deptId) { |
|
|
|
getDeptSuperior(deptId).then(res => { |
|
|
|
const date = res.content |
|
|
|
this.buildDepts(date) |
|
|
|
this.depts = date |
|
|
|
}) |
|
|
|
}, |
|
|
|
buildDepts(depts) { |
|
|
|
depts.forEach(data => { |
|
|
|
if (data.children) { |
|
|
|
this.buildDepts(data.children) |
|
|
|
} |
|
|
|
if (data.hasChildren && !data.children) { |
|
|
|
data.children = null |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取弹窗内部门数据 |
|
|
|
loadDepts({ action, parentNode, callback }) { |
|
|
|
if (action === LOAD_CHILDREN_OPTIONS) { |
|
|
|
getDepts({ enabled: true, pid: parentNode.id }).then(res => { |
|
|
|
parentNode.children = res.content.map(function(obj) { |
|
|
|
FetchSonDepts({ deptsId: parentNode.deptsId }).then(res => { |
|
|
|
parentNode.children = res.map(function(obj) { |
|
|
|
if (obj.sonNum !== 0) { |
|
|
|
obj.hasChildren = true |
|
|
|
} else { |
|
|
|
obj.hasChildren = false |
|
|
|
} |
|
|
|
if (obj.hasChildren) { |
|
|
|
obj.children = null |
|
|
|
} |
|
|
|
@ -441,7 +528,7 @@ export default { |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
callback() |
|
|
|
}, 200) |
|
|
|
}, 100) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -492,10 +579,39 @@ export default { |
|
|
|
}, |
|
|
|
checkboxT(row, rowIndex) { |
|
|
|
return row.userId !== this.user.id |
|
|
|
}, |
|
|
|
fondsNormalizer(node) { |
|
|
|
if (node.children && !node.children.length) { |
|
|
|
delete node.children |
|
|
|
} |
|
|
|
return { |
|
|
|
id: node.id, |
|
|
|
label: node.fondsName, |
|
|
|
children: node.children |
|
|
|
} |
|
|
|
}, |
|
|
|
normalizer(node) { |
|
|
|
if (node.children && !node.children.length) { |
|
|
|
delete node.children |
|
|
|
} |
|
|
|
return { |
|
|
|
id: node.deptsId, |
|
|
|
label: node.deptsName, |
|
|
|
children: node.children |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
::v-deep .el-tree{ |
|
|
|
.el-tree-node__content{ |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
.top-level{ |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
