<template>
|
<Row>
|
<h4 class="d-flex flex-wrap justify-content-between align-items-center pt-2 mb-2">
|
<div class="mb-2">用户管理</div>
|
<div class="mb-2" style="max-width: 200px;">
|
<fButton
|
type="warning"
|
@click.native="handleAdd"
|
authority="sys:user:add"
|
>
|
<span class="fas fa-plus pr10"></span>
|
添加用户
|
</fButton>
|
</div>
|
</h4>
|
<Col :span="6">
|
<b-card
|
style="margin-right: 10px"
|
>
|
<PersonnelTree
|
ref="tree"
|
:data="treeData"
|
:currentId="currentId"
|
@currentNode="currentNode"
|
/>
|
</b-card>
|
</Col>
|
<Col :span="18">
|
<div
|
class="clients-wrapper"
|
:class="{'clients-sidebox-open': sideboxOpened, 'messages-sidebox-open': sideboxOpen}"
|
>
|
<!-- `.clients-content` fills all available space of `clients-wrapper` -->
|
<perfect-scrollbar
|
:options="{ suppressScrollX: true, wheelPropagation: true }"
|
class="clients-content clients-scroll"
|
>
|
<b-card>
|
<div class="clearfix mb10">
|
<div class="fl">
|
<b-form-radio-group
|
id="btnradios2"
|
buttons
|
button-variant="outline-primary"
|
v-model="allNode"
|
name="radioBtnOutline"
|
class="mr10"
|
>
|
<b-form-radio
|
v-for="(iteam,index) in allNodeOptions"
|
:key="index"
|
:value="iteam"
|
v-b-tooltip.hover
|
:title="iteam === '当前机构'?'选中后，只查询本机构人员，不查询下属机构':''"
|
>{{iteam}}</b-form-radio>
|
</b-form-radio-group>
|
<span>姓名：</span>
|
<b-input
|
autocomplete="off"
|
v-model="searchName"
|
placeholder="请输入关键字"
|
class="mr10"
|
style="width: 200px; display: inline-block"
|
/>
|
<b-btn
|
variant="primary"
|
@click="handleSearch"
|
>
|
<span class="fas fa-search"></span>
|
搜 索
|
</b-btn>
|
</div>
|
<!-- 机构变更 start -->
|
<fTemplate class="fr" authority="sys:user:editOrg" >
|
<b-form-checkbox
|
v-model="isCheckAll"
|
:value="true"
|
:unchecked-value="false">
|
选择全部用户
|
</b-form-checkbox>
|
<b-btn
|
@click="handleEditOrg"
|
variant="success"
|
>
|
<span class="fas fa-edit pr5"></span>机构变更
|
</b-btn>
|
</fTemplate>
|
<!-- 机构变更 end -->
|
</div>
|
<Table
|
:data="userData"
|
@selection-change="handleSelectionChange"
|
>
|
<TableColumn
|
type="selection"
|
width="55">
|
</TableColumn>
|
<TableColumn
|
type="index"
|
label="序号"
|
:index="index"
|
width="50"
|
/>
|
<TableColumn
|
label="姓名"
|
prop="nickname"
|
width="200"
|
/>
|
<TableColumn
|
label="用户名"
|
prop="username"
|
width="200"
|
/>
|
<TableColumn
|
label="电话"
|
prop="phone"
|
width="200"
|
/>
|
<TableColumn
|
label="操作"
|
>
|
<template
|
slot-scope="scope"
|
>
|
<fButton
|
@click.native="handleEdit(scope.row)"
|
type="link"
|
authority="sys:user:edit"
|
>
|
编辑
|
</fButton>
|
<fButton
|
@click.native="handleRole(scope.row.id)"
|
type="link"
|
authority="sys:user:role"
|
>
|
分配角色
|
</fButton>
|
<fButton
|
@click.native="handleReset(scope.row.id, scope.row.orgId)"
|
type="link"
|
authority="sys:user:resetpassword"
|
>
|
重置密码
|
</fButton>
|
<fButton
|
@click.native="handleDel(scope.row.id)"
|
type="link"
|
authority="sys:user:delete"
|
>
|
删除
|
</fButton>
|
</template>
|
</TableColumn>
|
</Table>
|
<div class="pt20 pb20">
|
<b-pagination class="justify-content-center justify-content-sm-end m-0"
|
v-if="total"
|
v-model="currentPage"
|
@change="changePage"
|
:total-rows="total"
|
:per-page="length"
|
/>
|
</div>
|
</b-card>
|
</perfect-scrollbar>
|
<!-- / .clients-content -->
|
</div>
|
</Col>
|
<UserEditRole
|
ref="userEditRole"
|
:roleList="role.roleList"
|
@submit="savaRoleInUser"
|
:currentRoleInUser="currentRoleInUser"
|
/>
|
<PersonnelTreeModel
|
:treeData="treeData"
|
:currentId="currentId"
|
:item="null"
|
ref="treeModel"
|
title="选择要变更的组织机构"
|
@submit="submitEditOrg"
|
/>
|
</Row>
|
</template>
|
|
<script>
|
import { Row, Col, Table, TableColumn } from 'element-ui'
|
import UserForm from './component/UserForm'
|
import UserEditRole from './component/UserEditRole'
|
import { getOrgTree } from '../../server/project.js'
|
import PersonnelTree from '@/pages/Personnel/component/PersonnelTree'
|
import PersonnelTreeModel from '@/pages/Personnel/component/PersonnelTreeModel'
|
import PerfectScrollbar from '@/vendor/libs/perfect-scrollbar/PerfectScrollbar'
|
import {
|
userDel,
|
getUsers,
|
setPassWord,
|
getRoleToUser,
|
setRoleToUser,
|
updateUserToOrg
|
} from '../../server/user.js'
|
import { isOrg } from '../../components/common/util.js'
|
import { getRoles } from '../../server/role.js'
|
export default {
|
metaInfo: {
|
title: '用户管理'
|
},
|
data: () => ({
|
total: 0,
|
length: 10,
|
userData: [],
|
treeData: [],
|
currentId: '',
|
currentPage: 1,
|
selected: null,
|
searchName: '',
|
currentUserId: '',
|
sideboxOpen: false,
|
sideboxOpened: false,
|
currentOrgItem: null,
|
currentRoleInUser: [],
|
role: {
|
name: '',
|
total: 0,
|
length: 999,
|
roleList: [],
|
currentPage: 1
|
},
|
allNodeOptions: ['全部', '当前机构'],
|
allNode: '全部',
|
|
/* 组织机构变更 */
|
isCheckAll: false,
|
checkIds: []
|
}),
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
async mounted() {
|
await this.getTree()
|
this.$nextTick(async () => {
|
await this.fetchUserList()
|
await this.fetchRoleList()
|
})
|
},
|
methods: {
|
// * 获取用户数据
|
async fetchUserList() {
|
if (!this.currentOrgItem) return
|
const isOrgResult = isOrg(this.currentOrgItem.type)
|
const orgId = isOrgResult
|
? this.currentOrgItem.id
|
: this.currentOrgItem.orgId
|
const res = await getUsers({
|
orgId,
|
id: this.currentOrgItem.id,
|
start: this.length * (this.currentPage - 1),
|
name: this.searchName,
|
length: this.length,
|
isAll: this.allNode === '全部' ? 0 : 1
|
})
|
if (res) {
|
this.userData = res.data
|
this.total = res.total
|
}
|
},
|
// * 搜索
|
handleSearch() {
|
this.currentPage = 1
|
this.fetchUserList()
|
},
|
// * 获取角色列表
|
async fetchRoleList() {
|
const res = await getRoles({
|
orgId: this.currentOrgItem.id,
|
start: 0,
|
name: this.role.name,
|
length: this.role.length
|
})
|
if (res) {
|
this.role.roleList = res.data
|
}
|
},
|
// * 序号
|
index(index) {
|
return this.currentPage > 1
|
? this.length * (this.currentPage - 1) + index + 1
|
: index + 1
|
},
|
// * 获取组织树
|
async getTree() {
|
let res = await getOrgTree({ orgById: this.orgId })
|
if (res) {
|
this.treeData = res
|
if (this.$route.query.currentId) {
|
this.$refs.tree.setCurrentKey(this.$route.query.currentId)
|
this.currentId = this.$route.query.currentId
|
this.$nextTick(() => {
|
this.currentOrgItem = this.$refs.tree.getCurrentNode()
|
})
|
} else {
|
const { child, ...item } = this.treeData[0]
|
this.currentOrgItem = item
|
this.$refs.tree.setCurrentKey(item.id)
|
this.currentId = item.id
|
}
|
}
|
},
|
// * 添加用户
|
async handleAdd() {
|
if (!this.currentId) {
|
this.$toast({
|
type: 'warning',
|
message: '请先选择一个机构'
|
})
|
return
|
}
|
// if (!(this.currentOrgItem.partack - 0)) {
|
// this.$toast({
|
// type: 'warning',
|
// message: '该机构不支持创建人员'
|
// })
|
// return
|
// }
|
const officeId = this.currentOrgItem.id
|
const isOrgResult = isOrg(this.currentOrgItem.type)
|
const currentId = isOrgResult
|
? this.currentOrgItem.id
|
: this.currentOrgItem.orgId
|
this.$router.push({
|
path: '/user/add',
|
query: {
|
officeId,
|
currentId,
|
currentName: this.currentOrgItem.name
|
}
|
})
|
},
|
// * 分页器
|
changePage(e) {
|
this.currentPage = e
|
this.fetchUserList()
|
},
|
// * 分配权限弹窗
|
handleRole(id) {
|
this.$refs.userEditRole.showModel()
|
this.currentUserId = id
|
this.getRoleInUser()
|
},
|
// * 删除用户
|
handleDel(id) {
|
this.$swal(
|
{
|
title: '确定删除吗？',
|
type: 'error',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
async () => {
|
let res = await userDel({ id })
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '删除成功!'
|
})
|
// * 判断是否是最后一条数据
|
if (this.userData.length === 1 && this.currentPage - 0 > 1) {
|
this.currentPage = this.currentPage - 1
|
}
|
this.fetchUserList()
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: '删除失败!'
|
})
|
}
|
}
|
)
|
},
|
// * 重置密码
|
handleReset(id, orgId) {
|
this.$swal(
|
{
|
title: '确定重置当前用户登陆密码为123456？',
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
async () => {
|
const res = await setPassWord({
|
orgId,
|
id
|
})
|
if (res && res.success) {
|
this.$toast({
|
type: 'success',
|
message: '重置成功'
|
})
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
}
|
)
|
},
|
// * 编辑
|
handleEdit({ id, orgId }) {
|
this.$router.push({
|
path: '/user/add',
|
query: {
|
currentId: orgId,
|
userId: id,
|
currentName: this.currentOrgItem.name
|
}
|
})
|
},
|
// * 获取用户添加角色
|
async getRoleInUser() {
|
const isOrgResult = isOrg(this.currentOrgItem.type)
|
const orgId = isOrgResult
|
? this.currentOrgItem.id
|
: this.currentOrgItem.orgId
|
const res = await getRoleToUser({
|
id: this.currentUserId,
|
orgId
|
})
|
if (res && res.code - 0 === 0) {
|
this.currentRoleInUser = res.data
|
} else {
|
this.currentRoleInUser = []
|
}
|
},
|
// * 保存用户添加角色
|
async savaRoleInUser(roleIds) {
|
const isOrgResult = isOrg(this.currentOrgItem.type)
|
const orgId = isOrgResult
|
? this.currentOrgItem.id
|
: this.currentOrgItem.orgId
|
const res = await setRoleToUser({
|
id: this.currentUserId,
|
orgId,
|
roleIds
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '分配角色成功'
|
})
|
this.$refs.userEditRole.hideModel()
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res.message
|
})
|
}
|
},
|
// * 组织机构数点击回调
|
currentNode(node) {
|
this.currentOrgItem = node
|
this.currentId = node.id
|
this.searchName = ''
|
this.fetchUserList()
|
this.fetchRoleList()
|
},
|
/* 组织机构变更 start */
|
async updateUserToOrg(data) {
|
const res = await updateUserToOrg(data)
|
if (res && res.success) {
|
this.$refs.treeModel.hideModel()
|
/* 成功后刷新列表 */
|
// * 判断是否是最后一条数据
|
if (this.userData.length === 1 && this.currentPage - 0 > 1) {
|
this.currentPage = this.currentPage - 1
|
}
|
this.fetchUserList()
|
}
|
this.$toast({
|
type: res && res.success ? 'success' : 'error',
|
message: res && res.msg ? res.msg : '变更失败'
|
})
|
},
|
// 得到选择ids
|
handleSelectionChange(selection) {
|
this.checkIds = selection.map(item => item.id)
|
},
|
handleEditOrg() {
|
if (this.isCheckAll || this.checkIds.length) {
|
this.$refs.treeModel.showModel()
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '请选择需要变更的组织机构的用户'
|
})
|
}
|
},
|
|
// * 表单回调
|
submitEditOrg({ node }) {
|
if (node) {
|
// 变更前组织机构信息
|
const officeId = this.currentOrgItem.id
|
const isOrgResult = isOrg(this.currentOrgItem.type)
|
const orgId = isOrgResult
|
? this.currentOrgItem.id
|
: this.currentOrgItem.orgId
|
// 将要变更的组织机构信息
|
const updateOfficeId = node.id
|
const isUpdateOrgResult = isOrg(node.type)
|
const updateOrgId = isUpdateOrgResult ? node.id : node.orgId
|
|
let dataJson = { orgId, updateOfficeId, updateOrgId }
|
if (this.isCheckAll) {
|
dataJson.officeId = officeId
|
this.$swal(
|
{
|
title: `确定将”${this.currentOrgItem.name}“下全部用户移动到”${
|
node.name
|
}“吗？`,
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
() => {
|
this.updateUserToOrg(dataJson)
|
}
|
)
|
} else {
|
dataJson.userIds = this.checkIds.toString()
|
// 调用接口
|
this.updateUserToOrg(dataJson)
|
}
|
}
|
}
|
/* 组织机构变更 end */
|
},
|
watch: {
|
allNode(val, oldVal) {
|
if (val !== oldVal) {
|
this.fetchUserList()
|
}
|
}
|
},
|
components: {
|
Row,
|
Col,
|
Table,
|
UserForm,
|
TableColumn,
|
UserEditRole,
|
PersonnelTree,
|
PersonnelTreeModel,
|
PerfectScrollbar
|
}
|
}
|
</script>
|
<style>
|
.clients-scroll {
|
position: relative !important;
|
width: 100%;
|
}
|
</style>
|
