<template>
|
<el-dialog v-model="params.visible" :title="params.title || '编辑个人评优任务'" width="50%" @open="dialogOpen"
|
@close="dialogClose" destroy-on-close>
|
<div class="content">
|
<el-form :model="form" ref="formRef" :rules="rules" label-position="top">
|
<el-form-item label="任务名称" prop="taskName">
|
<el-input v-model="form.taskName" placeholder="请输入任务名称"></el-input>
|
</el-form-item>
|
<el-form-item label="评优类别" prop="categoryEntities">
|
<ul class="type-list">
|
<li class="type-item">
|
<div class="title">类别</div>
|
<div class="introduction">认定标准</div>
|
<div class="number">名额</div>
|
<div class="tool">操作</div>
|
</li>
|
<li class="type-item" v-for="(item, index) in form.categoryEntities" :key="index">
|
<div class="title">{{ item.categoryName }}</div>
|
<el-tooltip effect="dark" placement="top">
|
<template #content>
|
<p style="max-width: 500px;">{{ item.standard }}</p>
|
</template>
|
<div class="introduction">
|
{{ item.standard }}
|
</div>
|
</el-tooltip>
|
|
<div class="number">{{ item.peopleNum }}</div>
|
<div class="tool">
|
<el-popconfirm title="是否确认删除当前评优类别？" @confirm="deleteTaskType(index)">
|
<template #reference>
|
<el-button type="danger" icon="el-icon-delete" text></el-button>
|
</template>
|
</el-popconfirm>
|
</div>
|
</li>
|
<li class="add-button">
|
<el-button type="primary" text icon="el-icon-plus" @click="addTaskType">添加类别</el-button>
|
</li>
|
</ul>
|
</el-form-item>
|
<el-form-item label="第一轮任务结束时间" required>
|
<el-form-item class="time-box" prop="candidateCutoffTimeStart">
|
<el-date-picker v-model="form.candidateCutoffTimeStart" type="datetime" placeholder="请选择任务开始时间"
|
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
|
</el-form-item>
|
<span class="time-span">至</span>
|
<el-form-item class="time-box" prop="candidateCutoffTimeEnd">
|
<el-date-picker v-model="form.candidateCutoffTimeEnd" type="datetime" placeholder="请选择任务结束时间"
|
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
|
</el-form-item>
|
</el-form-item>
|
</el-form>
|
<!-- 添加类别弹窗 -->
|
<el-dialog v-model="innerVisible" width="40%" title="添加评优类别" append-to-body destroy-on-close @close="innerDialogClose">
|
<el-form :model="taskTypeForm" :rules="taskTypeRules" ref="taskTypeFormRef" label-width="80px">
|
<el-form-item label="类别" prop="categoryName">
|
<el-input v-model="taskTypeForm.categoryName" placeholder="请输入类别名称"></el-input>
|
</el-form-item>
|
<el-form-item label="认定标准" prop="standard">
|
<el-input type="textarea" v-model="taskTypeForm.standard" placeholder="请输入认定标准"></el-input>
|
</el-form-item>
|
<el-form-item label="名额" prop="peopleNum">
|
<el-input-number :min="1" v-model="taskTypeForm.peopleNum" placeholder="请输入名额数量"
|
controls-position="right" style="width: 100%;"></el-input-number>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="innerVisible = false">取消</el-button>
|
<el-button type="primary" @click="addTaskTypeRow">确定</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
<template #footer>
|
<el-button @click="() => params.visible = false">取消</el-button>
|
<el-button type="primary" @click="addEvaluateTask">确定更新当前任务</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import _ from 'lodash';
|
import { getEcList, edit } from '@/api/evaluate/evaluateTask'
|
|
export default {
|
inject: ['type'],
|
props: {
|
params: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: '编辑个人评优任务',
|
data: {}
|
};
|
},
|
},
|
},
|
data() {
|
return {
|
form: {
|
taskName: '',
|
categoryEntities: [],
|
candidateCutoffTimeStart: '',
|
candidateCutoffTimeEnd: ''
|
},
|
pageParams: {
|
size: 10,
|
current: 1,
|
total: 0,
|
},
|
taskTypeForm: {
|
categoryName: '',
|
standard: '',
|
peopleNum: ''
|
},
|
rules: {
|
taskName: [
|
{ required: true, message: '请输入任务名称', trigger: 'click' },
|
],
|
categoryEntities: [
|
{ required: true, message: '任务类别不可为空', trigger: 'click' },
|
],
|
candidateCutoffTimeStart: [
|
{ required: true, message: '请选择任务开始时间', trigger: 'click' },
|
{
|
validator: (rule, value, callback) => {
|
if (value) {
|
const startTime = new Date(value).getTime()
|
const endTime = new Date(this.form.candidateCutoffTimeEnd).getTime()
|
const nowTime = new Date().getTime() - (24 * 60 * 60 * 1000)
|
if (nowTime > startTime) {
|
callback(new Error('开始时间不能早于当日时间'))
|
} else if (startTime >= endTime) {
|
callback(new Error('结束时间不能早于等于开始时间'))
|
} else {
|
callback()
|
}
|
}
|
}, trigger: 'click'
|
}
|
],
|
candidateCutoffTimeEnd: [
|
{ required: true, message: '请选择任务开始时间', trigger: 'click' },
|
{
|
validator: (rule, value, callback) => {
|
if (value) {
|
const startTime = new Date(this.form.candidateCutoffTimeStart).getTime()
|
const endTime = new Date(value).getTime()
|
const nowTime = new Date().getTime()
|
// if (nowTime > endTime) {
|
// callback(new Error('结束时间不能早于等于当前时间'))
|
// } else
|
if (startTime >= endTime) {
|
callback(new Error('结束时间不能早于等于开始时间'))
|
} else {
|
callback()
|
}
|
}
|
}, trigger: 'click'
|
}
|
]
|
},
|
taskTypeRules: {
|
categoryName: [
|
{ required: true, message: '请输入类别', trigger: 'click' }
|
],
|
standard: [
|
{ required: true, message: '请输入认定标准', trigger: 'click' }
|
],
|
peopleNum: [
|
{ required: true, message: '请输入名额', trigger: 'click' }
|
]
|
},
|
innerVisible: false
|
}
|
},
|
methods: {
|
dialogClose() {
|
this.$refs.formRef.resetFields()
|
},
|
innerDialogClose() {
|
this.$refs.taskTypeFormRef.resetFields()
|
},
|
deleteTaskType(index) {
|
try {
|
this.form.categoryEntities.splice(index, 1)
|
this.$message.success('删除当前评优类别成功')
|
} catch (error) {
|
this.$message.error('删除当前评优类别失败')
|
}
|
},
|
addTaskType() {
|
this.innerVisible = true;
|
},
|
addTaskTypeRow() {
|
this.$refs.taskTypeFormRef.validate(vaild => {
|
if (!vaild) return
|
const curValue = _.cloneDeep(this.taskTypeForm)
|
this.form.categoryEntities.push(curValue)
|
this.innerVisible = false
|
})
|
},
|
addEvaluateTask() {
|
this.$refs.formRef.validate(valid => {
|
if (!valid) return
|
edit(this.form).then(res => {
|
if (res.data.code !== 200) return
|
this.$emit('refreshTable', { currentPage: 1, pageSize: 10 })
|
this.$message.success('更新当前任务信息成功')
|
this.params.visible = false
|
})
|
})
|
},
|
dialogOpen() {
|
const { id, taskName, candidateCutoffTimeStart, candidateCutoffTimeEnd } = this.params.data
|
const { current, size } = this.pageParams
|
getEcList(current, size, id).then(ecResult => {
|
const data = ecResult.data.data
|
if (ecResult.data.code !== 200) return this.$message.error('数据初始化失败，请重试！')
|
this.pageParams.total = data.total
|
data.records.forEach(item => {
|
const { categoryName, standard, peopleNum } = item
|
this.form.categoryEntities.push({
|
categoryName,
|
standard,
|
peopleNum
|
})
|
})
|
this.form.id = id
|
this.form.taskName = taskName
|
this.form.candidateCutoffTimeStart = candidateCutoffTimeStart
|
this.form.candidateCutoffTimeEnd = candidateCutoffTimeEnd
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
$borderColor: var(--el-border-color);
|
|
.content {
|
max-height: 400px;
|
overflow-y: auto;
|
|
.time-span {
|
margin: 0 10px;
|
}
|
|
.time-box {
|
width: calc(100% / 2 - 20px);
|
}
|
|
.type-list {
|
margin: 0;
|
padding: 0;
|
list-style-type: none;
|
width: 100%;
|
border: 1px solid $borderColor;
|
border-radius: var(--el-border-radius-base);
|
box-sizing: border-box;
|
|
.type-item {
|
display: flex;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
|
div {
|
border-bottom: 1px solid $borderColor;
|
flex-shrink: 0;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.title {
|
flex: 2;
|
}
|
|
.introduction {
|
flex: 6;
|
flex-shrink: 0;
|
|
border: {
|
right: 1px solid $borderColor;
|
left: 1px solid $borderColor;
|
}
|
}
|
|
.number {
|
flex: 1;
|
}
|
|
.tool {
|
flex: 1;
|
border-left: 1px solid $borderColor;
|
}
|
|
&:last-child {
|
div {
|
border-bottom: 0;
|
}
|
}
|
}
|
|
.add-button {
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
