|
@@ -1,29 +1,38 @@
|
|
|
<template>
|
|
|
<div class='m-container'>
|
|
|
- <h2><div class="squrt"></div>员工管理</h2>
|
|
|
+ <h2>
|
|
|
+ <div class="squrt"></div>员工管理
|
|
|
+ </h2>
|
|
|
<div class="m-core">
|
|
|
- <div @click="roleOperation('create')" class='newBand'>添加</div>
|
|
|
+ <div @click="roleOperation('create')"
|
|
|
+ class='newBand'>添加</div>
|
|
|
|
|
|
<el-form :inline="true"
|
|
|
class="searchForm"
|
|
|
- @submit.native.prevent
|
|
|
+ @submit.native.prevent
|
|
|
v-model="searchForm">
|
|
|
<el-form-item>
|
|
|
- <el-input type="text" v-model="searchForm.search" placeholder="姓名或手机号"></el-input>
|
|
|
+ <el-input type="text"
|
|
|
+ v-model="searchForm.search"
|
|
|
+ @keyup.enter.native='getList'
|
|
|
+ placeholder="姓名或手机号"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button @click="search"
|
|
|
type="danger">搜索</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
+
|
|
|
<!-- 列表 -->
|
|
|
<div class="tableWrap">
|
|
|
- <el-table :data='tableList' :header-cell-style="{background:'#EDEEF0',color:'#444'}">
|
|
|
- <el-table-column align='center' prop="realName"
|
|
|
+ <el-table :data='tableList'
|
|
|
+ :header-cell-style="{background:'#EDEEF0',color:'#444'}">
|
|
|
+ <el-table-column align='center'
|
|
|
+ prop="realName"
|
|
|
label="姓名">
|
|
|
</el-table-column>
|
|
|
- <el-table-column align='center' prop="phone"
|
|
|
+ <el-table-column align='center'
|
|
|
+ prop="phone"
|
|
|
label="手机号">
|
|
|
</el-table-column>
|
|
|
<el-table-column align='center'
|
|
@@ -32,7 +41,8 @@
|
|
|
{{ scope.row.roleNames | joinArray(',') }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align='center' prop="jobNature"
|
|
|
+ <el-table-column align='center'
|
|
|
+ prop="jobNature"
|
|
|
label="工作类型">
|
|
|
<template slot-scope="scope">
|
|
|
{{ scope.row.jobNature | jobNature }}
|
|
@@ -40,21 +50,22 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column align='center'
|
|
|
label="所属部门">
|
|
|
-
|
|
|
- <span style="display: inline-block;width: 100%;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;" slot-scope="scope">
|
|
|
- <el-popover
|
|
|
- placement="top-start"
|
|
|
- width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="scope.row.organNameList | joinArray(',')">
|
|
|
+
|
|
|
+ <span style="display: inline-block;width: 100%;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;"
|
|
|
+ slot-scope="scope">
|
|
|
+ <el-popover placement="top-start"
|
|
|
+ width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="scope.row.organNameList | joinArray(',')">
|
|
|
<!-- <el-button slot="reference">hover 激活</el-button> -->
|
|
|
<span slot="reference">{{ scope.row.organNameList | joinArray(',') }}</span>
|
|
|
</el-popover>
|
|
|
-
|
|
|
+
|
|
|
</span>
|
|
|
</el-table-column>
|
|
|
<el-table-column align='center'
|
|
|
- label="状态" :formatter="formatLockFlag">
|
|
|
+ label="状态"
|
|
|
+ :formatter="formatLockFlag">
|
|
|
</el-table-column>
|
|
|
<el-table-column align='center'
|
|
|
label="入职时间">
|
|
@@ -68,13 +79,18 @@
|
|
|
{{ scope.row.demissionDate | formatTimer }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align='center' width="250px"
|
|
|
+ <el-table-column align='center'
|
|
|
+ width="250px"
|
|
|
label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button @click="roleOperation('update', scope.row)" type="text">修改</el-button>
|
|
|
- <el-button @click="onStaffOperation('RESET_PASSWORD', scope.row)" type="text">重置密码</el-button>
|
|
|
- <el-button @click="onStaffOperation('LOCK_UNLOCK', scope.row)" type="text">{{ scope.row.lockFlag == 1 ? '解冻' : '冻结' }}</el-button>
|
|
|
- <el-button @click="onStaffOperation('DEMISSION', scope.row)" type="text">{{ scope.row.demissionDate ? '复职' : '离职' }}</el-button>
|
|
|
+ <el-button @click="roleOperation('update', scope.row)"
|
|
|
+ type="text">修改</el-button>
|
|
|
+ <el-button @click="onStaffOperation('RESET_PASSWORD', scope.row)"
|
|
|
+ type="text">重置密码</el-button>
|
|
|
+ <el-button @click="onStaffOperation('LOCK_UNLOCK', scope.row)"
|
|
|
+ type="text">{{ scope.row.lockFlag == 1 ? '解冻' : '冻结' }}</el-button>
|
|
|
+ <el-button @click="onStaffOperation('DEMISSION', scope.row)"
|
|
|
+ type="text">{{ scope.row.demissionDate ? '复职' : '离职' }}</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -86,51 +102,87 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <el-dialog :title="formTitle[formActionTitle]" :visible.sync="roleStatus" @close="onFormClose('ruleForm')" width="500px">
|
|
|
- <el-form :model="form" :rules="rules" ref="ruleForm">
|
|
|
- <el-form-item label="姓名" prop="realName" :label-width="formLabelWidth">
|
|
|
- <el-input v-model="form.realName" autocomplete="off"></el-input>
|
|
|
+ <el-dialog :title="formTitle[formActionTitle]"
|
|
|
+ :visible.sync="roleStatus"
|
|
|
+ @close="onFormClose('ruleForm')"
|
|
|
+ width="500px">
|
|
|
+ <el-form :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm">
|
|
|
+ <el-form-item label="姓名"
|
|
|
+ prop="realName"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.realName"
|
|
|
+ autocomplete="off"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
|
|
|
+ <el-form-item label="性别"
|
|
|
+ prop="gender"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
<el-select v-model="form.gender">
|
|
|
- <el-option label="男" :value="1"></el-option>
|
|
|
- <el-option label="女" :value="0"></el-option>
|
|
|
+ <el-option label="男"
|
|
|
+ :value="1"></el-option>
|
|
|
+ <el-option label="女"
|
|
|
+ :value="0"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
|
|
|
- <el-input v-model.number="form.phone" autocomplete="off"></el-input>
|
|
|
+ <el-form-item label="手机号"
|
|
|
+ prop="phone"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
+ <el-input v-model.number="form.phone"
|
|
|
+ autocomplete="off"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="角色分类" prop="roleIds" :label-width="formLabelWidth">
|
|
|
- <el-select v-model="form.roleIds" multiple >
|
|
|
- <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ <el-form-item label="角色分类"
|
|
|
+ prop="roleIds"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
+ <el-select v-model="form.roleIds"
|
|
|
+ multiple>
|
|
|
+ <el-option v-for="item in roleList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
<!-- collapse-tags -->
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="所属部门" prop="organIdLists" :label-width="formLabelWidth">
|
|
|
- <el-select style="width: calc(100% - 75px) !important;" v-model="form.organIdLists" multiple>
|
|
|
- <el-option v-for="item in branchList" :key="item.value"
|
|
|
- :label="item.label" :value="item.value"></el-option>
|
|
|
+ <el-form-item label="所属部门"
|
|
|
+ prop="organIdLists"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
+ <el-select style="width: calc(100% - 75px) !important;"
|
|
|
+ v-model="form.organIdLists"
|
|
|
+ multiple>
|
|
|
+ <el-option v-for="item in branchList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
<el-button @click="onBranchCheckAll">全选</el-button>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="工作类型" prop="jobNature" :label-width="formLabelWidth">
|
|
|
+ <el-form-item label="工作类型"
|
|
|
+ prop="jobNature"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
<el-select v-model="form.jobNature">
|
|
|
- <el-option label="全职" value="FULL_TIME"></el-option>
|
|
|
- <el-option label="兼职" value="PART_TIME"></el-option>
|
|
|
- <el-option label="临时" value="TEMPORARY"></el-option>
|
|
|
+ <el-option label="全职"
|
|
|
+ value="FULL_TIME"></el-option>
|
|
|
+ <el-option label="兼职"
|
|
|
+ value="PART_TIME"></el-option>
|
|
|
+ <el-option label="临时"
|
|
|
+ value="TEMPORARY"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="入职时间" prop="entryDate" :label-width="formLabelWidth">
|
|
|
- <el-date-picker
|
|
|
- v-model="form.entryDate"
|
|
|
- type="date" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- placeholder="选择日期">
|
|
|
+ <el-form-item label="入职时间"
|
|
|
+ prop="entryDate"
|
|
|
+ :label-width="formLabelWidth">
|
|
|
+ <el-date-picker v-model="form.entryDate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="选择日期">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
+ <span slot="footer"
|
|
|
+ class="dialog-footer">
|
|
|
<el-button @click="roleStatus = false">取 消</el-button>
|
|
|
- <el-button @click="onRoleSubmit('ruleForm')" type="primary">确 定</el-button>
|
|
|
+ <el-button @click="onRoleSubmit('ruleForm')"
|
|
|
+ type="primary">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
@@ -141,14 +193,14 @@ import { queryEmployByOrganId, employeeOperate, getUserRole, employeeAdd, employ
|
|
|
import { branchQueryPage } from '@/api/specialSetting'
|
|
|
import store from '@/store'
|
|
|
import { isvalidPhone } from '@/utils/validate'
|
|
|
-let validPhone = (rule, value,callback)=>{
|
|
|
- if (!value){
|
|
|
- callback(new Error('请输入电话号码'))
|
|
|
- }else if (!isvalidPhone(value)){
|
|
|
- callback(new Error('请输入正确的11位手机号码'))
|
|
|
- }else {
|
|
|
- callback()
|
|
|
- }
|
|
|
+let validPhone = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请输入电话号码'))
|
|
|
+ } else if (!isvalidPhone(value)) {
|
|
|
+ callback(new Error('请输入正确的11位手机号码'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
export default {
|
|
|
components: { pagination },
|
|
@@ -183,43 +235,43 @@ export default {
|
|
|
},
|
|
|
rules: {
|
|
|
realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
|
|
- gender: [{required: true, message: '请选择性别', trigger: 'change'}],
|
|
|
- phone: [{ type: 'number', required: true, validator: validPhone, trigger: 'blur'}],
|
|
|
- roleIds: [{type: 'array', required: true, message: '请选择分类', trigger: 'change'}],
|
|
|
- organIdLists: [{type: 'array', required: true, message: '请选择所属部门', trigger: 'change'}],
|
|
|
- jobNature: [{required: true, message: '请选择工作类型', trigger: 'change'}],
|
|
|
- entryDate: [{ required: true, message: '请选择入职时间', trigger: 'blur'}],
|
|
|
+ gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
|
|
+ phone: [{ type: 'number', required: true, validator: validPhone, trigger: 'blur' }],
|
|
|
+ roleIds: [{ type: 'array', required: true, message: '请选择分类', trigger: 'change' }],
|
|
|
+ organIdLists: [{ type: 'array', required: true, message: '请选择所属部门', trigger: 'change' }],
|
|
|
+ jobNature: [{ required: true, message: '请选择工作类型', trigger: 'change' }],
|
|
|
+ entryDate: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
|
|
|
},
|
|
|
searchForm: {
|
|
|
search: null
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ mounted () {
|
|
|
this.getList()
|
|
|
this.getRoleList()
|
|
|
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- onBranchCheckAll() {
|
|
|
+ onBranchCheckAll () {
|
|
|
this.form.organIdLists = []
|
|
|
this.branchList.forEach(item => {
|
|
|
this.form.organIdLists.push(item.value)
|
|
|
})
|
|
|
},
|
|
|
- onRoleSubmit(formName) {
|
|
|
+ onRoleSubmit (formName) {
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.form.organIdList = this.form.organIdLists.join(',')
|
|
|
- if(this.formActionTitle == 'create') {
|
|
|
- if(this.form.id) { // 判断有没有Id,如果有则删除
|
|
|
+ if (this.formActionTitle == 'create') {
|
|
|
+ if (this.form.id) { // 判断有没有Id,如果有则删除
|
|
|
delete this.form.id
|
|
|
}
|
|
|
employeeAdd(this.form).then(res => {
|
|
|
this.messageTips('添加', res)
|
|
|
})
|
|
|
- } else if(this.formActionTitle == 'update') {
|
|
|
+ } else if (this.formActionTitle == 'update') {
|
|
|
employeeUpdate(this.form).then(res => {
|
|
|
this.messageTips('修改', res)
|
|
|
})
|
|
@@ -229,8 +281,8 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- messageTips(title, res) {
|
|
|
- if(res.code == 200) {
|
|
|
+ messageTips (title, res) {
|
|
|
+ if (res.code == 200) {
|
|
|
this.$message.success(title + '成功')
|
|
|
this.roleStatus = false
|
|
|
this.getList()
|
|
@@ -238,7 +290,7 @@ export default {
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
},
|
|
|
- search() {
|
|
|
+ search () {
|
|
|
this.pageInfo.page = 1
|
|
|
this.getList()
|
|
|
},
|
|
@@ -247,16 +299,16 @@ export default {
|
|
|
params.rows = this.pageInfo.limit
|
|
|
params.page = this.pageInfo.page
|
|
|
queryEmployByOrganId(params).then(res => {
|
|
|
- if(res.code == 200 && res.data) {
|
|
|
+ if (res.code == 200 && res.data) {
|
|
|
this.tableList = res.data.rows
|
|
|
this.pageInfo.total = res.data.total
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- getRoleList() { // 获取角色
|
|
|
+ getRoleList () { // 获取角色
|
|
|
getUserRole({ delFlag: 0, rows: 9999 }).then(res => {
|
|
|
let result = res.data
|
|
|
- if(res.code == 200 && result && result.rows.length > 0) {
|
|
|
+ if (res.code == 200 && result && result.rows.length > 0) {
|
|
|
result.rows.forEach(item => {
|
|
|
this.roleList.push({
|
|
|
label: item.roleName,
|
|
@@ -269,7 +321,7 @@ export default {
|
|
|
delFlag: 0,
|
|
|
rows: 9999
|
|
|
}).then(res => {
|
|
|
- if(res.code == 200 && res.data && res.data.rows) {
|
|
|
+ if (res.code == 200 && res.data && res.data.rows) {
|
|
|
res.data.rows.forEach(item => {
|
|
|
this.branchList.push({
|
|
|
label: item.name,
|
|
@@ -278,13 +330,13 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
- roleOperation(type, data) {
|
|
|
+ roleOperation (type, data) {
|
|
|
this.formActionTitle = type
|
|
|
this.roleStatus = true
|
|
|
// 修改的时候
|
|
|
- if(type == 'update') {
|
|
|
+ if (type == 'update') {
|
|
|
this.form = {
|
|
|
id: data.id,
|
|
|
realName: data.realName,
|
|
@@ -297,7 +349,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- onFormClose(formName) { // 关闭弹窗重置验证
|
|
|
+ onFormClose (formName) { // 关闭弹窗重置验证
|
|
|
this.form = {
|
|
|
realName: null,
|
|
|
gender: null,
|
|
@@ -309,20 +361,20 @@ export default {
|
|
|
}
|
|
|
this.$refs[formName].resetFields()
|
|
|
},
|
|
|
- formatLockFlag(row) {
|
|
|
+ formatLockFlag (row) {
|
|
|
let reuslt = ['正常', '冻结']
|
|
|
- if(row.demissionDate) {
|
|
|
+ if (row.demissionDate) {
|
|
|
return '离职'
|
|
|
} else {
|
|
|
return reuslt[row.lockFlag]
|
|
|
}
|
|
|
},
|
|
|
- onStaffOperation(type, data) {
|
|
|
- employeeOperate({
|
|
|
+ onStaffOperation (type, data) {
|
|
|
+ employeeOperate({
|
|
|
employeeId: data.id,
|
|
|
operate: type
|
|
|
}).then(res => {
|
|
|
- if(res.code == 200) {
|
|
|
+ if (res.code == 200) {
|
|
|
this.$message.success('更改成功')
|
|
|
this.roleStatus = false
|
|
|
this.getList()
|
|
@@ -339,16 +391,19 @@ export default {
|
|
|
background: #14928a;
|
|
|
border-color: #14928a;
|
|
|
color: #fff;
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
background: #14928a;
|
|
|
border-color: #14928a;
|
|
|
- color: #FFF;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.el-dialog__body {
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
-.el-select, .el-date-editor.el-input{
|
|
|
+.el-select,
|
|
|
+.el-date-editor.el-input {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
</style>
|