<template>
|
<TableLayout :permissions="['system:user:query']">
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="80px" inline>
|
<!-- <el-form-item label="用户名" prop="username">
|
<el-input v-model="searchForm.username" v-trim placeholder="请输入用户名" @keypress.enter.native="search"/>
|
</el-form-item> -->
|
<el-form-item label="姓名" prop="realname">
|
<el-input v-model="searchForm.realname" v-trim placeholder="请输入姓名" @keypress.enter.native="search"/>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="mobile">
|
<el-input v-model="searchForm.mobile" v-trim placeholder="请输入手机号码" @keypress.enter.native="search"/>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable filterable @keypress.enter.native="search">
|
<el-option
|
v-for="item in statusList"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="角色" prop="roleId">
|
<el-select v-model="searchForm.roleId" placeholder="请选择角色" clearable filterable @keypress.enter.native="search">
|
<el-option
|
v-for="item in roleList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="所属部门" prop="rootDeptId">
|
<DepartmentSelect v-model="searchForm.rootDeptId" placeholder="请选择所属部门" clearable/>
|
</el-form-item>
|
<el-form-item label="岗位" prop="positionId">
|
<PositionSelect v-model="searchForm.positionId" placeholder="请选择岗位" clearable/>
|
</el-form-item>-->
|
<section>
|
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<div style="display: flex;">
|
<!-- <div style="width: 15%; border-right: 1px solid #ececec;">
|
<Tree
|
:list="data"
|
:defaultProps="defaultProps"
|
@callback="callback"
|
></Tree>
|
</div> -->
|
<div style="width: 99%; margin-left: 1%;">
|
<div class="zdy_box">
|
<div style="display: flex; align-items: center;">
|
<span>{{name ? name : '全部'}} （{{tableData.pagination.total}}）</span>
|
</div>
|
<ul class="toolbar" v-permissions="['system:user:create', 'system:user:delete']">
|
<li v-permissions="['system:user:create']">
|
<ImportButton
|
text="导入"
|
template-name="用户模板.xlsx"
|
template-path="/template/user_import_template.xlsx"
|
action="/system/user/importSystemUserBatch"
|
@success="search"
|
/>
|
</li>
|
<li v-permissions="['system:user:create']"><el-button type="primary" @click="$refs.operaUserWindow.open('新建用户')">添加用户</el-button></li>
|
<!-- <li v-permissions="['system:user:create']"><el-button type="primary" @click="changeZZ">更换组织</el-button></li> -->
|
<li v-permissions="['system:user:delete']"><el-button @click="deleteByIdInBatch">删除</el-button></li>
|
</ul>
|
</div>
|
<el-table
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
:default-sort = "{prop: 'createTime', order: 'descending'}"
|
stripe
|
border
|
@selection-change="handleSelectionChange"
|
@sort-change="handleSortChange"
|
>
|
<el-table-column type="selection" align="center" width="55"></el-table-column>
|
<el-table-column prop="realname" label="姓名" align="center" min-width="100px" fixed="left"></el-table-column>
|
<!-- <el-table-column prop="username" label="用户名" align="center" min-width="120px"></el-table-column> -->
|
<!-- <el-table-column prop="sex" label="性别" align="center" min-width="80px">
|
<template slot-scope="{row}">
|
{{row.sex | sex}}
|
</template>
|
</el-table-column> -->
|
<el-table-column prop="mobile" label="手机号码" align="center" min-width="120px"></el-table-column>
|
<el-table-column prop="empNo" label="工号" align="center" min-width="120px"></el-table-column>
|
<el-table-column prop="department.name" label="部门" align="center" min-width="120px"></el-table-column>
|
<!-- <el-table-column prop="email" label="邮箱" align="center" min-width="180px"></el-table-column> -->
|
<!-- <el-table-column prop="birthday" label="生日" sortable="custom" sort-by="BIRTHDAY" align="center" min-width="100px"></el-table-column>
|
--> <el-table-column prop="roles" label="角色" align="center" min-width="160px" class-name="table-column-strings">
|
<template slot-scope="{row}">
|
<ul>
|
<li v-for="role in row.roles" :key="role.id">{{role.name}}</li>
|
</ul>
|
</template>
|
</el-table-column>
|
<el-table-column prop="wechatName" label="微信昵称" align="center" min-width="120px"></el-table-column>
|
<el-table-column prop="createUser" label="创建人" align="center" min-width="100px">
|
<template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.realname}}</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" align="center" min-width="140px"></el-table-column>
|
<el-table-column prop="updateUser" label="更新人" align="center" min-width="100px">
|
<template slot-scope="{row}">{{row.updateUserInfo == null ? '' : row.updateUserInfo.realname}}</template>
|
</el-table-column>
|
<el-table-column prop="updateTime" label="更新时间" align="center" min-width="140px"></el-table-column>
|
<el-table-column label="状态" min-width="100px">
|
<template slot-scope="{row}">
|
<el-switch
|
:disabled="!containPermissions(['system:user:update'])"
|
@change="changeStatus(row)"
|
v-model="row.status"
|
:active-value="0"
|
:inactive-value="1">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-if="containPermissions(['system:user:update', 'system:user:createUserRole', 'system:user:resetPwd', 'system:user:delete'])"
|
label="操作"
|
align="center"
|
width="270"
|
fixed="right"
|
>
|
<template v-if="isAdmin || (row.id !== userInfo.id && row.roles.findIndex(r => r.code === adminCode) === -1)" slot-scope="{row}">
|
<el-button type="text" @click="$refs.operaUserWindow.open('编辑用户', row)" v-permissions="['system:user:update']">编辑</el-button>
|
<el-button type="text" @click="$refs.roleConfigWindow.open(row)" v-permissions="['system:user:createUserRole']">配置角色</el-button>
|
<el-button type="text" @click="$refs.resetPwdWindow.open(row)" v-permissions="['system:user:resetPwd']">重置密码</el-button>
|
<el-button v-if="!row.fixed" type="text" @click="deleteById(row)" style="color: red" v-permissions="['system:user:delete']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
></pagination>
|
</div>
|
</div>
|
</template>
|
<!-- 新建/修改 -->
|
<OperaUserWindow ref="operaUserWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/>
|
<!-- 配置角色 -->
|
<RoleConfigWindow ref="roleConfigWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/>
|
<OperaUserChangeWindow ref="operaUserChangeWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/>
|
<!-- 重置密码 -->
|
<ResetPwdWindow ref="resetPwdWindow"/>
|
</TableLayout>
|
</template>
|
|
<script>
|
import Pagination from '@/components/common/Pagination'
|
import TableLayout from '@/layouts/TableLayout'
|
import BaseTable from '@/components/base/BaseTable'
|
import OperaUserWindow from '@/components/system/user/OperaUserWindow'
|
import OperaUserChangeWindow from '@/components/system/user/OperaUserChangeWindow'
|
import RoleConfigWindow from '@/components/system/user/RoleConfigWindow'
|
import ResetPwdWindow from '@/components/system/user/ResetPwdWindow'
|
import DepartmentSelect from '@/components/common/DepartmentSelect'
|
import PositionSelect from '@/components/common/PositionSelect'
|
import Tree from '@/components/common/Tree'
|
import ImportButton from '@/components/common/ImportButton'
|
import { resetPwd, updateById } from '@/api/system/user'
|
import { fetchAll } from '@/api/system/role'
|
import { fetchTree } from '@/api/system/department'
|
export default {
|
name: 'SystemUser',
|
extends: BaseTable,
|
components: {
|
PositionSelect,
|
DepartmentSelect,
|
ResetPwdWindow,
|
RoleConfigWindow,
|
OperaUserWindow,
|
OperaUserChangeWindow,
|
TableLayout,
|
Pagination,
|
Tree,
|
ImportButton
|
},
|
data () {
|
return {
|
name: '',
|
data: [],
|
roleList: [],
|
defaultProps: {
|
children: 'children',
|
name: 'name',
|
status: 'hasChildren',
|
id: 'id'
|
},
|
statusList: [
|
{ name: '启用', value: 0 },
|
{ name: '禁用', value: 1 }
|
],
|
// 搜索
|
searchForm: {
|
username: '', // 名字
|
realname: '', // 姓名
|
rootDeptId: null, // 部门ID
|
positionId: null, // 岗位ID
|
mobile: '', // 手机号码
|
roleId: '',
|
status: '',
|
type: '0'
|
}
|
}
|
},
|
provide() {
|
return {
|
departments: () => this.data
|
}
|
},
|
created () {
|
this.config({
|
module: '用户',
|
api: '/system/user',
|
'field.main': 'realname',
|
sorts: [{
|
property: 'CREATE_TIME',
|
direction: 'DESC'
|
}]
|
})
|
this.search()
|
this.treeComList()
|
this.getRoleAll()
|
},
|
methods: {
|
treeComList () {
|
fetchTree({})
|
.then(res => {
|
this.data = this.newTree(res)
|
})
|
},
|
newTree(tree) {
|
return tree.map(item => {
|
let newItem = {...item}
|
if (!item.children) {
|
this.$delete( newItem, 'children' )
|
} else {
|
newItem.children = this.newTree(newItem.children)
|
}
|
return newItem
|
});
|
|
},
|
getRoleAll () {
|
fetchAll({})
|
.then(res => {
|
this.roleList = res
|
})
|
},
|
callback (data) {
|
this.name = data.name
|
this.searchForm.rootDeptId = data.id
|
this.search()
|
},
|
changeZZ () {
|
if (this.tableData.selectedRows.length === 0) {
|
return this.$tip.warning('至少选择一条数据')
|
}
|
if (this.tableData.selectedRows.length >= 2) {
|
return this.$tip.warning('一次只能选择一项进行修改')
|
}
|
// this.id = this.tableData.selectedRows[0].umodel.id.toString()
|
// console.log(this.tableData.selectedRows[0])
|
this.$refs.operaUserChangeWindow.open('更换部门', {
|
id: this.tableData.selectedRows[0].id,
|
departmentId: this.tableData.selectedRows[0].department.id })
|
},
|
// 修改状态
|
changeStatus (item) {
|
updateById({
|
id: item.id,
|
status: item.status
|
}).then(res => {
|
this.search()
|
})
|
},
|
resPwd() {
|
this.isWorking.search = true
|
resetPwd({
|
ids: this.user.id
|
})
|
.then(() => {
|
this.$tip.apiSuccess('密码重置成功')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/style/variables.scss";
|
// 列表头像处理
|
.table-column-avatar {
|
img {
|
width: 48px;
|
}
|
}
|
.zdy_box {
|
display: flex;
|
justify-content: space-between;
|
}
|
</style>
|
