| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | <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="计费单价" /> |
| | |
| | | <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" /> |
| | |
| | | |
| | | <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( |
| | |
| | | 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({ |
| | |
| | | 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' |
| | | }); |
| | | }; |
| | |
| | | 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; |
| | | }; |
| | |
| | | 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> |
| | | |