leromro-web/src/views/staff/volunteer/manage/index.vue

<template>
    <div>
        <ListPage :column="listPageData.tableColumn" :tableApi="listPageData.tableApi" :isSelect="listPageData.isSelect"
            :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns" ref="userTableRef"
            v-if="options && options.length > 0" :tabList="tabList" tabsearchKey="appStatus" />
        <DialogForm ref="dialogFormRef" :title="title" :column="dialogData.column" @submit="submitForm" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import ListPage from '@/views/components/ListPage/index.vue';
import { list, approval } from "@/api/staff/volunteer.js";
import { getTreeList } from "@/api/staff/price.js";

import DialogForm from '@/views/components/DialogForm/index.vue';
const { proxy } = getCurrentInstance();
const { volunteer_app_status } = proxy.useDict("volunteer_app_status");

const options = ref([]);
const userTableRef = ref();
const dialogFormRef = ref(null);
const listPageData = reactive({
    tableColumn: [
        {
            label: '注册时间',
            prop: 'createTime',
            type: 'date',
            isSearch: false,
            keys: ['start', 'end'],
            width: '180px'
        },
        {
            label: '姓名',
            prop: 'name',
            type: 'input',
            isSearch: true,
        },

        {
            label: '服务项目',
            prop: 'businessManagementId',
            type: 'cascader',
            isSearch: true,
            tableProp: 'businessTierName',
            options: options,
            props: { label: 'businessName', value: 'id', checkStrictly: true },


        },
        // {
        //     label: '项目类别',
        //     prop: 'projectTypeName',
        // },
        // {
        //     label: '科目',
        //     prop: 'projectTypeName',
        // },

        {
            label: '手机号',
            prop: 'phonenumber',
            type: 'input',
            isSearch: true
        },
        {
            label: '家庭地址',
            prop: 'address',
        },
        {
            label: '服务图片',
            prop: 'volunteerPicture',
            type: 'img',
        },
        {
            label: '身份证件',
            prop: ['idCardPictureFront','idCardPictureBack'],
            type: 'img',
        },
        {
            label: '资质证书',
            prop: 'certificationPicture',
            type: 'img',
        },
        {
            label: '个人简介',
            prop: 'skillDescribe',
            width: '400px',

        },
        {
            label: '审核状态',
            prop: 'appStatus',
            type: 'dict',
            dict: volunteer_app_status
        },
        
    ],
    searchBtns: [
        // {
        //     label: '批量删除',
        //     func: () => {
        //         const ids = userTableRef.value.ids;
        //         console.log('批量删除', ids)
        //         handleDelete(ids);
        //     },
        //     key: 'deletes',
        //     hasPermi: ['manage:delete'],
        //     type: 'danger'
        // },
    ],
    tableApi: list,//接口地址
    isSelect: false,//是否勾选
    scopeBtns: [
        {
            label: '审核',
            type: 'primary',
            hasPermi: ['manage:examine'],
            key: 'examine',
            func: (row) => {
                console.log(row)
                openDialog(row, 'examine')
            },
            show: (row) => {
                return row.appStatus == 1
            }
        },
        {
            label: '查看详情',
            type: 'primary',
            hasPermi: ['manage:details'],
            key: 'details',
            func: (row) => {
                console.log(row)
                openDialog(row)
            }
        },
        // {
        //     label: '删除',
        //     type: 'danger',
        //     hasPermi: ['manage:delete'],
        //     key: 'delete',
        //     func: (row) => {
        //         console.log(row)
        //         handleDelete([row.id])
        //     }
        // }
    ]
})
const dialogData = reactive({
    title: '',
    column: [
        {
            label: '姓名',
            prop: 'name',
            type: 'text',

        },
        {
            label: '年龄',
            prop: 'age',
            type: 'text',

        },
        {
            label: '电话',
            prop: 'phonenumber',
            type: 'text',

        },
        {
            label: '家庭地址',
            prop: 'address',
            type: 'text',
        },
        {
            label: '服务项目/类别',
            prop: 'businessTierName',
            type: 'text',
            // options: options,
            // props: { label: 'businessName', value: 'id', checkStrictly: true },
        },
        {
            label: '服务时长',
            prop: 'businessDuration',
            type: 'text',
            dese: '分钟'
        },
        {
            label: '服务价格',
            prop: 'businessPrice',
            type: 'text',
            dese: '元'
        },
        {
            label: '服务图片',
            prop: 'volunteerPicture',
            type: 'img',
        },
        {
            label: '身份证件',
            prop: ['idCardPictureFront','idCardPictureBack'],
            type: 'img',
        },
        {
            label: '职业证书',
            prop: 'certificationPicture',
            type: 'img',
        },
        {
            label: '个人简介',
            prop: 'skillDescribe',
            type: 'text',
        },
       
        {
            label: '审核状态',
            prop: 'appStatus',
            type: 'radio',
            rules: [
                { required: true, message: '请选择审核状态', trigger: 'blur' }
            ],
            options: [
                {
                    label: '通过',
                    value: '2'
                },
                {
                    label: '不通过',
                    value: '3'
                }
            ]
        },
        {
            label: '驳回原因',
            prop: 'rejectReason',
            type: 'textarea',
            rules: [
                { required: true, message: '请填写驳回原因', trigger: 'blur' }
            ],
            show: (form) => {
                console.log('驳回原因', form);
                return form.appStatus === '3'
            }
        },
    ]
})
const { title } = toRefs(dialogData);
const parentId = ref(0);
const tabList = [
    {
        title: '已通过',
        name: '2',
    },
    {
        title: '待审核',
        name: '1',
    },
]

const openDialog = (data, type) => {

    const row = JSON.parse(JSON.stringify(data));
    try {
        const disabledData = {
            name: true,
            age: true,
            phonenumber: true,
            address: true,
            skillDescribe: true,
            businessTierName: true,
            businessDuration: true,
            businessPrice: true
        }

        if (type) {
            //审核
            title.value = '审核'
            row.appStatus = '';
        } else {
            disabledData['appStatus'] = true;
            disabledData['rejectReason'] = true;
            //查看详情
            title.value = '查看详情'
        }

        dialogFormRef.value.initForm(row, disabledData)

    } catch (error) {
        console.log('error', error);
    } finally {
        console.log('dialogFormRef.value', dialogFormRef.value);

        dialogFormRef.value.handleDialog(true);
    }
}

const submitForm = async (parmas) => {

    try {
        console.log('submit', parmas);
        if (title.value === '审核') {
            const res = await approval({
                volunteerInfoId: parmas.volunteerInfoId,
                appStatus: parmas.appStatus,
                rejectReason: parmas.rejectReason
            })
            if (res.code === 200) {
                proxy.$modal.msgSuccess("审核成功");
                userTableRef.value.resetForm();
                dialogFormRef.value.handleDialog(false);
                return;
            }
            proxy.$modal.msgSuccess(res.msg);
        }
    } catch (error) {
        console.log('error', error);

    }

}


const getTreeListData = async () => {
    try {
        const res = await getTreeList({ parentId: parentId.value });
        console.log('res', res);
        options.value = res.data;
    } catch (error) {

    }
}

getTreeListData();

</script>

<style lang='scss' scoped></style>