<template>
|
<div class="app-container">
|
<el-form :model="queryParam" ref="queryForm" :inline="true">
|
<el-form-item label="真实姓名：">
|
<el-input v-model="queryParam.userName" size="small" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="部门：">
|
<el-cascader
|
clearable
|
v-model="queryParam.departmentId"
|
:options="depts"
|
:props="{ emitPath: false, value: 'id', label: 'name', checkStrictly: true, multiple: true }"
|
></el-cascader>
|
</el-form-item>
|
<el-form-item >
|
<div style="display: flex">
|
<el-button type="primary" @click="submitForm" size="small">查询</el-button>
|
<router-link :to="{path:'/user/student/edit'}" class="link-left">
|
<el-button type="primary">添加</el-button>
|
</router-link>
|
<el-upload
|
class="upload-demo"
|
:action="upLoadUrl"
|
:with-credentials="true"
|
:on-success="handlePreview"
|
multiple
|
:show-file-list="false"
|
:file-list="fileList"
|
:before-upload="beforeAvatarUpload">
|
<el-button type="primary">导入</el-button>
|
</el-upload>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
|
<el-table-column prop="userName" label="用户名"/>
|
<el-table-column prop="realName" label="真实姓名" width="150"/>
|
<el-table-column prop="deptNames" label="部门" />
|
<el-table-column label="标签" prop="tagNames" align="center">
|
<template slot-scope="{row}">
|
<el-tag v-for="(item, index) in row.tagNames" :key="index">{{ item }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="人员状态" prop="condition" align="center" width="100px">
|
<template slot-scope="{row}">
|
<el-tag :type="row.condition == '正常' || row.condition == null ? 'success' : 'warning'">{{ row.condition ? row.condition : '正常' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter" align="center"/>
|
<el-table-column prop="phone" label="手机号" width="120"/>
|
<el-table-column prop="createTime" label="创建时间" width="160px"/>
|
<el-table-column label="状态" prop="status" width="70px">
|
<template slot-scope="{row}">
|
<el-tag :type="statusTagFormatter(row.status)">
|
{{ statusFormatter(row.status) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column :width="deptAdmin() ? '310px' : '350px'" label="操作" fixed="right" align="center">
|
<template slot-scope="{row}">
|
<el-button size="mini" v-if="!deptAdmin()" @click="changeStatus(row)" class="link-left">
|
{{ statusBtnFormatter(row.status) }}
|
</el-button>
|
<el-button size="mini" @click="handleEdit(row.id)">编辑</el-button>
|
<!-- <router-link :to="{path:'/log/user/list', query:{userId:row.id}}" class="link-left">
|
<el-button size="mini" >日志</el-button>
|
</router-link> -->
|
<el-button type="primary" size="mini" @click="status(row)" class="link-left">状态</el-button>
|
<el-button type="primary" size="mini" @click="transposition(row)" class="link-left">调动</el-button>
|
<el-popconfirm title="确认删除吗" @confirm="deleteUser(row)">
|
<el-button v-if="!deptAdmin()" slot="reference" size="mini" type="danger" class="link-left">删除</el-button>
|
</el-popconfirm>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
|
@pagination="search"/>
|
|
<!-- 状态弹窗 -->
|
<el-dialog :visible.sync="statusVisible" append-to-body :show-close="false" center width="400px">
|
<el-radio-group v-model="conditionExamine.targetCondition">
|
<el-radio label="正常">正常</el-radio>
|
<el-radio label="病假">病假</el-radio>
|
<el-radio label="出差">出差</el-radio>
|
<el-radio label="其他">其他</el-radio>
|
</el-radio-group>
|
<el-input type="textarea" maxlength="100" show-word-limit :autosize="{ minRows: 4}" :rows="2" v-model="conditionExamine.reason" placeholder="请输入详细情况" style="margin-top: 30px;"></el-input>
|
<upload :fileUrl="conditionExamine.contentUrl" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getConditionUploadAttachmentUrl" @removeFile="removeConditionAttachmentFile" style="margin-top: 30px;"/>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="statusConfirm">确 定</el-button>
|
<el-button @click="statusVisible = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
|
<el-dialog
|
title="编辑"
|
:visible.sync="editShow"
|
width="800px"
|
:before-close="handleClose">
|
<el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
|
<el-form-item label="用户名：" prop="userName" required>
|
<el-input v-model="form.userName"></el-input>
|
</el-form-item>
|
<el-form-item label="密码：" required>
|
<el-input v-model="form.password" type="password"></el-input>
|
</el-form-item>
|
<el-form-item label="真实姓名：" prop="realName" required>
|
<el-input v-model="form.realName"></el-input>
|
</el-form-item>
|
<el-form-item label="年龄：">
|
<el-input v-model="form.age"></el-input>
|
</el-form-item>
|
<el-form-item label="性别：">
|
<el-select v-model="form.sex" placeholder="性别" clearable>
|
<el-option v-for="item in sexEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出生日期：" prop="birthDay">
|
<el-date-picker v-model="form.birthDay" required type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
|
</el-form-item>
|
<el-form-item label="手机：">
|
<el-input v-model="form.phone"></el-input>
|
</el-form-item>
|
<el-form-item label="部门：" prop="deptIds" required>
|
<!-- <el-select v-model="form.deptIds" multiple collapse-tags placeholder="部门" :disabled="this.$route.query.id">
|
<el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
</el-select> -->
|
<el-cascader
|
clearable
|
:disabled="this.$route.query.id"
|
v-model="form.deptIds"
|
:options="depts"
|
:props="{ emitPath: false, multiple: true, value: 'id', label: 'name', checkStrictly: true }"
|
></el-cascader>
|
</el-form-item>
|
<el-form-item label="标签：" prop="tagIds">
|
<el-select v-model="form.tagIds" multiple collapse-tags placeholder="标签">
|
<el-option v-for="item in tags" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态：" required>
|
<el-select v-model="form.status" placeholder="状态">
|
<el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="submitEdit">提 交</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 调动弹窗 -->
|
<el-dialog
|
:title="title"
|
:visible.sync="dialogVisible"
|
width="400px">
|
<el-cascader
|
clearable
|
:disabled="this.$route.query.id"
|
v-model="examine.departmentId"
|
:options="deptList"
|
:props="{ emitPath: false, multiple: true, value: 'id', label: 'name', checkStrictly: true }"
|
></el-cascader>
|
<el-input type="textarea" maxlength="100" show-word-limit :autosize="{ minRows: 4}" :rows="2" v-model="examine.reason" placeholder="请输入情况说明" style="margin-top: 30px;"></el-input>
|
<upload :fileUrl="examine.contentUrl" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile" style="margin-top: 30px;"/>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitExamine">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters, mapState } from 'vuex'
|
import Pagination from '@/components/Pagination'
|
import userApi from '@/api/user'
|
import departmentExamineApi from '@/api/departmentExamine'
|
import department from '@/api/department'
|
import Upload from '@/components/UploadC'
|
|
export default {
|
components: { Pagination, Upload },
|
computed: {
|
fileContentUrl: () => {
|
return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
|
}
|
},
|
data () {
|
return {
|
editShow: false,
|
depts: [],
|
tags: [],
|
value2:[],
|
form: {
|
id: null,
|
userName: '',
|
password: '',
|
realName: '',
|
role: 1,
|
status: 1,
|
age: '',
|
sex: '',
|
birthDay: null,
|
phone: null,
|
deptIds: [],
|
tagIds: []
|
},
|
formLoading: false,
|
rules: {
|
userName: [
|
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
],
|
realName: [
|
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
|
],
|
deptIds: [
|
{ required: true, message: '请选择部门', trigger: 'change' }
|
]
|
},
|
user:{},
|
statusVisible: false,
|
upLoadUrl:'/api/admin/user/import',
|
fileList:[],
|
queryParam: {
|
userName: '',
|
departmentId: [],
|
roles: [1],
|
pageIndex: 1,
|
pageSize: 10
|
},
|
listLoading: true,
|
tableData: [],
|
total: 0,
|
examine: {
|
userId: '',
|
departmentId: [],
|
departmentIds: '',
|
nowDepartmentIds: '',
|
contentUrl: [],
|
attachment: ''
|
},
|
conditionExamine: {
|
userId: '',
|
targetCondition: '',
|
sourceCondition: '',
|
reason: '',
|
result: 0,
|
contentUrl: [],
|
attachment: ''
|
},
|
title: '部门调动',
|
dialogVisible: false,
|
deptList: []
|
}
|
},
|
created () {
|
this.search();
|
this.getTags();
|
department.getDeptAdmins().then(res => {
|
this.depts = res.response;
|
})
|
},
|
methods: {
|
handleClose() {
|
this.form = {
|
id: null,
|
userName: '',
|
password: '',
|
realName: '',
|
role: 1,
|
status: 1,
|
age: '',
|
sex: '',
|
birthDay: null,
|
phone: null,
|
deptIds: [],
|
tagIds: []
|
}
|
this.editShow = false
|
this.search()
|
},
|
getTags () {
|
userApi.tagList(null).then(data => {
|
this.tags = data.response
|
})
|
},
|
deptAdmin() {
|
return sessionStorage.getItem('deptAdmin') === '1'
|
},
|
removeAttachmentFile(fileList, fileName) {
|
this.examine.attachment = JSON.stringify(fileList.filter(item => item.name !== fileName));
|
this.examine.contentUrl = fileList.filter(item => item.name !== fileName);
|
},
|
getUploadAttachmentUrl(uploadData) {
|
this.examine.attachment = JSON.stringify(uploadData);
|
this.examine.contentUrl = uploadData;
|
},
|
removeConditionAttachmentFile(fileList, fileName) {
|
this.conditionExamine.attachment = JSON.stringify(fileList.filter(item => item.name !== fileName));
|
this.conditionExamine.contentUrl = fileList.filter(item => item.name !== fileName);
|
},
|
getConditionUploadAttachmentUrl(uploadData) {
|
this.conditionExamine.attachment = JSON.stringify(uploadData);
|
this.conditionExamine.contentUrl = uploadData;
|
},
|
submitExamine() {
|
this.examine.departmentIds = this.examine.departmentId.join(',')
|
departmentExamineApi.save(this.examine).then(res => {
|
if (res.code === 1) {
|
this.$message.success("提交成功，审核后生效")
|
this.dialogVisible = false
|
this.search()
|
} else {
|
this.$message.error("操作失败")
|
}
|
})
|
},
|
transposition(item) {
|
if (item.departmentExamineResult) {
|
this.$message.warning("该用户调动待审核");
|
return
|
}
|
this.examine.userId = item.id
|
this.examine.departmentId = item.deptIdList
|
this.examine.nowDepartmentIds = item.deptIdList.join(',')
|
department.getDeptAdmins().then(res => {
|
if (res.code === 1) {
|
this.deptList = res.response
|
this.dialogVisible = true
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
status(user) {
|
if (user.conditionExamineResult) {
|
this.$message.warning("该用户状态待审核");
|
return
|
}
|
this.statusVisible = true;
|
this.conditionExamine.sourceCondition = user.condition ? user.condition : '0';
|
this.conditionExamine.userId = user.id
|
},
|
statusConfirm() {
|
if (this.conditionExamine.targetCondition === null) {
|
this.$message.error("请选择状态")
|
return
|
}
|
userApi.setStatus(this.conditionExamine).then(res => {
|
if (res.code === 1) {
|
this.$message.success("操作成功")
|
this.statusVisible = false;
|
this.search()
|
} else {
|
this.$message.error("操作失败")
|
}
|
})
|
},
|
handlePreview(e){
|
console.log(e)
|
if (e.code==1){
|
this.search()
|
this.$message.success(e.message)
|
}else {
|
this.$message.error(e.message)
|
}
|
},
|
beforeAvatarUpload(file) {
|
let legalName = ['xlsx', 'xls']
|
// 拿到后缀名
|
let name = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)
|
if (legalName.includes(name)) {
|
// console.log(legalName.includes(name));
|
} else {
|
this.$message.warning('文件格式不对，仅限xls和xlsx')
|
return false
|
}
|
},
|
search () {
|
this.listLoading = true
|
userApi.getUserPageList(this.queryParam).then(data => {
|
const re = data.response
|
this.tableData = re.list
|
this.total = re.total
|
this.queryParam.pageIndex = re.pageNum
|
this.listLoading = false
|
})
|
},
|
handleEdit(id) {
|
this.formLoading = true
|
userApi.selectUser(id).then(re => {
|
this.form = re.response
|
this.formLoading = false
|
const isEmpty = re.response.deptIds.trim().length === 0;
|
if (isEmpty){
|
this.form.deptIds = []
|
}else {
|
this.form.deptIds = re.response.deptIds.split(',').map(Number)
|
}
|
this.editShow = true
|
})
|
},
|
changeStatus (row) {
|
let _this = this
|
userApi.changeStatus(row.id).then(re => {
|
if (re.code === 1) {
|
row.status = re.response
|
_this.$message.success(re.message)
|
} else {
|
_this.$message.error(re.message)
|
}
|
})
|
},
|
deleteUser (row) {
|
let _this = this
|
userApi.deleteUser(row.id).then(re => {
|
if (re.code === 1) {
|
_this.search()
|
_this.$message.success(re.message)
|
} else {
|
_this.$message.error(re.message)
|
}
|
})
|
},
|
submitEdit () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.formLoading = true
|
userApi.createUser(this.form).then(data => {
|
if (data.code === 1) {
|
this.$message.success(data.message)
|
this.handleClose()
|
} else {
|
this.$message.error(data.message)
|
this.formLoading = false
|
}
|
}).catch(e => {
|
this.formLoading = false
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
submitForm () {
|
this.queryParam.pageIndex = 1
|
this.search()
|
},
|
levelFormatter (row, column, cellValue, index) {
|
return this.enumFormat(this.levelEnum, cellValue)
|
},
|
sexFormatter (row, column, cellValue, index) {
|
return this.enumFormat(this.sexEnum, cellValue)
|
},
|
statusFormatter (status) {
|
return this.enumFormat(this.statusEnum, status)
|
},
|
statusTagFormatter (status) {
|
return this.enumFormat(this.statusTag, status)
|
},
|
statusBtnFormatter (status) {
|
return this.enumFormat(this.statusBtn, status)
|
}
|
},
|
computed: {
|
...mapGetters('enumItem', [
|
'enumFormat'
|
]),
|
...mapState('enumItem', {
|
sexEnum: state => state.user.sexEnum,
|
statusEnum: state => state.user.statusEnum,
|
statusTag: state => state.user.statusTag,
|
statusBtn: state => state.user.statusBtn,
|
levelEnum: state => state.user.levelEnum
|
})
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.upload-demo{
|
margin-left: 5px;
|
}
|
</style>
|
