<template>
|
<el-dialog v-model="params.visible" :rules="rules" :title="params.title" width="60%" destroy-on-close>
|
<div class="content">
|
<el-form :model="addForm" label-width="130px" :rules="rules" ref="addFormRef">
|
<el-form-item label="任务名称:" prop="taskName">
|
<el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
|
</el-form-item>
|
<el-form-item label="任务类别:" prop="taskType">
|
<el-input v-model="addForm.taskType" placeholder="请输入任务类别"></el-input>
|
</el-form-item>
|
<el-form-item label="认定标准描述:" prop="remark">
|
<el-input v-model="addForm.remark" placeholder="请输入认定标准描述"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="评优类型:" prop="type">
|
<el-select disabled v-model="addForm.type" placeholder="请选择评优类型" style="width: 100%;">
|
<el-option label="个人评优" value="0" />
|
<el-option label="部门评优" value="1" />
|
</el-select>
|
</el-form-item> -->
|
<el-form-item :label="params.type ? '评定人：' : '候选部门:'" prop="candidateNum">
|
<el-select v-model="selectGroup" value-key="deptId" multiple style="width: 100%;" placeholder="请选择候选部门">
|
<el-option v-for="dept in depts" :key="dept.deptId"
|
:label="dept.employees.length === 0 ? (dept.deptName + '（当前部门下员工人数为0）') : dept.deptName"
|
:value="dept" :disabled="dept.employees.length === 0"></el-option>
|
</el-select>
|
<div class="select-list">
|
<el-form-item v-for="content in selectGroup" :key="content.deptId" :label="content.deptName"
|
class="select-item">
|
<span v-if="!params.type">
|
<el-input-number min="0" :max="content.employees.length || Infinity" v-model="content.val"
|
controls-position="right" placeholder="请输入候选人数量" class="select-num"></el-input-number>
|
</span>
|
<el-select v-model="content.users" value-key="id" multiple
|
:placeholder="params.type ? '请选择评定人' : '请输入候选人'">
|
<div class="allSelected">
|
<el-checkbox @change="handleEmployeeChange($event, content)">全选</el-checkbox>
|
</div>
|
<el-option v-for="employee in content.employees" :key="employee.id" :label="employee.name"
|
:value="employee"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
</el-form-item>
|
<el-form-item label="候选人截止日期:" prop="candidateCutoffTime" v-if="!params.type">
|
<el-date-picker v-model="addForm.candidateCutoffTime" type="datetime" placeholder="请选择截止时间"
|
format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
|
</el-form-item>
|
<el-form-item label="评优数量:" prop="evaluateNum">
|
<el-input-number min="0" :max="maxEvaluateNum || Infinity" v-model="addForm.evaluateNum"
|
controls-position="right" :placeholder="`请输入评优数量（最多不可超过${maxEvaluateNum}）`"
|
class="evaluateNum-input"></el-input-number>
|
</el-form-item>
|
<el-form-item label="评优截止日期:" prop="evaluateCutoffTime" v-if="params.type">
|
<el-date-picker v-model="addForm.evaluateCutoffTime" type="datetime" placeholder="请选择截止时间"
|
format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="params.visible = false">取消</el-button>
|
<el-button type="primary" @click="submitOrEdit">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import website from '@/config/website';
|
import { getDeptTree } from '@/api/system/dept';
|
import { add, update } from '@/api/evaluate/evaluateTask';
|
import { getList } from '@/api/system/user.js';
|
import _ from 'lodash';
|
|
export default {
|
props: {
|
params: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: '新增',
|
isEdit: false,
|
type: 0,
|
addForm: {},
|
};
|
},
|
},
|
},
|
data() {
|
return {
|
depts: [],
|
selectGroup: [],
|
addForm: {
|
id: '',
|
tenantId: '',
|
taskName: '',
|
taskType: '',
|
remark: '',
|
type: '',
|
candidateNum: [],
|
candidateCutoffTime: '',
|
candidateState: '',
|
evaluateNum: '',
|
evaluateCutoffTime: '',
|
evaluateState: '',
|
createUser: '',
|
createDept: '',
|
createTime: '',
|
updateUser: '',
|
updateTime: '',
|
status: '',
|
isDeleted: '',
|
},
|
rules: {
|
taskName: [
|
{ required: true, message: '请输入任务名称', trigger: 'blur' }
|
],
|
taskType: [
|
{ required: true, message: '请输入任务类别', trigger: 'blur' }
|
],
|
remark: [
|
{ required: true, message: '请输入认定标准描述', trigger: 'blur' }
|
],
|
type: [
|
{ required: true, message: '请选择评优类型', trigger: 'blur' }
|
],
|
candidateNum: [
|
{ required: true, message: '请选择候选人', trigger: 'click' }
|
],
|
candidateCutoffTime: [
|
{ required: true, message: '请选择候选人截止日期', trigger: 'click' },
|
],
|
evaluateNum: [
|
{ required: true, message: '请输入评优数量', trigger: 'click' }
|
],
|
evaluateCutoffTime: [
|
{ required: true, message: '请选择评优截止时间', trigger: 'click' },
|
],
|
},
|
maxEvaluateNum: 0,
|
};
|
},
|
watch: {
|
'params.visible': {
|
handler(val) {
|
val && this.initData(website.tenantId);
|
this.addForm = this.params.addForm;
|
val && (this.addForm.type = this.params.type + '')
|
if (this.params.isEdit) {
|
this.addForm = this.params.addForm;
|
this.addForm.type = this.params.type + '';
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
selectGroup: {
|
handler(val) {
|
this.addForm.candidateNum = [];
|
this.maxEvaluateNum = 0;
|
val.forEach(item => {
|
const users = [];
|
item.users.forEach(user => {
|
users.push({
|
id: user.id,
|
name: user.name,
|
});
|
});
|
if (!this.params.type) {
|
this.maxEvaluateNum += (item.val * 1);
|
} else {
|
this.maxEvaluateNum += item.users.length;
|
}
|
this.addForm.candidateNum.push({
|
deptId: item.deptId,
|
deptName: item.deptName,
|
val: this.params.type ? item.users.length : item.val,
|
users,
|
});
|
});
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
submitOrEdit() {
|
const { candidateNum } = this.addForm
|
const isExist = candidateNum.find(item => item.val === void 0 || item.val === 0 || item.users.length === 0)
|
candidateNum.forEach(candidate => {
|
if (candidate.val > candidate.users.length) {
|
candidate.val = candidate.users.length
|
}
|
})
|
if (isExist) {
|
this.$message.warning(`${isExist.deptName}候选人人数不可为空或者0`)
|
} else {
|
this.params.isEdit ? this.handleEdit() : this.handleSubmit()
|
}
|
},
|
handleSubmit() {
|
this.$refs.addFormRef.validate(valid => {
|
this.params.type && (this.addForm.evaluateState = 1)
|
add(this.addForm).then(
|
() => {
|
this.$message({
|
type: 'success',
|
message: '操作成功!',
|
});
|
this.refreshTable();
|
},
|
() => {
|
this.$message({
|
type: 'error',
|
message: '操作失败!',
|
});
|
}
|
);
|
});
|
},
|
handleEdit() {
|
this.$refs.addFormRef.validate(valid => {
|
update(this.addForm).then(
|
() => {
|
this.$message({
|
type: 'success',
|
message: '操作成功!',
|
});
|
this.refreshTable();
|
},
|
error => {
|
this.$message({
|
type: 'error',
|
message: error,
|
});
|
}
|
);
|
});
|
},
|
refreshTable() {
|
this.$emit('refreshTable', {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
});
|
this.params.visible = false;
|
},
|
async initData(tenantId) {
|
const deptTreeRes = await getDeptTree(tenantId)
|
let deptList = []
|
const cloneDeptTreeRes = _.cloneDeep(deptTreeRes.data.data)
|
// 扁平化deptTree
|
cloneDeptTreeRes.forEach(item => {
|
deptList.push(item);
|
if (item.children) {
|
item.children.forEach(ic => {
|
ic.title = item.title + '/' + ic.title;
|
})
|
deptList = deptList.concat(item.children);
|
delete item.children;
|
}
|
})
|
const depts_list = _.cloneDeep(deptList)
|
this.depts = []
|
for (const dept of depts_list) {
|
const employeeRes = await getList(1, 99999, { userType: 2 }, dept.id)
|
const { records } = employeeRes.data.data
|
this.depts.push({
|
deptId: dept.id,
|
deptName: dept.title,
|
users: [],
|
employees: records
|
});
|
}
|
const params = _.cloneDeep(this.params.addForm.candidateNum) || []
|
const newParams = params.map(item => {
|
const value = this.depts.find(dept => item.deptId === dept.deptId);
|
item.employees = value?.employees || [];
|
return item
|
})
|
let defaultUsers = []
|
newParams.forEach(item => {
|
const users = item.users.filter(user => item.employees.find(employee => employee.id === user.id))
|
// 判断当前item.users和users的区别
|
defaultUsers = item.users.filter(iUser => !users.includes(iUser))
|
// 改变为修改后的users
|
item.users = users
|
})
|
const resParams = newParams.filter(item => item.employees.length > 0 && item.users.length > 0)
|
this.selectGroup = resParams
|
// 是否有修改的user， 有的话去修改
|
defaultUsers.length > 0 && update(this.addForm)
|
},
|
handleEmployeeChange(val, content) {
|
if (val) {
|
content.users = []
|
content.employees.forEach(item => {
|
content.users.push({
|
id: item.id,
|
name: item.name
|
})
|
})
|
} else {
|
content.users = []
|
}
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
max-height: 400px;
|
overflow: auto;
|
|
.select-list {
|
width: 100%;
|
|
.select-item {
|
width: 100%;
|
margin-top: 15px;
|
display: flex;
|
|
.select-num {
|
flex: 2;
|
}
|
|
.el-select {
|
flex: 5;
|
margin-left: 10px;
|
}
|
}
|
}
|
|
.evaluateNum-input {
|
width: 100%;
|
|
:deep() {
|
.el-input__inner {
|
text-align: left;
|
}
|
}
|
}
|
}
|
|
.allSelected {
|
padding: 0 20px;
|
border-bottom: 1px solid #dcdcdc;
|
}
|
</style>
|
