xuhuajiao
/
yxk-electronic-archives
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

api用户管理

master
xuhuajiao 2 years ago
parent
50ce127e95
commit
6bb3ae6dfc
1 changed files with 240 additions and 149 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 389
      src/views/system/user/index.vue

389
src/views/system/user/index.vue
View File

@ -4,18 +4,17 @@
<!--侧边部门数据-->
<div class="elect-cont-left">
<div class="head-container">
<el-input v-model="filterText" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" />
<el-input v-model="filterText" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" />
</div>
<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;">
<span>
{{ data.fondsName }}
<span style="color: #545B65;">{{ data.deptsName }}</span>
<span>{{ data.deptsName }}</span>
</span>
</div>
</template>
</el-tree>
</div>
<!--用户数据-->
@ -33,6 +32,12 @@
<rrOperation />
</div>
<crudOperation :permission="permission">
<template v-slot:middle>
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
<i class="iconfont icon-shanchu" />
删除
</el-button>
</template>
<el-button slot="right" icon="el-icon-refresh-left" size="mini" :disabled="crud.selections.length !== 1" @click="handlePwdReset(crud.selections)">密码重置</el-button>
</crudOperation>
</div>
@ -45,8 +50,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" />
@ -57,9 +62,9 @@
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="所属全宗" prop="fondsId">
<el-form-item label="所属全宗" prop="fonds.id">
<!-- <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-select v-model="form.fonds.id" placeholder="请选择" style="width: 225px;" @change="changeFondsValue($event)">
<el-option
v-for="(item,index) in fondsOptions"
:key="index"
@ -68,10 +73,10 @@
/>
</el-select>
</el-form-item>
<el-form-item label="所属部门" prop="deptsId">
<el-form-item label="所属部门" prop="dept.id">
<!-- <treeselect v-model="form.deptsId" :options="depts" :load-options="loadDepts" placeholder="选择部门" /> -->
<treeselect
v-model="form.deptsId"
v-model="form.dept.id"
:options="depts"
:load-options="loadDepts"
placeholder="选择部门"
@ -101,9 +106,9 @@
<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-form-item style="margin-bottom: 0;" label="岗位" prop="posts" class="is-required">
<el-select ref="paramsSelect" v-model="postDatas" style="width: 584px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changePost">
<el-option v-for="item in postsOptions" :key="item.id" :label="item.postName" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
@ -142,7 +147,7 @@
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler">
<el-table-column :selectable="checkboxT" type="selection" align="center" width="55" />
<el-table-column :show-overflow-tooltip="true" prop="userName" label="账号" />
<el-table-column :show-overflow-tooltip="true" prop="username" label="账号" />
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="用户名" />
<el-table-column prop="gender" label="性别" width="60" />
<el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" />
@ -179,7 +184,7 @@ import crudUser, { resetpassword } from '@/api/system/user'
import { isvalidPhone } from '@/utils/validate'
import { getDepts, FetchSonDepts } from '@/api/system/dept'
import { FetchFondsAll } from '@/api/system/fonds'
import { getAll, getLevel } from '@/api/system/role'
import { getAll } from '@/api/system/role'
import { getAllJob } from '@/api/system/job'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
@ -193,13 +198,20 @@ 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: null, fondsId: null, roles: [], jobs: [], deptsId: null, phone: null }
let userPosts = []
const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: null, fonds: { id: null }, roles: [], posts: [], dept: { id: null }, phone: null }
export default {
name: 'User',
components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker },
cruds() {
return CRUD({ title: '用户', url: 'api/users/initUserList', sort: 'update_time,asc', crudMethod: { ...crudUser }})
return CRUD({ title: '用户', url: 'api/users/initUserList', sort: '', crudMethod: { ...crudUser }, optShow: {
add: true,
edit: true,
del: false,
reset: true,
download: true,
group: false
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
// 数据字典
@ -215,9 +227,15 @@ export default {
callback()
}
}
var validateJob = (rule, value, callback) => {
console.log(value)
if (this.jobDatas.length > 0) {
const validateRole = (rule, value, callback) => {
if (this.roleDatas.length > 0) {
callback()
} else {
callback(new Error('请选择角色'))
}
}
const validatePost = (rule, value, callback) => {
if (this.postDatas.length > 0) {
callback()
} else {
callback(new Error('请选择岗位'))
@ -230,13 +248,13 @@ export default {
blurryTime: null,
btnLoading: false,
resetVisible: false,
// delVisible: false,
// deleteData: {},
height: document.documentElement.clientHeight - 180 + 'px;',
deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
jobDatas: [], roleDatas: [], // 多选时使用
deptName: '', depts: [], deptDatas: [], postsOptions: [], level: 3, roles: [],
postDatas: [], roleDatas: [], // 多选时使用
fondsDatas: [],
fondsOptions: [],
leftFondsId: '',
leftDeptsId: '',
filterText: '',
defaultExpandedKeys: [],
defaultProps: { children: 'children', label: 'fondsName' },
@ -249,9 +267,9 @@ export default {
{ key: '1', display_name: '激活' },
{ key: '0', display_name: '锁定' }
],
deleteData: [],
rules: {
userName: [
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
@ -266,17 +284,23 @@ export default {
phone: [
{ required: true, trigger: 'blur', validator: validPhone }
],
'deptsId': [
'dept.id': [
{ required: true, trigger: 'blur', message: '请选择部门' }
],
'fonds.id': [
{ required: true, trigger: 'blur', message: '请选择全宗' }
],
gender: [
{ required: true, trigger: 'change', message: '请选择性别' }
],
enabled: [
{ required: true, trigger: 'change', message: '请选择状态' }
],
jobs: [
{ trigger: 'blur', validator: validateJob }
roles: [
{ trigger: 'blur', validator: validateRole }
],
posts: [
{ trigger: 'blur', validator: validatePost }
]
}
}
@ -316,10 +340,104 @@ export default {
this.crud.query.endTime = this.blurryTime[1]
}
},
// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
this.getRoles()
this.getPosts()
console.log('postsvvvv', this.postsOptions)
console.log('form', form)
console.log(this.crud.status.edit)
// if (this.crud.status.edit) {
// if (form.postIds.includes(',')) {
// const arr = form.postIds.split(',')
// console.log(arr)
// arr.forEach(item => {
// const json = {}
// json.id = item
// this.postDatas.push(json)
// this.posts.push({
// })
// console.log(this.postDatas)
// })
// } else {
// this.postDatas.push(form.postIds)
// }
// }
},
// 新增前将多选的值设置为空
[CRUD.HOOK.beforeToAdd]() {
this.postDatas = []
this.roleDatas = []
},
// 初始化编辑时候的角色与岗位
[CRUD.HOOK.beforeToEdit](crud, form) {
console.log('beforeToEdit', crud)
console.log('beforeToEditform.roles', form.roles)
this.postDatas = []
this.roleDatas = []
userRoles = []
userPosts = []
const _this = this
form.roles.forEach(function(role, index) {
_this.roleDatas.push(role.id)
const rol = { id: role.id }
userRoles.push(rol)
})
if (form.postIds.includes(',')) {
const arr = form.postIds.split(',')
console.log(arr)
_this.postDatas = arr
arr.forEach(function(id, index) {
const data = { id: id }
userPosts.push(data)
form.posts.push(data)
})
console.log('userPosts', userPosts)
}
},
// 提交前做的操作
[CRUD.HOOK.afterValidateCU](crud) {
console.log(crud)
console.log(crud.form)
if (!crud.form.fonds.id) {
this.$message({
message: '全宗不能为空',
type: 'warning'
})
return false
} else if (!crud.form.dept.id) {
this.$message({
message: '部门不能为空',
type: 'warning'
})
return false
} else if (this.postDatas.length === 0) {
this.$message({
message: '岗位不能为空',
type: 'warning'
})
return false
} else if (this.roleDatas.length === 0) {
this.$message({
message: '角色不能为空',
type: 'warning'
})
return false
}
crud.form.id = crud.form.userId
crud.form.roles = userRoles
crud.form.posts = userPosts
delete crud.form.deptsId
delete crud.form.deptsName
delete crud.form.job
return false
},
clickRowHandler(row) {
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(row)
},
// 重置密码
handlePwdReset() {
this.resetVisible = true
},
@ -327,7 +445,6 @@ export default {
pwdReset(data) {
const params = data.map(item => { return item.userName })
this.btnLoading = true
console.log(params)
resetpassword(params).then(res => {
if (res === 'SUCCESS') {
this.$message({
@ -355,11 +472,36 @@ export default {
userRoles.push(role)
})
},
changeJob(value) {
userJobs = []
value.forEach(function(data, index) {
const job = { id: data }
userJobs.push(job)
changePost(val) {
// const allValues = []
// // 保留所有值
// for (const item of this.organOptions) {
// allValues.push(item.id)
// }
// // 用来储存上一次的值，可以进行对比
// const oldVal = this.oldSearchClassify.length === 1 ? this.oldSearchClassify[0] : []
// // 若是全部选择
// if (val.includes('ALL_SELECT')) this.searchClassify = allValues
// // 取消全部选中 上次有 当前没有 表示取消全选
// if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchClassify = []
// // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// // 新老数据都有全部选中
// if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
// const index = val.indexOf('ALL_SELECT')
// val.splice(index, 1) // 排除全选选项
// this.searchClassify = val
// }
// // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
// if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
// if (val.length === allValues.length - 1) this.searchClassify = ['ALL_SELECT'].concat(val)
// }
// // 储存当前最后的结果 作为下次的老数据
// this.oldSearchClassify[0] = this.searchClassify
userPosts = []
val.forEach(function(data, index) {
const post = { id: data }
userPosts.push(post)
})
},
deleteTag(value) {
@ -369,6 +511,27 @@ export default {
}
})
},
// 切换部门
handleNodeClick(data) {
console.log('nodeiD', data.id)
console.log('nodeName', data.deptsName)
const selectedKey = this.$refs.tree.getCurrentNode()
console.log('selectedKey', selectedKey)
const selectedParentVal = this.$refs.tree.getNode(selectedKey).parent.data.id
console.log('selectedParentVal', selectedParentVal)
if (data.pid === 0) {
this.query.deptsId = null
this.query.deptsName = null
this.leftFondsId = null
this.leftDeptsId = null
} else {
this.query.deptsId = data.id
this.query.deptsName = data.deptsName
this.leftFondsId = selectedParentVal
this.leftDeptsId = data.id
}
this.crud.toQuery()
},
getFondsDatas() {
const parent = {}
parent.id = 0
@ -380,24 +543,22 @@ export default {
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])
Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].children[0].id)
this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].children[0].id)
this.handleNodeClick(this.fondsDatas[0].children[0].children[0])
})
})
},
filterNode(value, data) {
if (!value) return true
return data.fondsName.indexOf(value) !== -1
},
changeFonds(val) {
console.log('val', val)
if (data.deptsName) {
if (data.deptsName.includes(value)) {
return true
} else {
return false
}
}
},
changeFondsValue(value) {
this.depts = []
@ -413,89 +574,6 @@ export default {
}
this.getDepts(params)
},
// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
console.log(form)
this.getRoles()
if (form.id == null) {
this.getDepts()
} else {
// this.getSupDepts(form.deptsId)
}
this.getRoleLevel()
this.getJobs()
form.enabled = form.enabled.toString()
},
// 新增前将多选的值设置为空
[CRUD.HOOK.beforeToAdd]() {
this.jobDatas = []
this.roleDatas = []
},
// 初始化编辑时候的角色与岗位
[CRUD.HOOK.beforeToEdit](crud, form) {
this.getJobs(this.form.deptsId)
this.jobDatas = []
this.roleDatas = []
userRoles = []
userJobs = []
const _this = this
form.roles.forEach(function(role, index) {
_this.roleDatas.push(role.id)
const rol = { id: role.id }
userRoles.push(rol)
})
form.jobs.forEach(function(job, index) {
_this.jobDatas.push(job.id)
const data = { id: job.id }
userJobs.push(data)
})
},
// 提交前做的操作
[CRUD.HOOK.afterValidateCU](crud) {
if (!crud.form.deptsId) {
this.$message({
message: '部门不能为空',
type: 'warning'
})
return false
} else if (this.jobDatas.length === 0) {
this.$message({
message: '岗位不能为空',
type: 'warning'
})
return false
} else if (this.roleDatas.length === 0) {
this.$message({
message: '角色不能为空',
type: 'warning'
})
return false
}
crud.form.roles = userRoles
crud.form.jobs = userJobs
return true
},
// 获取左侧部门数据
getDeptDatas(node, resolve) {
const sort = 'update_time,desc'
const params = { sort: sort }
if (typeof node !== 'object') {
if (node) {
params['name'] = node
}
} else if (node.level !== 0) {
params['pid'] = node.data.id
}
setTimeout(() => {
getDepts(params).then(res => {
if (resolve) {
resolve(res.content)
} else {
this.deptDatas = res.content
}
})
}, 100)
},
getDepts(params) {
getDepts(params).then(res => {
this.depts = res.content.map(function(obj) {
@ -532,18 +610,33 @@ export default {
})
}
},
// 切换部门
handleNodeClick(data) {
if (data.pid === 0) {
this.query.deptId = null
} else {
this.query.deptId = data.id
}
this.crud.toQuery()
// 删除用户
toDelete(datas) {
this.deleteData = datas
this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning',
dangerouslyUseHTMLString: true
}).then(() => {
this.crud.delAllLoading = true
const userIds = []
this.deleteData.forEach(val => {
userIds.push(val.userId)
})
crudUser.del(userIds).then(() => {
this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.crud.delAllLoading = false
this.crud.refresh()
}).catch(err => {
this.crud.delAllLoading = false
console.log(err)
})
}).catch(() => {
})
},
// 改变状态
changeEnabled(data, val) {
// '此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 你是否继续？',
this.$confirm('此操作将禁用 / 启用用户 “' + data.username + '”' + '<span>你是否还要继续？</span>', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
@ -552,11 +645,13 @@ export default {
}).then(() => {
crudUser.edit(data).then(res => {
this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.crud.refresh()
}).catch(() => {
data.enabled = !data.enabled
})
}).catch(() => {
data.enabled = !data.enabled
this.crud.notify('已取消修改', CRUD.NOTIFICATION_TYPE.INFO)
data.enabled = data.enabled ? 0 : 1
})
},
// 获取弹窗内角色数据
@ -566,15 +661,9 @@ export default {
}).catch(() => { })
},
// 获取弹窗内岗位数据
getJobs() {
getPosts() {
getAllJob().then(res => {
this.jobs = res.content
}).catch(() => { })
},
// 获取权限级别
getRoleLevel() {
getLevel().then(res => {
this.level = res.level
this.postsOptions = res.content
}).catch(() => { })
},
checkboxT(row, rowIndex) {
@ -608,10 +697,12 @@ export default {
::v-deep .el-tree{
.el-tree-node__content{
font-size: 14px;
color: #545B65;
}
.top-level{
font-size: 16px;
font-weight: 600;
color: #0C0E1E;
}
}
</style>
Write Preview
Loading…
Cancel
Save