<template>
|
<el-dialog v-model="params.visible" :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 ? '请选择评定人' : '请输入候选人'">
|
<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">
|
<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="params.isEdit ? handleEdit() : handleSubmit()">确认</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,
|
},
|
// 拦截candidateNum
|
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: {
|
handleSubmit() {
|
this.$refs.addFormRef.validate(valid => {
|
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;
|
},
|
initData(tenantId) {
|
// 读取部门列表
|
getDeptTree(tenantId)
|
.then(res => {
|
const result = _.cloneDeep(res.data.data);
|
let deptList = [];
|
result.forEach(item => {
|
deptList.push(item);
|
if (item.children) {
|
deptList = result.concat(item.children);
|
delete item.children;
|
}
|
});
|
return deptList;
|
})
|
.then(deptList => {
|
const depts_list = _.cloneDeep(deptList);
|
this.depts = [];
|
depts_list.forEach(dept => {
|
getList(1, 99999, {}, dept.id).then(employeeRes => {
|
const { records } = employeeRes.data.data;
|
this.depts.push({
|
deptId: dept.id,
|
deptName: dept.title,
|
users: [],
|
employees: records,
|
});
|
this.setDefaultValue(this.depts);
|
});
|
});
|
});
|
},
|
setDefaultValue(depts) {
|
const params = _.cloneDeep(this.params.addForm.candidateNum) || []
|
params.forEach(item => {
|
const value = depts.find(dept => item.deptId === dept.deptId);
|
item.employees = value?.employees || [];
|
});
|
this.selectGroup = params;
|
},
|
},
|
};
|
</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;
|
}
|
}
|
}
|
}
|
</style>
|
