geg-gas-web/src/views/form/release/components/BasicConfigStep.vue

<template>
    <div class="step1-form">
        <BasicForm @register="register" />
    </div>
</template>
<script lang="ts" setup>
    import { inject } from 'vue';
    import { getFormTemplateList } from '/@/api/form/design';
    import { FormSchema, useForm, BasicForm } from '/@/components/Form';
    import { FormReleaseConfig } from '/@/model/generator/generatorConfig';
    import { FormTypeEnum } from '/@/enums/formtypeEnum';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { useMessage } from '/@/hooks/web/useMessage';

    const { notification } = useMessage();

    const { t } = useI18n();
    defineEmits(['register']);

    const formReleaseConfig = inject<FormReleaseConfig>('formReleaseConfig') as FormReleaseConfig;

    const formSchema: FormSchema[] = [
        {
            field: 'code',
            label: t('菜单编号'),
            required: true,
            component: 'Input',
            colProps: { span: 12 }
        },
        {
            field: 'name',
            label: t('菜单名称'),
            required: true,
            component: 'Input',
            colProps: { span: 12 }
        },
        {
            field: 'parentId',
            label: t('上级菜单'),
            component: 'MenuSelect',
            required: process.env.NODE_ENV === 'production',
            colProps: { span: 12 }
        },
        {
            field: 'formId',
            label: t('表单选择'),
            required: true,
            component: 'ApiSelect',
            componentProps: {
                api: getFormTemplateList,
                // use name as label
                labelField: 'name',
                // use id as value
                valueField: 'id',
                getPopupContainer: () => document.body,
                params: {
                    type: FormTypeEnum.CUSTOM_FORM
                },
                showSearch: true
            },
            colProps: { span: 12 }
        },
        {
            field: 'sortCode',
            label: t('排序'),
            required: true,
            component: 'InputNumber',
            componentProps: {
                style: { width: '100%' }
            },
            colProps: { span: 12 }
        },
        {
            field: 'icon',
            label: t('图标'),
            required: true,
            component: 'IconPicker',
            colProps: { span: 12 }
        },

        {
            field: 'remark',
            label: t('备注'),
            component: 'InputTextArea',
            colProps: { span: 24 }
        }
    ];
    const [register, { validate, setFieldsValue }] = useForm({
        labelWidth: 100,
        schemas: formSchema,
        showActionButtonGroup: false
    });

    //验证当前步骤的数据
    const validateStep = async (): Promise<boolean> => {
        try {
            const formData = await validate();
            if (formData.code.length > 10) {
                notification.error({
                    message: t('提示'),
                    description: '编号长度不能超过10个字符'
                }); //提示消息
                return false;
            }
            formReleaseConfig.menuConfig.code = formData.code;
            formReleaseConfig.menuConfig.name = formData.name;
            formReleaseConfig.menuConfig.parentId = formData.parentId;
            formReleaseConfig.menuConfig.remark = formData.remark;
            formReleaseConfig.menuConfig.sortCode = formData.sortCode;
            formReleaseConfig.menuConfig.icon = formData.icon;
            formReleaseConfig.formId = formData.formId;
        } catch (error) {
            return false;
        }
        return true;
    };

    defineExpose({ validateStep, setFieldsValue });
</script>