修改金额实时变化

package.json

@@ -33,6 +33,7 @@
     "js-cookie": "3.0.5",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "jsencrypt": "3.3.2",
     "jszip": "^3.10.1",
     "jszip": "^3.10.1",
+    "lodash": "^4.18.1",
     "nprogress": "0.2.0",
     "nprogress": "0.2.0",
     "p-limit": "^7.3.0",
     "p-limit": "^7.3.0",
     "pinia": "3.0.2",
     "pinia": "3.0.2",

src/views/financialCenter/financialSalary.vue

@@ -179,13 +179,15 @@
         </el-table-column>
         </el-table-column>
         <el-table-column label="原币种金额" prop="fromAmount" width="150">
         <el-table-column label="原币种金额" prop="fromAmount" width="150">
           <template #default="scope">
           <template #default="scope">
+            <!--  @input="val => (scope.row.fromAmount = amountInput.filterInput(val, 4))"
+              @blur="billInputBlur('fromAmount', scope.row)" -->
             <el-input
             <el-input
               v-model="scope.row.fromAmount"
               v-model="scope.row.fromAmount"
               placeholder="请输入"
               placeholder="请输入"
               clearable
               clearable
               @clear="clearInput('fromAmount', scope.row)"
               @clear="clearInput('fromAmount', scope.row)"
-              @input="val => (scope.row.fromAmount = amountInput.filterInput(val, 4))"
-              @blur="billInputBlur('fromAmount', scope.row)"
+              @input="val => handleFromAmountInput(val, scope.row)"
+              @blur="handleFromAmountBlur(scope.row)"
               :formatter="value => inputThousands(value)"
               :formatter="value => inputThousands(value)"
               :parser="value => value.replace(/\$\s?|(,*)/g, '')"
               :parser="value => value.replace(/\$\s?|(,*)/g, '')"
             />
             />
@@ -210,6 +212,8 @@
             </el-select>
             </el-select>
           </template>
           </template>
         </el-table-column>
         </el-table-column>
+        <!-- @blur="billInputBlur('exchangeRate', scope.row)"
+              @input="val => (scope.row.exchangeRate = amountInput.filterInput(val, 4))" -->
         <el-table-column label="汇率(%)" prop="exchangeRate" width="150">
         <el-table-column label="汇率(%)" prop="exchangeRate" width="150">
           <template #default="scope">
           <template #default="scope">
             <el-input
             <el-input
@@ -217,8 +221,8 @@
               placeholder="请输入"
               placeholder="请输入"
               clearable
               clearable
               @clear="clearInput('exchangeRate', scope.row)"
               @clear="clearInput('exchangeRate', scope.row)"
-              @blur="billInputBlur('exchangeRate', scope.row)"
-              @input="val => (scope.row.exchangeRate = amountInput.filterInput(val, 4))"
+              @input="val => handleExchangeRateInput(val, scope.row)"
+              @blur="handleExchangeRateBlur(scope.row)"
             />
             />
           </template>
           </template>
         </el-table-column>
         </el-table-column>
@@ -228,6 +232,7 @@
               v-model="scope.row.toAmount"
               v-model="scope.row.toAmount"
               placeholder="请输入"
               placeholder="请输入"
               clearable
               clearable
+              :disabled="true"
               @input="val => (scope.row.toAmount = amountInput.filterInput(val, 4))"
               @input="val => (scope.row.toAmount = amountInput.filterInput(val, 4))"
               :formatter="value => inputThousands(value)"
               :formatter="value => inputThousands(value)"
               :parser="value => value.replace(/\$\s?|(,*)/g, '')"
               :parser="value => value.replace(/\$\s?|(,*)/g, '')"
@@ -312,6 +317,7 @@ import { generateId } from '@/utils/common'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import SearchForm from '@/components/SearchForm/SearchForm.vue'
 import SearchForm from '@/components/SearchForm/SearchForm.vue'
 import { usePositiveDecimal } from '@/utils/usePositiveDecimal'
 import { usePositiveDecimal } from '@/utils/usePositiveDecimal'
+import { debounce } from 'lodash-es'
 
 
 const amountInput = usePositiveDecimal(4) // 默认2位小数
 const amountInput = usePositiveDecimal(4) // 默认2位小数
 const { proxy } = getCurrentInstance()
 const { proxy } = getCurrentInstance()
@@ -386,7 +392,10 @@ let billStatistic = ref({ beSplitAmount: 0, beSplitCurrency: 0 })
 let saleInfo = ref({})
 let saleInfo = ref({})
 let addBillLoading = ref(false)
 let addBillLoading = ref(false)
 let submitBillLoading = ref(false)
 let submitBillLoading = ref(false)
-
+// 存储每行的防抖函数（原币种金额）
+const debounceChangeRateMap = new WeakMap()
+// 存储每行的防抖函数（汇率）
+const debounceChangeToAmountMap = new WeakMap()
 // 表格操作菜单
 // 表格操作菜单
 const dropdownItems = [
 const dropdownItems = [
   { label: '拆分出账', value: 'splitBilling' }
   { label: '拆分出账', value: 'splitBilling' }
@@ -402,6 +411,51 @@ const clearInput = (key, row) => {
     row.toAmount = '0.00'
     row.toAmount = '0.00'
   }
   }
 }
 }
+const getDebouncedChangeRate = row => {
+  if (!debounceChangeRateMap.has(row)) {
+    const debounced = debounce(r => {
+      changeRate(r)
+    }, 500)
+    debounceChangeRateMap.set(row, debounced)
+  }
+  return debounceChangeRateMap.get(row)
+}
+
+const getDebouncedChangeToAmount = row => {
+  if (!debounceChangeToAmountMap.has(row)) {
+    const debounced = debounce(r => {
+      changeToAmount(r)
+    }, 500)
+    debounceChangeToAmountMap.set(row, debounced)
+  }
+  return debounceChangeToAmountMap.get(row)
+}
+
+// 原币种金额输入处理
+const handleFromAmountInput = (val, row) => {
+  row.fromAmount = amountInput.filterInput(val, 4)
+  getDebouncedChangeRate(row)(row)
+}
+
+// 原币种金额失焦处理
+const handleFromAmountBlur = row => {
+  const debounced = debounceChangeRateMap.get(row)
+  if (debounced) debounced.cancel()
+  changeRate(row)
+}
+
+// 汇率输入处理
+const handleExchangeRateInput = (val, row) => {
+  row.exchangeRate = amountInput.filterInput(val, 4)
+  getDebouncedChangeToAmount(row)(row)
+}
+
+// 汇率失焦处理
+const handleExchangeRateBlur = row => {
+  const debounced = debounceChangeToAmountMap.get(row)
+  if (debounced) debounced.cancel()
+  changeToAmount(row)
+}
 const billInputBlur = (type, row) => {
 const billInputBlur = (type, row) => {
   if (type == 'fromAmount') {
   if (type == 'fromAmount') {
     if (row.fromAmount) {
     if (row.fromAmount) {
@@ -414,7 +468,7 @@ const billInputBlur = (type, row) => {
   }
   }
 }
 }
 // 改变汇率
 // 改变汇率
-const changeRate = async row => {
+const changeRate = async (row, type) => {
   try {
   try {
     if (row.toCurrency && row.fromAmount) {
     if (row.toCurrency && row.fromAmount) {
       const params = {
       const params = {
@@ -426,9 +480,12 @@ const changeRate = async row => {
       const response = await billSplitRate(params)
       const response = await billSplitRate(params)
 
 
       if (response.data) {
       if (response.data) {
+        if (type == 'toCurrency') {
           row.exchangeRate = response.data.exchangeRate
           row.exchangeRate = response.data.exchangeRate
             ? (response.data.exchangeRate * 100).toFixed(4)
             ? (response.data.exchangeRate * 100).toFixed(4)
             : ''
             : ''
+        }
+
         row.toAmount = Number(response.data.convertedAmount).toFixed(4)
         row.toAmount = Number(response.data.convertedAmount).toFixed(4)
       }
       }
     } else {
     } else {
@@ -480,7 +537,7 @@ const handleBillConfirm = async () => {
 }
 }
 const changeToCurrency = row => {
 const changeToCurrency = row => {
   if (row.toCurrency) {
   if (row.toCurrency) {
-    changeRate(row)
+    changeRate(row, 'toCurrency')
   } else {
   } else {
     row.exchangeRate = ''
     row.exchangeRate = ''
     row.toAmount = ''
     row.toAmount = ''