新增发票管理

wujianwei

2025-12-26 0010b446cb0f747f4995355b468f9a32244e57dc

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

@@ -1,90 +1,125 @@
<template>
  <el-dialog
    v-model="visible"
    title="费用详情"
    width="1000px"
    destroy-on-close
    @closed="handleClosed"
  >
  <el-dialog v-model="visible" :title="type === 'receivable' ? '应收费用详情' : '应付费用详情'" width="1000px" destroy-on-close
    @closed="handleClosed">
    <div class="modal-content">
      <section class="detail-section">
        <h3 class="section-title">应收费用明细</h3>
        <h3 class="section-title">{{ type === 'receivable' ? '应收费用明细' : '应付费用明细' }}</h3>

        <el-descriptions :column="3" border class="margin-top">
          <el-descriptions-item label="系统编号">{{ detailData.systemNo }}</el-descriptions-item>
          <el-descriptions-item label="关联账单编号">{{ detailData.relatedBillNo }}</el-descriptions-item>
          <el-descriptions-item label="来源系统">{{ detailData.sourceSystem }}</el-descriptions-item>
          
          <el-descriptions-item label="业务板块">{{ detailData.businessSector }}</el-descriptions-item>
          <el-descriptions-item label="单据类型">{{ detailData.documentType }}</el-descriptions-item>
          <el-descriptions-item label="来源系统">{{ dictFormat(sys_system, detailData.sourceSystem)
            }}</el-descriptions-item>

          <el-descriptions-item label="业务板块">{{ dictFormat(sys_business, detailData.businessSector)
            }}</el-descriptions-item>
          <el-descriptions-item label="单据类型">{{ dictFormat(sys_receipts, detailData.documentType)
            }}</el-descriptions-item>
          <el-descriptions-item label="单据编号">{{ detailData.documentNo }}</el-descriptions-item>
          
          <el-descriptions-item label="客户名称">{{ detailData.customerName }}</el-descriptions-item>

          <el-descriptions-item :label="type === 'receivable' ? '客户名称' : '供应商名称'">
            {{ type === 'receivable' ? detailData.customerName : detailData.supplierName }}
          </el-descriptions-item>

          <el-descriptions-item label="项目名称">{{ detailData.projectName }}</el-descriptions-item>
          <el-descriptions-item label="业务发生时间">{{ detailData.businessTime }}</el-descriptions-item>
          
          <el-descriptions-item label="应收确认时间">{{ detailData.receivableConfirmTime }}</el-descriptions-item>
          <el-descriptions-item label="应收金额" :span="2">
            <span class="amount-text">{{ detailData.receivableAmount }}</span>

          <el-descriptions-item :label="type === 'receivable' ? '应收确认时间' : '应付确认时间'">
            {{ type === 'receivable' ? detailData.receivableConfirmTime : detailData.payableConfirmTime }}
          </el-descriptions-item>

          <!-- <el-descriptions-item :label="type === 'receivable' ? '应收金额' : '应付金额'" :span="2">
            <span class="amount-text">{{ detailData.receivableAmount || detailData.payableAmount }}</span>
          </el-descriptions-item> -->

          <el-descriptions-item :label="type === 'receivable' ? '应收金额' : '应付金额'" :span="2">
            <span>{{  type === 'receivable' ? detailData.receivableAmountStr : detailData.payableAmountStr}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </section>

      <section class="table-section">
        <h3 class="section-title" style="margin-top: 10px;" >费用明细</h3>
        <avue-crud 
          :option="tableOption" 
          :data="detailData.feeList || []"
        >
          </avue-crud>
        <h3 class="section-title" style="margin-top: 20px;">费用明细</h3>
        <el-table :data="detailData.feeList || []" border stripe style="width: 100%"
          :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
          <el-table-column label="费用类型" align="center">
            <template #default="scope">
              {{ dictFormat(fee_type, scope.row.feeType) }}
            </template>
          </el-table-column>

          <el-table-column label="费用名称" prop="feeName" align="center" />

          <el-table-column label="计费单位" align="center">
            <template #default="scope">
              {{ dictFormat(sys_unit, scope.row.billingUnit) }}
            </template>
          </el-table-column>

          <el-table-column label="计费单价" prop="unitPrice" align="center" />
          <el-table-column label="计费金额" prop="billingAmount" align="center" />

          <el-table-column :label="type === 'receivable' ? '实收金额' : '实付金额'" prop="actualAmount" align="center" />

          <el-table-column label="币制" align="center" prop="currency">
            <template #default="scope">
              {{ dictFormat(sys_currency, scope.row.currency) }}
            </template>
          </el-table-column>

          <el-table-column label="费用登记时间" prop="createTime" width="160" align="center" />
        </el-table>
      </section>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
      <el-button @click="visible = false">关 闭</el-button>
    </template>
  </el-dialog>
</template>

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

const { proxy } = useCurrentInstance();

const {
  sys_system,
  sys_business,
  sys_receipts,
  sys_currency,
  fee_type,
  sys_unit
} = proxy.useDict('sys_system', 'sys_business', 'sys_receipts', 'sys_currency', 'fee_type', 'sys_unit');

const dictFormat = (dict: any, value: any) => {
  return proxy.selectDictLabel(dict, value);
};

const visible = ref(false);
const detailData = ref<any>({});
const type = ref<'receivable' | 'payable'>('receivable'); // 标记是应收还是应付

// 表格配置
const tableOption = {
    tip: false,
  header: false, // 隐藏头部按钮
  addBtn: false,
  editBtn: false,
  delBtn: false,
  menu: false,   // 隐藏操作栏
  column: [
    { label: '费用类型', prop: 'feeType' },
    { label: '费用名称', prop: 'feeName' },
    { label: '计费单位', prop: 'unit' },
    { label: '计费单价', prop: 'price' },
    { label: '计费金额', prop: 'totalAmount' },
    { label: '实收金额', prop: 'actualAmount' },
    { label: '币制', prop: 'currency' },
    { label: '费用登记时间', prop: 'createTime', width: 160 },
  ]
};

// 暴露给父组件的方法
const open = (data: any) => {
/**
 * 暴露给父组件的方法
 * @param data 数据对象
 * @param mode 模式：'receivable' (应收) 或 'payable' (应付)
 */
const open = (data: any, mode: 'receivable' | 'payable' = 'receivable') => {
  type.value = mode;
  detailData.value = data || {};

  // 统一明细列表的取值逻辑（根据后端字段名调整）
  if (data) {
    detailData.value.feeList = data.receivableFeeDetailList || data.payableFeeDetailList || [];
  }

  visible.value = true;
};

const handleClosed = () => {
  detailData.value = {};
};

const handleConfirm = () => {
  visible.value = false;
};

defineExpose({ open });
@@ -94,26 +129,34 @@
.modal-content {
  padding: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 10px 0;
  margin: 10px 0;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}
.section-title:first-child {
  margin-top: 0;
}

.amount-text {
  color: #f56c6c;
  font-weight: bold;
}

:deep(.el-descriptions__label) {
  width: 120px;
  background-color: #f5f7fa;
}

::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    border: var(--el-descriptions-table-border);
    padding: 8px 11px;
    width: 100px;
  border: var(--el-descriptions-table-border);
  padding: 8px 11px;
}

::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  border: var(--el-descriptions-table-border);
  padding: 8px 11px;
  width: 200px;
}
</style>