digital-medicine-front/src/views/cdt/models/uploadInvoiceForm.vue

<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width">
        <template #default>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" hide-required-asterisk>
                <el-form-item label="发票:" prop="invoice">
                    <file-upload v-model="form.invoice" :limit="1" isObject :fileType="['pdf']" :span="24" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
        </template>
    </vxe-modal>
</template>

<script setup name="uploadInvoiceForm" lang="ts">
import { uploadTestOrderInvoice } from '@/api/cdt/orders';
import { propTypes } from '@/utils/propTypes';
import { FormInstance } from 'element-plus';
const emit = defineEmits(['update:show', 'close', 'success']);
const props = defineProps({
    show: propTypes.bool.def(false),
    title: propTypes.string.def('上传检测发票'),
    width: propTypes.number.def(560),
    info: propTypes.any.def(null),
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dialogVisible = ref(false);
const form = ref<any>({
    invoice: null
});
const rules = reactive({
    invoice: [{ required: true, message: '请上传发票', trigger: 'change' }],
})
const formRef = ref<FormInstance>();
const close = () => {
    formRef.value?.resetFields();
    emit('update:show', false);
    emit('close', false);
};
const submitForm = async () => {
    try {
        await formRef.value?.validate();
        const res = await uploadTestOrderInvoice({ ...form.value, orderId: props.info?.id });
        if (res) {
            close();
            emit('success', true);
        }
    } catch (error) {
        console.error(error);
    }
};

watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
</script>