<template>
|
<el-dialog v-model="params.visible" :title="params.title" width="600px" destroyOnClose>
|
<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="候选人数量:" prop="candidateNum">
|
<el-select v-model="selectGroup" value-key="deptId" multiple style="width: 100%;">
|
<el-option v-for="dept in depts" :key="dept.deptId" :label="dept.deptName" :value="dept">
|
</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">
|
<el-select v-model="content.users" value-key="id" multiple>
|
<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">
|
<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 v-model="addForm.evaluateNum" placeholder="请输入评优数量"></el-input>
|
</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: 'Please input Activity name', trigger: 'click' },
|
],
|
evaluateCutoffTime: [
|
{ required: true, message: 'Please input Activity name', trigger: 'click' },
|
],
|
}
|
}
|
},
|
watch: {
|
'params.visible': {
|
handler(val) {
|
val && this.initData(website.tenantId);
|
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 = []
|
let evaluateNums = 0
|
val.forEach(item => {
|
const users = []
|
evaluateNums += item.selected?.length
|
item.selected.forEach(user => {
|
users.push({
|
id: user.id,
|
name: user.name
|
})
|
})
|
this.addForm.candidateNum.push({
|
deptId: item.deptId,
|
deptName: item.deptName,
|
val: item.selected.length,
|
users
|
})
|
})
|
this.addForm.evaluateNum = evaluateNums + ''
|
},
|
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
|
})
|
})
|
})
|
})
|
}
|
},
|
mounted() {
|
// this.initData(website.tenantId);
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
height: 400px;
|
overflow: auto;
|
}
|
.select-list {
|
width: 100%;
|
.select-item {
|
width: 100%;
|
margin-top: 15px;
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
