THJ_Mobile/src/packages/mobile/views/mine/invoice/components/edit/index.vue

<template>
    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
        <app-view class="g-form">
            <template #header>
                <app-navbar :title="selectedRow.autoid ? '修改发票信息' : '新增发票信息'" @back="closed" />
            </template>
            <Form ref="formRef" class="g-form__container" @submit="formSubmit">
                <CellGroup inset>
                    <Field name="ReceiptType" label="发票类型" :rules="formRules.ReceiptType"
                        :is-link="!selectedRow.autoid">
                        <template #input>
                            <app-select v-model="formData.ReceiptType" :options="getReceiptTypeList()"
                                :readonly="!!selectedRow.autoid" />
                        </template>
                    </Field>
                    <Field v-model="formData.UserName" :rules="formRules.UserName" name="UserName" label="发票抬头"
                        placeholder="必填" />
                    <template v-if="formData.ReceiptType === ReceiptType.Company">
                        <Field v-model="formData.TaxpayerID" :rules="formRules.TaxpayerID" name="TaxpayerID" label="税号"
                            placeholder="必填" />
                        <Field v-model="formData.ReceiptBank" :rules="formRules.ReceiptBank" name="ReceiptBank"
                            label="开户银行" placeholder="选填" />
                        <Field v-model="formData.ReceiptAccount" :rules="formRules.ReceiptAccount" name="ReceiptAccount"
                            label="银行账号" placeholder="选填" />
                        <Field v-model="formData.Address" :rules="formRules.Address" name="Address" label="企业地址"
                            placeholder="选填" />
                        <Field v-model="formData.ContactInfo" :rules="formRules.ContactInfo" name="ContactInfo"
                            label="企业电话" placeholder="选填" />
                    </template>
                    <Field v-model="formData.Email" :rules="formRules.Email" name="Email" label="邮箱" placeholder="选填" />
                </CellGroup>
            </Form>
            <template #footer>
                <div class="g-form__footer">
                    <Button type="warning" @click="formDelete" round block v-if="selectedRow.autoid">删除</Button>
                    <Button type="primary" @click="formRef?.submit" round block>保存</Button>
                </div>
            </template>
        </app-view>
    </app-modal>
</template>

<script lang="ts" setup>
import { shallowRef, PropType } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, showFailToast, FieldRule } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { ReceiptType, getReceiptTypeList } from '@/constants/receipt'
import { validateRules } from '@/constants/regex'
import { useInvoiceForm } from '@/business/user'
import AppModal from '@/components/base/modal/index.vue'
import AppSelect from '@mobile/components/base/select/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Model.WrUserReceiptInfoRsp>,
        default: () => ({})
    }
})

const { formData, addOrUpdate, deleteInvoice } = useInvoiceForm(props.selectedRow)
const formRef = shallowRef<FormInstance>()
const showModal = shallowRef(true)
const refresh = shallowRef(false) // 是否刷新父组件数据

// 表单验证规则
const formRules: { [key in keyof Proto.UserReceiptInfoReq]?: FieldRule[] } = {
    UserName: [{
        required: true,
        message: '请输入发票抬头',
    }],
    TaxpayerID: [{
        required: true,
        message: '请输入纳税人识别号',
    }],
    Email: [{
        validator: (val) => {
            if (validateRules.email.validate(val)) {
                return true
            }
            return validateRules.email.message
        }
    }],
}

// 表单提交
const formSubmit = () => {
    fullloading((hideLoading) => {
        addOrUpdate().then(() => {
            hideLoading()
            closed(true)
        }).catch((err) => {
            showFailToast(err)
        })
    })
}

// 删除发票
const formDelete = () => {
    dialog({
        message: '是否删除该发票？',
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            deleteInvoice().then(() => {
                hideLoading()
                closed(true)
            }).catch((err) => {
                showFailToast(err)
            })
        })
    })
}

// 关闭弹窗
const closed = (isRefresh = false) => {
    refresh.value = isRefresh
    showModal.value = false
}

// 暴露组件属性给父组件调用
defineExpose({
    closed,
})
</script>