charge-java/admin-web/src/views/admin/invoice/InvoiceDialog.vue

<style scoped lang="scss">

</style>
<template>
    <div class="system-dialog-container">
        <el-dialog
                :title="state.dialog.title"
                v-model="state.dialog.isShowDialog"
                width="820px"
                draggable
                destroy-on-close
                :close-on-click-modal="false"
                align-center>
            <ext-detail-form
                    ref="formRef"
                    v-model="state.ruleForm"
                    :columns="state.columns"
                    :rules="state.rules"
                    @on-change="handleFormChange"
            ></ext-detail-form>

            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="InvoiceDialog">
    import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
    import {Msg} from "/@/utils/message";
    import {$body, $get} from "/@/utils/request";
    import u from '/@/utils/u'

    // 引入组件
    const ExtDetailForm = defineAsyncComponent(() => import('/@/components/form/ExtDetailForm.vue'));

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const formRef = ref();
    //定义初始变量，重置使用
    const initState = ()=>({
        ruleForm: {
            id:0
        },
        btnLoading: false,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        columns: [
                                                                                                                                                                                                        {label: '微信发票申请id', prop: 'applyId', type: 'text',},
                                                                                                                                                                                                                                                            {label: '发票抬头填写人的openid', prop: 'openid', type: 'text',},
                                                                                                                    {label: '发票关联订单详情', prop: 'orderDetails', type: 'user'},
                                                                                                                                                                                                                        {label: '累积总金额（元）', prop: 'totalMoney', type: 'user',},
                                                                                                                                                                                {label: '累积电费（元）', prop: 'elecMoney', type: 'user',},
                                                                                                                                                                                {label: '累积服务费（元）', prop: 'serviceMoney', type: 'user',},
                                                                                                                                                                                                                {label: '接收发票邮箱', prop: 'email', type: 'text',},
                                                                                                                                                                                {label: '电话', prop: 'phone', type: 'text',},
                                                                                                                                                                                {label: '发票类型:INDIVIDUAL-个人 ORGANIZATION-企业', prop: 'invoiceType', type: 'text',},
                                                                                                                                                                                {label: '发票抬头名称', prop: 'invoiceTitle', type: 'text',},
                                                                                                                                                                                {label: '公司税号', prop: 'taxId', type: 'text',},
                                                                                                                                                                                {label: '公司地址', prop: 'address', type: 'text',},
                                                                                                                                                                                {label: '开户银行', prop: 'bankName', type: 'text',},
                                                                                                                                                                                {label: '银行账户', prop: 'bankAccount', type: 'text',},
                                                                                                                                                {label: '发票金额（单位：分）', prop: 'invoiceAmount', type: 'user',},
                                                                                                                                                    {label: '税额详情信息', prop: 'taxInfo', type: 'user'},
                                                                                                                                                                            {label: '开票人', prop: 'biller', type: 'text',},
                                                                                                                            {
                            label: '发票状态：0-待开票 1-已开票 2-已作废',
                            prop: 'status',
                            sortable: 'custom',
                            align: 'center',
                            type: 'dict',
                            conf: {dict: 'Invoice.status'}
                        },
                                                                {label: '发票状态：0-待开票 1-已开票 2-已作废', prop: 'status', type: 'user',},
                                                                                                                                                                                                                {label: '备注', prop: 'remark', type: 'text',},
                                                                                                                                                    {                        label: '', prop: 'createTime', type: 'datetime',},
                                                                                                                {                        label: '', prop: 'updateTime', type: 'datetime',},
                                    ],
        rules: {},
    })
    
    // 定义变量内容
    const state = reactive(initState());


    // 打开弹窗
    const open = (action: string='add', row: any) => {
        state.dialog.title = u.dialog.actions[action].title +"『发票记录表』"
        state.dialog.submitTxt = u.dialog.actions[action].btn +"『发票记录表』"
        state.dialog.isShowDialog = true;
        if (action !=='add') {
            loadData(row.id);
        }else{
            state.ruleForm = Object.assign(state.ruleForm,row);
        }
    };
    // 关闭弹窗
    const onClose = () => {
        state.dialog.isShowDialog = false;
        Object.assign(state,initState())
    };
    // 取消
    const onCancel = () => {
        onClose();
    };
    // 提交
    const onSubmit = () => {
        formRef.value.checkForm().then(() => {
            state.btnLoading = true;
            const url = state.ruleForm.id > 0 ? "invoice/modify" : "invoice/add"
                $body(url, state.ruleForm).then(() => {
                state.btnLoading = false;
                Msg.message('操作成功');
                console.log('submit!')
                onClose();
                emit('refresh');
            })
        }).catch(() => {
            state.btnLoading = false;
            Msg.message('请先完整填写表单', 'error');
        })
    };

    const handleFormChange = (formData: any) => {
        console.log(formData)
    }

    // 初始化表格数据
    const loadData = (id: number) => {
            $get(`invoice/detail/${id}`).then((res: any) => {
            state.ruleForm = res;
        })
    }

    // 暴露变量
    defineExpose({
        open
    });


</script>