geg-gas-web/src/views/erp/purchase/components/ApplyModal.vue

<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
        <SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
    </BasicModal>
</template>
<script lang="ts" setup>
    import { ref, computed, reactive } from 'vue';
    import { BasicModal, useModalInner } from '/@/components/Modal';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { usePermission } from '/@/hooks/web/usePermission';
    import { addCaseErpApply, getCaseErpApply, updateCaseErpApply } from '/@/api/erp/purchase/apply';

    import { formProps } from './config';
    import { cloneDeep } from 'lodash-es';
    import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';

    const emit = defineEmits(['success', 'register']);

    const { notification } = useMessage();
    const { filterFormSchemaAuth } = usePermission();
    const formRef = ref();
    formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
    const state = reactive({
        formModel: {},
        isUpdate: true,
        isView: false,
        rowId: ''
    });

    const { t } = useI18n();
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        state.isUpdate = !!data?.isUpdate;
        state.isView = !!data?.isView;

        setModalProps({
            destroyOnClose: true,
            maskClosable: false,
            showCancelBtn: !state.isView,
            showOkBtn: !state.isView,
            canFullscreen: true,
            width: 1200
        });
        const viewformProps = cloneDeep(formProps);
        setDisabled(viewformProps.schemas);
        formRef.value.setProps(state.isView ? viewformProps : formProps);
        if (state.isUpdate || state.isView) {
            state.rowId = data.id;
            const record = await getCaseErpApply(data.id);
            formRef.value.setFieldsValue(record);
        } else {
            formRef.value.resetFields();
        }
    });

    const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));

    function setDisabled(schemas) {
        const layoutComponents = ['tab', 'grid', 'card'];
        schemas?.map((info) => {
            if (layoutComponents.includes(info.type!)) {
                info.children?.map((childInfo) => {
                    childInfo.list.map((com) => {
                        if (layoutComponents.includes(com.type)) {
                            setDisabled(childInfo.list);
                        } else {
                            com.dynamicDisabled = true;
                        }
                    });
                });
            } else if (info.type == 'one-for-one') {
                setDisabled(info.componentProps.childSchemas);
            } else {
                info.dynamicDisabled = true;
            }
        });
    }

    async function handleSubmit() {
        try {
            const values = await formRef.value?.validate();
            //添加隐藏组件
            if (formProps.hiddenComponent?.length) {
                formProps.hiddenComponent.forEach((component) => {
                    values[component.bindField] = component.value;
                });
            }
            setModalProps({ confirmLoading: true });

            // TODO custom api
            if (!state.isUpdate) {
                //false 新增
                await addCaseErpApply(values);
                notification.success({
                    message: '提示',
                    description: t('新增成功！')
                }); //提示消息
            } else {
                values.id = state.rowId;
                await updateCaseErpApply(values);
                notification.success({
                    message: '提示',
                    description: t('修改成功！')
                }); //提示消息
            }

            closeModal();
            formRef.value.resetFields();
            emit('success');
        } finally {
            setModalProps({ confirmLoading: false });
        }
    }

    function handleClose() {
        formRef.value.resetFields();
    }
</script>