sen
2026-02-03 2e217b787931233134f5a656b3bc2503ed034eb7
ui/admin-ui3/src/components/FeeDetailModal/index.vue
@@ -36,16 +36,33 @@
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="customerName">
        <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"
            <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="supplierName">
            <!-- <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.supplierName" placeholder="请选择 供应商名称" readonly @click="handleTransportClick"
              class="clickable-input">
              <template #suffix>
                <el-icon @click="handleTransportClick" class="search-icon">
                  <Search />
                </el-icon>
              </template>
@@ -79,17 +96,17 @@
        </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 == '应付'">
          <el-form-item label="应付金额" prop="payableAmount">
            <el-input-number v-model="mainForm.payableAmount" :min="0" class="w-full" />
            <el-input-number v-model="mainForm.payableAmount" disabled :min="0" class="w-full" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否内部结算" prop="isInternalSettlement">
            <el-select v-model="mainForm.isInternalSettlement" placeholder="请选择是否内部结算" style="width: 100%;" clearable>
            <el-select v-model="mainForm.isInternalSettlement" @change="handleSettlementChange" placeholder="请选择是否内部结算" style="width: 100%;" clearable>
              <el-option v-for="dict in sys_whether_type" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
@@ -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" />
@@ -225,14 +242,20 @@
  <CustomerSelectDialog :visible="isCustomerSelectVisibleIshow" :default-selected-id="mainForm.customerId"
    @confirm="handleCustomerSelect" @close="isCustomerSelectVisibleIshow = false" />
     <TransportService :visible="isTransportServiceIshow" :default-selected-id="mainForm.customerId"
    @confirm="handleTransportService" @close="isTransportServiceIshow = false" />
</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';
import CustomerSelectDialog from '../CustomerSelectDialog/index';
import TransportService from '../TransportService/index';
const { proxy } = useCurrentInstance()
const { sys_system, sys_business, sys_receipts, sys_supplier, sys_whether_type, fee_type, sys_currency, sys_unit } = proxy.useDict(
@@ -283,6 +306,8 @@
  receivableAmount: [{ required: true, message: `请输入应收金额`, trigger: 'blur' }],
  businessTime: [{ required: true, message: '请选择业务发生时间', trigger: 'change' }],
  internalSettlementUnit: [{ required: true, message: '请选择内部结算单位', trigger: 'change' }],
  supplierName: [{ required: true, message: '请选择供应商名称', trigger: 'change' }],
  businessSector:[{ required: true, message: '请选择业务板块', trigger: 'change' }]
});
const itemRules = reactive({
@@ -332,8 +357,8 @@
  if (mainFormRef.value) mainFormRef.value.resetFields();
  receivableFeeDetailList.value = [];
  Object.assign(mainForm, {
    sourceSystem: '', businessSector: '', documentType: '',
    documentNo: '', customerName: '', projectName: '',
    payableConfirmTime:'',sourceSystem: '', businessSector: '', documentType: '',
    documentNo: '', customerName: '', projectName: '',supplierName:'',
    businessTime: '', receivableConfirmTime: '', receivableAmount: 0, internalSettlementUnit: '', isInternalSettlement: '1'
  });
};
@@ -343,7 +368,7 @@
  editingIndex.value = null; // 明确当前是新增模式
  Object.assign(itemForm, {
    feeType: '', feeName: '', billingUnit: '', unitPrice: 0, billingQuantity: 0, billingAmount: '0.0000', actualAmount: 1, currency: '',
    internalSettlementUnit: '', isInternalSettlement: '1'
    internalSettlementUnit: '', isInternalSettlement: '1',createTime:''
  });
  itemVisible.value = true;
};
@@ -416,17 +441,58 @@
  mainForm.internalSettlementUnit = data.customerFullName
  // 在这里可以将数据赋值给表单或其他逻辑
}
const handleSettlementChange = (value) => {
  // mainForm.isInternalSettlement = value
  if (value == '0') {
    mainForm.internalSettlementUnit = ''
  }
}
const isCustomerSelectVisibleIshow = ref(false);
const handleCustonerClick = () => {
  isCustomerSelectVisibleIshow.value = true;
}
const isTransportServiceIshow = ref(false);
const handleTransportClick = () => {
  isTransportServiceIshow.value = true;
}
const handleCustomerSelect = (selectedCustomer) => {
  mainForm.customerName = selectedCustomer.customerFullName;
  mainForm.customerId = selectedCustomer.id; // 现在字段已声明,赋值有效
  isCustomerSelectVisibleIshow.value = false;
};
const handleTransportService = (selectedCustomer) => {
  mainForm.supplierName = selectedCustomer.serviceName;
  // mainForm.customerId = selectedCustomer.id; // 现在字段已声明,赋值有效
  isTransportServiceIshow.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>