leromro-web/src/views/order/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"  />
        <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 } from "@/api/order/manage.js";
import { getTreeList } from "@/api/staff/price.js";
import DialogForm from '@/views/components/DialogForm/index.vue';

const { proxy } = getCurrentInstance();
const { lrr_service_status } = proxy.useDict("lrr_service_status");
const router = useRouter();
const options = ref([]);
const userTableRef = ref();
const dialogFormRef = ref(null);
const listPageData = reactive({
    tableColumn: [
        {
            label: '订单ID',
            prop: 'mainOrderId',
             width: '180px'
        },
        {
            label: '时间',
            prop: 'createTime',
            type: 'date',
            isSearch: false,
            width: '180px'
        },
        {
            label: '志愿者姓名',
            prop: 'name',
            type: 'input',
            isSearch: true,
        },
        {
            label: '志愿者手机号',
            prop: 'phonenumber',
            type: 'input',
            isSearch: true
        },
        {
            label: '用户手机号',
            prop: 'clientTelephone',
            type: 'input',
            isSearch: true
        },
        // {
        //     label: '服务项目',
        //     prop: 'businessManagementId',
        //     type: 'cascader',
        //     isSearch: true,
        //     tableProp: 'projectName',
        //     options: options,
        //     props: { label: 'businessName', value: 'id', checkStrictly:true },
        // },
        {
            label: '项目类别',
            prop: 'businessTierName',
        },
        // {
        //     label: '科目',
        //     prop: 'projectTypeName',
        // },
        {
            label: '评分',
            prop: 'address',
        },
        {
            label: '订单状态',
            prop: 'orderStatus',
            type: 'dict',
            dict: lrr_service_status
        },
        {
            label: '订单单价',
            prop: 'serviceOnePrice',
        },
        {
            label: '订单金额',
            prop: 'serviceTotalPrice',
        },
        {
            label: '平台提成',
            prop: 'skillDescribe',
        },
    ],
    searchBtns: [],
    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)
                router.push("/order/order-details/index/" + row.mainOrderId);
                // 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: 'input',

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

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

        },
        {
            label: '家庭地址',
            prop: 'address',
            type: 'input',

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

        },
        {
            label: '身份证件',
            prop: 'idCardPicture',
            type: 'img',

        },
        {
            label: '职业证书',
            prop: 'certificationPicture',
            type: 'img',

        },
        {
            label: '技能简介',
            prop: 'skillDescribe',
            type: 'textarea',
        },
        {
            label: '审核状态',
            prop: 'appStatus',
            type: 'radio',
            rules: [
                { required: true, message: '请选择审核状态', trigger: 'blur' }
            ],
            options: [
                {
                    label: '通过',
                    value: '2'
                },
                {
                    label: '不通过',
                    value: '3'
                }
            ]
        },
    ]
})
const { title } = toRefs(dialogData);
const parentId = ref(0);

const openDialog = (row, type) => {
    console.log('row', row);
    try {
        const disabledData = {
            name: true,
            age: true,
            phonenumber: true,
            address: true,
            skillDescribe: true,
            businessManagementId: true,
        }

        if (type) {
            //审核
            title.value = '审核'

        } else {
            disabledData['appStatus'] = 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 handleDelete = (ids) => {
    proxy.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function () {
        return true
    }).then(() => {
        userTableRef.value.resetForm();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

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 (up_res.code === 200) {
        //         proxy.$modal.msgSuccess("审核成功");
        //         return;
        //     }
        //     proxy.$modal.msgSuccess(res.msg);
        // }
    } catch (error) {
        console.log('error', error);

    } finally {
        userTableRef.value.resetForm();
        dialogFormRef.value.handleDialog(false);
    }

}


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>