增加开票，抬头关联发票抬头管理

sen

2026-02-03 2e217b787931233134f5a656b3bc2503ed034eb7

 ui/admin-ui3/src/components/SettlementDialog/index.vue

@@ -6,7 +6,7 @@
            <el-descriptions-item label="账单名称">{{ billInfo.billName }}</el-descriptions-item>
            <el-descriptions-item v-if="type == 'receivable'" label="客户名称">{{ billInfo.customerName
                }}</el-descriptions-item>
            <el-descriptions-item v-if="type == 'payable'" label="供应商名称">{{ billInfo.customerName
            <el-descriptions-item v-if="type == 'payable'" label="供应商名称">{{ billInfo.supplierName
                }}</el-descriptions-item>

            <el-descriptions-item label="单据数量">{{ billInfo.documentCount }}</el-descriptions-item>
@@ -16,7 +16,7 @@
            <el-descriptions-item label="币制">{{ billInfo.currency }}</el-descriptions-item>

            <el-descriptions-item label="减免金额">{{ billInfo.discountAmount }}</el-descriptions-item>
            <el-descriptions-item v-if="type == 'receivable'" label="已收金额">{{ billInfo.receivedAmount
            <el-descriptions-item v-if="type == 'receivable'" label="已收金额1">{{ billInfo.receivedAmount
                }}</el-descriptions-item>
            <el-descriptions-item v-if="type == 'payable'" label="已付金额">{{ billInfo.receivedAmount
                }}</el-descriptions-item>
@@ -71,29 +71,30 @@
                        </el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款银行账户" prop="customerAccount">
                        <el-input v-model="formData.customerAccount" placeholder="点击选择">
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款银行账户" prop="paymentBankAccount">
                        <el-input v-model="formData.paymentBankAccount" @click="openBankDialog('receiving')"
                            placeholder="点击选择">
                            <template #append>
                                <el-button icon="Search" @click="handleSelectAccount('customer')" />
                                <el-button icon="Search" @click="openBankDialog('receiving')" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col> -->
                </el-col>
                <el-col :span="8" v-if="type == 'receivable'">
                    <el-form-item label="客户开户行">
                        <el-input v-model="formData.customerBank" disabled />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8" v-if="type == 'payable'">
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款账户开户行">
                        <el-input v-model="formData.customerBank" disabled />
                        <el-input v-model="formData.paymentBank" disabled />
                    </el-form-item>
                </el-col> -->
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                <el-col :span="8" v-if="type == 'receivable'">
                    <el-form-item label="收款银行账户" prop="receivingBankAccount">
                        <el-input v-model="formData.receivingBankAccount" @click="openBankDialog('receiving')" readonly
                            placeholder="请输入收款银行账户">
@@ -103,23 +104,33 @@
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-col :span="8" v-if="type == 'receivable'">
                    <el-form-item label="收款账户开户行">
                        <el-input v-model="formData.receivingBank" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="收款银行账户" prop="supplierReceivingAccount">
                        <el-input v-model="formData.supplierReceivingAccount" @click="openBankIsibleDialog" readonly
                            placeholder="请输入收款银行账户">
                            <template #append>
                                <el-button icon="Search" @click="openBankIsibleDialog" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="收款账户开户行">
                        <el-input v-model="formData.supplierReceivingBank" disabled />
                    </el-form-item>
                </el-col>
                <!-- 少 -->
                <el-col :span="8" v-if="type == 'receivable'">
                    <el-form-item label="收款人">
                        <el-input v-model="formData.operator"  />
                <el-col :span="8" v-if="['receivable', 'payable'].includes(type)">
                    <el-form-item :label="type === 'receivable' ? '收款人' : '付款人'">
                        <el-input v-model="formData.payee" />
                    </el-form-item>
                </el-col>

                <!-- <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="收款银行账户">
                        <el-input v-model="formData.operator" disabled />
                    </el-form-item>
                </el-col> -->
            </el-row>

            <el-row :gutter="20">
@@ -129,34 +140,34 @@
                            style="width: 100%" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款日期" prop="settleDate">
                        <el-date-picker v-model="formData.settleDate" type="date" placeholder="请选择日期"
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款日期" prop="paymentDate">
                        <el-date-picker v-model="formData.paymentDate" type="date" placeholder="请选择日期"
                            style="width: 100%" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col> -->
                </el-col>
                <el-col :span="8" v-if="type == 'receivable'">
                    <el-form-item label="收款金额" prop="receiptAmount">
                        <el-input-number v-model="formData.receiptAmount" :precision="2" :min="0" style="width: 100%"
                            @change="calcRemaining" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款金额" prop="settleAmount">
                        <el-input-number v-model="formData.settleAmount" :precision="2" :step="0.1" :min="0"
                            style="width: 100%" @change="calcRemaining" />
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款金额" prop="paymentAmount">
                        <el-input-number v-model="formData.paymentAmount" :precision="2" :step="0.1" :min="0"
                            style="width: 100%" @change="calcRemainingA" />
                    </el-form-item>
                </el-col> -->
                </el-col>
                <el-col :span="8" v-if="type == 'receivable'">
                    <el-form-item label="收款后待收金额">
                        <el-input v-model="formData.remainingPendingAmount" disabled class="remaining-input" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="收款后待付金额">
                        <el-input v-model="formData.remainingAmount" disabled class="remaining-input" />
                <el-col :span="8" v-if="type == 'payable'">
                    <el-form-item label="付款后待付金额">
                        <el-input v-model="formData.remainingPendingAmount" disabled class="remaining-input" />
                    </el-form-item>
                </el-col> -->
                </el-col>
            </el-row>
        </el-form>

@@ -165,9 +176,13 @@
            <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
        </template>
    </el-dialog>

    <bankCardData v-model:visible="bankDialogVisible"
        :default-selected-id="currentSelectType === 'customer' ? formData.bankAccountId : formData.receivingBankAccountId"
        :mode="currentSelectType === 'customer' ? 'config' : 'internal'" @confirm="handleBankConfirm" />

    <supplierBankCardData v-model:visible="supplierBankIsible" :default-selected-id="formData.supplierId"
        @confirm="handleBankCardfirm" />
</template>

<script setup lang="ts">
@@ -175,6 +190,8 @@
import { ElMessage } from 'element-plus'
import useCurrentInstance from "@/utils/useCurrentInstance";
import bankCardData from "../bankCardData/index.vue";
import supplierBankCardData from "../supplierBankCardData/index.vue";


const props = defineProps<{
    type: 'receivable' | 'payable' // 类型：应收或应付
@@ -197,24 +214,26 @@
const billInfo = ref<any>({})

// 表单数据
// 修改后的表单数据
const formData = reactive({
    settlementMethod: '', // 确保名称与 prop 一致
    settlementMethod: '',
    customerBankAccount: '',
    customerBank: '',
    paymentBankAccount: '', // 新增
    paymentBank: '',        // 新增
    receivingBankAccount: '',
    receivingBank: '',
    receivingBankAccountId: '',
    operator: 'admin',
    
    // 收款
    receiptDate: '',
    operator: '',
    bankAccountId: '',

    // 建议：如果你想逻辑更清晰，可以把 receiptAmount 和 paymentAmount 统一或在计算时做判断
    receiptAmount: 0,
    paymentAmount: 0,
    remainingPendingAmount: 0,
    
    // 付款 (备用)
    settleDate: '',
    settleAmount: 0,
    bankAccountId: ''

    receiptDate: '',
    paymentDate: '', // 新增
})

// 校验规则
@@ -241,19 +260,19 @@
    visible.value = true
    billInfo.value = { ...row }

   // 初始化本次收款金额：默认填入全部待收金额（用户可改）
    // 初始化本次收款金额：默认填入全部待收金额（用户可改）
    formData.receiptAmount = row.pendingAmount || 0;
    formData.settleAmount = row.pendingAmount || 0
    formData.paymentAmount = row.pendingAmount || 0
    calcRemaining()
}
// 计算剩余待收/待付
const calcRemaining = () => {
    // 1. 获取原始待收金额 (从 billInfo 中获取)
    const pending = Number(billInfo.value.pendingAmount || 0);
    

    // 2. 获取当前输入的收款金额 (注意：你 HTML 中绑定的是 receiptAmount)
    const current = Number(formData.receiptAmount || 0);
    

    // 3. 计算差值并保留 2 位小数
    // 使用 Number().toFixed(2) 确保精度，再转回 Number 以便后续逻辑使用
    formData.remainingPendingAmount = Number((pending - current).toFixed(2));
@@ -273,18 +292,39 @@
const openIshpw = () => {
    visible.value = false
}


// 处理确认回调
const handleBankConfirm = (data: any) => {
    console.log(props.type);
    console.log(currentSelectType.value);


    if (currentSelectType.value === 'customer') {
        // 填充客户银行信息
        formData.bankAccountId = data.id;
        formData.customerBankAccount = data.accountNo;
        formData.customerBank = data.bankName;
        if (props.type === 'payable') {
            formData.bankAccountId = data.id;
            formData.paymentBankAccount = data.accountNo;
            formData.paymentBank = data.bankName;

        } else {
            formData.bankAccountId = data.id;
            formData.customerBankAccount = data.accountNo;
            formData.customerBank = data.bankName;
        }

    } else {
        // 填充收款银行信息 (对应你代码里的 receivingBankAccount 等)
        formData.receivingBankAccountId = data.id; // 建议在 formData 增加此 ID 字段用于回显
        formData.receivingBankAccount = data.accountNo;
        formData.receivingBank = data.bankName;
        if (props.type === 'payable') {
            formData.bankAccountId = data.id;
            formData.paymentBankAccount = data.accountNo;
            formData.paymentBank = data.bankName;
        } else {
            formData.receivingBankAccountId = data.id; // 建议在 formData 增加此 ID 字段用于回显
            formData.receivingBankAccount = data.accountNo;
            formData.receivingBank = data.bankName;
        }

    }
};

@@ -298,7 +338,7 @@
        // console.log('提交数据:', { ...formData, billId: billInfo.value.id, type: props.type })
        // await new Promise(resolve => setTimeout(resolve, 1000))

        emit('success',formData)
        emit('success', formData)
        // visible.value = false
    } catch (error) {
        console.error(error)
@@ -323,7 +363,38 @@
    billInfo.value = {}
}

defineExpose({ open,openIshpw })
// 计算剩余待收/待付
const calcRemainingA = () => {
    // 1. 获取原始待收/待付总额 (从账单信息读取)
    const pending = Number(billInfo.value.pendingAmount || 0);

    // 2. 根据类型获取当前输入的金额
    // 如果是应收(receivable)，取 receiptAmount；如果是应付(payable)，取 paymentAmount
    const currentInput = props.type === 'receivable'
        ? Number(formData.receiptAmount || 0)
        : Number(formData.paymentAmount || 0);

    // 3. 计算结果并保留两位小数
    const result = pending - currentInput;
    formData.remainingPendingAmount = Number(result.toFixed(2));
};


// 弹窗显示状态
const supplierBankIsible = ref(false);


// 修改打开弹窗的方法，传入标识
const openBankIsibleDialog = () => {
    supplierBankIsible.value = true;
};
const handleBankCardfirm = (data: any) => {
    formData.supplierId = data.id; // 建议在 formData 增加此 ID 字段用于回显
    formData.supplierReceivingAccount = data.accountNo;
    formData.supplierReceivingBank = data.bankName;

};
defineExpose({ open, openIshpw })
</script>

<style scoped>