考核任务任务配置完善

GuLiMmo

2023-12-29 06dd89e20c026ed578dcbc7618f83c7b3d8f6e15

 src/views/evaluate/components/viewEvaluateDetail.vue

@@ -1,388 +1,10 @@
<template>
    <el-dialog title="信息预览" v-model="params.visible" width="70%">
        <div class="descriptions">
            <div class="descriptions-item" v-for="item in taskDateil" :key="item.prop" :style="{ width: item.width }">
                <div class="label">{{ item.title }}</div>
                <div class="value" v-if="!item.isSlot">{{ item.value }}</div>
                <div class="table" v-else>
                    <template v-if="item.evaluateState === 2">
                        <avue-crud :option="item.option" :data="item.data" ref="crud" @current-change="currentChange"
                            @size-change="sizeChange" @refresh-change="refreshChange"></avue-crud>
                    </template>
                    <template v-else>当前任务暂未结束</template>
                </div>
            </div>
        </div>
    </el-dialog>

</template>

<script setup>
import { reactive, watch, getCurrentInstance, ref } from 'vue';
import {
    getCandidateList,
    getFinallyResult,
    getSectionFinallyResult
} from '@/api/evaluate/evaluateTask'
import _ from 'lodash'

const { findObject } = getCurrentInstance().appContext.config.globalProperties;


const props = defineProps({
    params: {
        type: Object,
        default: () => ({
            visible: false,
            data: {},
        }),
    }
})

const page = reactive({
    current: 1,
    size: 10,
    total: 0
})

const taskDateil = ref(null)

const personOption = reactive([
    {
        title: '任务名称',
        prop: 'taskName',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '任务类别',
        prop: 'taskType',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '评定标准',
        prop: 'remark',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '候选人截止日期',
        prop: 'candidateCutoffTime',
        value: '',
        width: '50%'
    },
    {
        title: '评优截止日期',
        prop: 'evaluateCutoffTime',
        value: '',
        width: '50%'
    },
    {
        title: '候选人状态',
        prop: 'candidateState',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '评优评先状态',
        prop: 'evaluateState',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '评优数量',
        prop: 'evaluateNum',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '候选人数量',
        prop: 'candidateNum',
        value: '',
        width: '100%'
    },
    {
        title: '候选结果',
        prop: 'candidateResult',
        value: '',
        width: '100%'
    },
    {
        title: '最终评定结果',
        prop: 'finallyResult',
        isSlot: true,
        width: '100%',
        evaluateState: 0,
        data: [],
        option: {
            height: 260,
            calcHeight: 30,
            tip: false,
            searchShow: true,
            border: true,
            index: true,
            dialogClickModal: false,
            menu: false,
            menuLeft: false,
            header: false,
            menuFixed: 'right',
            column: [{
                label: '评优项目',
                prop: 'evaluateTaskName',
                type: 'input',
            },
            {
                label: '候选人',
                prop: 'userName',
                type: 'input',
            },
            {
                label: '部门',
                prop: 'deptName',
                type: 'input'
            },
            {
                label: '票数',
                prop: 'voteNum',
                type: 'input'
            }],
        }
    }
])

const sectionOption = reactive([
    {
        title: '任务名称',
        prop: 'taskName',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '任务类别',
        prop: 'taskType',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '评定标准',
        prop: 'remark',
        value: '',
        width: 'calc(100% / 3)'
    },
    {
        title: '候选人截止日期',
        prop: 'candidateCutoffTime',
        value: '',
        width: '50%'
    },
    {
        title: '评优截止日期',
        prop: 'evaluateCutoffTime',
        value: '',
        width: '50%'
    },
    {
        title: '评优评先状态',
        prop: 'evaluateState',
        value: '',
        width: '50%'
    },
    {
        title: '评优数量',
        prop: 'evaluateNum',
        value: '',
        width: '50%'
    },
    {
        title: '评优人数量',
        prop: 'candidateNum',
        value: '',
        width: '100%'
    },
    {
        title: '最终评定结果',
        prop: 'finallyResult',
        isSlot: true,
        width: '100%',
        evaluateState: 0,
        data: [],
        option: {
            height: 260,
            calcHeight: 30,
            tip: false,
            searchShow: true,
            border: true,
            index: true,
            dialogClickModal: false,
            menu: false,
            menuLeft: false,
            header: false,
            menuFixed: 'right',
            column: [{
                label: '评优项目',
                prop: 'evaluateTaskName',
                type: 'input',
            },
            {
                label: '部门',
                prop: 'deptName',
                type: 'input'
            },
            {
                label: '票数',
                prop: 'voteNum',
                type: 'input'
            }],
        }
    }
])

watch(() => props.params.visible, (val) => {
    if (!val) return
    initData()
}, {
    deep: true
})

const candidateList = () => {
    let values = {
        evaluateTaskId: props.params.data.id
    };
    return getCandidateList(1, 99999, values).then(res => {
        const candidateRes = res.data.data.records;
        return candidateRes
    });
}

const getFinallyList = () => {
    const { type } = props.params
    const { id, evaluateNum } = props.params.data
    const params = {
        evaluateTaskId: id,
        current: 1,
        size: evaluateNum,
        type: !type ? 2 : 1
    }
    return (!type ? getFinallyResult(params) : getSectionFinallyResult(params)).then(res => {
        return res.data.data.records
    })
}

const initData = async () => {
    const data = props.params.data
    taskDateil.value = !props.params.type ? personOption : sectionOption
    const status = {
        0: '未开始',
        1: '进行中',
        2: '已完成'
    }

    for (const item of taskDateil.value) {
        item.value = data[item.prop] || '暂未完善'

        if (['candidateState', 'evaluateState'].includes(item.prop)) {
            item.value = status[data[item.prop]]
            if (item.prop === 'evaluateState') {
                const obj = taskDateil.value.find(s => s.prop === 'finallyResult')
                obj.evaluateState = data[item.prop]
            }
        }
        
        if (item.prop === 'candidateNum') {
            const candidateNumStrArr = []
            const { candidateNum } = _.cloneDeep(data)
            candidateNum.forEach(item => {
                const userList = []
                item.users.forEach(user => {
                    userList.push(user.name)
                })
                candidateNumStrArr.push(`${item.deptName}(${item.users.length}人)：${userList.join('、')}`)
            })
            item.value = candidateNumStrArr.join('\n')
        }

        if (item.prop === 'candidateResult') {
            const res = await candidateList()
            if (res.length == 0) {
                item.value = '暂无候选人'
            } else {
                const candidates = {}
                const candidateStrArr = []
                const { candidateNum } = data
                candidateNum.forEach(candidate => {
                    res.forEach(r => {
                        const value = candidate.users.find(user => user.id === r.userId)
                        if (value) {
                            if (candidates[candidate.deptName] === void 0) {
                                candidates[candidate.deptName] = []
                            }
                            candidates[candidate.deptName].push(value.name)
                        }
                    })
                })
                Object.keys(candidates).forEach(key => { candidateStrArr.push(`${key}(${candidates[key].length}人)：${candidates[key].join('、')}`) })
                item.value = candidateStrArr.join('\n')
                console.log(candidateStrArr.join('\n'));
            }
        }

        if (item.prop === 'finallyResult') {
            const res = await getFinallyList()
            item.data = res
        }
    }

    console.log(taskDateil.value);

}
</script>

<style lang="scss" scoped>
.descriptions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    border: {
        top: 1px solid #eeeded;
        right: 1px solid #eeeded;
    }


    .descriptions-item {
        display: flex;
        box-sizing: border-box;

        border: {
            bottom: 1px solid #eeeded;
            left: 1px solid #eeeded;
        }

        .label,
        .value {
            padding: 10px 5px;
            display: flex;
            align-items: center;
        }

        .label {
            width: 100px;
            flex-shrink: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: aliceblue;
            border-right: 1px solid #eeeded;
        }

        .value {
            white-space: pre-line;
        }

        .table {
            padding: 10px;
            width: calc(100% - 20px);
        }
    }
}
</style>