考核任务任务配置完善

GuLiMmo

2023-12-29 06dd89e20c026ed578dcbc7618f83c7b3d8f6e15

 src/views/evaluate/components/addCandidate.vue

@@ -1,206 +1,223 @@
<template>
    <el-dialog v-model="params.visible" title="新增候选人" width="60%" destroy-on-close>
        <avue-crud v-model="form" :option="option" :data="data" v-model:page="table.page" :table-loading="table.loading"
            @row-save="rowSave" @selection-change="selectionChange" @on-load="onLoad">
            <template #menu="{ row }">
                <el-popconfirm title="是否确认删除当前候选人?" @confirm="rowDel(row)">
                    <template #reference>
                        <el-button text plan type="primary" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </avue-crud>
    <el-dialog v-model="props.dialogParams.visible" title="添加候选人" @close="dialogClose">
        <div style="margin-bottom: 20px;" v-if="!form.deptId">
            <el-alert title="请先选择部门信息" type="warning" />
        </div>
        <el-form :model="form" ref="formRef" :rules="rules" label-width="70px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="部门" prop="deptId">
                        <el-cascader v-model="form.deptId" :props="cascaderProps" placeholder="请选择部门" @change="deptChange" style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="候选人" prop="userId">
                        <el-select v-model="form.userId" placeholder="请选择候选人"
                            :disabled="userSelectOption.length > 0 ? false : true" @change="userSelectChange"
                            style="width: 100%;">
                            <el-option v-for="item in userSelectOption" :label="item.name" :key="item.id"
                                :value="item.id" />
                            <div class="loading-more" @click="loadMore">{{ loadingMoreText }}</div>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职务">
                        <el-input v-model="form.postName" placeholder="请填写职务" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="() => props.dialogParams.visible = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, getCurrentInstance, reactive, ref, watch } from 'vue';
import _ from 'lodash'
import { ElMessage } from 'element-plus'
import {
    getList
} from '@/api/system/user';
import {
    getCandidateList,
    addCandidate,
    removeCandidate
} from '@/api/evaluate/evaluateTask'
import { computed, markRaw, reactive, ref, watch } from 'vue';
import { getDeptLazyTree } from '@/api/system/dept.js'
import { getList } from '@/api/system/user.js'
import { addCandidate } from '@/api/evaluate/evaluateTask'
import { ElMessage } from 'element-plus';

const dataSourceStatus = {
    0: '系统分配',
    1: '手动添加'
}

const config = getCurrentInstance().appContext.config.globalProperties

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

const $emit = defineEmits(['refreshTable'])

const data = ref([])
const form = ref()
const table = reactive({
    loading: false,
    page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        default: () => { }
    },
    selectionList: [],
})

const option = reactive({
    height: '300',
    tip: false,
    searchShow: true,
    searchMenuSpan: 6,
    border: true,
    index: true,
    viewBtn: false,
    addBtn: true,
    editBtn: false,
    delBtn: false,
    selection: false,
    refreshBtn: false,
    dialogClickModal: false,
    menuFixed: 'right',
    labelWidth: 100,
    column: [
const emits = defineEmits(['refresh'])

const formRef = ref(null)

const form = reactive({
    userId: '',
    userName: '',
    deptId: '',
    deptName: '',
    postName: ''
})

const rules = markRaw({
    userId: [
        {
            label: '候选人姓名',
            prop: 'userId',
            type: 'select',
            dicData: [],
            props: {
                label: 'name',
                value: 'id'
            },
            control: (val, row) => {
                const { findObject } = config
                const column = findObject(option.column, 'userId') || []
                const params = column.dicData.find(item => item.id === val)
                if (!params) return
                row.deptName = params.deptName
                row.postName = params.postName
                row.userName = params.name
            },
            rules: [
                {
                    required: true,
                    message: '请选择候选人',
                    trigger: 'blur',
                },
            ]
        },
            required: true,
            message: '请选择候选人',
            trigger: 'click',
        }
    ],
    deptId: [
        {
            label: '部门',
            prop: 'deptName',
            type: 'input',
            disabled: true,
        },
        {
            label: '部门',
            prop: 'postName',
            type: 'input',
            disabled: true,
        },
        {
            label: '数据来源',
            prop: 'dataSource',
            type: 'input',
            display: false,
            formatter: (row) => {
                return dataSourceStatus[row.dataSource] || '系统分配'
            },
            required: true,
            message: '请选择部门',
            trigger: 'click',
        }
    ]
})


const initData = () => {
    const { findObject } = config
    const column = findObject(option.column, 'userId');
    getList(1, 999999, { userType: 2 }).then(res => {
        column.dicData = res.data.data.records
    })
}

const rowSave = (row, done, loading) => {
    const { data: { id, taskName } } = $props.params
    const value = data.value.find(item => item.userId === row.userId)
    if (value) {
        ElMessage.warning('当前候选人已存在，不可重复添加！！')
        loading()
        return
    }
    addCandidate({
        evaluateTaskId: id,
        evaluateTaskName: taskName,
        ...row,
        dataSource: 1
    }).then(res => {
        ElMessage.success('新增候选人成功');
        onLoad(table.page);
        done();
    }, error => {
        loading();
        console.log(error);
    })
}

const rowDel = ({ id }) => {
    removeCandidate(id).then(res => {
        ElMessage.success('删除当前候选人成功');
        onLoad(table.page);
    }, error => {
        ElMessage.error(error);
        console.log(error);
    })
}

const selectionChange = (list) => {
    table.selectionList = list;
}

const onLoad = (page, params = {}) => {
    table.loading = true;

    let values = {
        evaluateTaskId: $props.params.data.id,
        ...params
    };
    getCandidateList(page.currentPage, page.pageSize, values).then(res => {
        const candidateRes = res.data.data;
        table.page.total = candidateRes.total;
        data.value = candidateRes.records;
        table.loading = false;
    });
}

watch(() => $props.params.visible, (val) => {
    val && initData();
}, {
    deep: true,
    immediate: true
const requestParams = reactive({
    evaluateTaskId: '',
    evaluateTaskName: '',
    userId: '',
    userName: '',
    deptId: '',
    deptName: '',
    postName: ''
})

const ids = computed(() => {
    let ids = [];
    table.selectionList.forEach(ele => {
        ids.push(ele.id);
    });
    return ids.join(',');
// 当前部门
const currentDeptId = ref('')

// options 数据
const userSelectOption = ref([])

// 懒加载
const isOptionsLoading = ref(false)

const loadingMoreText = computed(() => {
    if (userSelectOption.value.length >= page.total) {
        return '数据已全部加载完成'
    }
    if (isOptionsLoading.value) {
        return '加载中...'
    }
    if (!isOptionsLoading.value) {
        return '点击加载更多'
    }
})
// 分页
const page = reactive({
    current: 1,
    size: 10,
    total: 0
})

const loadMore = async () => {
    isOptionsLoading.value = true
    page.current += 1
    const res = await initUserList(currentDeptId.value)
    userSelectOption.value = [...userSelectOption.value, ...res]
    isOptionsLoading.value = false
}

// 初始化部门数据
const initDept = async (parentId) => {
    const deptResult = await getDeptLazyTree(parentId)
    return deptResult.data.data
}

// 初始化用户列表
const initUserList = (deptId) => {
    return getList(
        page.current,
        page.size,
        {
            userType: 2,
        },
        deptId,
    ).then(res => {
        page.total = res.data.data.total
        return res.data.data.records
    })
}

// 选择部门改变
const deptChange = async (value) => {
    const id = value[value.length - 1]
    currentDeptId.value = id
    const userList = await initUserList(id)
    userSelectOption.value = userList
}

// 级联配置
const cascaderProps = {
    lazy: true,
    label: 'title',
    value: 'id',
    multiple: false,
    lazyLoad: async (node, resovle) => {
        const level = node.level || 0
        if (level == 0) {
            const res = await initDept(level)
            resovle(res)
        } else {
            const { value } = node
            const res = await initDept(value)
            resovle(res)
        }
    },
    leaf(node) {
        const { hasChildren } = node
        return !hasChildren
    }
}

const userSelectChange = (value) => {
    const obj = userSelectOption.value.find(item => item.id == value)
    const { id, deptName, deptId, postName, realName } = obj
    requestParams.userId = id
    requestParams.deptId = deptId
    requestParams.userName = realName
    requestParams.deptName = deptName
    requestParams.postName = postName

    form.deptName = deptName
    form.postName = postName
}

const submit = () => {
    formRef.value.validate(valid => {
        if (!valid) return ElMessage.error('添加候选人失败')
        addCandidate(requestParams).then(res => {
            ElMessage.success('添加候选人成功')
            props.dialogParams.visible = false
            emits('refresh')
        }, error => {
            ElMessage.error(error)
        })
    })
}

const dialogClose = () => {
    formRef.value.resetFields()
}

watch(() => props.dialogParams.visible, (val) => {
    if (!val) return
    const { evaluateTaskId, evaluateTaskName } = props.dialogParams.taskParams
    requestParams.evaluateTaskName = evaluateTaskName
    requestParams.evaluateTaskId = evaluateTaskId
}, {
    deep: true
})
</script>

<style lang="scss" scoped>
.loading-more {
    text-align: center;
    cursor: pointer;
}
</style>