评优任务、考核权重设置页面修改

GuLiMmo

2023-12-09 2324d4d572882e139360a8bafdc85b467d5469e9

 src/views/evaluate/components/addDialog.vue

@@ -1,42 +1,51 @@
<template>
    <el-dialog v-model="params.visible"  :title="params.title" width="600px" :destroy-on-close="true">
        <el-form :model="addForm" label-width="120px">
            <el-form-item label="任务名称:">
    <el-dialog v-model="params.visible" :title="params.title" width="600px" destroyOnClose>
        <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="任务类别:">
            <el-form-item label="任务类别:" prop="taskType">
                <el-input v-model="addForm.taskType" placeholder="请输入任务类别"></el-input>
            </el-form-item>
            <el-form-item label="认定标准描述:">
            <el-form-item label="认定标准描述:" prop="remark">
                <el-input v-model="addForm.remark" placeholder="请输入任务名称"></el-input>
            </el-form-item>
            <el-form-item label="候选人数量:">
            <el-form-item label="候选人数量:" prop="candidateNum">
                <ul class="select-group">
                    <li>技术部：<el-select placeholder="请设置该部门的评选人数"></el-select></li>
                    <li>财务部：<el-select placeholder="请设置该部门的评选人数"></el-select></li>
                    <li>人事部：<el-select placeholder="请设置该部门的评选人数"></el-select></li>
                    <li v-for="(dept, index) in depts" :key="dept.id">
                        <el-form-item :label="`${dept.title}:`">
                            <el-input-number v-model="addForm.candidateNum[index].val" placeholder="请输入当前部门评优人数"
                                controls-position="right" class="input-number" />
                        </el-form-item>
                    </li>
                </ul>
            </el-form-item>
            <el-form-item label="候选人截止日期:">
                <el-date-picker v-model="addForm.candidateCutoffTime" type="datetime" placeholder="请选择截止时间" style="width: 100%;" />
            <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="候选人截止日期:">
                <el-date-picker v-model="addForm.evaluateCutoffTime" type="datetime" placeholder="请选择截止时间" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="评优数量:">
            <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>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addParams.visible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确认</el-button>
                <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";

export default {
    props: {
        params: {
@@ -44,7 +53,8 @@
            default: () => {
                return {
                    visible: false,
                    title: '',
                    title: '新增',
                    isEdit: false,
                    addForm: {}
                };
            }
@@ -52,14 +62,14 @@
    },
    data() {
        return {
            title: '新增',
            depts: [],
            addForm: {
                id: "",
                tenantId: "",
                taskName: "",
                taskType: "",
                remark: "",
                candidateNum: "",
                candidateNum: [],
                candidateCutoffTime: "",
                candidateState: "",
                evaluateNum: "",
@@ -73,36 +83,131 @@
                status: "",
                isDeleted: ""
            },
            rules: {
                taskName: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' },
                ],
                taskType: [
                    { required: true, message: '请输入任务类别', trigger: 'blur' },
                ],
                remark: [
                    { 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.addForm': {
            handler(val) {
                this.addForm = val;
                this.addForm = val
            },
            deep: true
        }
        },
        'params.visible': {
            handler(val) {
                val && this.initData(website.tenantId);
            },
            deep: true,
            immediate: 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 = res.data.data;
                this.depts = []
                result.forEach(item => {
                    if (item.children) {
                        this.depts = result.concat(item.children)
                        delete item.children
                    }
                })
                if (this.params.isEdit) return
                this.addForm.candidateNum = []
                this.depts.forEach(dept => {
                    this.addForm.candidateNum.push({
                        deptId: dept.id,
                        val: 0
                    })
                })
            })
        }
    },
    mounted() {
        // this.initData(website.tenantId);
    }
}
</script>

<style scoped>
<style lang="scss" scoped>
.select-group {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.select-group li {
    margin-top: 15px;
}

.select-group li:first-child {
    margin-top: 0;
    li {
        margin-top: 20px;

        &:first-child {
            margin-top: 0;
        }

        .input-number {
            width: 100%;
        }
    }
}


</style>