应付接口

wujianwei

2025-12-24 b5b6177f7dcad6e4bf004720073778dd008fca32

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

@@ -36,7 +36,24 @@
          </el-form-item>
        </el-col>

        <el-col :span="8">
        <el-col :span="8" v-if="typeText == '应收'" >
          <el-form-item label="客户名称" prop="customerName">
            <!-- <el-select v-model="mainForm.customerName" placeholder="请选择供应商名称" style="width: 100%;" clearable>
              <el-option v-for="dict in sys_supplier" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select> -->
            <el-input v-model="mainForm.customerName" placeholder="请选择 客户名称" readonly @click="handleCustonerClick"
              class="clickable-input">
              <template #suffix>
                <el-icon @click="handleCustonerClick" class="search-icon">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

             <el-col :span="8" v-if="typeText == '应付'" >
          <el-form-item label="供应商名称" prop="customerName">
            <!-- <el-select v-model="mainForm.customerName" placeholder="请选择供应商名称" style="width: 100%;" clearable>
              <el-option v-for="dict in sys_supplier" :key="dict.value" :label="dict.label"
@@ -79,7 +96,7 @@
        </el-col>
        <el-col :span="8" v-if="typeText == '应收'">
          <el-form-item label="应收金额" prop="receivableAmount">
            <el-input-number v-model="mainForm.receivableAmount" :min="0" class="w-full" />
            <el-input-number v-model="mainForm.receivableAmount" disabled :min="0" class="w-full" />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="typeText == '应付'">
@@ -119,13 +136,13 @@
    <el-table :data="receivableFeeDetailList" border stripe style="width: 100%">
      <el-table-column prop="feeType" label="费用类型" >
        <template #default="scope">
          {{ dictFormat('fee_type', scope.row.feeType) }}
          {{ dictFormat(fee_type, scope.row.feeType) }}
        </template>
      </el-table-column>
      <el-table-column prop="feeName" label="费用名称" />
      <el-table-column prop="billingUnit" label="计费单位">
        <template #default="scope">
          {{ dictFormat('sys_unit', scope.row.billingUnit)}}
          {{ dictFormat(sys_unit, scope.row.billingUnit)}}
        </template>
      </el-table-column>
      <el-table-column prop="unitPrice" label="计费单价" />
@@ -133,7 +150,7 @@
      <el-table-column prop="actualAmount" label="实收金额" />
      <el-table-column prop="currency" label="币制">
        <template #default="scope">
          {{ dictFormat('sys_currency', scope.row.currency)}}
          {{ dictFormat(sys_currency, scope.row.currency)}}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="费用登记时间" width="180" />
@@ -228,7 +245,7 @@
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { ref, reactive, computed, watch } from 'vue';
import { ElMessage, type FormInstance } from 'element-plus';
import useCurrentInstance from '@/utils/useCurrentInstance'
import EntitySelector from '../EntitySelector/index.vue';
@@ -427,6 +444,29 @@
  mainForm.customerId = selectedCustomer.id; // 现在字段已声明，赋值有效
  isCustomerSelectVisibleIshow.value = false;
};
// 监听费用明细列表的变化，自动计算总额并保留2位小数
watch(
  () => receivableFeeDetailList.value,
  (newList) => {
    const total = newList.reduce((sum, item) => {
      // 确保取到的是数值，如果为空则默认为 0
      const amount = parseFloat(item.actualAmount) || 0;
      return sum + amount;
    }, 0);
    
    // 计算结果保留2位小数
    // parseFloat(...toFixed(2)) 是为了确保最后存入 mainForm 的是数字类型而非字符串
    const formattedTotal = parseFloat(total.toFixed(2));

    // 根据类型赋值
    if (typeText.value === '应收') {
      mainForm.receivableAmount = formattedTotal;
    } else {
      mainForm.payableAmount = formattedTotal;
    }
  },
  { deep: true, immediate: true } // immediate: true 确保初始加载数据时也能计算一次
);
defineExpose({ open, canceleClick });
</script>