评优任务页面修改

GuLiMmo

2023-12-14 4c8e9a0c4dc32be637a244e8d97cdea709a2c08c

 src/views/evaluate/components/addDialog.vue

@@ -1,37 +1,51 @@
<template>
    <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="任务类别:" 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="candidateNum">
                <ul class="select-group">
                    <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" />
        <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>
                    </li>
                </ul>
            </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>
                </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>
@@ -45,6 +59,8 @@
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: {
@@ -55,6 +71,7 @@
                    visible: false,
                    title: '新增',
                    isEdit: false,
                    type: 0,
                    addForm: {}
                };
            }
@@ -63,12 +80,14 @@
    data() {
        return {
            depts: [],
            selectGroup: [],
            addForm: {
                id: "",
                tenantId: "",
                taskName: "",
                taskType: "",
                remark: "",
                type: "",
                candidateNum: [],
                candidateCutoffTime: "",
                candidateState: "",
@@ -93,6 +112,9 @@
                remark: [
                    { required: true, message: '请输入认定标准描述', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择评优类型', trigger: 'blur' },
                ],
                candidateNum: [
                    { required: true, message: '请选择候选人截止日期', trigger: 'click' },
                ],
@@ -109,19 +131,43 @@
        }
    },
    watch: {
        'params.addForm': {
            handler(val) {
                this.addForm = val
            },
            deep: true
        },
        '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() {
@@ -165,23 +211,30 @@
            this.params.visible = false
        },
        initData(tenantId) {
            // 读取部门列表
            getDeptTree(tenantId).then(res => {
                const result = res.data.data;
                this.depts = []
                const result = _.cloneDeep(res.data.data);
                let deptList = []
                result.forEach(item => {
                    deptList.push(item)
                    if (item.children) {
                        this.depts = result.concat(item.children)
                        deptList = result.concat(item.children)
                        delete item.children
                    } else {
                        this.depts.push(item)
                    }
                })
                if (this.params.isEdit) return
                this.addForm.candidateNum = []
                this.depts.forEach(dept => {
                    this.addForm.candidateNum.push({
                        deptId: dept.id,
                        val: 0
                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
                        })
                    })
                })
            })
@@ -194,20 +247,17 @@
</script>

<style lang="scss" scoped>
.select-group {
    list-style: none;
    margin: 0;
    padding: 0;
.content {
    height: 400px;
    overflow: auto;
}
.select-list {
    width: 100%;
    .select-item {
        width: 100%;
        margin-top: 15px;

    li {
        margin-top: 20px;

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

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