增加应收款分析管理界面

sen

2026-03-23 075d8b76626b2c830cc3bef11fb32e89d6067a3e

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

@@ -1,10 +1,5 @@
<template>
  <el-dialog 
    v-model="visible" 
    :title="dialogTitle" 
    width="1200px" 
    destroy-on-close
  >
  <el-dialog v-model="visible" :title="dialogTitle" width="1200px" destroy-on-close>
    <el-descriptions title="账单基本信息" :column="3" border class="mb-5">
      <el-descriptions-item label="系统编号">{{ billInfo.systemNo }}</el-descriptions-item>
      <el-descriptions-item label="账单名称">{{ billInfo.billName }}</el-descriptions-item>
@@ -12,30 +7,29 @@
        {{ type.includes('应收') ? billInfo.customerName : billInfo.supplierName }}
      </el-descriptions-item>
      <el-descriptions-item label="单据数量">{{ billInfo.documentCount }}</el-descriptions-item>
      <el-descriptions-item label="应结算金额"><span class="text-bold">{{ billInfo.totalAmount }}</span></el-descriptions-item>
      <el-descriptions-item label="应结算金额"><span class="text-bold">{{ billInfo.totalAmount
          }}</span></el-descriptions-item>
      <el-descriptions-item label="币制">{{ billInfo.currency }}</el-descriptions-item>
      <el-descriptions-item label="减免金额">{{ billInfo.discountAmount }}</el-descriptions-item>
      <el-descriptions-item :label="type.includes('应收') ? '已收金额' : '已付金额'">{{ billInfo.receivedAmount }}</el-descriptions-item>
      <el-descriptions-item :label="type.includes('应收') ? '已收金额' : '已付金额'">{{ billInfo.receivedAmount
        }}</el-descriptions-item>
      <el-descriptions-item :label="type.includes('应收') ? '待收金额' : '待付金额'">
        <span class="text-danger">{{ billInfo.pendingAmount }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="周期类型">{{ billInfo.periodType }}</el-descriptions-item>
      <el-descriptions-item label="业务期间">{{ billInfo.businessStartDate }} ~ {{ billInfo.businessEndDate }}</el-descriptions-item>
      <el-descriptions-item label="账单周期">{{ billInfo.billingStartDate }} ~ {{ billInfo.billingEndDate }}</el-descriptions-item>

       <el-descriptions-item label="周期类型">{{ dictFormat(sys_period_type,billInfo.periodType)  }}</el-descriptions-item>
      <el-descriptions-item label="业务期间">{{ billInfo.businessStartDate }} ~ {{ billInfo.businessEndDate
        }}</el-descriptions-item>
      <el-descriptions-item label="账单周期">{{ billInfo.billingStartDate }} ~ {{ billInfo.billingEndDate
        }}</el-descriptions-item>
    </el-descriptions>

    <div  v-if="InvoiceDetails !== '开票明细'"  class="section-header">
    <div v-if="InvoiceDetails !== '开票明细'" class="section-header">
      <h3 class="section-title">发票商品明细</h3>
      <el-button 
       
        type="primary" 
        size="small" 
        icon="Plus" 
        @click="addItemRow"
      >新增</el-button>
      <el-button type="primary" size="small" icon="Plus" @click="addItemRow">新增</el-button>
    </div>
    
    <el-table  v-if="InvoiceDetails !== '开票明细'"  :data="form.invoiceBillDetails" border class="mb-5">

    <el-table v-if="InvoiceDetails !== '开票明细'" :data="form.invoiceBillDetails" border class="mb-5">
      <el-table-column label="商品名称" prop="goodsName">
        <template #default="{ row }">
          <el-input v-if="!row.isSaved && InvoiceDetails !== '开票明细'" v-model="row.goodsName" placeholder="商品名称" />
@@ -44,7 +38,8 @@
      </el-table-column>
      <el-table-column label="单价" prop="price" width="200">
        <template #default="{ row }">
          <el-input-number v-if="!row.isSaved && InvoiceDetails !== '开票明细'" v-model="row.price" :precision="2" style="width:100%" />
          <el-input-number v-if="!row.isSaved && InvoiceDetails !== '开票明细'" v-model="row.price" :precision="2"
            style="width:100%" />
          <span v-else>{{ row.price }}</span>
        </template>
      </el-table-column>
@@ -70,8 +65,16 @@
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="130px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="抬头公司" prop="invoiceCompanyName">
            <!-- <el-form-item label="抬头公司" prop="invoiceCompanyName">
              <el-input v-model="form.invoiceCompanyName" placeholder="请输入" />
            </el-form-item> -->
            <el-form-item label="抬头公司" prop="invoiceCompanyName">
              <el-input v-model="form.invoiceCompanyName" @click="openBankDialog" readonly
                placeholder="请输入抬头公司">
                <template #append>
                  <el-button icon="Search" @click="openBankDialog" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
@@ -86,15 +89,18 @@
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><el-form-item label="开户银行"><el-input v-model="form.invoiceBankName" /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="开户银行"><el-input
                v-model="form.invoiceBankName" /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="基本账号"><el-input v-model="form.invoiceBankNo" /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="已开票金额"><el-input v-model="billInfo.invoicedAmount" disabled /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="已开票金额"><el-input v-model="billInfo.invoicedAmount"
                disabled /></el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="本次开票金额" prop="currentInvoicedAmount">
              <el-input-number v-model="form.currentInvoicedAmount" disabled :precision="2" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="16"><el-form-item label="发票备注"><el-input v-model="form.invoiceRemark" type="textarea" /></el-form-item></el-col>
          <el-col :span="16"><el-form-item label="发票备注"><el-input v-model="form.invoiceRemark"
                type="textarea" /></el-form-item></el-col>
        </el-row>
      </el-form>
    </template>
@@ -110,7 +116,8 @@
        <el-table-column label="购买方名称" prop="buyerName" align="center" />
        <el-table-column label="销售方名称" prop="sellerName" align="center" />
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="fetchRecords" />
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="fetchRecords" />
    </template>

    <template #footer>
@@ -118,20 +125,26 @@
      <el-button @click="openIshpw">关闭</el-button>
    </template>
  </el-dialog>

     <invoiceManagementDialog v-model:visible="supplierBankIsible" :default-selected-id="form.invoiceInfoId"
        @confirm="handleBankCardfirm" />
</template>

<script setup lang="ts">
import { ref, reactive, computed,watch } from 'vue'
import { ref, reactive, computed, watch } from 'vue'
import useCurrentInstance from "@/utils/useCurrentInstance";
import invoiceManagementDialog from "../invoiceManagementDialog/index.vue";

const { proxy } = useCurrentInstance();
const { sys_invoice_type } = proxy.useDict('sys_invoice_type');
const { sys_invoice_type,sys_period_type } = proxy.useDict('sys_invoice_type','sys_period_type');

const props = defineProps<{
  type: string,           // '应收账单开票' 等
  InvoiceDetails: string  // '本次开票信息' 或 '开票明细'
}>()

const dictFormat = (dict: any, value: any) => {
    return proxy.selectDictLabel(dict, value);
}
const visible = ref(false)
const loading = ref(false)
const billInfo = ref<any>({})
@@ -174,7 +187,7 @@
  billInfo.value = row;
  recordList.value = row.recordList || [];
  queryParams.billId = row.id;
  

  if (props.InvoiceDetails === '开票明细') {
    fetchRecords();
  } else {
@@ -185,11 +198,11 @@

// 5. 新增行初始化
const addItemRow = () => {
  form.invoiceBillDetails.push({ 
    goodsName: '', 
    price: 0, 
    withTaxFlag: 0, 
    isSaved: false 
  form.invoiceBillDetails.push({
    goodsName: '',
    price: 0,
    withTaxFlag: 0,
    isSaved: false
  });
}
const emit = defineEmits(['success']);
@@ -246,13 +259,48 @@
const openIshpw = () => {
  visible.value = false;
}
defineExpose({ open,openIshpw })
const supplierBankIsible = ref(false);

const openBankDialog = () => {
  supplierBankIsible.value = true;
}
const handleBankCardfirm = (data) => {
        form.invoiceCompanyName = data.invoiceCompanyName;
        form.invoiceCreditCode = data.invoiceCreditCode;
        form.invoiceType = data.invoiceType;
        form.invoiceBankName = data.invoiceBankName;
        form.invoiceBankNo = data.invoiceBankNo;
        form.invoiceInfoId = data.id; // 建议在 formData 增加此 ID 字段用于回显
};
// 弹窗显示状态
defineExpose({ open, openIshpw })
</script>

<style scoped>
.mb-5 { margin-bottom: 20px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.section-title { font-size: 16px; font-weight: bold; border-left: 4px solid #409eff; padding-left: 10px; margin: 15px 0; }
.text-bold { font-weight: bold; }
.text-danger { color: #f56c6c; }
.mb-5 {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  border-left: 4px solid #409eff;
  padding-left: 10px;
  margin: 15px 0;
}

.text-bold {
  font-weight: bold;
}

.text-danger {
  color: #f56c6c;
}
</style>