563 lines
19 KiB
Vue
563 lines
19 KiB
Vue
<template>
|
|
<div class="content-height system-user">
|
|
<div class="title">
|
|
<span>用户管理</span>
|
|
</div>
|
|
<div class="search">
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<div class="search-box-left">
|
|
<label>用户名:</label>
|
|
<el-input v-model="q.account" placeholder="请输入用户名"></el-input>
|
|
<label>角色名:</label>
|
|
<el-select v-model="q.roleName" class="icon-auth" placeholder="请选择角色名">
|
|
<el-option label="全部" value=""></el-option>
|
|
<template v-for="item in roleList">
|
|
<el-option :label="item.rname" :value="item.rname" :key="item.rid"></el-option>
|
|
</template>
|
|
</el-select>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4" align="right">
|
|
<div class="search-box-right">
|
|
<el-button type="primary" @click="search">查询</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div class="operate-box">
|
|
<el-button @click="add">新增用户</el-button>
|
|
<el-button @click="getSelectUser">批量删除</el-button>
|
|
<el-button @click="downloadTemp">模板下载</el-button>
|
|
<el-upload
|
|
class="upload-demo"
|
|
action="/library/api/sys/user/import"
|
|
:show-file-list="false"
|
|
:on-success="uploadPDFSuccess"
|
|
style="display: inline-block;margin-right: 10px;margin-left: 10px;">
|
|
<el-button @click="newAddFunc">批量导入</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="table">
|
|
<vxe-table ref="userTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
|
v-table-min-height="'calc(100vh - 320px)'">
|
|
<vxe-column show-overflow type="checkbox" width="77"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
|
|
<template #default="{ row, rowIndex }">
|
|
{{ rowIndex + (q.page - 1) * q.pageSize + 1 }}
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="ACCOUNT" title="用户名"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="CELLPHONE_NUMBER" title="手机号"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="CREATEDATE" title="创建时间"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="ORGNAME" title="部门"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="EMAIL" title="邮箱"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="ROLENAME" title="角色"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="USNAME" title="姓名"></vxe-column>
|
|
<!-- <vxe-column show-overflow show-header-overflow title="启用/禁用" width="100" fixed="right">-->
|
|
<!-- <template #default="{ row }">-->
|
|
<!-- <el-switch v-model="row.ISUSE" active-value="1" inactive-value="0"-->
|
|
<!-- @change="(val) => sysUserIsUse(val, row)"></el-switch>-->
|
|
<!-- </template>-->
|
|
<!-- </vxe-column>-->
|
|
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="text" @click="openRowData('view', row)">查看</el-button>
|
|
<el-button type="text" @click="openRowData('modify', row)">编辑</el-button>
|
|
<el-button type="text" class="del-btn" @click="deleteRow(row)">删除</el-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="q.page"
|
|
:page-sizes="[5, 10, 20]"
|
|
:page-size="q.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"/>
|
|
</div>
|
|
<!-- 新增/编辑/查看 用户 -->
|
|
<el-dialog :title="dialogTitle + '用户'" :visible.sync="dialogUser" width="750px" :close-on-click-modal="false"
|
|
:close-on-press-escape="false" modal-append-to-body append-to-body>
|
|
<div class="user-form">
|
|
<el-form :model="form" label-width="186px" :disabled="mode === 'view'">
|
|
<el-form-item label="用户名:" required>
|
|
<el-input :disabled="mode=='modify'" v-model="form.account" maxlength="20" show-word-limit placeholder="请输入用户名"></el-input>
|
|
</el-form-item>
|
|
<!--<el-form-item label="密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
|
|
<!--<el-input v-model="form.password" maxlength="20" type="password" placeholder="请输入密码"></el-input>-->
|
|
<!--</el-form-item>-->
|
|
<!--<el-form-item label="确认密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
|
|
<!--<el-input v-model="repassword" maxlength="20" type="password" placeholder="请确认密码"></el-input>-->
|
|
<!--</el-form-item>-->
|
|
<el-form-item label="手机号:">
|
|
<el-input v-model="form.cellPhoneNumber" placeholder="请输入手机号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门:">
|
|
<el-input maxlength="50" readonly v-model="form.orgName" @click.native="handleClick" placeholder="请选择部门"
|
|
></el-input>
|
|
<!-- <el-input show-word-limit placeholder="请输入部门"></el-input>-->
|
|
</el-form-item>
|
|
<el-form-item label="邮箱:">
|
|
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="角色:" required>
|
|
<el-select v-model="form.roleIdList[0]" class="icon-auth" placeholder="请选择角色">
|
|
<template v-for="item in roleList">
|
|
<el-option :label="item.rname" :value="item.rid" :key="item.rid"></el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="姓名:" required>
|
|
<el-input v-model="form.usname" maxlength="20" show-word-limit placeholder="请输入姓名"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="done">
|
|
<el-button v-if="mode !== 'view'" type="primary" @click="sysUserAddUser">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<orgTable :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
|
|
value: orgTableVal,
|
|
valueName: orgTableValName
|
|
}" :workNumFlag="true" :isOrg="true" :maxSelected="100" @confirm="isTreeOk"></orgTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Base64 } from 'js-base64'
|
|
|
|
export default {
|
|
name: 'User',
|
|
data () {
|
|
return {
|
|
visibleOrgTable:false,
|
|
orgTableVal:'',
|
|
orgTableValName:'',
|
|
q: {
|
|
account: '', // 用户名
|
|
roleName: '', // 角色名称
|
|
page: 1,
|
|
pageSize: 10
|
|
},
|
|
total: 0,
|
|
tableData: [],
|
|
mode: '',
|
|
dialogUser: false,
|
|
form: {
|
|
account: '', // 用户名
|
|
cellPhoneNumber: '', // 手机号
|
|
orgId: '', // 部门
|
|
email: '', // 邮箱
|
|
password: '', // 密码
|
|
usid: '',
|
|
usname: '', // 姓名
|
|
roleIdList: [''] // 角色
|
|
},
|
|
repassword: '',
|
|
roleList: []
|
|
}
|
|
},
|
|
methods: {
|
|
isTreeOk(checkedList){
|
|
|
|
const parts = []
|
|
const partsName = []
|
|
checkedList.map((item, index) => {
|
|
parts.push(item.id)
|
|
partsName.push(item.longName)
|
|
})
|
|
this.form.orgId = parts.toString()
|
|
this.form.orgName = partsName.toString()
|
|
|
|
},
|
|
handleClick(){
|
|
if(this.mode === 'view')return
|
|
this.orgTableVal=this.form.orgId
|
|
this.orgTableValName=this.form.orgName
|
|
this.visibleOrgTable=true
|
|
},
|
|
search () {
|
|
this.q.page = 1
|
|
this.sysUserList()
|
|
},
|
|
// 获取所有用户
|
|
sysUserList () {
|
|
this.$api.user.sysUserList(this.q).then(({ data }) => {
|
|
this.tableData = data.records
|
|
this.total = data.total
|
|
this.q.page = data.current
|
|
this.q.pageSize = data.size
|
|
if (!data.records.length && this.q.page !== 1) {
|
|
this.q.page = 1
|
|
this.sysUserList()
|
|
}
|
|
})
|
|
},
|
|
// 重置
|
|
reset () {
|
|
this.q = {
|
|
account: '', // 用户名
|
|
roleName: '', // 角色名称
|
|
page: 1,
|
|
pageSize: 10
|
|
}
|
|
this.total = 0
|
|
this.tableData = []
|
|
this.sysUserList()
|
|
},
|
|
// 单页数据量
|
|
handleSizeChange (val) {
|
|
this.q.pageSize = val
|
|
this.q.page = 1
|
|
this.sysUserList()
|
|
},
|
|
// 第几页
|
|
handleCurrentChange (val) {
|
|
this.q.page = val
|
|
this.sysUserList()
|
|
},
|
|
// 新增
|
|
add () {
|
|
this.mode = 'add'
|
|
this.form = {
|
|
account: '', // 用户名
|
|
cellPhoneNumber: '', // 手机号
|
|
orgId: '', // 部门
|
|
email: '', // 邮箱
|
|
password: '', // 密码
|
|
usid: '',
|
|
usname: '', // 姓名
|
|
roleIdList: [''] // 角色
|
|
}
|
|
this.repassword = ''
|
|
this.dialogUser = true
|
|
},
|
|
// // 启用/禁用
|
|
// sysUserIsUse (val, row) {
|
|
// this.$confirm(val === '0' ? '此操作将禁用所选用户, 是否继续?' : '此操作将启用所选用户, 是否继续?', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// cancelButtonText: '取消',
|
|
// type: 'warning'
|
|
// }).then(() => {
|
|
// this.$api.user.sysUserIsUse({ USID: row.USID, type: val }).then(_ => {
|
|
// this.$message.success('操作成功')
|
|
// this.sysUserList()
|
|
// })
|
|
// }).catch(() => {
|
|
// row.ISUSE = val === '1' ? '0' : '1'
|
|
// })
|
|
// },
|
|
// 删除
|
|
deleteRow (row) {
|
|
this.deleteUser(row.USID)
|
|
},
|
|
// 验证
|
|
checkUserForm () {
|
|
if (!this.form.account){
|
|
return this.$message.warning('用户名不能为空') && false
|
|
}
|
|
if (this.mode === 'add') {
|
|
|
|
if (!this.form.account || !(/^[a-zA-Z0-9]*$/.test(this.form.account))) {
|
|
return this.$message.warning('用户名只能为纯数字、纯字母或字母数字组合') && false
|
|
}
|
|
// // 密码
|
|
// if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(this.form.password))) {
|
|
// return this.$message.warning('密码至少8个字符，至少1个大写字母，1个小写字母，1个数字') && false;
|
|
// }
|
|
// if (this.repassword !== this.form.password) {
|
|
// return this.$message.warning('请检查密码') && false;
|
|
// }
|
|
}
|
|
if (this.mode === 'modify') {
|
|
// if (this.form.password || this.repassword) {
|
|
// // 密码
|
|
// if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(this.form.password))) {
|
|
// return this.$message.warning('密码至少8个字符，至少1个大写字母，1个小写字母，1个数字') && false;
|
|
// }
|
|
// if (this.repassword !== this.form.password) {
|
|
// return this.$message.warning('请检查密码') && false;
|
|
// }
|
|
// }
|
|
|
|
}
|
|
|
|
if (this.form.cellPhoneNumber && !(/^(?:\+86)?-(1[3456789]\d)\d{8}$/.test(this.form.cellPhoneNumber))) {
|
|
return this.$message.warning('请检查手机号') && false
|
|
}
|
|
if (this.form.email && !(/^[\w-.]+@[a-z\d-]+(\.[a-z\d-]+)*\.[a-z\d]{2,6}$/i.test(this.form.email))) {
|
|
return this.$message.warning('请检查邮箱') && false
|
|
}
|
|
if (!this.form.roleIdList[0]) {
|
|
return this.$message.warning('请选择角色') && false
|
|
}
|
|
if (!this.form.usname) {
|
|
return this.$message.warning('请输入姓名') && false
|
|
}
|
|
return true
|
|
},
|
|
// 新增用户
|
|
sysUserAddUser () {
|
|
if (!this.checkUserForm()) return
|
|
const data = JSON.parse(JSON.stringify(this.form))
|
|
data.account = this.$JSEncrypt(data.account)
|
|
if(this.dialogTitle=='编辑'){
|
|
delete data['password']
|
|
}else{
|
|
data.password = this.$JSEncrypt(data.password)
|
|
}
|
|
const jsonData = JSON.stringify(data)
|
|
this.$api.user.sysUserAddUser(Base64.encodeURI(jsonData)).then(_ => {
|
|
this.$message.success('操作成功')
|
|
this.dialogUser = false
|
|
this.reset()
|
|
})
|
|
},
|
|
// 编辑查看用户
|
|
openRowData (mode, row) {
|
|
this.mode = mode
|
|
this.form = {
|
|
account: row.ACCOUNT, // 用户名
|
|
cellPhoneNumber: row.CELLPHONE_NUMBER, // 手机号
|
|
orgId: row.ORGID, // 部门
|
|
orgName: row.ORGNAME, // 部门
|
|
email: row.EMAIL, // 邮箱
|
|
password: '', // 密码
|
|
usid: row.USID, // 用户ID
|
|
usname: row.USNAME, // 姓名
|
|
roleIdList: [row.ROLEID] // 角色
|
|
}
|
|
this.repassword = ''
|
|
this.dialogUser = true
|
|
},
|
|
newAddFunc () {
|
|
|
|
},
|
|
uploadPDFSuccess (response, file, fileList) {
|
|
if (response.ok) {
|
|
this.$message.success('导入成功')
|
|
this.reset()
|
|
} else {
|
|
this.$message.error(response.message)
|
|
}
|
|
},
|
|
downloadTemp () {
|
|
window.open('/library/api/sys/user/template')
|
|
},
|
|
// 多选用户
|
|
getSelectUser () {
|
|
const users = this.$refs.userTable.getCheckboxRecords()
|
|
if (!users.length) {
|
|
return this.$message.warning('请选择数据后在进行操作')
|
|
}
|
|
const ids = users.map(item => item.USID).join(',')
|
|
this.deleteUser(ids)
|
|
},
|
|
// 删除用户
|
|
deleteUser (ids) {
|
|
this.$confirm('此操作将删除所选用户, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$api.user.sysUserDelete({ ids }).then(_ => {
|
|
this.$message.success('操作成功')
|
|
this.sysUserList()
|
|
})
|
|
})
|
|
},
|
|
// 角色列表
|
|
getSysRole () {
|
|
this.$api.role.getSysRole().then(({ data }) => {
|
|
this.roleList = data
|
|
})
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
dialogTitle () {
|
|
switch (this.mode) {
|
|
case 'add':
|
|
return '新增'
|
|
case 'modify':
|
|
return '编辑'
|
|
case 'view':
|
|
return '查看'
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.sysUserList()
|
|
this.getSysRole()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.system-user {
|
|
.title {
|
|
border-bottom: 1px solid #EBEEF5;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
margin: 0 18px 0 22px;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
.search-box-left {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
label {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
margin-right: 5px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.year {
|
|
::v-deep .el-input__inner {
|
|
padding: 0 15px !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input {
|
|
width: 167px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
@media screen and (max-width: 1366px) {
|
|
::v-deep .el-input {
|
|
width: 135px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-button {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.search-box-right {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.operate-box {
|
|
padding-left: 13px;
|
|
padding-bottom: 11px;
|
|
padding-top: 18px;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin: 0 14px 0 13px;
|
|
|
|
::v-deep .el-pagination {
|
|
margin-top: 13px;
|
|
padding-left: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.user-form {
|
|
padding-top: 26px;
|
|
|
|
::v-deep .el-form {
|
|
padding-right: 79px;
|
|
|
|
.el-form-item {
|
|
margin-bottom: 10px;
|
|
|
|
.el-form-item__label {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.el-input__inner {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #434343;
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-date-editor {
|
|
width: 100%;
|
|
|
|
.el-input__inner {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.el-input__suffix {
|
|
font-size: 16px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.icon-auth {
|
|
.el-icon-arrow-up {
|
|
margin-top: 2px;
|
|
transform: rotateZ(0) !important;
|
|
}
|
|
|
|
.el-icon-arrow-up:before {
|
|
content: '';
|
|
background: url("../../assets/imgs/icon-user.png") no-repeat center center;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 14px;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.done {
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
|
|
::v-deep .el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|