新增候选人弹窗修改

GuLiMmo

2023-12-23 1e89567955efda9eef71adc8dc02f7508374c5b0

新增候选人弹窗修改

 src/api/evaluate/evaluateTask.js

@@ -48,3 +48,33 @@
  })
}


export const getCandidateList = (current, size, params) => {
  return request({
    url: '/evaluate/evaluateCandidate/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const addCandidate = (data) => {
  return request({
    url: '/evaluate/evaluateCandidate/submit',
    method: 'post',
    data
  })
}

export const removeCandidate = (ids) => {
  return request({
    url: '/evaluate/evaluateCandidate/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

 src/views/evaluate/components/addCandidate.vue

@@ -1,27 +1,30 @@
<template>
    <el-dialog v-model="params.visible" title="新增候选人" width="60%" destroy-on-close>
        <div class="table-box">
            <avue-crud v-model="form" :option="option" :data="data" @row-save="rowSave">
                <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>
        </div>
        <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>
</template>

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

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

@@ -39,7 +42,16 @@
const $emit = defineEmits(['refreshTable'])

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

const option = reactive({
    height: '300',
@@ -52,14 +64,15 @@
    addBtn: true,
    editBtn: false,
    delBtn: false,
    selection: true,
    selection: false,
    refreshBtn: false,
    dialogClickModal: false,
    menuFixed: 'right',
    labelWidth: 100,
    column: [
        {
            label: '候选人姓名',
            prop: 'name',
            prop: 'userId',
            type: 'select',
            dicData: [],
            props: {
@@ -68,17 +81,31 @@
            },
            control: (val, row) => {
                const { findObject } = config
                const { dicData } = findObject(option.column, 'name')
                const data = dicData.find(item => item.id === val)
                row.deptName = data.deptName || ''
                row.deptId = data.deptId || ''
                form.value = row
            }
                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',
                },
            ]
        },
        {
            label: '部门',
            prop: 'deptName',
            type: 'select',
            type: 'input',
            disabled: true,
        },
        {
            label: '部门',
            prop: 'postName',
            type: 'input',
            disabled: true,
        }
    ]
@@ -86,90 +113,56 @@


const initData = () => {
    const { candidateNum } = _.cloneDeep($props.params.data)
    const userList = []
    candidateNum.forEach(item => {
        const { deptName, deptId, users } = item
        users.forEach(user => {
            user.deptName = deptName
            user.deptId = deptId
            userList.push(user)
        })
    })
    data.value = userList

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

const rowSave = (row, done) => {
    const { findObject } = config
    const column = findObject(option.column, 'name');
    const params = $props.params.data
    const info = params.candidateNum.find(item => item.deptId === row.deptId)
    const { name } = column.dicData.find(item => item.id === row.name)
    const is = data.value.find(item => item.id === row.name)
    if (is) {
        ElMessage.warning('当前候选人已存在')
        done()
    } else {
        const user = {
            id: row.name,
            name
        }
        info.users.push(user)
        update(params).then(
            () => {
                ElMessage({
                    type: 'success',
                    message: '操作成功!',
                });
                initData()
                $emit('refreshTable', '')
                done()
            },
            error => {
                ElMessage({
                    type: 'error',
                    message: error,
                });
            }
        );

    }
const rowSave = (row, done, loading) => {
    const { data: { id, taskName } } = $props.params
    addCandidate({
        evaluateTaskId: id,
        evaluateTaskName: taskName,
        ...row
    }).then(res => {
        ElMessage.success('新增候选人成功');
        onLoad(table.page);
        done();
    }, error => {
        loading();
        console.log(error);
    })
}

const rowDel = (row) => {
    const { $index, id, deptId } = row
    const params = $props.params.data
    const info = params.candidateNum.find(item => item.deptId === deptId)
    const index = info.users.findIndex(item => item.id === id)
    info.users.splice(index, 1)
    // if (info.val === 0) {
        
    // }
    // if (info.val > info.users.length) {
    //     info.val = info.users.length
    // }
    // update(params).then(
    //     () => {
    //         ElMessage({
    //             type: 'success',
    //             message: '操作成功!',
    //         });
    //         initData()
    //         $emit('refreshTable', '')
    //     },
    //     error => {
    //         ElMessage({
    //             type: 'error',
    //             message: 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) => {
@@ -178,11 +171,14 @@
    deep: true,
    immediate: true
})

const ids = computed(() => {
    let ids = [];
    table.selectionList.forEach(ele => {
        ids.push(ele.id);
    });
    return ids.join(',');
})
</script>

<style lang="scss" scoped>
.table-box {
    height: 400px;
    overflow-x: auto;
}
</style>
<style lang="scss" scoped></style>

 src/views/evaluate/evaluateTask.vue

@@ -16,7 +16,7 @@
        <el-button type="primary" text plain icon="el-icon-edit" @click="editDialog(row)">编辑</el-button>
        <el-button type="primary" text plain icon="el-icon-position" @click="publicTimeBtn(row)"
          v-if="row.candidateState === 2">发布</el-button>
        <!-- <el-button type="primary" v-if="row.type === 0" text plain icon="el-icon-plus" @click="addCandidateHandle(row)">新增候选人</el-button> -->
        <el-button type="primary" v-if="row.type === 0 && row.candidateState === 2" text plain icon="el-icon-plus" @click="addCandidateHandle(row)">新增候选人</el-button>
        <el-button type="primary" text plain icon="el-icon-download">导出</el-button>
      </template>
    </avue-crud>
@@ -306,7 +306,6 @@
      };
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
        console.log(data.records);
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;