shuhi-ui/src/views/marketing/partner/components/partner-edit.vue

<!-- 合伙人编辑弹窗 -->
<template>
    <simple-form-modal
        :title="title"
        :items="formItems"
        ref="editRef"
        :baseUrl="baseUrl"
        width="800px"
        :formProps="{ labelWidth: '80px', grid: 12 }"
        :formatData="formatData"
        :fallbackData="fallbackData"
        idKey="userId"
        @success="(data) => emit('success', data)"
    />
</template>

<script setup>
    import { reactive, ref, defineEmits } from 'vue';
    import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';

    const title = ref('编辑信息');
    const emit = defineEmits(['success']);

    // 表单项配置
    const formItems = reactive([
        {
            type: 'input',
            label: '用户ID',
            prop: 'userId',
            props: { disabled: true }
        },
        { type: 'input', label: '姓名', prop: 'name' },
        {
            type: 'input',
            label: '手机号',
            prop: 'mobile',
            required: true,
            rules: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号',
                    trigger: 'blur'
                }
            ]
        },
        { type: 'input', label: '地区', prop: 'address' },
        { type: 'input', label: '学校', prop: 'school' },
        { type: 'input', label: '院系', prop: 'faculties' },
        { type: 'input', label: '专业', prop: 'specialty' },
        { type: 'input', label: '年级', prop: 'grade' },
        {
            type: 'dictSelect',
            label: '状态',
            prop: 'blackStatus',
            props: { code: 'partner_status', disabled: true }
        },
        {
            type: 'dictSelect',
            label: '原因',
            prop: 'blackReason',
            props: { code: 'partner_black_reason', disabled: true }
        },
        {
            type: 'textarea',
            label: '备注',
            prop: 'remark',
            props: { rows: 4 },
            colProps: { span: 24 }
        }
    ]);

    // API 接口配置
    const baseUrl = reactive({
        update: '/user/userPartnerInfo/update',
        detail: '/user/userPartnerInfo/getInfo'
    });

    const editRef = ref(null);
    const formData = ref({});

    // 打开弹窗
    function handleOpen(userId) {
        formData.value.userId = userId;
        formData.value.id = userId;
        editRef.value?.handleOpen(formData.value);
    }

    // 格式化提交数据
    function formatData(data) {
        return {
            id: formData.value.userId,
            userId: formData.value.userId,
            provinceId: formData.value.provinceId,
            cityId: formData.value.cityId,
            districtId: formData.value.districtId,
            name: data.name,
            school: data.school,
            faculties: data.faculties,
            specialty: data.specialty,
            grade: data.grade,
            mobile: data.mobile,
            blackStatus: formData.value.blackStatus,
            blackReason: formData.value.blackReason,
            remark: data.remark
        };
    }

    // 回填数据
    function fallbackData(data) {
        formData.value = data;
        return data;
    }

    defineExpose({ handleOpen });
</script>

<style lang="scss" scoped>
    .partner-edit {
        :deep(.el-form-item__label) {
            font-weight: normal;
        }
    }
</style>