新增前后端

wujianwei

2026-01-19 7d0c8a812777393ac2eefe40cbe3fa8b857e9b1f

 ui/admin-ui3/src/views/tms/tmsCustomerInfo/info.vue

@@ -1,15 +1,14 @@
<template>
    <el-affix :offset="84">
    <!-- <el-affix :offset="84">
        <div class="affix-box">
            <div class="affix-box-title">
            </div>
            <div>
                <el-button type="warning" @click="goToList">返 回</el-button>

                <el-button v-if="!formDisabled" type="primary" @click="submitForm">提 交</el-button>
            </div>
        </div>
    </el-affix>
    </el-affix> -->
    <div class="app-container">
        <h4 class="form-header">客商信息</h4>
        <el-form ref="wmsDzInoutOrderItemRef" :model="form" :rules="rules" class="form-wrapper">
@@ -110,7 +109,7 @@
                    @click="handleAdd(1)">新增
                </el-button>

                <el-table border :data="invoiceInfoList">
                <el-table border class="demo-tabs" :data="invoiceInfoList">
                    <el-table-column type="selection" width="55" align="center" />
                    <!-- <el-table-column label="id" align="center" prop="id" /> -->
                    <el-table-column label="抬头公司名称" align="center" prop="invoiceCompanyName" />
@@ -122,9 +121,9 @@
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button v-if="!formDisabled" type="text" icon="Edit" @click="handleUpdates(scope.row)">编辑
                            <el-button v-if="!formDisabled" type="text" icon="Edit" @click="handleUpdates(scope.row,scope.$index)">编辑
                            </el-button>
                            <el-button v-if="!formDisabled" type="text" @click="handleDelte(scope.row)">删除
                            <el-button v-if="!formDisabled" type="text" @click="handleDelte(scope.row,scope.$index)">删除
                            </el-button>

                            <el-button v-if="formDisabled" type="text" @click="handleExamine(scope.row)">查看
@@ -144,7 +143,7 @@
                    @click="handleBankAdd(2)">新增
                </el-button>

                <el-table border :data="bankAccountConfigList">
                <el-table border class="demo-tabs" :data="bankAccountConfigList">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="银行账号编号" align="center" prop="accountNo" />
                    <el-table-column label="户名" align="center" prop="accountName" />
@@ -163,9 +162,9 @@
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button v-if="!formDisabled" type="text" icon="Edit"
                                @click="handleBankUpdates(scope.row)">编辑
                                @click="handleBankUpdates(scope.row, scope.$index)">编辑
                            </el-button>
                            <el-button v-if="!formDisabled" type="text" @click="handleBankDelte(scope.row)">删除
                            <el-button v-if="!formDisabled" type="text" @click="handleBankDelte(scope.row, scope.$index)">删除
                            </el-button>
                            <el-button v-if="formDisabled" type="text" @click="handleExamine(scope.row)">查看
                            </el-button>
@@ -176,25 +175,29 @@
                <pagination v-show="bankPageF.total > 0" :total="bankPageF.total" v-model:page="queryBankParams.pageNum"
                    v-model:limit="queryBankParams.pageSize" @pagination="getList" />
            </el-tab-pane>
        </el-tabs>

        </el-tabs>
        <div class="bottom-operation-container">
            <el-button size="large" type="warning" @click="goToList" style="width: 120px;">返 回</el-button>
            <el-button v-if="!formDisabled" size="large" type="primary" @click="submitForm" style="width: 120px; margin-left: 30px;">提 交</el-button>
        </div>
    </div>
    <CommonDialogForm :visible="isDialogVisible" title="企业发票抬头信息" :initial-data="initialFormData"
    <CommonDialogForm :mode="formMode" :visible="isDialogVisible" title="企业发票抬头信息" :initial-data="initialFormData"
        @close="isDialogVisible = false" @submit="handleFormSubmit" />

    <bankAccount :visible="isDialogVisibleBank" title="客户银行账号配置" :initial-data="bankFormData"
    <bankAccount :mode="formBankeMode" :visible="isDialogVisibleBank" title="客户银行账号配置" :initial-data="bankFormData"
        @close="isDialogVisibleBank = false" @submit="handleBankFormSubmit" />

    <!-- 详情弹窗：仅展示描述列表，无输入框 -->
    <el-dialog v-model="invoiceVisible" :title="invoiceTitle" width="70%" destroy-on-close @close="handleClose"
        append-to-body>
        <el-descriptions v-if="activeName == 'first'" :column="3"   border>
        <el-descriptions v-if="activeName == 'first'" :column="3" border>
            <!-- 基本信息组 -->
            <el-descriptions-item label="系统编号">
                {{ formData.id }}
            </el-descriptions-item>
            <el-descriptions-item label="关联客户">
                {{ formData.customerName  }}
                {{ formData.customerName }}
            </el-descriptions-item>
            <el-descriptions-item label="抬头公司">
                {{ formData.invoiceCompanyName }}
@@ -203,11 +206,11 @@
                {{ formData.invoiceCreditCode }}
            </el-descriptions-item>
            <el-descriptions-item label="发票类型">
                {{ dictFormat(sys_invoice_type, formData.invoiceType)   }}
                {{ dictFormat(sys_invoice_type, formData.invoiceType) }}
            </el-descriptions-item>
            <!-- 联系人信息组 -->
            <el-descriptions-item label="开户银行名称">
                {{ formData.invoiceBankName  }}
                {{ formData.invoiceBankName }}
            </el-descriptions-item>
            <el-descriptions-item label="基本开户账号">
                {{ formData.invoiceBankNo }}
@@ -220,16 +223,16 @@
                {{ formData.invoiceOperatingLicensePhone }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
                {{ formData.invoiceOperatingLicenseEmail  }}
                {{ formData.invoiceOperatingLicenseEmail }}
            </el-descriptions-item>
        </el-descriptions>
             <el-descriptions v-if="activeName == 'second'" :column="3"   border>
        <el-descriptions v-if="activeName == 'second'" :column="3" border>
            <!-- 基本信息组 -->
            <el-descriptions-item label="系统编号">
                {{ formData.id }}
            </el-descriptions-item>
            <el-descriptions-item label="关联客户">
                {{ formData.customerName  }}
                {{ formData.customerName }}
            </el-descriptions-item>
            <el-descriptions-item label="账号编号">
                {{ formData.accountNo }}
@@ -238,23 +241,23 @@
                {{ formData.accountName }}
            </el-descriptions-item>
            <el-descriptions-item label="银行名称">
                   {{ formData.bankName }}
                {{ formData.bankName }}
            </el-descriptions-item>
            <!-- 联系人信息组 -->
            <el-descriptions-item label="支行名称">
                {{ formData.branchName  }}
                {{ formData.branchName }}
            </el-descriptions-item>
            <el-descriptions-item label="账号类型">
                {{ dictFormat(sys_account_type, formData.accountType)   }} 
                {{ dictFormat(sys_account_type, formData.accountType) }}
            </el-descriptions-item>
            <el-descriptions-item label="币种">
                {{ dictFormat(sys_currency, formData.currency)   }} 
                {{ dictFormat(sys_currency, formData.currency) }}
            </el-descriptions-item>
            <!-- 银行账户信息组 -->
            <el-descriptions-item label="账户状态">
                {{ dictFormat(sys_bank_type, formData.status)   }} 
                {{ dictFormat(sys_bank_type, formData.status) }}
            </el-descriptions-item>
       

        </el-descriptions>

        <!-- 底部按钮 -->
@@ -284,7 +287,7 @@

import { listInvoiceInfo, getInvoiceInfo } from "@/api/cwgl/invoiceInfo";

import { listBankAccountConfig,getBankAccountConfig } from "@/api/cwgl/bankAccountConfig";
import { listBankAccountConfig, getBankAccountConfig } from "@/api/cwgl/bankAccountConfig";
interface DzInventoryI extends BaseEntityInterface {
    id?: number, no?: string, enterId?: string, putrecNo?: string, etpsInnerInvtNo?: string, bizopEtpsSccd?: string, bizopEtpsNo?: string, bizopEtpsNm?: string, rcvgdEtpsNo?: string, rvsngdEtpsSccd?: string, rcvgdEtpsNm?: string, dclEtpsSccd?: string, dclEtpsNo?: string, dclEtpsNm?: string, invtDclTime?: string, entryDclTime?: string, rltInvtNo?: string, rltPutrecNo?: string, rltEntryNo?: string, rltEntryBizopEtpsSccd?: string, rltEntryBizopEtpsno?: string, rltEntryBizopEtpsnm?: string, rltEntryRvsngdEtpsSccd?: string, rltEntryRcvgdEtpsNo?: string, rltEntryRcvgdEtpsNm?: string, rltEntryDclEtpsSccd?: string, rltEntryDclEtpsNo?: string, rltEntryDclEtpsNm?: string, impExpPortcd?: string, dclPlcCuscd?: string, mtpckEndprdMarkcd?: string, supvModecd?: string, trspModecd?: string, dclCusFlag?: number, decType?: string, vrfdedMarkcd?: string, invtIochkptStucd?: string, prevdTime?: string, formalVrfdedTime?: string, applyNo?: string, listType?: string, inputCode?: string, inputCreditCode?: string, inputName?: string, icCardNo?: string, inputTime?: string, listStat?: string, correntryDclEtpssccd?: string, correntryDclEtpsno?: string, correntryDclEtpsnm?: string, decType?: string, chgTmsCnt?: number, stshipTrsarvNatcd?: string, invtType?: string, entryStucd?: number, passPortUsedTypecd?: string, dclTypecd?: number, needEntryModified?: string, levyBlAmt?: string, genDecFlag?: number, createBy?: string, createTime?: string, updateBy?: string, updateTime?: string, status?: number, deleted?: number, remark?: string
    impExpMarkcd?: string, dzOrders?: any, wmsDzInoutOrderItemList?: any, inputSccd?: string
@@ -293,12 +296,12 @@

const { proxy } = useCurrentInstance();
const {
    customer_type, sys_invoice_type, sys_currency, sys_account_type,sys_bank_type
    customer_type, sys_invoice_type, sys_currency, sys_account_type, sys_bank_type


} =
    proxy.useDict(
        'customer_type', 'sys_invoice_type', 'sys_currency', 'sys_account_type','sys_bank_type'
        'customer_type', 'sys_invoice_type', 'sys_currency', 'sys_account_type', 'sys_bank_type'
    );


@@ -317,7 +320,7 @@
const data = reactive({
    form: <DzInventoryI & any>{
    },
    formData:{},
    formData: {},
    operate: 'add',
    queryParams: <DzInoutOrderI>{ pageNum: 1, pageSize: 10 },
    queryBankParams: <DzInoutOrderI>{ pageNum: 1, pageSize: 10 },
@@ -340,31 +343,35 @@
    bankAccountConfigList: [],

})
const { form, rules, queryParams, operate, formDisabled, invoiceInfoList, queryBankParams, bankAccountConfigList,formData } = toRefs(data);
const { form, rules, queryParams, operate, formDisabled, invoiceInfoList, queryBankParams, bankAccountConfigList, formData } = toRefs(data);

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    if (tab.props.name == 'first') {
        // 开票资料
        queryParams.value.customerId = router.currentRoute.value.query.id
        listInvoiceInfo(queryParams.value).then(res => {
            if (res.code = 200) {
                form.value.invoiceInfoList = res.rows;
                invoiceInfoList.value = res.rows;
                pageF.total = res.total;
            }
        });
    } else if (tab.props.name == 'second') {
        // 银行账号
        listBankAccountConfig(queryBankParams.value).then(res => {
            if (res.code = 200) {
                form.value.bankAccountConfigList = res.rows;
                bankAccountConfigList.value = res.rows;
                bankPageF.total = res.total;
            }
        });

    if (router.currentRoute.value.query.formDisabled == 'true') {
        if (tab.props.name == 'first') {
            // 开票资料
            queryParams.value.customerId = router.currentRoute.value.query.id
            listInvoiceInfo(queryParams.value).then(res => {
                if (res.code = 200) {
                    form.value.invoiceInfoList = res.rows;
                    invoiceInfoList.value = res.rows;
                    pageF.total = res.total;
                }
            });
        } else if (tab.props.name == 'second') {
            // 银行账号
            listBankAccountConfig(queryBankParams.value).then(res => {
                if (res.code = 200) {
                    form.value.bankAccountConfigList = res.rows;
                    bankAccountConfigList.value = res.rows;
                    bankPageF.total = res.total;
                }
            });
        }
    }

}
const goToList = () => {
    router.push('/customer/tmsCustomerInfo');
@@ -402,30 +409,47 @@
    // router.push({ path: '/cwgl/dzInventory' });
}
/* 开票资料 */
const formMode = ref<'add' | 'edit'>('add');
const formBankeMode = ref<'add' | 'edit'>('add');


const handleAdd = () => {
    if (!form.value.customerFullName || form.value.customerFullName.trim() == '') {
        proxy.$message.error("客户全称不能为空");
        return;
    }

    formMode.value = 'add';
    isDialogVisible.value = true;
    initialFormData.value = {
        relatedCustomerName: form.value.customerFullName,
    };
};
const handleUpdates = (row: any) => {
const editingIndex = ref()
const handleUpdates = (row: any,index:any) => {
    // 编辑行数据
    console.log(row);
    formMode.value = 'edit';
    isDialogVisible.value = true;
    initialFormData.value = row;
    editingIndex.value = index; // 记录索引
}
const handleDelte = (row: any) => {
    const index = invoiceInfoList.value.findIndex((item: any) => item === row);
const handleDelte = (row: any,index:any) => {
    // const index = invoiceInfoList.value.findIndex((item: any) => item === row);
    if (index > -1) {
        invoiceInfoList.value.splice(index, 1);
    }
}
const handleFormSubmit = (data: any) => {
    invoiceInfoList.value.push(data);
const handleFormSubmit = (data: any,mode:any) => {
if (formMode.value === 'edit' && editingIndex.value !== null) {
        // 模式1：基于索引修改（最推荐，支持未保存的新数据）
        invoiceInfoList.value.splice(editingIndex.value, 1, data);
    } else {
        // 新增模式
        invoiceInfoList.value.push(data);
    }
    // 重置状态
    editingIndex.value = null;
    isDialogVisible.value = false;
};
const getList = () => {
    // 获取列表数据
@@ -461,33 +485,45 @@
const bankFormData = ref({

});

/* 银行 */
const handleBankAdd = () => {
    if (!form.value.customerFullName || form.value.customerFullName.trim() == '') {
        proxy.$message.error("客户全称不能为空");
        return;
    }
    formBankeMode.value = 'add';
    isDialogVisibleBank.value = true;
    bankFormData.value = {
        relatedCustomerName: form.value.customerFullName,
    };
};
const handleBankUpdates = (row: any) => {
const bankIndex = ref()
const handleBankUpdates = (row: any, index: any) => {
    // 编辑行数据
    formBankeMode.value = 'edit';
    bankIndex.value = index;
    isDialogVisibleBank.value = true;
    bankFormData.value = row;
};
const handleBankDelte = (row: any) => {
    console.log(row);
    const index = bankAccountConfigList.value.findIndex((item: any) => item === row);
const handleBankDelte = (row: any, index: any) => {
    // const index = bankAccountConfigList.value.findIndex((item: any) => item === row);
    if (index > -1) {
        bankAccountConfigList.value.splice(index, 1);
    }
}
const handleBankFormSubmit = (data: any) => {
    console.log(data);
    bankAccountConfigList.value.push(data);

if (formBankeMode.value === 'edit' && bankIndex.value !== null) {
        // 模式1：基于索引修改（最推荐，支持未保存的新数据）
        bankAccountConfigList.value.splice(bankIndex.value, 1, data);
    } else {
        // 新增模式
        bankAccountConfigList.value.push(data);
    }
    // 重置状态
    bankIndex.value = null;
    isDialogVisibleBank.value = false;
    
};
const getDataFormat = () => {
    console.log(router.currentRoute.value.query.id);
@@ -519,28 +555,28 @@
}
const invoiceVisible = ref(false);
const invoiceTitle = ref('')
const handleExamine = (row:any) => {
const handleExamine = (row: any) => {
    console.log(activeName.value);
    
    if(activeName.value == 'first'){
      invoiceTitle.value = '查看企业发票抬头信息'
        getInvoiceInfo(row.id).then(res => {
        if (res.code ==200) {
            formData.value = res.data;
            invoiceVisible.value = true
        }
    });
    }else if(activeName.value == 'second'){
        getBankAccountConfig(row.id).then(res => {
        if (res.code == 200) {
          invoiceTitle.value = '查看客户银行账号信息'

            formData.value = res.data;
            invoiceVisible.value = true
        }
      });
    if (activeName.value == 'first') {
        invoiceTitle.value = '查看企业发票抬头信息'
        getInvoiceInfo(row.id).then(res => {
            if (res.code == 200) {
                formData.value = res.data;
                invoiceVisible.value = true
            }
        });
    } else if (activeName.value == 'second') {
        getBankAccountConfig(row.id).then(res => {
            if (res.code == 200) {
                invoiceTitle.value = '查看客户银行账号信息'

                formData.value = res.data;
                invoiceVisible.value = true
            }
        });
    }
  

}
const handleClose = () => {
    invoiceVisible.value = false;
@@ -652,4 +688,30 @@
        }
    }
}
/* 返回 */
/* 在已有的 style 标签内添加 */

.bottom-operation-container {
    margin-top: 40px;      /* 与上方 Tabs 的间距 */
    margin-bottom: 20px;   /* 与页面底部的间距 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #eee; /* 可选：增加一条顶部分割线 */
}

/* 优化表格样式，确保固定高度时滚动条美观 */
::v-deep .el-table {
    margin-top: 5px;
  /* 替换掉报错的 @include，改用原生 CSS 美化滚动条（可选） */
    .el-scrollbar__bar {
        z-index: 5;
    }
}

/* 调整 Tabs 样式使其底部不要太局促 */
.demo-tabs {
    margin-bottom: 20px;
}
</style>