评优任务修改

GuLiMmo

2024-01-03 84037b74495dfb395a141443d2388d0325242ad6

评优任务修改

 src/views/evaluate/components/addDialog.vue

@@ -1,50 +1,82 @@
<template>
    <el-dialog v-model="params.visible" :title="params.title" width="50%" destroy-on-close @close="dialogClose">
    <el-dialog v-model="params.visible" :title="params.title" width="50%" @close="dialogClose">
        <div class="content">
            <el-form :model="addForm" label-width="170px" :rules="rules" ref="addFormRef">
                <el-form-item label="任务名称:" prop="taskName">
                    <el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
            <el-form :model="form" ref="formRef" :rules="rules" label-width="120px" 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="taskType">
                    <el-input v-model="addForm.taskType" placeholder="请输入任务类别"></el-input>
                <el-form-item label="任务类别：" prop="taskType">
                    <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.taskType" :key="index">
                            <div class="title">{{ item.title }}</div>
                            <el-tooltip effect="dark" placement="top">
                                <template #content>
                                    <p style="width: 500px;">{{ item.introduction }}</p>
                                </template>
                                <div class="introduction">
                                    {{ item.introduction }}
                                </div>
                            </el-tooltip>

                            <div class="number">{{ item.number }}</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="认定标准描述:" prop="remark">
                    <el-input type="textarea" v-model="addForm.remark" placeholder="请输入认定标准描述"></el-input>
                </el-form-item>
                <el-form-item :label="`${params.type ? '评优截止日期:' : '第一次评优截止日期:'}`" prop="candidateCutoffTime">
                    <el-date-picker v-model="addForm.candidateCutoffTime" type="datetimerange" placeholder="请选择截止时间"
                        start-placeholder="请选择开始时间" end-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="`${params.type ? '候选部门数量:' : '候选人数量:'}`" prop="candidateNum">
                    <el-input-number min="0" v-model="addForm.evaluateNum" placeholder="请输入候选人数量" style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="是否需要进行二次评优:" prop="isAgain" v-if="!params.type">
                    <el-radio-group v-model="addForm.isAgain">
                        <el-radio :label='1'>是</el-radio>
                        <el-radio :label='0'>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="`${params.type ? '评优截止日期:' : '第二次评优截止日期:'}`" prop="evaluateCutoffTime"
                    v-if="addForm.isAgain">
                    <el-date-picker v-model="addForm.evaluateCutoffTime" type="datetimerange" start-placeholder="请选择开始时间"
                        end-placeholder="请选择结束时间" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
                        style="width: 100%;" />
                <el-form-item label="第一轮任务结束时间：" required>
                    <el-form-item class="time-box" prop="candidateCutoffTimeStart">
                        <el-date-picker v-model="form.candidateCutoffTimeStart" type="datetime" placeholder="请选择任务开始时间"
                            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="请选择任务结束时间"
                            style="width: 100%;" />
                    </el-form-item>
                </el-form-item>
            </el-form>
            <!-- 添加类别弹窗 -->
            <el-dialog v-model="innerVisible" width="40%" title="添加评优类别" append-to-body @close="innerDialogClose">
                <el-form :model="taskTypeForm" :rules="taskTypeRules" ref="taskTypeFormRef" label-width="80px">
                    <el-form-item label="类别" prop="title">
                        <el-input v-model="taskTypeForm.title" placeholder="请输入类别名称"></el-input>
                    </el-form-item>
                    <el-form-item label="认定标准" prop="introduction">
                        <el-input type="textarea" v-model="taskTypeForm.introduction" placeholder="请输入认定标准"></el-input>
                    </el-form-item>
                    <el-form-item label="名额" prop="number">
                        <el-input v-model="taskTypeForm.number" placeholder="请输入名额数量"></el-input>
                    </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>
            <span class="dialog-footer">
                <el-button @click="params.visible = false">取消</el-button>
                <el-button type="primary" @click="submitOrEdit">确认</el-button>
            </span>
            <el-button @click="() => params.visible = false">取消</el-button>
            <el-button type="primary">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import website from '@/config/website';
import { add, update } from '@/api/evaluate/evaluateTask';
import _ from 'lodash';

export default {
@@ -64,185 +96,147 @@
    },
    data() {
        return {
            depts: [],
            selectGroup: [],
            addForm: {
                id: '',
                tenantId: '',
            form: {
                taskName: '',
                taskType: '',
                remark: '',
                type: '',
                candidateNum: 0,
                candidateCutoffTime: '',
                taskType: [],
                candidateCutoffTimeStart: '',
                candidateCutoffTimeEnd: '',
                evaluateCutoffTimeStart: '',
                evaluateCutoffTimeEnd: '',
                candidateState: '',
                evaluateNum: '',
                evaluateCutoffTime: '',
                evaluateState: '',
                isAgain: null,
                candidateCutoffTimeEnd: ''
            },
            taskTypeForm: {
                title: '',
                introduction: '',
                number: ''
            },
            rules: {
                taskName: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' }
                    { required: true, message: '请输入任务名称', trigger: 'click' },
                ],
                taskType: [
                    { required: true, message: '请输入任务类别', trigger: 'blur' }
                    { required: true, message: '任务类别不可为空', trigger: 'click' },
                ],
                remark: [
                    { required: true, message: '请输入认定标准描述', trigger: 'blur' }
                candidateCutoffTimeStart: [
                    { required: true, message: '请选择任务开始时间', trigger: 'click' },
                ],
                type: [
                    { required: true, message: '请选择评优类型', trigger: 'blur' }
                ],
                candidateCutoffTime: [
                    { required: true, message: '请选择候选人截止日期', trigger: 'click' },
                ],
                candidateNum: [
                    { required: true, message: '请输入候选人数量', trigger: 'click' },
                ],
                isAgain: [
                    { required: true, message: '请选择是否进行二次评优', trigger: 'click' }
                ],
                evaluateCutoffTime: [
                    { required: true, message: '请选择评优截止时间', trigger: 'click' },
                ],
                candidateCutoffTimeEnd: [
                    { required: true, message: '请选择任务开始时间', trigger: 'click' },
                ]
            },
            maxEvaluateNum: 0
        };
    },
    watch: {
        'params.visible': {
            handler(val) {
                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 + '';
                }
            taskTypeRules: {
                title: [
                    { required: true, message: '请输入类别', trigger: 'click' }
                ],
                introduction: [
                    { required: true, message: '请输入认定标准', trigger: 'click' }
                ],
                number: [
                    { required: true, message: '请输入名额', trigger: 'click' }
                ]
            },
            deep: true,
            immediate: true,
        },
            innerVisible: false
        }
    },
    methods: {
        submitOrEdit() {
            this.params.isEdit ? this.handleEdit() : this.handleSubmit()
        },
        handleSubmit() {
            this.$refs.addFormRef.validate(valid => {
                if (!valid) return
                const data = _.cloneDeep(this.addForm)
                this.params.type && (data.evaluateState = 1)
                Object.keys(data).forEach(key => {
                    if (['candidateCutoffTime', 'evaluateCutoffTime'].includes(key)) {
                        const [start, end] = this.addForm[key]
                        if (key === 'candidateCutoffTime') {
                            data.candidateCutoffTimeStart = start
                            data.candidateCutoffTimeEnd = end
                        } else {
                            data.evaluateCutoffTimeStart = start
                            data.evaluateCutoffTimeEnd = end
                        }
                        delete data[key]
                    }
                })
                add(data).then(
                    () => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!',
                        });
                        this.refreshTable();
                    },
                    () => {
                        this.$message({
                            type: 'error',
                            message: '操作失败!',
                        });
                    }
                );
            });
        },
        handleEdit() {
            this.$refs.addFormRef.validate(valid => {
                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;
        },
        dialogClose() {
            this.selectGroup = []
            this.$refs.addFormRef.resetFields()
            this.$refs.formRef.resetFields()
        },
    },
        innerDialogClose() {
            this.$refs.taskTypeFormRef.resetFields()
        },
        deleteTaskType(index) {
            try {
                this.form.taskType.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.taskType.push(curValue)
                this.innerVisible = false
            })
        }
    }
};
</script>

<style lang="scss" scoped>
$borderColor: var(--el-border-color);

.content {
    max-height: 400px;
    overflow: auto;
    overflow-y: auto;

    .select-list {
    .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;

        .select-item {
            width: 100%;
            margin-top: 15px;
        .type-item {
            display: flex;
            height: 40px;
            line-height: 40px;
            text-align: center;

            .select-num {
            div {
                border-bottom: 1px solid $borderColor;
                flex-shrink: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .title {
                flex: 2;
            }

            .el-select {
                flex: 5;
                margin-left: 10px;
            .introduction {
                flex: 6;
                flex-shrink: 0;

                border: {
                    right: 1px solid $borderColor;
                    left: 1px solid $borderColor;
                }
            }

            .el-button {
                margin-left: 10px;
            .number {
                flex: 1;
            }

            .tool {
                flex: 1;
                border-left: 1px solid $borderColor;
            }

            &:last-child {
                div {
                    border-bottom: 0;
                }
            }
        }
    }

    .evaluateNum-input {
        width: 100%;

        :deep() {
            .el-input__inner {
                text-align: left;
            }
        .add-button {
            display: flex;
            justify-content: center;
        }
    }
}

.allSelected {
    padding: 0 20px;
    border-bottom: 1px solid #dcdcdc;
}
</style>