leromro-web/src/views/staff/user/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 { listUser } from "@/api/staff/user";
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: '用户ID',
            prop: 'userId',
             width: '180px'
        },
        {
            label: '注册时间',
            prop: 'createTime',
            type: 'date',
            isSearch: false,
            width: '180px'
        },
        {
            label: '姓名',
            prop: 'nickName',
            type: 'input',
            isSearch: true,
        },
        {
            label: '用户名',
            prop: 'userName',
        },
        {
            label: '性别',
            prop: 'sex',
            type: 'render',
            render:(row) => {
                return row.sex === '0' ? '男' : '女'
            }
        },
        {
            label: '电话',
            prop: 'phonenumber',
            type: 'input',
            isSearch: true
        },
        {
            label: '住址',
            prop: 'adress',
        },
    ],
    searchBtns: [],
    tableApi: listUser,//接口地址
    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: '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>