Merge branch 'wyz' into 'test'

出账检核加出账年月实

See merge request !169

src/api/salary/index.js

+import request from '@/utils/request'
+
+// 获取制作薪资单列表
+export function getSalaryList(data) {
+  return request({
+    url: '/csf/api/salary/page',
+    method: 'post',
+    data: data
+  })
+}
+// 批量新增薪资单
+export function batchAddSalary(data) {
+  return request({
+    url: '/csf/api/salary/batch/add',
+    method: 'post',
+    data: data
+  })
+}
+// 计算实发金额
+export function calculatePaidAmount(data) {
+  return request({
+    url: '/csf/api/salary/calculate/paidAmount',
+    method: 'post',
+    data: data
+  })
+}
+// 计算汇率
+export function getExchangeRate(data) {
+  return request({
+    url: '/csf/api/salary/get/exchangeRate',
+    method: 'post',
+    data: data
+  })
+}
+// 计算实发金额
+export function grossAmountApi(data) {
+  return request({
+    url: '/csf/api/salary/get/grossAmount',
+    method: 'post',
+    data: data
+  })
+}
+// 获取制作薪资单详情
+export function updateSalaryDetail(salaryBizId) {
+  return request({
+    url: '/csf/api/salary/detail?salaryBizId=' + salaryBizId,
+    method: 'get'
+  })
+}
+// 计算信息汇款明细总金额
+export function calculateTotalAmountApi(data) {
+  return request({
+    url: '/csf/api/salary/calculate/totalAmount',
+    method: 'post',
+    data: data
+  })
+}
+// 修改单个薪资单
+export function editSingleSalaryApi(data) {
+  return request({
+    url: '/csf/api/salary/edit',
+    method: 'put',
+    data: data
+  })
+}
+// 新增单个薪资单
+export function addSingleSalaryApi(data) {
+  return request({
+    url: '/csf/api/salary/add',
+    method: 'post',
+    data: data
+  })
+}
+// 取消薪资单
+export function cancelSalaryApi(data) {
+  return request({
+    url: '/csf/api/salary/cancel',
+    method: 'put',
+    data: data
+  })
+}
+//删除银行
+export function delSalaryApi(salaryRemittanceBizId) {
+  return request({
+    url: `/csf/api/salary/delSalaryRemittance?salaryRemittanceBizId=${salaryRemittanceBizId}`,
+    method: 'delete'
+  })
+}
+// 电子薪资单列表
+export function electronicSalaryListApi(data) {
+  return request({
+    url: '/csf/api/salary/push/page',
+    method: 'post',
+    data: data
+  })
+}
+//提交核对
+export function submitCheckApi(data) {
+  return request({
+    url: '/csf/api/salary/submit/check',
+    method: 'put',
+    data: data
+  })
+}
+//推送电子薪资单
+export function pushSalaryApi(data) {
+  return request({
+    url: '/csf/api/salary/push',
+    method: 'put',
+    data: data
+  })
+}
+//核对/退回电子薪资单
+export function checkSalaryApi(data) {
+  return request({
+    url: '/csf/api/salary/check',
+    method: 'put',
+    data: data
+  })
+}
+// 下载选中的发佣数据
+
+export function downloadPolicyFortune(data) {
+  return request({
+    url: '/csf/api/fortune/download/raw',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 应收款导出
+export function exportReceivedFortune(data) {
+  return request({
+    url: '/csf/api/CommissionExpected/export',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}

src/components/SearchForm/SearchForm.vue

@@ -42,29 +42,6 @@
               "
               "
               :parser="value => value.replace(/\$\s?|(,*)/g, '')"
               :parser="value => value.replace(/\$\s?|(,*)/g, '')"
             />
             />
-
-            <!-- Select (支持 dictType / api / options) -->
-            <!-- <el-select
-              v-else-if="item.type === 'select'"
-              v-model="localModel[item.prop]"
-              :multiple="!!item.multiple"
-              :placeholder="item.placeholder || `请选择${item.label}`"
-              :clearable="true"
-              filterable
-              :disabled="item.disabled"
-              :loading="remoteLoading[item.prop] || false"
-              @change="val => handleModelChange(val, item)"
-              @focus="() => loadRemoteOptions(item)"
-              @filter-change="keyword => handleFilterChange(keyword, item)"
-            >
-              <el-option
-                v-for="opt in getSelectOptions(item)"
-                :key="opt.value"
-                :label="opt.label"
-                :value="opt.value"
-              />
-            </el-select> -->
-            <!-- @focus="() => loadRemoteOptions(item, '')" -->
             <el-select
             <el-select
               v-else-if="item.type === 'select'"
               v-else-if="item.type === 'select'"
               :ref="
               :ref="
@@ -630,10 +607,15 @@ function syncModelFromProps(newModelValue, newConfig) {
 
 
     if (idValue && typeof idValue === 'object') {
     if (idValue && typeof idValue === 'object') {
       sourceObj = idValue
       sourceObj = idValue
-    } else if (Array.isArray(item.options) && idValue !== undefined && idValue !== null) {
+    } else if (idValue !== undefined && idValue !== null) {
+      const opts = getSelectOptions(item)
       const valueKey = item.valueKey || 'value'
       const valueKey = item.valueKey || 'value'
-      sourceObj = item.options.find(opt => opt[valueKey] === idValue)
+      sourceObj = opts.find(opt => opt[valueKey] === idValue)
     }
     }
+    // else if (Array.isArray(item.options) && idValue !== undefined && idValue !== null) {
+    //   const valueKey = item.valueKey || 'value'
+    //   sourceObj = item.options.find(opt => opt[valueKey] === idValue)
+    // }
 
 
     if (sourceObj && typeof sourceObj === 'object') {
     if (sourceObj && typeof sourceObj === 'object') {
       for (const [targetKey, subPath] of Object.entries(extraMap)) {
       for (const [targetKey, subPath] of Object.entries(extraMap)) {
@@ -764,24 +746,53 @@ async function loadDictOptions(dictType) {
 }
 }
 
 
 // ==================== 获取 select 选项 ====================
 // ==================== 获取 select 选项 ====================
+// function getSelectOptions(item) {
+//   const key = item.prop
+//   if (item.dictType || item.api) {
+//     return (remoteOptions.value[key] || []).map(opt => ({
+//       value: opt.value,
+//       label: opt.label,
+//       raw: opt.raw
+//     }))
+//   } else if (item.options) {
+//     return item.options.map(opt => ({
+//       value: opt.value,
+//       label: opt.label,
+//       raw: opt.raw
+//     }))
+//   }
+//   return []
+// }
+// 替换原有的 getSelectOptions 函数
 function getSelectOptions(item) {
 function getSelectOptions(item) {
   const key = item.prop
   const key = item.prop
   if (item.dictType || item.api) {
   if (item.dictType || item.api) {
+    // 远程或字典选项
     return (remoteOptions.value[key] || []).map(opt => ({
     return (remoteOptions.value[key] || []).map(opt => ({
       value: opt.value,
       value: opt.value,
       label: opt.label,
       label: opt.label,
       raw: opt.raw
       raw: opt.raw
     }))
     }))
   } else if (item.options) {
   } else if (item.options) {
-    return item.options.map(opt => ({
-      value: opt.value,
-      label: opt.label,
-      raw: opt.raw
-    }))
+    // 静态选项或函数选项
+    if (typeof item.options === 'function') {
+      // 传入当前表单数据（localModel.value）作为 row
+      const opts = item.options(localModel.value)
+      return opts.map(opt => ({
+        value: opt.value,
+        label: opt.label,
+        raw: opt.raw || opt
+      }))
+    } else if (Array.isArray(item.options)) {
+      return item.options.map(opt => ({
+        value: opt.value,
+        label: opt.label,
+        raw: opt.raw || opt
+      }))
+    }
   }
   }
   return []
   return []
 }
 }
-
 // 初始化加载远程 API 选项（无搜索词）
 // 初始化加载远程 API 选项（无搜索词）
 async function loadRemoteOptionsForInit(item) {
 async function loadRemoteOptionsForInit(item) {
   const { prop, api, requestParams } = item
   const { prop, api, requestParams } = item
@@ -821,41 +832,35 @@ async function loadRemoteOptionsForInit(item) {
   }
   }
 }
 }
 
 
-// 加载远程 API 选项（focus 时调用，无搜索词）
-// async function loadRemoteOptions(item) {
-//   const { prop, api, requestParams } = item
+// 修改原有的 loadRemoteOptions，使其支持关键词参数
+// async function loadRemoteOptions(item, keyword = '') {
+//   const { prop, api, requestParams, keywordField = 'keyword' } = item
 //   if (!api) return
 //   if (!api) return
 
 
-//   // 如果已经有选项且不是强制刷新，可跳过；但为了保证初次加载，remoteOptions[prop] 为空时才加载
-//   if (remoteOptions.value[prop] && remoteOptions.value[prop].length > 0) return
-
 //   try {
 //   try {
 //     remoteLoading.value[prop] = true
 //     remoteLoading.value[prop] = true
 
 
-//     const payload = {
-//       ...(typeof requestParams === 'function' ? requestParams() : requestParams || {})
+//     let params = typeof requestParams === 'function' ? requestParams() : requestParams || {}
+//     if (keyword) {
+//       params = { ...params, [keywordField]: keyword }
+//     } else {
+//       // 可选：重置分页参数为第一页
+//       params = { ...params, pageNo: 1 }
 //     }
 //     }
 
 
-//     const res = await request({
-//       url: api,
-//       method: 'post',
-//       data: payload
-//     })
-
+//     const res = await request({ url: api, method: 'post', data: params })
 //     const list =
 //     const list =
 //       typeof item.transform === 'function'
 //       typeof item.transform === 'function'
 //         ? item.transform(res)
 //         ? item.transform(res)
 //         : res.data?.records || res.data || []
 //         : res.data?.records || res.data || []
 
 
-//     const newOptions = list.map(i => ({
+//     remoteOptions.value[prop] = list.map(i => ({
 //       value: String(i[item.valueKey || 'value']),
 //       value: String(i[item.valueKey || 'value']),
 //       label: i[item.labelKey || 'label'],
 //       label: i[item.labelKey || 'label'],
 //       raw: i
 //       raw: i
 //     }))
 //     }))
-//     remoteOptions.value[prop] = newOptions
 //     markDictLoaded(prop)
 //     markDictLoaded(prop)
 
 
-//     // 同步 extra 字段
 //     const currentVal = localModel.value[prop]
 //     const currentVal = localModel.value[prop]
 //     if (currentVal !== undefined && currentVal !== null && currentVal !== '') {
 //     if (currentVal !== undefined && currentVal !== null && currentVal !== '') {
 //       syncExtraFieldsForProp(prop, currentVal)
 //       syncExtraFieldsForProp(prop, currentVal)
@@ -867,9 +872,9 @@ async function loadRemoteOptionsForInit(item) {
 //     remoteLoading.value[prop] = false
 //     remoteLoading.value[prop] = false
 //   }
 //   }
 // }
 // }
-// 修改原有的 loadRemoteOptions，使其支持关键词参数
+// 修改 loadRemoteOptions 函数
 async function loadRemoteOptions(item, keyword = '') {
 async function loadRemoteOptions(item, keyword = '') {
-  const { prop, api, requestParams, keywordField = 'keyword' } = item
+  const { prop, api, requestParams, keywordField = 'keyword', method = 'post' } = item
   if (!api) return
   if (!api) return
 
 
   try {
   try {
@@ -879,11 +884,22 @@ async function loadRemoteOptions(item, keyword = '') {
     if (keyword) {
     if (keyword) {
       params = { ...params, [keywordField]: keyword }
       params = { ...params, [keywordField]: keyword }
     } else {
     } else {
-      // 可选：重置分页参数为第一页
       params = { ...params, pageNo: 1 }
       params = { ...params, pageNo: 1 }
     }
     }
 
 
-    const res = await request({ url: api, method: 'post', data: params })
+    // 根据 method 决定参数位置
+    const requestConfig = {
+      url: api,
+      method: method
+    }
+    if (method.toLowerCase() === 'get') {
+      requestConfig.params = params
+    } else {
+      requestConfig.data = params
+    }
+
+    const res = await request(requestConfig)
+
     const list =
     const list =
       typeof item.transform === 'function'
       typeof item.transform === 'function'
         ? item.transform(res)
         ? item.transform(res)
@@ -1044,10 +1060,11 @@ onMounted(async () => {
       )
       )
     } else if (item.type === 'select' && item.api) {
     } else if (item.type === 'select' && item.api) {
       apiPromises.push(loadRemoteOptions(item, ''))
       apiPromises.push(loadRemoteOptions(item, ''))
-    } else if (item.type === 'select' && item.options) {
-      remoteOptions.value[key] = [...item.options]
-      markDictLoaded(key)
-    }
+    }  else if (item.type === 'select' && item.options) {
+  // 支持 options 为数组或函数（函数调用时传入当前表单数据）
+  remoteOptions.value[key] = getSelectOptions(item)
+  markDictLoaded(key)
+}
   }
   }
 
 
   if (Object.keys(initialData).length > 0) {
   if (Object.keys(initialData).length > 0) {
@@ -1100,42 +1117,6 @@ defineExpose({
       formRef.value?.clearValidate()
       formRef.value?.clearValidate()
     })
     })
   },
   },
-  // resetForm() {
-  //   const resetData = {}
-  //   internalConfig.value.forEach(item => {
-  //     const key = item.prop
-  //     if (['checkbox-group', 'daterange', 'monthrange'].includes(item.type) || item.multiple) {
-  //       resetData[key] = item.defaultValue ?? []
-  //     } else if (item.type === 'upload') {
-  //       resetData[key] = item.defaultValue ?? []
-  //     } else {
-  //       resetData[key] = item.defaultValue ?? ''
-  //     }
-  //   })
-  //   localModel.value = { ...resetData }
-  //   nextTick(() => formRef.value?.clearValidate())
-  // },
-  // async refreshRemoteOptions(targetProp) {
-  //   const item = internalConfig.value.find(i => i.prop === targetProp)
-  //   if (!item) {
-  //     console.warn(`[SearchForm] 未找到 prop 为 ${targetProp} 的配置项`)
-  //     return
-  //   }
-  //   if (item.type !== 'select' || !item.api) {
-  //     console.warn(`[SearchForm] 字段 ${targetProp} 不是远程 Select 或没有 API`)
-  //     return
-  //   }
-  //   remoteOptions.value[targetProp] = []
-  //   remoteLoading.value[targetProp] = true
-  //   try {
-  //     await loadRemoteOptions(item)
-  //   } catch (error) {
-  //     console.error(`[SearchForm] ${targetProp} 加载失败`, error)
-  //     throw error
-  //   } finally {
-  //     remoteLoading.value[targetProp] = false
-  //   }
-  // }
   async refreshRemoteOptions(targetProp) {
   async refreshRemoteOptions(targetProp) {
     const item = internalConfig.value.find(i => i.prop === targetProp)
     const item = internalConfig.value.find(i => i.prop === targetProp)
     if (!item || item.type !== 'select' || !item.api) return
     if (!item || item.type !== 'select' || !item.api) return

src/components/Table/editTable.vue

@@ -24,7 +24,6 @@
         </template>
         </template>
 
 
         <template #default="{ row, $index }">
         <template #default="{ row, $index }">
-          <!-- 可编辑列：始终显示编辑组件 -->
           <div v-if="col.editable !== false">
           <div v-if="col.editable !== false">
             <el-form-item
             <el-form-item
               :rules="getColumnRules(col)"
               :rules="getColumnRules(col)"
@@ -57,10 +56,9 @@
                 :loading="remoteLoading[col.prop]"
                 :loading="remoteLoading[col.prop]"
                 :disabled="col.disabled"
                 :disabled="col.disabled"
                 @update:model-value="val => handleSelectChange(row, col, val, $index)"
                 @update:model-value="val => handleSelectChange(row, col, val, $index)"
-                @focus="() => loadRemoteOptions(col)"
               >
               >
                 <el-option
                 <el-option
-                  v-for="opt in getSelectOptions(col)"
+                  v-for="opt in getSelectOptions(col, row)"
                   :key="opt.value"
                   :key="opt.value"
                   :label="opt.label"
                   :label="opt.label"
                   :value="opt.value"
                   :value="opt.value"
@@ -174,7 +172,7 @@
           <div v-else>
           <div v-else>
             <slot :name="`column-${col.prop}`" :row="row" :column="col" :value="row[col.prop]">
             <slot :name="`column-${col.prop}`" :row="row" :column="col" :value="row[col.prop]">
               <span v-if="col.editType === 'select'">
               <span v-if="col.editType === 'select'">
-                {{ getSelectLabel(col, row[col.prop]) }}
+                {{ getSelectLabel(col, row[col.prop], row) }}
               </span>
               </span>
               <span v-else-if="col.editType === 'upload' && row[col.prop]">
               <span v-else-if="col.editType === 'upload' && row[col.prop]">
                 <span v-for="(file, idx) in getFileListDisplay(row[col.prop])" :key="idx">
                 <span v-for="(file, idx) in getFileListDisplay(row[col.prop])" :key="idx">
@@ -333,7 +331,7 @@ function getColumnRules(col) {
 }
 }
 
 
 // 获取 Select 选项列表
 // 获取 Select 选项列表
-function getSelectOptions(col) {
+function getSelectOptions(col, row) {
   const key = col.prop
   const key = col.prop
   if (col.dictType) {
   if (col.dictType) {
     const dictStore = useDictStore()
     const dictStore = useDictStore()
@@ -348,14 +346,24 @@ function getSelectOptions(col) {
     }))
     }))
   }
   }
   if (col.options) {
   if (col.options) {
-    return col.options.map(opt => ({ value: opt.value, label: opt.label, raw: opt.raw }))
+    if (typeof col.options === 'function') {
+      // 传入当前行数据，返回选项数组（可以是原始对象数组，也可以是 {value, label} 数组）
+      const result = col.options(row)
+      return result.map(opt => ({
+        value: opt.value ?? opt,
+        label: opt.label ?? opt,
+        raw: opt.raw ?? opt
+      }))
+    } else {
+      return col.options.map(opt => ({ value: opt.value, label: opt.label, raw: opt.raw }))
+    }
   }
   }
   return []
   return []
 }
 }
 
 
 // 获取 Select 选中项的 label
 // 获取 Select 选中项的 label
-function getSelectLabel(col, value) {
-  const options = getSelectOptions(col)
+function getSelectLabel(col, value, row) {
+  const options = getSelectOptions(col, row)
   if (value === undefined || value === null) return '-'
   if (value === undefined || value === null) return '-'
   if (col.multiple && Array.isArray(value)) {
   if (col.multiple && Array.isArray(value)) {
     return value.map(v => options.find(opt => opt.value === v)?.label || v).join(', ')
     return value.map(v => options.find(opt => opt.value === v)?.label || v).join(', ')
@@ -543,10 +551,9 @@ function handleCellChange(row, col, newValue, rowIndex) {
 function handleSelectChange(row, col, value, rowIndex) {
 function handleSelectChange(row, col, value, rowIndex) {
   const newTableData = [...props.tableData]
   const newTableData = [...props.tableData]
   const updatedRow = { ...row, [col.prop]: value }
   const updatedRow = { ...row, [col.prop]: value }
-
   // 处理额外字段赋值
   // 处理额外字段赋值
   if (col.onChangeExtraFields) {
   if (col.onChangeExtraFields) {
-    const options = getSelectOptions(col)
+    const options = getSelectOptions(col, row)
     const opt = options.find(o => o.value === value)
     const opt = options.find(o => o.value === value)
     if (opt?.raw) {
     if (opt?.raw) {
       for (const [targetProp, sourceKey] of Object.entries(col.onChangeExtraFields)) {
       for (const [targetProp, sourceKey] of Object.entries(col.onChangeExtraFields)) {
@@ -557,7 +564,7 @@ function handleSelectChange(row, col, value, rowIndex) {
 
 
   newTableData[rowIndex] = updatedRow
   newTableData[rowIndex] = updatedRow
   emit('update:tableData', newTableData)
   emit('update:tableData', newTableData)
-  emit('selectChange', col.prop, value, col)
+  emit('selectChange', { prop: col.prop, value, col, rowIndex })
   validateField(updatedRow, col.prop)
   validateField(updatedRow, col.prop)
 }
 }
 
 
@@ -679,8 +686,32 @@ async function loadDictOptions(dictType) {
   }
   }
 }
 }
 
 
+// async function loadRemoteOptions(col) {
+//   const { prop, api, requestParams } = col
+//   if (!api) return
+//   if (remoteOptions.value[prop]?.length > 0) return
+//   try {
+//     remoteLoading.value[prop] = true
+//     const payload = {
+//       ...(typeof requestParams === 'function' ? requestParams() : requestParams || {})
+//     }
+//     const res = await request({ url: api, method: 'post', data: payload })
+//     const list =
+//       typeof col.transform === 'function' ? col.transform(res) : res.data?.records || res.data || []
+//     remoteOptions.value[prop] = list.map(i => ({
+//       value: String(i[col.valueKey || 'value']),
+//       label: i[col.labelKey || 'label'],
+//       raw: i
+//     }))
+//   } catch (err) {
+//     ElMessage.error(`加载 ${col.label} 失败`)
+//     remoteOptions.value[prop] = []
+//   } finally {
+//     remoteLoading.value[prop] = false
+//   }
+// }
 async function loadRemoteOptions(col) {
 async function loadRemoteOptions(col) {
-  const { prop, api, requestParams } = col
+  const { prop, api, requestParams, method = 'post' } = col
   if (!api) return
   if (!api) return
   if (remoteOptions.value[prop]?.length > 0) return
   if (remoteOptions.value[prop]?.length > 0) return
   try {
   try {
@@ -688,7 +719,17 @@ async function loadRemoteOptions(col) {
     const payload = {
     const payload = {
       ...(typeof requestParams === 'function' ? requestParams() : requestParams || {})
       ...(typeof requestParams === 'function' ? requestParams() : requestParams || {})
     }
     }
-    const res = await request({ url: api, method: 'post', data: payload })
+    const config = {
+      url: api,
+      method: method.toLowerCase()
+    }
+    // GET 请求参数放在 params，其他放在 data
+    if (config.method === 'get') {
+      config.params = payload
+    } else {
+      config.data = payload
+    }
+    const res = await request(config)
     const list =
     const list =
       typeof col.transform === 'function' ? col.transform(res) : res.data?.records || res.data || []
       typeof col.transform === 'function' ? col.transform(res) : res.data?.records || res.data || []
     remoteOptions.value[prop] = list.map(i => ({
     remoteOptions.value[prop] = list.map(i => ({
@@ -703,20 +744,63 @@ async function loadRemoteOptions(col) {
     remoteLoading.value[prop] = false
     remoteLoading.value[prop] = false
   }
   }
 }
 }
-
 let searchTimeouts = {}
 let searchTimeouts = {}
+// async function handleRemoteSearch(keyword, col) {
+//   const { prop, api, requestParams, keywordField = 'keyword', debounceWait = 300 } = col
+//   if (!api) return
+//   clearTimeout(searchTimeouts[prop])
+//   searchTimeouts[prop] = setTimeout(async () => {
+//     try {
+//       remoteLoading.value[prop] = true
+//       const payload = {
+//         ...(typeof requestParams === 'function' ? requestParams() : requestParams || {}),
+//         [keywordField]: keyword
+//       }
+//       const res = await request({ url: api, method: 'post', data: payload })
+//       const list =
+//         typeof col.transform === 'function'
+//           ? col.transform(res)
+//           : res.data?.records || res.data || []
+//       remoteOptions.value[prop] = list.map(i => ({
+//         value: String(i[col.valueKey || 'value']),
+//         label: i[col.labelKey || 'label'],
+//         raw: i
+//       }))
+//     } catch (err) {
+//       ElMessage.error(`搜索 ${col.label} 失败`)
+//     } finally {
+//       remoteLoading.value[prop] = false
+//     }
+//   }, debounceWait)
+// }
 async function handleRemoteSearch(keyword, col) {
 async function handleRemoteSearch(keyword, col) {
-  const { prop, api, requestParams, keywordField = 'keyword', debounceWait = 300 } = col
+  const {
+    prop,
+    api,
+    requestParams,
+    keywordField = 'keyword',
+    debounceWait = 300,
+    method = 'post'
+  } = col
   if (!api) return
   if (!api) return
   clearTimeout(searchTimeouts[prop])
   clearTimeout(searchTimeouts[prop])
   searchTimeouts[prop] = setTimeout(async () => {
   searchTimeouts[prop] = setTimeout(async () => {
     try {
     try {
-      remoteLoading.value[prop] = true
+      // remoteLoading.value[prop] = true
       const payload = {
       const payload = {
         ...(typeof requestParams === 'function' ? requestParams() : requestParams || {}),
         ...(typeof requestParams === 'function' ? requestParams() : requestParams || {}),
         [keywordField]: keyword
         [keywordField]: keyword
       }
       }
-      const res = await request({ url: api, method: 'post', data: payload })
+      const config = {
+        url: api,
+        method: method.toLowerCase()
+      }
+      if (config.method === 'get') {
+        config.params = payload
+      } else {
+        config.data = payload
+      }
+      const res = await request(config)
       const list =
       const list =
         typeof col.transform === 'function'
         typeof col.transform === 'function'
           ? col.transform(res)
           ? col.transform(res)
@@ -733,7 +817,6 @@ async function handleRemoteSearch(keyword, col) {
     }
     }
   }, debounceWait)
   }, debounceWait)
 }
 }
-
 function getDisabledDateFn(col) {
 function getDisabledDateFn(col) {
   const { minDate, maxDate } = col
   const { minDate, maxDate } = col
   if (minDate == null && maxDate == null) return () => false
   if (minDate == null && maxDate == null) return () => false
@@ -879,9 +962,10 @@ onMounted(async () => {
         dictLoaded.value.add(col.prop)
         dictLoaded.value.add(col.prop)
       } else if (col.api && col.preload !== false) {
       } else if (col.api && col.preload !== false) {
         await loadRemoteOptions(col)
         await loadRemoteOptions(col)
-      } else if (col.options) {
-        remoteOptions.value[col.prop] = [...col.options]
       }
       }
+      // else if (col.options) {
+      //   remoteOptions.value[col.prop] = [...col.options]
+      // }
     }
     }
   }
   }
 })
 })

src/components/Table/treeEditTable.vue

+<template>
+  <div class="common-table">
+    <div class="addBox">
+      <el-button v-if="showAdd" type="primary" @click="addTableData">
+        {{ addBtnTxt }}
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      border
+      style="width: 100%"
+      row-key="rowKey"
+      v-bind="$attrs"
+    >
+      <!-- 树形模式：展开列 -->
+      <el-table-column v-if="treeMode" type="expand" width="50">
+        <template #default="{ row, $index }">
+          <div class="sub-table-wrapper">
+            <div class="sub-table-header">
+              <span class="sub-table-title">{{ subTableTitle }}</span>
+              <el-button type="primary" size="small" @click="addSubRow(row, $index)">
+                {{ subTableAddBtnText }}
+              </el-button>
+            </div>
+            <el-table
+              :data="getSubData(row)"
+              border
+              size="small"
+              class="sub-table"
+            >
+              <!-- 动态子表列 -->
+              <el-table-column
+                v-for="subCol in subTableColumns"
+                :key="subCol.prop"
+                :prop="subCol.prop"
+                :label="subCol.label"
+                :width="subCol.width"
+                :min-width="subCol.minWidth"
+                :align="subCol.align || 'left'"
+              >
+                <template #default="{ row: subRow, $index: subIndex }">
+                  <el-form-item
+                    :rules="getSubColumnRules(subCol)"
+                    :error="getSubRowError(row, $index, subIndex, subCol.prop)"
+                    style="margin-bottom: 0"
+                  >
+                    <!-- 输入框 -->
+                    <el-input
+                      v-if="subCol.editType === 'input'"
+                      v-model="subRow[subCol.prop]"
+                      :placeholder="subCol.placeholder || `请输入${subCol.label}`"
+                      :clearable="true"
+                      :type="subCol.inputType === 'textarea' ? 'textarea' : 'text'"
+                      :rows="subCol.rows || 2"
+                      :disabled="subCol.disabled"
+                      @blur="validateSubField(row, $index, subIndex, subCol.prop)"
+                    />
+                    <!-- 下拉选择 -->
+                    <el-select
+                      v-else-if="subCol.editType === 'select'"
+                      v-model="subRow[subCol.prop]"
+                      :placeholder="subCol.placeholder || `请选择${subCol.label}`"
+                      :clearable="true"
+                      filterable
+                      :disabled="subCol.disabled"
+                      @change="validateSubField(row, $index, subIndex, subCol.prop)"
+                    >
+                      <el-option
+                        v-for="opt in getSubSelectOptions(subCol)"
+                        :key="opt.value"
+                        :label="opt.label"
+                        :value="opt.value"
+                      />
+                    </el-select>
+                    <!-- 日期选择器 -->
+                    <el-date-picker
+                      v-else-if="subCol.editType === 'date'"
+                      v-model="subRow[subCol.prop]"
+                      type="date"
+                      :placeholder="`选择${subCol.label}`"
+                      :value-format="subCol.valueFormat || 'YYYY-MM-DD'"
+                      style="width: 100%"
+                      :disabled="subCol.disabled"
+                    />
+                    <!-- 月份选择器 -->
+                    <el-date-picker
+                      v-else-if="subCol.editType === 'month'"
+                      v-model="subRow[subCol.prop]"
+                      type="month"
+                      :placeholder="`选择${subCol.label}`"
+                      :value-format="subCol.valueFormat || 'YYYY-MM'"
+                      style="width: 100%"
+                      :disabled="subCol.disabled"
+                    />
+                    <!-- 日期范围 -->
+                    <el-date-picker
+                      v-else-if="subCol.editType === 'daterange'"
+                      v-model="subRow[subCol.prop]"
+                      type="daterange"
+                      range-separator="至"
+                      :start-placeholder="subCol.startPlaceholder || '开始日期'"
+                      :end-placeholder="subCol.endPlaceholder || '结束日期'"
+                      :value-format="subCol.valueFormat || 'YYYY-MM-DD'"
+                      style="width: 100%"
+                      :disabled="subCol.disabled"
+                    />
+                    <!-- 月份范围 -->
+                    <el-date-picker
+                      v-else-if="subCol.editType === 'monthrange'"
+                      v-model="subRow[subCol.prop]"
+                      type="monthrange"
+                      range-separator="至"
+                      :start-placeholder="subCol.startPlaceholder || '开始月份'"
+                      :end-placeholder="subCol.endPlaceholder || '结束月份'"
+                      :value-format="subCol.valueFormat || 'YYYY-MM'"
+                      style="width: 100%"
+                      :disabled="subCol.disabled"
+                    />
+                    <!-- 普通文本（不可编辑） -->
+                    <span v-else>{{ subRow[subCol.prop] || '-' }}</span>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+
+              <!-- 子表操作列 -->
+              <el-table-column label="操作" width="100" align="center" fixed="right">
+                <template #default="{ $index: subIndex }">
+                  <el-button link type="danger" size="small" @click="deleteSubRow(row, $index, subIndex)">
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="!getSubData(row).length" class="sub-table-empty">暂无明细数据，点击上方按钮添加</div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <!-- 动态列（主表） -->
+      <el-table-column
+        v-for="col in visibleColumns"
+        :key="col.prop"
+        :prop="col.prop"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :fixed="col.fixed"
+        :align="col.align || 'left'"
+        :show-overflow-tooltip="col.showOverflowTooltip"
+      >
+        <!-- 自定义表头：显示必填红色星号 -->
+        <template #header>
+          <span v-if="checkColumnRequired(col)" class="required-star"> *</span>
+          <span>{{ col.label }}</span>
+        </template>
+
+        <template #default="{ row, $index }">
+          <div v-if="col.editable !== false">
+            <el-form-item
+              :rules="getColumnRules(col)"
+              :error="getRowError(row, col.prop)"
+              style="margin-bottom: 0"
+            >
+              <!-- 输入框（文本/数字/textarea） -->
+              <el-input
+                v-if="col.editType === 'input'"
+                :model-value="getInputDisplayValue(row, col)"
+                :placeholder="col.placeholder || `请输入${col.label}`"
+                :clearable="true"
+                :type="col.inputType === 'textarea' ? 'textarea' : 'text'"
+                :rows="col.rows || 2"
+                :disabled="col.disabled"
+                @update:model-value="val => handleInputChange(row, col, val, $index)"
+                @blur="handleInputBlur(row, col, $index)"
+              />
+              <!-- 下拉选择 -->
+              <el-select
+                v-else-if="col.editType === 'select'"
+                :model-value="row[col.prop]"
+                :placeholder="col.placeholder || `请选择${col.label}`"
+                :clearable="true"
+                filterable
+                :allow-create="col.allowCreate"
+                :default-first-option="col.allowCreate"
+                :remote="!!col.api"
+                :remote-method="keyword => handleRemoteSearch(keyword, col)"
+                :loading="remoteLoading[col.prop]"
+                :disabled="col.disabled"
+                @update:model-value="val => handleSelectChange(row, col, val, $index)"
+                @focus="() => loadRemoteOptions(col)"
+              >
+                <el-option
+                  v-for="opt in getSelectOptions(col)"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+
+              <!-- 日期选择器 -->
+              <el-date-picker
+                v-else-if="col.editType === 'date'"
+                :model-value="row[col.prop]"
+                type="date"
+                :placeholder="`选择${col.label}`"
+                :value-format="col.valueFormat || 'YYYY-MM-DD'"
+                style="width: 100%"
+                :disabled="col.disabled"
+                :disabled-date="getDisabledDateFn(col)"
+                @update:model-value="val => handleCellChange(row, col, val, $index)"
+              />
+
+              <!-- 月份选择器 -->
+              <el-date-picker
+                v-else-if="col.editType === 'month'"
+                :model-value="row[col.prop]"
+                type="month"
+                :placeholder="`选择${col.label}`"
+                :value-format="col.valueFormat || 'YYYY-MM'"
+                style="width: 100%"
+                :disabled="col.disabled"
+                :disabled-date="getDisabledDateFn(col)"
+                @update:model-value="val => handleCellChange(row, col, val, $index)"
+              />
+
+              <!-- 日期范围 -->
+              <el-date-picker
+                v-else-if="col.editType === 'daterange'"
+                :model-value="row[col.prop]"
+                type="daterange"
+                range-separator="至"
+                :start-placeholder="col.startPlaceholder || '开始日期'"
+                :end-placeholder="col.endPlaceholder || '结束日期'"
+                :value-format="col.valueFormat || 'YYYY-MM-DD'"
+                style="width: 100%"
+                :disabled="col.disabled"
+                :disabled-date="getDisabledDateFn(col)"
+                @update:model-value="val => handleCellChange(row, col, val, $index)"
+              />
+
+              <!-- 月份范围 -->
+              <el-date-picker
+                v-else-if="col.editType === 'monthrange'"
+                :model-value="row[col.prop]"
+                type="monthrange"
+                range-separator="至"
+                :start-placeholder="col.startPlaceholder || '开始月份'"
+                :end-placeholder="col.endPlaceholder || '结束月份'"
+                :value-format="col.valueFormat || 'YYYY-MM'"
+                style="width: 100%"
+                :disabled="col.disabled"
+                :disabled-date="getDisabledDateFn(col)"
+                @update:model-value="val => handleCellChange(row, col, val, $index)"
+              />
+
+              <!-- 上传组件 -->
+              <div v-else-if="col.editType === 'upload'" class="table-upload-wrapper">
+                <el-upload
+                  :file-list="getFileListDisplay(row[col.prop])"
+                  :action="col.action || '/api/upload'"
+                  :headers="col.headers"
+                  :multiple="col.multiple || false"
+                  :limit="col.limit || 1"
+                  :accept="col.accept"
+                  :disabled="col.disabled"
+                  :auto-upload="true"
+                  :show-file-list="false"
+                  :before-upload="file => beforeUpload(file, col)"
+                  :on-success="
+                    (res, file, fileList) => handleUploadSuccess(row, col, res, file, fileList)
+                  "
+                  :on-error="
+                    (err, file, fileList) => handleUploadError(row, col, err, file, fileList)
+                  "
+                >
+                  <el-button size="small" type="primary">点击上传</el-button>
+                </el-upload>
+                <div class="upload-file-list" v-if="getFileListDisplay(row[col.prop]).length">
+                  <div
+                    v-for="(file, idx) in getFileListDisplay(row[col.prop])"
+                    :key="idx"
+                    class="file-item"
+                  >
+                    <span class="file-name">{{ file.name || file.url }}</span>
+                    <el-button link type="danger" size="small" @click="removeFile(row, col, idx)"
+                      >删除</el-button
+                    >
+                  </div>
+                </div>
+              </div>
+
+              <!-- 自定义渲染（插槽） -->
+              <slot
+                v-else
+                :name="`edit-${col.prop}`"
+                :row="row"
+                :column="col"
+                :updateValue="val => handleCellChange(row, col, val, $index)"
+              />
+            </el-form-item>
+          </div>
+
+          <!-- 不可编辑列：只读显示 -->
+          <div v-else>
+            <slot :name="`column-${col.prop}`" :row="row" :column="col" :value="row[col.prop]">
+              <span v-if="col.editType === 'select'">
+                {{ getSelectLabel(col, row[col.prop]) }}
+              </span>
+              <span v-else-if="col.editType === 'upload' && row[col.prop]">
+                <span v-for="(file, idx) in getFileListDisplay(row[col.prop])" :key="idx">
+                  <el-link type="primary" @click="previewFile(file)">{{
+                    file.name || file.url
+                  }}</el-link>
+                  <span v-if="idx < getFileListDisplay(row[col.prop]).length - 1">, </span>
+                </span>
+              </span>
+              <span v-else-if="col.formatter">
+                {{ col.formatter(row[col.prop], row) }}
+              </span>
+              <span v-else>{{ row[col.prop] || '-' }}</span>
+            </slot>
+          </div>
+        </template>
+      </el-table-column>
+
+      <!-- 操作栏（主表） -->
+      <el-table-column
+        v-if="showOperation"
+        :label="operationLabel"
+        :width="operationWidth"
+        :fixed="operationFixed"
+        align="center"
+      >
+        <template #default="{ row, $index }">
+          <div class="operation-buttons">
+            <!-- 树形模式：添加子行按钮 -->
+            <el-button
+              v-if="treeMode && showAddChild"
+              link
+              type="primary"
+              size="small"
+              @click="addSubRow(row, $index)"
+            >
+              {{ addChildBtnText }}
+            </el-button>
+            <slot name="operation" :row="row" :index="$index">
+              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            </slot>
+          </div>
+        </template>
+      </el-table-column>
+
+      <!-- 额外插槽列 -->
+      <slot name="append" />
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div v-if="showPagination" class="table-pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="pageSizes"
+        :background="paginationBackground"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <!-- 文件预览弹窗 -->
+    <el-dialog v-model="previewDialogVisible" :title="previewFileName" width="60%" destroy-on-close>
+      <div class="preview-container">
+        <img v-if="previewFileType === 'image'" :src="previewUrl" style="max-width: 100%" />
+        <iframe
+          v-else-if="previewFileType === 'pdf'"
+          :src="previewUrl"
+          style="width: 100%; height: 70vh"
+        ></iframe>
+        <div v-else class="preview-unsupported">暂不支持预览此类型文件</div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getDicts } from '@/api/system/dict/data'
+import useDictStore from '@/store/modules/dict'
+import request from '@/utils/request'
+import dayjs from 'dayjs'
+
+// ==================== Props ====================
+const props = defineProps({
+  // 基础 props
+  tableData: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] },
+  rowIdKey: { type: String, default: 'id' },
+  showOperation: { type: Boolean, default: true },
+  operationLabel: { type: String, default: '操作' },
+  operationWidth: { type: String, default: '120' },
+  operationFixed: { type: String, default: 'right' },
+  showPagination: { type: Boolean, default: false },
+  total: { type: Number, default: 0 },
+  page: { type: Number, default: 1 },
+  limit: { type: Number, default: 20 },
+  pageSizes: { type: Array, default: () => [10, 20, 30, 50] },
+  paginationBackground: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
+  showAdd: { type: Boolean, default: true },
+  addBtnTxt: { type: String, default: '新增' },
+
+  // 树形模式新增 props
+  treeMode: { type: Boolean, default: false },
+  subDataProp: { type: String, default: 'children' },
+  subTableColumns: { type: Array, default: () => [] },
+  subTableTitle: { type: String, default: '明细信息' },
+  subTableAddBtnText: { type: String, default: '添加明细' },
+  showAddChild: { type: Boolean, default: true },
+  addChildBtnText: { type: String, default: '增加孩子' }
+})
+
+const emit = defineEmits([
+  'update:page',
+  'update:limit',
+  'update:tableData',
+  'delete',
+  'selectChange',
+  'uploadSuccess',
+  'add',
+  'cell-change',
+  'sub-row-add',
+  'sub-row-delete',
+  'sub-cell-change'
+])
+
+// ==================== 内部状态 ====================
+const rowErrors = ref({})
+const remoteOptions = ref({})
+const remoteLoading = ref({})
+const dictLoaded = ref(new Set())
+const currentPage = ref(props.page)
+const pageSize = ref(props.limit)
+
+// 预览弹窗状态
+const previewDialogVisible = ref(false)
+const previewUrl = ref('')
+const previewFileName = ref('')
+const previewFileType = ref('')
+
+// 数字输入临时编辑值
+const editingTempValue = ref({})
+
+// 子表格错误信息
+const subRowErrors = ref({})
+
+// ==================== 计算属性 ====================
+const visibleColumns = computed(() => {
+  return props.columns.filter(col => {
+    if (typeof col.visible === 'function') return col.visible()
+    return col.visible !== false
+  })
+})
+
+// 检查列是否必填
+function checkColumnRequired(col) {
+  if (col.required === true) return true
+  if (col.rules && Array.isArray(col.rules)) {
+    return col.rules.some(rule => rule.required === true)
+  }
+  return false
+}
+
+// 获取主行错误信息
+function getRowError(row, prop) {
+  const rowId = row[props.rowIdKey]
+  return rowErrors.value[rowId]?.[prop] || ''
+}
+
+// 获取主列校验规则
+function getColumnRules(col) {
+  if (col.rules) return col.rules
+  if (col.required) {
+    return [{ required: true, message: `${col.label}不能为空`, trigger: 'blur' }]
+  }
+  return []
+}
+
+// 获取 Select 选项列表（主表）
+function getSelectOptions(col) {
+  const key = col.prop
+  if (col.dictType) {
+    const dictStore = useDictStore()
+    const dictOpts = dictStore.getDict(col.dictType) || []
+    return dictOpts.map(opt => ({ value: opt.value, label: opt.label, raw: opt }))
+  }
+  if (col.api) {
+    return (remoteOptions.value[key] || []).map(opt => ({
+      value: opt.value,
+      label: opt.label,
+      raw: opt.raw
+    }))
+  }
+  if (col.options) {
+    return col.options.map(opt => ({ value: opt.value, label: opt.label, raw: opt.raw }))
+  }
+  return []
+}
+
+// 获取 Select 选中项的 label（主表）
+function getSelectLabel(col, value) {
+  const options = getSelectOptions(col)
+  if (value === undefined || value === null) return '-'
+  if (col.multiple && Array.isArray(value)) {
+    return value.map(v => options.find(opt => opt.value === v)?.label || v).join(', ')
+  }
+  const found = options.find(opt => opt.value === value)
+  return found ? found.label : value
+}
+
+// ==================== 数字输入格式化与解析 ====================
+function getInputDisplayValue(row, col) {
+  const rowId = row[props.rowIdKey]
+  const editingKey = `${rowId}_${col.prop}`
+  if (editingTempValue.value[editingKey] !== undefined) {
+    return editingTempValue.value[editingKey]
+  }
+
+  const { inputType } = col
+  let rawValue = row[col.prop]
+
+  if (!['integer', 'decimalNumber', 'decimal'].includes(inputType)) {
+    return rawValue ?? ''
+  }
+
+  if (rawValue === undefined || rawValue === null) return ''
+  let num = typeof rawValue === 'number' ? rawValue : parseFloat(rawValue)
+  if (isNaN(num)) return ''
+
+  const { decimalDigits = 2 } = col
+  num = parseFloat(num.toFixed(decimalDigits))
+  const parts = num.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}
+
+function handleInputChange(row, col, rawValue, rowIndex) {
+  const { inputType, decimalDigits = 2 } = col
+  let filtered = rawValue
+
+  if (inputType === 'integer') {
+    filtered = rawValue.replace(/[^-\d]/g, '')
+    if (filtered === '-') {
+      // 保留负号
+    } else if (filtered !== '') {
+      let num = parseInt(filtered, 10)
+      if (isNaN(num)) filtered = ''
+      else filtered = num.toString()
+    }
+  } else if (inputType === 'decimalNumber') {
+    let temp = rawValue.replace(/[^-\d.]/g, '')
+    if (temp.startsWith('-')) {
+      temp = '-' + temp.slice(1).replace(/-/g, '')
+    } else {
+      temp = temp.replace(/-/g, '')
+    }
+    if (temp === '-') {
+      filtered = '-'
+    } else {
+      const pointIndex = temp.indexOf('.')
+      if (pointIndex !== -1) {
+        const intPart = temp.slice(0, pointIndex).replace(/[^\d-]/g, '')
+        let decPart = temp.slice(pointIndex + 1).replace(/\D/g, '')
+        if (decPart.length > decimalDigits) decPart = decPart.slice(0, decimalDigits)
+        filtered = intPart + (decPart ? '.' + decPart : '.')
+      } else {
+        filtered = temp
+      }
+    }
+  } else if (inputType === 'decimal') {
+    let temp = rawValue.replace(/[^\d.]/g, '')
+    const pointIndex = temp.indexOf('.')
+    if (pointIndex !== -1) {
+      const intPart = temp.slice(0, pointIndex).replace(/\D/g, '')
+      let decPart = temp.slice(pointIndex + 1).replace(/\D/g, '')
+      if (decPart.length > decimalDigits) decPart = decPart.slice(0, decimalDigits)
+      filtered = intPart + (decPart ? '.' + decPart : '.')
+    } else {
+      filtered = temp
+    }
+  } else {
+    filtered = rawValue
+  }
+
+  const rowId = row[props.rowIdKey]
+  const editingKey = `${rowId}_${col.prop}`
+  editingTempValue.value[editingKey] = filtered
+}
+
+function handleInputBlur(row, col, rowIndex) {
+  const rowId = row[props.rowIdKey]
+  const editingKey = `${rowId}_${col.prop}`
+  const rawStr = editingTempValue.value[editingKey]
+
+  if (rawStr === undefined) {
+    return
+  }
+
+  delete editingTempValue.value[editingKey]
+
+  if (rawStr === '') {
+    const newTableData = [...props.tableData]
+    newTableData[rowIndex] = { ...row, [col.prop]: null }
+    emit('update:tableData', newTableData)
+    validateField(newTableData[rowIndex], col.prop)
+    return
+  }
+
+  const { inputType, decimalDigits = 2 } = col
+  let finalValue = null
+
+  if (inputType === 'integer') {
+    const match = rawStr.match(/^-?\d+/)
+    if (match) {
+      const num = parseInt(match[0], 10)
+      if (!isNaN(num)) finalValue = num
+    }
+  } else if (inputType === 'decimalNumber') {
+    const num = parseFloat(rawStr)
+    if (!isNaN(num)) finalValue = parseFloat(num.toFixed(decimalDigits))
+  } else if (inputType === 'decimal') {
+    const num = parseFloat(rawStr)
+    if (!isNaN(num) && num >= 0) finalValue = parseFloat(num.toFixed(decimalDigits))
+  } else {
+    finalValue = rawStr
+  }
+
+  const newTableData = [...props.tableData]
+  newTableData[rowIndex] = { ...row, [col.prop]: finalValue }
+  emit('update:tableData', newTableData)
+  emit('cell-change', {
+    row: newTableData[rowIndex],
+    col,
+    newValue: finalValue,
+    oldValue: row[col.prop],
+    rowIndex,
+    prop: col.prop
+  })
+  validateField(newTableData[rowIndex], col.prop)
+}
+
+// ==================== 数据更新与校验（主表） ====================
+function handleCellChange(row, col, newValue, rowIndex) {
+  const oldValue = row[col.prop]
+  if (oldValue === newValue) return
+
+  const newTableData = [...props.tableData]
+  newTableData[rowIndex] = { ...row, [col.prop]: newValue }
+  emit('update:tableData', newTableData)
+  emit('cell-change', {
+    row: newTableData[rowIndex],
+    col,
+    newValue,
+    oldValue,
+    rowIndex,
+    prop: col.prop
+  })
+  validateField(newTableData[rowIndex], col.prop)
+}
+
+function handleSelectChange(row, col, value, rowIndex) {
+  const newTableData = [...props.tableData]
+  const updatedRow = { ...row, [col.prop]: value }
+
+  if (col.onChangeExtraFields) {
+    const options = getSelectOptions(col)
+    const opt = options.find(o => o.value === value)
+    if (opt?.raw) {
+      for (const [targetProp, sourceKey] of Object.entries(col.onChangeExtraFields)) {
+        updatedRow[targetProp] = opt.raw[sourceKey]
+      }
+    }
+  }
+
+  newTableData[rowIndex] = updatedRow
+  emit('update:tableData', newTableData)
+  emit('selectChange', col.prop, value, col)
+  validateField(updatedRow, col.prop)
+}
+
+async function validateField(row, prop) {
+  const col = props.columns.find(c => c.prop === prop)
+  if (!col) return true
+
+  const rules = getColumnRules(col)
+  if (!rules.length) return true
+
+  const value = row[prop]
+  const rowId = row[props.rowIdKey]
+  let errorMsg = ''
+
+  for (const rule of rules) {
+    if (rule.required && (value === undefined || value === null || value === '')) {
+      errorMsg = rule.message || `${col.label}不能为空`
+      break
+    }
+    if (rule.pattern && !rule.pattern.test(String(value))) {
+      errorMsg = rule.message || `${col.label}格式不正确`
+      break
+    }
+    if (rule.validator && typeof rule.validator === 'function') {
+      try {
+        await rule.validator(null, value, () => {})
+      } catch (err) {
+        errorMsg = err.message
+        break
+      }
+    }
+  }
+
+  if (!rowErrors.value[rowId]) {
+    rowErrors.value[rowId] = {}
+  }
+  rowErrors.value[rowId][prop] = errorMsg
+  return !errorMsg
+}
+
+// ==================== 子表格相关函数 ====================
+function getSubData(row) {
+  return row[props.subDataProp] || []
+}
+
+function getSubColumnRules(col) {
+  if (col.rules) return col.rules
+  if (col.required) {
+    return [{ required: true, message: `${col.label}不能为空`, trigger: 'blur' }]
+  }
+  return []
+}
+
+function getSubSelectOptions(col) {
+  if (col.dictType) {
+    const dictStore = useDictStore()
+    const dictOpts = dictStore.getDict(col.dictType) || []
+    return dictOpts.map(opt => ({ value: opt.value, label: opt.label, raw: opt }))
+  }
+  if (col.options) {
+    return col.options.map(opt => ({ value: opt.value, label: opt.label, raw: opt.raw }))
+  }
+  return []
+}
+
+function getSubRowError(mainRow, mainRowIndex, subIndex, prop) {
+  const rowId = mainRow[props.rowIdKey] || mainRowIndex
+  return subRowErrors.value[rowId]?.[subIndex]?.[prop] || ''
+}
+
+async function validateSubField(mainRow, mainRowIndex, subIndex, prop) {
+  const subCol = props.subTableColumns.find(c => c.prop === prop)
+  if (!subCol) return true
+
+  const rules = getSubColumnRules(subCol)
+  if (!rules.length) return true
+
+  const subData = getSubData(mainRow)
+  const subRow = subData[subIndex]
+  if (!subRow) return true
+
+  const value = subRow[prop]
+  const rowId = mainRow[props.rowIdKey] || mainRowIndex
+  let errorMsg = ''
+
+  for (const rule of rules) {
+    if (rule.required && (value === undefined || value === null || value === '')) {
+      errorMsg = rule.message || `${subCol.label}不能为空`
+      break
+    }
+    if (rule.pattern && !rule.pattern.test(String(value))) {
+      errorMsg = rule.message || `${subCol.label}格式不正确`
+      break
+    }
+  }
+
+  if (!subRowErrors.value[rowId]) {
+    subRowErrors.value[rowId] = {}
+  }
+  if (!subRowErrors.value[rowId][subIndex]) {
+    subRowErrors.value[rowId][subIndex] = {}
+  }
+  subRowErrors.value[rowId][subIndex][prop] = errorMsg
+  return !errorMsg
+}
+
+function addSubRow(mainRow, mainRowIndex) {
+  const newSubRow = {}
+  for (const col of props.subTableColumns) {
+    if (col.defaultValue !== undefined) {
+      newSubRow[col.prop] = typeof col.defaultValue === 'function' ? col.defaultValue() : col.defaultValue
+    } else {
+      newSubRow[col.prop] = null
+    }
+  }
+  newSubRow._tempId = Date.now() + Math.random()
+
+  const currentSubData = getSubData(mainRow)
+  const newSubData = [...currentSubData, newSubRow]
+
+  const newTableData = [...props.tableData]
+  newTableData[mainRowIndex] = {
+    ...mainRow,
+    [props.subDataProp]: newSubData
+  }
+  emit('update:tableData', newTableData)
+  emit('sub-row-add', { mainRow, mainRowIndex, newRow: newSubRow })
+}
+
+function deleteSubRow(mainRow, mainRowIndex, subIndex) {
+  const currentSubData = getSubData(mainRow)
+  const newSubData = [...currentSubData]
+  const deletedRow = newSubData.splice(subIndex, 1)[0]
+
+  const newTableData = [...props.tableData]
+  newTableData[mainRowIndex] = {
+    ...mainRow,
+    [props.subDataProp]: newSubData
+  }
+  emit('update:tableData', newTableData)
+  emit('sub-row-delete', { mainRow, mainRowIndex, subIndex, deletedRow })
+
+  const rowId = mainRow[props.rowIdKey] || mainRowIndex
+  if (subRowErrors.value[rowId]) {
+    delete subRowErrors.value[rowId][subIndex]
+    const newErrors = {}
+    for (let i = 0; i < newSubData.length; i++) {
+      if (subRowErrors.value[rowId][i] !== undefined) {
+        newErrors[i] = subRowErrors.value[rowId][i]
+      }
+    }
+    subRowErrors.value[rowId] = newErrors
+  }
+}
+
+// ==================== 全局校验方法 ====================
+function validateAll() {
+  const errors = []
+  let allValid = true
+
+  // 校验主表
+  for (let i = 0; i < props.tableData.length; i++) {
+    const row = props.tableData[i]
+    const rowId = row[props.rowIdKey] || i
+
+    for (const col of visibleColumns.value) {
+      if (col.editable === false) continue
+      const rules = getColumnRules(col)
+      if (rules.length === 0) continue
+
+      const value = row[col.prop]
+      let errorMsg = ''
+
+      for (const rule of rules) {
+        if (rule.required && (value === undefined || value === null || value === '')) {
+          errorMsg = rule.message || `${col.label}不能为空`
+          break
+        }
+        if (rule.pattern && !rule.pattern.test(String(value))) {
+          errorMsg = rule.message || `${col.label}格式不正确`
+          break
+        }
+      }
+
+      if (errorMsg) {
+        allValid = false
+        errors.push({
+          type: 'main',
+          rowIndex: i,
+          rowId,
+          prop: col.prop,
+          label: col.label,
+          message: errorMsg,
+          row
+        })
+        if (!rowErrors.value[rowId]) rowErrors.value[rowId] = {}
+        rowErrors.value[rowId][col.prop] = errorMsg
+      } else if (rowErrors.value[rowId]) {
+        rowErrors.value[rowId][col.prop] = ''
+      }
+    }
+
+    // 校验子表格
+    if (props.treeMode) {
+      const subData = getSubData(row)
+      for (let j = 0; j < subData.length; j++) {
+        const subRow = subData[j]
+        for (const subCol of props.subTableColumns) {
+          const rules = getSubColumnRules(subCol)
+          if (rules.length === 0) continue
+
+          const value = subRow[subCol.prop]
+          let errorMsg = ''
+          for (const rule of rules) {
+            if (rule.required && (value === undefined || value === null || value === '')) {
+              errorMsg = rule.message || `${subCol.label}不能为空`
+              break
+            }
+            if (rule.pattern && !rule.pattern.test(String(value))) {
+              errorMsg = rule.message || `${subCol.label}格式不正确`
+              break
+            }
+          }
+
+          if (errorMsg) {
+            allValid = false
+            errors.push({
+              type: 'sub',
+              mainRowIndex: i,
+              subIndex: j,
+              prop: subCol.prop,
+              label: subCol.label,
+              message: errorMsg,
+              row: subRow
+            })
+            if (!subRowErrors.value[rowId]) subRowErrors.value[rowId] = {}
+            if (!subRowErrors.value[rowId][j]) subRowErrors.value[rowId][j] = {}
+            subRowErrors.value[rowId][j][subCol.prop] = errorMsg
+          } else if (subRowErrors.value[rowId]?.[j]?.[subCol.prop]) {
+            subRowErrors.value[rowId][j][subCol.prop] = ''
+          }
+        }
+      }
+    }
+  }
+
+  return { valid: allValid, errors }
+}
+
+async function validateAndShow() {
+  const { valid, errors } = validateAll()
+  if (!valid && errors.length > 0) {
+    ElMessage.warning(errors[0].message)
+    return false
+  }
+  return true
+}
+
+// ==================== 远程加载 ====================
+async function loadDictOptions(dictType) {
+  const dictStore = useDictStore()
+  let options = dictStore.getDict(dictType)
+  if (options && options.length > 0) return options
+  try {
+    const resp = await getDicts(dictType)
+    options = resp.data.map(p => ({ label: p.itemLabel, value: p.itemValue, raw: p }))
+    dictStore.setDict(dictType, options)
+    return options
+  } catch (err) {
+    ElMessage.error(`字典 ${dictType} 加载失败`)
+    return []
+  }
+}
+
+async function loadRemoteOptions(col) {
+  const { prop, api, requestParams } = col
+  if (!api) return
+  if (remoteOptions.value[prop]?.length > 0) return
+  try {
+    remoteLoading.value[prop] = true
+    const payload = {
+      ...(typeof requestParams === 'function' ? requestParams() : requestParams || {})
+    }
+    const res = await request({ url: api, method: 'post', data: payload })
+    const list =
+      typeof col.transform === 'function' ? col.transform(res) : res.data?.records || res.data || []
+    remoteOptions.value[prop] = list.map(i => ({
+      value: String(i[col.valueKey || 'value']),
+      label: i[col.labelKey || 'label'],
+      raw: i
+    }))
+  } catch (err) {
+    ElMessage.error(`加载 ${col.label} 失败`)
+    remoteOptions.value[prop] = []
+  } finally {
+    remoteLoading.value[prop] = false
+  }
+}
+
+let searchTimeouts = {}
+async function handleRemoteSearch(keyword, col) {
+  const { prop, api, requestParams, keywordField = 'keyword', debounceWait = 300 } = col
+  if (!api) return
+  clearTimeout(searchTimeouts[prop])
+  searchTimeouts[prop] = setTimeout(async () => {
+    try {
+      remoteLoading.value[prop] = true
+      const payload = {
+        ...(typeof requestParams === 'function' ? requestParams() : requestParams || {}),
+        [keywordField]: keyword
+      }
+      const res = await request({ url: api, method: 'post', data: payload })
+      const list =
+        typeof col.transform === 'function'
+          ? col.transform(res)
+          : res.data?.records || res.data || []
+      remoteOptions.value[prop] = list.map(i => ({
+        value: String(i[col.valueKey || 'value']),
+        label: i[col.labelKey || 'label'],
+        raw: i
+      }))
+    } catch (err) {
+      ElMessage.error(`搜索 ${col.label} 失败`)
+    } finally {
+      remoteLoading.value[prop] = false
+    }
+  }, debounceWait)
+}
+
+function getDisabledDateFn(col) {
+  const { minDate, maxDate } = col
+  if (minDate == null && maxDate == null) return () => false
+  return date => {
+    const current = dayjs(date).startOf('day')
+    let minD = null,
+      maxD = null
+    if (minDate != null) {
+      const val = typeof minDate === 'function' ? minDate() : minDate
+      minD = val ? dayjs(val).startOf('day') : null
+    }
+    if (maxDate != null) {
+      const val = typeof maxDate === 'function' ? maxDate() : maxDate
+      maxD = val ? dayjs(val).startOf('day') : null
+    }
+    return (minD && current.isBefore(minD)) || (maxD && current.isAfter(maxD))
+  }
+}
+
+// ==================== 上传相关 ====================
+function getFileListDisplay(val) {
+  if (!val) return []
+  if (Array.isArray(val)) return val
+  try {
+    return JSON.parse(val)
+  } catch {
+    return [{ url: val, name: '文件' }]
+  }
+}
+
+function beforeUpload(file, col) {
+  if (col.maxSize && file.size > col.maxSize) {
+    ElMessage.error(`文件 ${file.name} 超出大小限制`)
+    return false
+  }
+  if (col.accept) {
+    const ext = '.' + file.name.split('.').pop().toLowerCase()
+    const allowed = col.accept.split(',').map(s => s.trim().toLowerCase())
+    if (!allowed.includes(ext)) {
+      ElMessage.error(`文件类型不支持，仅支持：${col.accept}`)
+      return false
+    }
+  }
+  return true
+}
+
+function handleUploadSuccess(row, col, response, file, fileList) {
+  const data = response.data || response
+  const url = data.url || data.fileUrl || data.path
+  const name = data.name || data.fileName || file.name
+  if (!url) {
+    ElMessage.error('上传成功但未返回文件地址')
+    return
+  }
+  const currentList = getFileListDisplay(row[col.prop])
+  const newFile = { uid: file.uid, url, name }
+  const newList = [...currentList, newFile]
+
+  const rowIndex = props.tableData.findIndex(r => r[props.rowIdKey] === row[props.rowIdKey])
+  if (rowIndex !== -1) {
+    const newTableData = [...props.tableData]
+    newTableData[rowIndex] = { ...row, [col.prop]: newList }
+    emit('update:tableData', newTableData)
+  }
+  ElMessage.success(`${file.name} 上传成功`)
+  emit('uploadSuccess', col.prop, newList)
+}
+
+function handleUploadError(row, col, error, file, fileList) {
+  ElMessage.error(`文件 ${file.name} 上传失败`)
+}
+
+function removeFile(row, col, index) {
+  const currentList = getFileListDisplay(row[col.prop])
+  const newList = [...currentList]
+  newList.splice(index, 1)
+
+  const rowIndex = props.tableData.findIndex(r => r[props.rowIdKey] === row[props.rowIdKey])
+  if (rowIndex !== -1) {
+    const newTableData = [...props.tableData]
+    newTableData[rowIndex] = { ...row, [col.prop]: newList }
+    emit('update:tableData', newTableData)
+  }
+}
+
+function previewFile(file) {
+  const url = file.url
+  if (!url) return
+  const ext = (file.name || '').split('.').pop().toLowerCase()
+  previewUrl.value = url
+  previewFileName.value = file.name || '文件'
+  if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
+    previewFileType.value = 'image'
+    previewDialogVisible.value = true
+  } else if (ext === 'pdf') {
+    previewFileType.value = 'pdf'
+    previewDialogVisible.value = true
+  } else {
+    window.open(url, '_blank')
+  }
+}
+
+// ==================== 行操作 ====================
+function handleDelete(row) {
+  emit('delete', row)
+}
+
+function addTableData() {
+  emit('add')
+}
+
+// ==================== 分页处理 ====================
+function handleSizeChange(val) {
+  pageSize.value = val
+  emit('update:limit', val)
+  emit('update:page', currentPage.value)
+}
+
+function handleCurrentChange(val) {
+  currentPage.value = val
+  emit('update:page', val)
+}
+
+watch(
+  () => props.page,
+  val => {
+    currentPage.value = val
+  }
+)
+watch(
+  () => props.limit,
+  val => {
+    pageSize.value = val
+  }
+)
+
+// ==================== 初始化 ====================
+onMounted(async () => {
+  for (const col of props.columns) {
+    if (col.editType === 'select') {
+      if (col.dictType) {
+        const opts = await loadDictOptions(col.dictType)
+        remoteOptions.value[col.prop] = opts
+        dictLoaded.value.add(col.prop)
+      } else if (col.api && col.preload !== false) {
+        await loadRemoteOptions(col)
+      } else if (col.options) {
+        remoteOptions.value[col.prop] = [...col.options]
+      }
+    }
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  validateAll,
+  validateAndShow,
+  refreshRemoteOptions: async prop => {
+    const col = props.columns.find(c => c.prop === prop)
+    if (col && col.api) {
+      remoteOptions.value[prop] = []
+      await loadRemoteOptions(col)
+    }
+  },
+  clearErrors: () => {
+    rowErrors.value = {}
+    subRowErrors.value = {}
+  }
+})
+</script>
+
+<style scoped>
+.common-table {
+  width: 100%;
+}
+.addBox {
+  margin-bottom: 10px;
+}
+.table-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+.table-upload-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.upload-file-list {
+  max-height: 80px;
+  overflow-y: auto;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  padding: 2px 0;
+}
+.file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.preview-container {
+  text-align: center;
+}
+.preview-unsupported {
+  padding: 40px;
+  color: #909399;
+}
+.required-star {
+  color: #f56c6c;
+  margin-left: 2px;
+}
+.sub-table-wrapper {
+  padding: 12px 20px;
+  background-color: #fafafa;
+  border-radius: 4px;
+}
+.sub-table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.sub-table-title {
+  font-weight: 500;
+  color: #303133;
+}
+.sub-table {
+  width: 100%;
+}
+.sub-table-empty {
+  text-align: center;
+  padding: 20px;
+  color: #909399;
+  background-color: #fff;
+  border: 1px dashed #dcdfe6;
+  border-radius: 4px;
+  margin-top: 8px;
+}
+</style>
+<!--
+使用实例：
+<treeEditTable
+        :tableData="addSalaryData"
+        :columns="mainColumns"
+        :treeMode="true"
+        :subDataProp="'bankDetails'"
+        :subTableColumns="subColumns"
+        subTableTitle="收款银行明细"
+        subTableAddBtnText="添加收款账户"
+        addChildBtnText="增加孩子"
+        @update:tableData="handleAddSalaryDataUpdate"
+      ></treeEditTable>
+      const mainColumns = [
+  { prop: 'name', label: '姓名', editType: 'input', required: true },
+  { prop: 'internalNo', label: '内部编号', editType: 'input' },
+  { prop: 'salaryMonth', label: '薪资月份', editType: 'month' },
+  { prop: 'amount', label: '应发金额', editType: 'input', inputType: 'decimal' }
+  // ... 其他主表列
+]
+
+const subColumns = [
+  {
+    prop: 'bankName',
+    label: '收款银行',
+    editType: 'select',
+    options: [{ value: 'ICBC', label: '工商银行' }],
+    required: true
+  },
+  { prop: 'accountTail', label: '账户尾号', editType: 'input', required: true },
+  {
+    prop: 'currency',
+    label: '币种',
+    editType: 'select',
+    options: [{ value: 'CNY', label: '人民币' }]
+  },
+  { prop: 'payAmount', label: '发放金额', editType: 'input', inputType: 'decimal' },
+  { prop: 'exchangeRate', label: '汇率', editType: 'input', inputType: 'decimal' },
+  { prop: 'remark', label: '备注', editType: 'input' }
+]
+
+const addSalaryData = ref([
+  {
+    id: 1,
+    name: '张三',
+    internalNo: '001',
+    salaryMonth: '2025-06',
+    amount: 10000,
+    bankDetails: [
+      {
+        bankName: 'ICBC',
+        accountTail: '1234',
+        currency: 'CNY',
+        payAmount: 5000,
+        exchangeRate: 1,
+        remark: ''
+      },
+      {
+        bankName: 'ICBC',
+        accountTail: '5678',
+        currency: 'CNY',
+        payAmount: 5000,
+        exchangeRate: 1,
+        remark: ''
+      }
+    ]
+  }
+])
+ -->

src/views/financialCenter/financialBilling.vue

@@ -445,6 +445,13 @@ const searchConfig = ref([
   },
   },
   {
   {
     type: 'monthrange',
     type: 'monthrange',
+    prop: 'actualPayoutDate',
+    label: '出账月（实）',
+    startPlaceholder: '开始时间',
+    endPlaceholder: '结束时间'
+  },
+  {
+    type: 'monthrange',
     prop: 'payoutDate',
     prop: 'payoutDate',
     label: '出账月（估）',
     label: '出账月（估）',
     startPlaceholder: '开始时间',
     startPlaceholder: '开始时间',
@@ -1044,9 +1051,6 @@ const addSpiltRecord = () => {
   if (selectedRow.value.originalCurrency && selectedRow.value.originalCurrency == 'HKD') {
   if (selectedRow.value.originalCurrency && selectedRow.value.originalCurrency == 'HKD') {
     newRow.originalToHkdRate = '1'
     newRow.originalToHkdRate = '1'
   }
   }
-  console.log('====================================')
-  console.log('newRow', newRow)
-  console.log('====================================')
   // 插入到表格数据最前面
   // 插入到表格数据最前面
   splitTableData.value.push(newRow)
   splitTableData.value.push(newRow)
 }
 }
@@ -1376,6 +1380,9 @@ const loadTableData = async (searchParams = {}) => {
       ...searchParams,
       ...searchParams,
       payoutDateStart: searchParams.payoutDate?.[0] || undefined,
       payoutDateStart: searchParams.payoutDate?.[0] || undefined,
       payoutDateEnd: searchParams.payoutDate?.[1] || undefined,
       payoutDateEnd: searchParams.payoutDate?.[1] || undefined,
+      actualPayoutDateStart: searchParams.actualPayoutDate?.[0] || undefined,
+      actualPayoutDateEnd: searchParams.actualPayoutDate?.[1] || undefined,
+      actualPayoutDate: undefined,
       payoutDate: undefined
       payoutDate: undefined
     }
     }
     const res = await getPolicyFortuneList(params)
     const res = await getPolicyFortuneList(params)

src/views/financialCenter/financialSalary.vue

@@ -42,21 +42,21 @@
           :border="true"
           :border="true"
         >
         >
           <el-table-column type="selection" width="55" :reserve-selection="true" />
           <el-table-column type="selection" width="55" :reserve-selection="true" />
-          <el-table-column prop="businessNo" label="业务编号" min-width="120" />
+          <el-table-column prop="businessNo" label="业务编号" min-width="150" />
           <!-- <el-table-column prop="fortuneAccountBizId" label="业务ID" min-width="120" sortable /> -->
           <!-- <el-table-column prop="fortuneAccountBizId" label="业务ID" min-width="120" sortable /> -->
-          <el-table-column prop="broker" label="转介人" min-width="120" sortable />
-          <el-table-column prop="team" label="所属团队" min-width="120" sortable />
-          <el-table-column prop="hkdAmount" label="港币金额" width="120" sortable>
+          <el-table-column prop="broker" label="转介人" min-width="100" sortable />
+          <el-table-column prop="team" label="所属团队" min-width="100" sortable />
+          <el-table-column prop="hkdAmount" label="港币金额" width="150" sortable>
             <template #default="scope">
             <template #default="scope">
               {{ formatCurrency(scope.row.hkdAmount, '', 4) }}
               {{ formatCurrency(scope.row.hkdAmount, '', 4) }}
             </template>
             </template>
           </el-table-column>
           </el-table-column>
-          <el-table-column prop="payoutCurrency" label="发放币种" width="120" sortable>
+          <el-table-column prop="payoutCurrency" label="发放币种" width="110" sortable>
             <template #default="scope">
             <template #default="scope">
               <dict-tag :options="currencyTypeOptions" :value="scope.row.payoutCurrency" />
               <dict-tag :options="currencyTypeOptions" :value="scope.row.payoutCurrency" />
             </template>
             </template>
           </el-table-column>
           </el-table-column>
-          <el-table-column prop="payoutAmount" label="发放金额" width="120" sortable>
+          <el-table-column prop="payoutAmount" label="发放金额" width="150" sortable>
             <template #default="scope">
             <template #default="scope">
               {{ formatCurrency(scope.row.payoutAmount, '', 4) }}
               {{ formatCurrency(scope.row.payoutAmount, '', 4) }}
             </template>
             </template>
@@ -77,7 +77,7 @@
           <el-table-column
           <el-table-column
             prop="fortuneAccountMonth"
             prop="fortuneAccountMonth"
             label="出账年月"
             label="出账年月"
-            min-width="150"
+            min-width="100"
             show-overflow-tooltip
             show-overflow-tooltip
           />
           />
           <!-- <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip /> -->
           <!-- <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip /> -->

src/views/payslip/electronicSalary.vue

+<template>
+  <div>
+    <CommonPage
+      :operationBtnList="operationBtnList"
+      :visibleDefaultButtons="visibleDefaultButtons"
+      :showSearchForm="true"
+      :show-pagination="true"
+      :total="pageTotal"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+      <!-- 搜索区域 -->
+      <template #searchForm>
+        <SearchForm ref="searchFormRef" :config="searchConfig" />
+      </template>
+
+      <!-- 列表区域 -->
+      <template #table>
+        <!-- 制作薪资单管理列表 -->
+        <el-table
+          :data="tableData"
+          height="400"
+          border
+          highlight-current-row
+          style="width: 100%"
+          v-loading="loading"
+          ref="tableRef"
+          row-key="salaryBizId"
+          :reserve-selection="true"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column
+            v-for="(column, index) in electronicSalaryTableColumns"
+            :key="index"
+            :fixed="column.fixed"
+            :prop="column.prop"
+            :label="column.label"
+            :width="column.width"
+            :sortable="column.sortable"
+            :formatter="column.formatter"
+          />
+          <el-table-column fixed="right" label="操作" min-width="120">
+            <template #default="{ row }">
+              <el-popover placement="right" :width="200" trigger="click">
+                <template #reference>
+                  <el-icon>
+                    <MoreFilled />
+                  </el-icon>
+                </template>
+                <el-menu @select="handleSelect($event, row)" popper-class="custom-menu">
+                  <el-menu-item
+                    :index="item.value"
+                    v-for="item in getOperateItems(row)"
+                    :key="item.value"
+                    >{{ item.label }}</el-menu-item
+                  >
+                </el-menu>
+              </el-popover>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </CommonPage>
+    <!-- 新增，修改，查看薪资单 -->
+    <CommonDialog
+      :dialogTitle="commonDialogTit"
+      dialogWidth="80%"
+      :openDialog="detailDialogVisible"
+      :showAction="false"
+      :showClose="true"
+      @close="detailDialogVisible = false"
+      @confirm="handleConfirmSingleSalary"
+    >
+      <div class="btnBox">
+        <el-button type="primary" @click="passCheck('1')"> 核对通过 </el-button>
+        <el-button type="warning" @click="handleReturn"> 退回修改 </el-button>
+      </div>
+      <SearchForm
+        ref="singleSalaryFormRef"
+        :config="personSaleryFormConfig"
+        v-model="personSaleryFormModel"
+        @selectChange="handleFormSelectChange"
+        @inputChange="handleFormInputChange"
+      />
+      <div class="statistics-container" v-if="personSaleryFormModel.apiSalaryRemittanceFzDTO">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
+            <el-statistic
+              :value="personSaleryFormModel.apiSalaryRemittanceFzDTO.totalAmount"
+              :formatter="value => formatCurrency(value)"
+            >
+              <template #title>
+                <div style="display: inline-flex; align-items: center">折合港币合计</div>
+              </template>
+            </el-statistic>
+          </el-col>
+        </el-row>
+      </div>
+      <div>
+        <div style="font-size: 16px; font-weight: bold; margin: 10px 0; color: black">打款明细</div>
+        <editTable
+          ref="bankTableRef"
+          :showAdd="false"
+          :showOperation="false"
+          addBtnTxt="添加打款账户"
+          v-model:table-data="salaryRemittanceDTOList"
+          :columns="bankTableColumns"
+          row-id-key="signleId"
+          @delete="handleBankDelete"
+          @add="addSalaryRemittanceRecord"
+          @selectChange="handleBankSelectChange"
+          @cell-change="handleSingleSalaryCellChange"
+        />
+      </div>
+    </CommonDialog>
+    <!-- '批量制作薪资单 -->
+    <CommonDialog
+      dialogTitle="批量制作薪资单"
+      dialogWidth="95%"
+      :openDialog="multipAddSalaryDialog"
+      @close="((multipAddSalaryDialog = false), resetAddReceivablesForm())"
+      @confirm="handleConfirmAddSalary"
+    >
+      <editTable
+        ref="editTableRef"
+        addBtnTxt="添加薪资单"
+        v-model:table-data="apiSalaryBatchAddDTOList"
+        :columns="salaryTableColumns"
+        row-id-key="multipleId"
+        show-operation
+        @delete="handleMultipDelete"
+        @add="addSalaryRecord"
+        @cell-change="handleSplitCellChange"
+        @selectChange="handleSalarySelectChange"
+      />
+    </CommonDialog>
+    <!-- 取消薪资单 -->
+    <CommonDialog
+      dialogTitle="退回修改"
+      dialogWidth="80%"
+      :openDialog="returnDialogVisible"
+      :showAction="true"
+      :showClose="true"
+      @close="returnDialogVisible = false"
+      @confirm="passCheck('2')"
+    >
+      <SearchForm ref="returnFormRef" :config="returnFormConfig" v-model="returnFormModel" />
+    </CommonDialog>
+  </div>
+</template>
+
+<script setup name="ElectronicSalary">
+import CommonPage from '@/components/commonPage'
+import CommonDialog from '@/components/commonDialog'
+import { ref, reactive, onMounted, computed, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { MoreFilled } from '@element-plus/icons-vue'
+import { exportReceivedFortune } from '@/api/financial/commission'
+import {
+  batchAddSalary,
+  calculatePaidAmount,
+  getExchangeRate,
+  grossAmountApi,
+  updateSalaryDetail,
+  calculateTotalAmountApi,
+  editSingleSalaryApi,
+  addSingleSalaryApi,
+  cancelSalaryApi,
+  delSalaryApi,
+  electronicSalaryListApi,
+  pushSalaryApi,
+  checkSalaryApi
+} from '@/api/salary'
+import SearchForm from '@/components/SearchForm/SearchForm.vue'
+import { loadDicts, getDictLabel } from '@/utils/useDict'
+import { safeDownload } from '@/utils/safeDownload'
+import { formatCurrency } from '@/utils/number'
+import editTable from '@/components/Table/editTable.vue'
+
+// 添加表格引用
+const tableRef = ref()
+// 存储所有选中的行数据（用于跨页保持选择）
+const allSelectedRows = ref(new Map())
+const selectedRows = ref([])
+const multipAddSalaryDialog = ref(false)
+const addRecordRef = ref(null)
+const apiSalaryBatchAddDTOList = ref([{}]) //批量新增薪资单
+const salaryRemittanceDTOList = ref([{}]) //银行数据
+const editTableRef = ref(null)
+const bankTableRef = ref(null)
+const singleSalaryFormRef = ref(null)
+const personSaleryFormModel = ref({ apiSalaryRemittanceFzDTO: {} })
+const commonDialogTit = ref('')
+const commonDialogType = ref('')
+const returnDialogVisible = ref(false)
+const returnFormRef = ref(null)
+const returnFormModel = ref({})
+// 批量薪资单表格配置
+const salaryTableColumns = ref([
+  {
+    prop: 'brokerBizId',
+    label: '姓名',
+    editType: 'select',
+    api: '/csf/api/salary/broker/list', // 接口地址 这个是get请求，目前表格是post请求，所以需要在完善一下表格的请求方式以及请求参数
+    method: 'get', // ← 指定请求方式为 GET
+    valueKey: 'brokerBizId', // 选项 value 字段名
+    labelKey: 'broker', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    width: 150,
+    requestParams: { name: '' }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'name',
+    onChangeExtraFields: {
+      brokerName: 'broker', // 将选项原始对象的 broker 字段赋值给行数据的 brokerName
+      monthList: 'monthList' // 存储月份列表，供月份列使用
+    }
+    // debounceWait: 300
+  },
+  {
+    editType: 'select',
+    prop: 'month',
+    label: '薪资月份',
+    // options: [],//根据选择得转介人数据动态获取
+    // placeholder: monthList.value.length > 0 ? '请选择月份' : '请先选择转介人',
+    width: 150,
+    // 动态选项，依赖行数据中的 monthList
+    options: row => {
+      const list = row.monthList || []
+      return list.map(m => ({ value: m, label: m })) // 格式：{ value, label }
+    }
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+
+  // {
+  //   prop: 'splitRatio',
+  //   label: '内部编号',
+  //   editType: 'input',
+  //   // required: true,
+  //   placeholder: '请输入内部编号',
+  //   width: 150
+  // },
+
+  {
+    editType: 'input',
+    prop: 'grossAmount',
+    label: '应发金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'mpfAmount',
+    label: 'MPF事项',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入MPF事项',
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'otherAmount',
+    label: '其他调整总金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'otherRemark',
+    label: '备注',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入备注',
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'paidAmount',
+    label: '实发金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'bank1',
+    label: '收款银行1',
+    editType: 'select',
+    api: '/base/api/bank/page', // 接口地址
+    valueKey: 'bankBizId', // 选项 value 字段名
+    labelKey: 'bankName', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    width: 150,
+    requestParams: { pageNo: 1, pageSize: 20 }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'queryContent'
+    // debounceWait: 300
+  },
+  {
+    prop: 'accountEndNo1',
+    label: '账户尾号1',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 150
+  },
+  {
+    editType: 'select',
+    prop: 'currency1',
+    label: '币种1',
+    dictType: 'bx_currency_type',
+    width: 150
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+  {
+    editType: 'input',
+    prop: 'amount1',
+    label: '发放金额1',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'exchangeRate1',
+    label: '汇率1',
+    inputType: 'decimal',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'remark1',
+    label: '备注1',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 180
+  },
+  {
+    prop: 'bank2',
+    label: '收款银行2',
+    editType: 'select',
+    api: '/base/api/bank/page', // 接口地址
+    valueKey: 'bankBizId', // 选项 value 字段名
+    labelKey: 'bankName', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    width: 150,
+    requestParams: { pageNo: 1, pageSize: 20 }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'queryContent'
+    // debounceWait: 300
+  },
+  {
+    prop: 'accountEndNo2',
+    label: '账户尾号2',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 150
+  },
+  {
+    editType: 'select',
+    prop: 'currency2',
+    label: '币种2',
+    width: 150,
+    dictType: 'bx_currency_type'
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+  {
+    editType: 'input',
+    prop: 'amount2',
+    label: '发放金额2',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'exchangeRate2',
+    label: '汇率2',
+    inputType: 'decimal',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'remark2',
+    label: '备注2',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 180
+  }
+])
+//单个薪资单的表格配置
+const bankTableColumns = ref([
+  {
+    prop: 'bank',
+    label: '收款银行',
+    editType: 'select',
+    api: '/base/api/bank/page', // 接口地址
+    valueKey: 'bankBizId', // 选项 value 字段名
+    labelKey: 'bankName', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    requestParams: { pageNo: 1, pageSize: 20 }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'queryContent'
+    // debounceWait: 300
+  },
+  {
+    prop: 'accountEndNo',
+    label: '账户尾号',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 150
+  },
+  {
+    editType: 'select',
+    prop: 'currency',
+    label: '币种',
+    dictType: 'bx_currency_type',
+    width: 150
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+  {
+    editType: 'input',
+    prop: 'amount',
+    label: '发放金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'exchangeRate',
+    label: '汇率',
+    inputType: 'decimal',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 180
+  }
+])
+//单个薪资单的表单配置
+const personSaleryFormConfig = ref([
+  {
+    prop: 'brokerBizId',
+    label: '姓名',
+    type: 'select',
+    api: '/csf/api/salary/broker/list', // 接口地址 这个是get请求，目前表格是post请求，所以需要在完善一下表格的请求方式以及请求参数
+    method: 'get', // ← 指定请求方式为 GET
+    valueKey: 'brokerBizId', // 选项 value 字段名
+    labelKey: 'broker', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    requestParams: { name: '' }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'name',
+    onChangeExtraFields: {
+      brokerName: 'broker', // 将选项原始对象的 broker 字段赋值给行数据的 brokerName
+      monthList: 'monthList' // 存储月份列表，供月份列使用
+    },
+    rules: [{ required: true, message: '姓名必填', trigger: 'blur' }]
+    // debounceWait: 300
+  },
+  {
+    type: 'select',
+    prop: 'month',
+    label: '薪资月份',
+    // 动态选项，依赖行数据中的 monthList
+    options: row => {
+      const list = row.monthList || []
+      return list.map(m => ({ value: m, label: m })) // 格式：{ value, label }
+    },
+    rules: [{ required: true, message: '薪资月份必填', trigger: 'blur' }]
+  },
+  {
+    type: 'input',
+    prop: 'grossAmount',
+    label: '应发金额',
+    inputType: 'decimalNumber'
+    // required: true,
+  },
+  {
+    prop: 'mpfAmount',
+    label: 'MPF事项',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入MPF事项'
+  },
+  {
+    type: 'input',
+    prop: 'otherAmount',
+    label: '其他调整总金额',
+    inputType: 'decimalNumber'
+    // required: true,
+  },
+  {
+    prop: 'otherRemark',
+    label: '其他调整备注',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入'
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入备注'
+  },
+  {
+    type: 'input',
+    prop: 'paidAmount',
+    label: '实发金额',
+    inputType: 'decimalNumber'
+    // required: true,
+  }
+])
+//单个薪资单的表单配置
+const returnFormConfig = ref([
+  {
+    prop: 'returnRemark',
+    label: '备注',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入备注',
+    span: 12
+  }
+])
+const handleReturn = () => {
+  returnDialogVisible.value = true
+  returnFormModel.value = {}
+}
+const passCheck = async checkType => {
+  let msg = checkType === '1' ? '核对' : '退回'
+  let params = {
+    salaryBizId: selectedRow.value.salaryBizId,
+    status: checkType
+  }
+  if (checkType == '2') {
+    let formData = await returnFormRef.value.validate()
+    params.returnRemark = formData.returnRemark
+  }
+  try {
+    await checkSalaryApi(params)
+    ElMessage.success(`${msg}成功`)
+    if (checkType == '1') {
+      detailDialogVisible.value = false
+    } else if (checkType == '2') {
+      returnDialogVisible.value = false
+    }
+    const searchParams = searchFormRef.value.getFormData()
+    loadTableData(searchParams)
+  } catch (error) {
+    ElMessage.error(`${msg}失败`)
+    if (checkType == '1') {
+      detailDialogVisible.value = true
+    } else if (checkType == '2') {
+      returnDialogVisible.value = true
+    }
+    if (error.message && error.message.includes('Validation')) {
+      ElMessage.error('必填项不能为空')
+    }
+  }
+}
+//==============表格复选框开始===========
+// 选择行变化
+const handleSelectionChange = selection => {
+  selectedRows.value = selection
+  // 更新全局选中状态
+  updateAllSelectedRows()
+}
+// 更新全局选中状态
+const updateAllSelectedRows = () => {
+  // 更新当前页的选中状态
+  tableData.value.forEach(row => {
+    const isSelected = selectedRows.value.some(
+      selectedRow => selectedRow.salaryBizId === row.salaryBizId
+    )
+
+    if (isSelected) {
+      allSelectedRows.value.set(row.salaryBizId, row)
+    } else {
+      allSelectedRows.value.delete(row.salaryBizId)
+    }
+  })
+}
+// 设置当前页的选中状态
+const setCurrentPageSelection = () => {
+  if (!tableRef.value) return
+
+  // 清除当前页的选择
+  // tableRef.value.clearSelection()
+
+  // 设置当前页应该选中的行
+  tableData.value.forEach(row => {
+    if (allSelectedRows.value.has(row.salaryBizId)) {
+      tableRef.value.toggleRowSelection(row, true)
+    }
+  })
+}
+// 清空所有选择
+const clearAllSelection = () => {
+  allSelectedRows.value.clear()
+  selectedRows.value = []
+  if (tableRef.value) {
+    tableRef.value.clearSelection()
+  }
+}
+//==============表格复选框结束===========
+const addSalaryRecord = () => {
+  apiSalaryBatchAddDTOList.value.push({
+    multipleId: Date.now() + Math.random() // 或使用 uuid
+  })
+}
+const addSalaryRemittanceRecord = () => {
+  salaryRemittanceDTOList.value.push({
+    signleId: Date.now() + Math.random() // 或使用 uuid
+  })
+}
+const handleSalarySelectChange = async ({ prop, value, col, rowIndex }) => {
+  const currentRow = apiSalaryBatchAddDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+
+  //计算应发金额
+  if (prop === 'month' || prop === 'brokerBizId') {
+    if (currentRow.brokerBizId && currentRow.month) {
+      try {
+        let params = {
+          brokerBizId: currentRow.brokerBizId,
+          month: currentRow.month
+        }
+        const res = await grossAmountApi(params)
+        updatedRow.grossAmount = res.data
+        updatedRow.mpfAmount = 0
+        updatedRow.otherAmount = 0
+        updatedRow.paidAmount = res.data
+        needUpdate = true
+      } catch (error) {
+        console.log('应发金额计算失败', error)
+        ElMessage.error('应发金额计算失败')
+      }
+    }
+  }
+  if (prop === 'currency1' || prop === 'currency2') {
+    if (value) {
+      try {
+        let params = {
+          fromCurrency: value,
+          toCurrency: 'HKD'
+        }
+        const res = await getExchangeRate(params)
+        if (prop === 'currency1') {
+          updatedRow.exchangeRate1 = res.data
+        } else if (prop === 'currency2') {
+          updatedRow.exchangeRate2 = res.data
+        }
+        needUpdate = true
+      } catch (error) {
+        console.log('汇率计算失败', error)
+        ElMessage.error('汇率计算失败')
+      }
+    }
+  }
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...apiSalaryBatchAddDTOList.value]
+    newData[rowIndex] = updatedRow
+    apiSalaryBatchAddDTOList.value = newData
+  }
+}
+const handleSplitCellChange = async ({ row, col, newValue, oldValue, rowIndex, prop }) => {
+  console.log('单元格改变', row, col, newValue, oldValue, rowIndex, prop)
+
+  const currentRow = apiSalaryBatchAddDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+  //计算实发金额
+  if (prop === 'grossAmount' || prop === 'mpfAmount' || prop === 'otherAmount') {
+    if (currentRow.grossAmount && currentRow.mpfAmount && currentRow.otherAmount) {
+      try {
+        let params = {
+          grossAmount: currentRow.grossAmount,
+          mpfAmount: currentRow.mpfAmount,
+          otherAmount: currentRow.otherAmount
+        }
+        const res = await calculatePaidAmount(params)
+        updatedRow.paidAmount = res.data
+        needUpdate = true
+      } catch (error) {
+        console.log('实发金额计算失败', error)
+        ElMessage.error('实发金额计算失败')
+      }
+    }
+  }
+  // 如果用户手动修改了 hkdAmount，不做反向联动（符合需求）
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...apiSalaryBatchAddDTOList.value]
+    newData[rowIndex] = updatedRow
+    apiSalaryBatchAddDTOList.value = newData
+  }
+}
+
+// 弹窗表单重置
+const resetAddReceivablesForm = () => {
+  // addRecordRef.value.resetForm()
+}
+
+const handleConfirmAddSalary = async () => {
+  // 调用组件的校验方法
+  const isValid = await editTableRef.value.validateAndShow()
+  if (isValid) {
+    try {
+      let params = {
+        apiSalaryBatchAddDTOList: apiSalaryBatchAddDTOList.value
+      }
+      const res = await batchAddSalary(params)
+      multipAddSalaryDialog.value = false
+      ElMessage.success('批量添加薪资单成功')
+      const searchParams = searchFormRef.value.getFormData()
+      loadTableData(searchParams)
+    } catch (error) {
+      multipAddSalaryDialog.value = true
+      console.log('批量添加薪资单错误', error)
+      ElMessage.error('批量添加薪资单失败')
+    }
+  }
+}
+// 单个薪资单下拉框改变
+const handleBankSelectChange = async ({ prop, value, col, rowIndex }) => {
+  const currentRow = salaryRemittanceDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+
+  if (prop === 'currency') {
+    if (value) {
+      try {
+        let params = {
+          fromCurrency: value,
+          toCurrency: 'HKD'
+        }
+        const res = await getExchangeRate(params)
+        updatedRow.exchangeRate = res.data
+        needUpdate = true
+      } catch (error) {
+        console.log('汇率计算失败', error)
+        ElMessage.error('汇率计算失败')
+      }
+    }
+  }
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...salaryRemittanceDTOList.value]
+    newData[rowIndex] = updatedRow
+    salaryRemittanceDTOList.value = newData
+  }
+  //计算折合港币总金额，改变币种汇率也会改变，所以等表格更新完在更新折合港币总金额
+  if (prop === 'currency') {
+    if (value) {
+      if (currentRow.amount && currentRow.exchangeRate && currentRow.currency) {
+        try {
+          let calculateTotalAmountDTOList = JSON.parse(
+            JSON.stringify(salaryRemittanceDTOList.value)
+          )
+          let params = calculateTotalAmountDTOList.reduce((acc, item) => {
+            if (item.amount && item.exchangeRate && item.currency) {
+              acc.push({ ...item })
+            }
+            return acc
+          }, [])
+          const res = await calculateTotalAmountApi({ calculateTotalAmountDTOList: params })
+          personSaleryFormModel.value.apiSalaryRemittanceFzDTO.totalAmount = res.data
+        } catch (error) {
+          console.log('折合港币总金额计算失败', error)
+          ElMessage.error('折合港币总金额计算失败')
+        }
+      }
+    }
+  }
+}
+// 单个薪资单输入框改变
+const handleSingleSalaryCellChange = async ({ row, col, newValue, oldValue, rowIndex, prop }) => {
+  // console.log('单元格改变', row, col, newValue, oldValue, rowIndex, prop)
+
+  const currentRow = salaryRemittanceDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+
+  // 如果用户手动修改了 hkdAmount，不做反向联动（符合需求）
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...salaryRemittanceDTOList.value]
+    newData[rowIndex] = updatedRow
+    salaryRemittanceDTOList.value = newData
+  }
+  //计算折合港币总金额，改变币种汇率也会改变，所以等表格更新完在更新折合港币总金额
+  if (prop === 'amount' || prop === 'exchangeRate') {
+    if (currentRow.amount && currentRow.exchangeRate && currentRow.currency) {
+      try {
+        let calculateTotalAmountDTOList = JSON.parse(JSON.stringify(salaryRemittanceDTOList.value))
+        let params = calculateTotalAmountDTOList.reduce((acc, item) => {
+          if (item.amount && item.exchangeRate && item.currency) {
+            acc.push({ ...item })
+          }
+          return acc
+        }, [])
+        const res = await calculateTotalAmountApi({ calculateTotalAmountDTOList: params })
+        personSaleryFormModel.value.apiSalaryRemittanceFzDTO.totalAmount = res.data
+      } catch (error) {
+        console.log('折合港币总金额计算失败', error)
+        ElMessage.error('折合港币总金额计算失败')
+      }
+    }
+  }
+}
+// 单个薪资单的新增，修改
+const handleConfirmSingleSalary = async () => {
+  let formData = await singleSalaryFormRef.value.validate()
+  try {
+    if (formData.apiSalaryRemittanceFzDTO) {
+      formData.apiSalaryRemittanceFzDTO.salaryRemittanceDTOList = JSON.parse(
+        JSON.stringify(salaryRemittanceDTOList.value)
+      )
+    }
+    if (commonDialogType.value == 'edit') {
+      const res = await editSingleSalaryApi(formData)
+      ElMessage.success('薪资单修改成功')
+      detailDialogVisible.value = false
+    } else if (commonDialogType.value == 'add') {
+      const res = await addSingleSalaryApi(formData)
+      ElMessage.success('薪资单新增成功')
+    }
+    detailDialogVisible.value = false
+    const searchParams = searchFormRef.value.getFormData()
+    loadTableData(searchParams)
+  } catch (error) {
+    if (commonDialogType.value == 'edit') {
+      ElMessage.error('薪资单修改失败')
+    } else if (commonDialogType.value == 'add') {
+      ElMessage.error('薪资单新增失败')
+    }
+    detailDialogVisible.value = true
+    if (error.message && error.message.includes('Validation')) {
+      ElMessage.error('必填项不能为空')
+    }
+  }
+}
+
+const searchFormRef = ref(null)
+const searchParams = ref({})
+const searchConfig = ref([
+  {
+    type: 'input',
+    prop: 'brokerName',
+    label: '转介人'
+  },
+  {
+    type: 'month',
+    prop: 'month',
+    label: '薪资年月',
+    startPlaceholder: '开始时间',
+    endPlaceholder: '结束时间'
+  },
+  {
+    type: 'select',
+    prop: 'status',
+    label: '薪资单状态',
+    // multiple: true,
+    dictType: 'salary_status'
+  }
+])
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const pageTotal = ref(0)
+const loading = ref(false)
+
+// 动态生成操作菜单项（根据行数据）
+const getOperateItems = row => {
+  const items = []
+
+  // 条件：isPart == 1 时不显示分期出账（使用宽松相等，兼容字符串 '1'）
+  // if (row.type == 1) {
+  //   items.push({ label: '设置状态', value: 'setStatus' })
+  //   items.push({ label: '更新数据', value: 'updateData' })
+  // }
+
+  // 始终显示的菜单项（保持原始顺序）
+  items.push({ label: '预览并核对', value: 'preview' })
+  items.push({ label: '退回修改', value: 'retreat' })
+  // items.push({ label: '取消薪资单', value: 'salaryCancel' })
+
+  return items
+}
+const handleFormInputChange = async (prop, value, item) => {
+  console.log('表单输入框改变', prop, value, item)
+  await nextTick()
+  //计算实发金额
+  if (prop === 'grossAmount' || prop === 'mpfAmount' || prop === 'otherAmount') {
+    if (
+      personSaleryFormModel.value.grossAmount &&
+      personSaleryFormModel.value.mpfAmount &&
+      personSaleryFormModel.value.otherAmount
+    ) {
+      try {
+        let params = {
+          grossAmount: personSaleryFormModel.value.grossAmount,
+          mpfAmount: personSaleryFormModel.value.mpfAmount,
+          otherAmount: personSaleryFormModel.value.otherAmount
+        }
+        const res = await calculatePaidAmount(params)
+        personSaleryFormModel.value.paidAmount = res.data
+      } catch (error) {
+        console.log('实发金额计算失败', error)
+        ElMessage.error('实发金额计算失败')
+      }
+    }
+  }
+}
+const handleFormSelectChange = async (prop, value, item) => {
+  console.log('表单选中项改变', prop, value, item)
+  await nextTick()
+  //计算应发金额
+  if (prop === 'month' || prop === 'brokerBizId') {
+    if (personSaleryFormModel.value.brokerBizId && personSaleryFormModel.value.month) {
+      try {
+        let params = {
+          brokerBizId: personSaleryFormModel.value.brokerBizId,
+          month: personSaleryFormModel.value.month
+        }
+        const res = await grossAmountApi(params)
+        personSaleryFormModel.value.grossAmount = res.data
+        personSaleryFormModel.value.mpfAmount = 0
+        personSaleryFormModel.value.otherAmount = 0
+        personSaleryFormModel.value.paidAmount = res.data
+      } catch (error) {
+        console.log('应发金额计算失败', error)
+        ElMessage.error('应发金额计算失败')
+      }
+    }
+  }
+}
+//设置单个薪资单的表单编辑状态
+const setSignleSalaryFormStatus = () => {
+  personSaleryFormConfig.value = personSaleryFormConfig.value.map(item => {
+    if (commonDialogType.value == 'preview') {
+      item.disabled = true
+    }
+    return item
+  })
+  bankTableColumns.value = bankTableColumns.value.map(item => {
+    if (commonDialogType.value == 'preview') {
+      item.disabled = true
+    }
+    return item
+  })
+}
+const handleSingleAdd = () => {
+  commonDialogTit.value = '增加薪资单'
+  commonDialogType.value = 'add'
+  personSaleryFormModel.value = { apiSalaryRemittanceFzDTO: {} }
+  salaryRemittanceDTOList.value = []
+  setSignleSalaryFormStatus()
+  detailDialogVisible.value = true
+}
+const handleSelect = (e, row) => {
+  console.log('选中行:', e, row)
+  selectedRow.value = row
+  if (e === 'preview') {
+    commonDialogTit.value = '预览并核对'
+    commonDialogType.value = 'preview'
+    detailDialogVisible.value = true
+    setSignleSalaryFormStatus()
+    // updateSalary(row)
+  } else if (e === 'retreat') {
+    handleReturn()
+  }
+}
+
+const handleMultipDelete = async row => {
+  try {
+    // 弹出确认框
+    await ElMessageBox.confirm('确定要删除该记录吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    // 用户点击确定 → 执行删除逻辑
+    const index = apiSalaryBatchAddDTOList.value.findIndex(
+      item => item.multipleId == row.multipleId
+    )
+    if (index !== -1) {
+      apiSalaryBatchAddDTOList.value.splice(index, 1)
+      ElMessage.success('删除成功')
+    }
+  } catch {
+    // 用户取消或关闭弹窗，不做任何操作
+    console.log('取消删除')
+  }
+}
+const handleBankDelete = async row => {
+  try {
+    // 弹出确认框
+    await ElMessageBox.confirm('确定要删除该记录吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    if (row.salaryRemittanceBizId) {
+      await delSalaryApi(row.salaryRemittanceBizId)
+    }
+
+    // 用户点击确定 → 执行删除逻辑
+    const index = salaryRemittanceDTOList.value.findIndex(item => item.signleId == row.signleId)
+    if (index !== -1) {
+      salaryRemittanceDTOList.value.splice(index, 1)
+      ElMessage.success('删除成功')
+    }
+  } catch {
+    // 用户取消或关闭弹窗，不做任何操作
+    console.log('取消删除')
+  }
+}
+const selectedRow = ref(null)
+
+// 表格数据
+const tableData = ref([])
+
+// 按钮事件处理
+const handlePush = async () => {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要推送的记录')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确认完成 ${selectedRows.value.length} 条记录的推送操作吗？`,
+      '提示',
+      { type: 'warning' }
+    )
+    console.log(selectedRows.value)
+    const arr = selectedRows.value.map(item => item.salaryBizId).join(',')
+
+    await pushSalaryApi({ salaryBizId: arr })
+    const params = searchFormRef.value.getFormData()
+    loadTableData(params)
+    ElMessage.success('推送操作成功')
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('推送操作失败')
+    }
+  }
+}
+
+const handleImport = () => ElMessage.info('点击导入按钮')
+
+const handleExport = async () => {
+  ElMessage.info('导出待开发')
+  return
+  // 获取搜索参数
+  const params = searchFormRef.value?.getFormData() || {}
+  const response = await exportReceivedFortune(params)
+  // 文件名设置为应收款导出_yyyy-MM-dd hh:mm:ss.xlsx,不需要-，用字符串
+  const fileName = `应收款导出_${new Date().toLocaleString().replace(/\//g, '').replace(/:/g, '').replace(/\s/g, '')}.xlsx`
+  await safeDownload(response, fileName, 'application/vnd.ms-excel;charset=utf-8')
+}
+
+const handleReset = () => {
+  // 重置搜索表单
+  searchFormRef.value.resetForm()
+  searchParams.value = {}
+  clearAllSelection()
+  console.log('表单已重置')
+  loadTableData()
+}
+
+const handleQuery = () => {
+  currentPage.value = 1
+  const params = searchFormRef.value.getFormData()
+  loadTableData(params)
+}
+const visibleDefaultButtons = ref(['add', 'export', 'reset', 'query'])
+// 按钮配置
+const operationBtnList = ref([
+  { key: 'add', direction: 'left', label: '确认推送', type: 'warning', click: handlePush },
+  // { key: 'import', direction: 'left', click: handleImport },
+  { key: 'export', direction: 'right', click: handleExport },
+  { key: 'reset', direction: 'right', click: handleReset },
+  { key: 'query', direction: 'right', click: handleQuery }
+])
+
+// 分页事件
+const handleSizeChange = val => {
+  pageSize.value = val
+  const params = searchFormRef.value.getFormData()
+  loadTableData(params)
+}
+
+const handleCurrentChange = val => {
+  currentPage.value = val
+  const params = searchFormRef.value.getFormData()
+  loadTableData(params)
+}
+
+// 加载表格数据
+const loadTableData = async searchParams => {
+  loading.value = true
+  try {
+    const params = {
+      ...searchParams,
+      pageNo: currentPage.value,
+      pageSize: pageSize.value
+    }
+    const response = await electronicSalaryListApi(params)
+    tableData.value = response.data.records || []
+    pageTotal.value = response.data.total || 0
+    pageSize.value = response.data.size || 50
+    // 数据加载完成后，设置当前页的选中状态
+    nextTick(() => {
+      setCurrentPageSelection()
+    })
+  } catch (error) {
+    console.error('加载数据失败:', error)
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+// 获取入账状态,字典值转化方法
+onMounted(async () => {
+  try {
+    await loadDicts(['salary_status'])
+    // getStatics()
+    loadTableData()
+  } catch (error) {
+    console.error('字典加载失败', error)
+  } finally {
+    loading.value = false
+  }
+})
+// 格式化函数（每次渲染都会调用，所以能拿到最新字典）
+const formatStatus = (row, column) => {
+  return getDictLabel('salary_status', row.status) // 实时查缓存
+}
+const detailDialogVisible = ref(false)
+const electronicSalaryTableColumns = ref([
+  {
+    prop: 'status',
+    label: '薪资单状态',
+    sortable: true,
+    width: '120',
+    formatter: row => formatStatus(row) || '-'
+  },
+  {
+    prop: 'brokerName',
+    label: '姓名',
+    sortable: true,
+    width: '120',
+    formatter: row => row.brokerName || '-'
+  },
+  {
+    prop: 'month',
+    label: '薪资月份',
+    sortable: true,
+    width: '120',
+    formatter: row => row.month || '-'
+  },
+  {
+    prop: 'paidAmount',
+    label: '实发金额',
+    sortable: true,
+    width: '120',
+    formatter: row => formatCurrency(row.paidAmount || 0)
+  },
+  {
+    prop: 'grossAmount',
+    label: '应发合计',
+    sortable: true,
+    width: '120',
+    formatter: row => formatCurrency(row.grossAmount || 0)
+  },
+  {
+    prop: 'totalDeductions',
+    label: '扣款合计',
+    sortable: true,
+    width: '120',
+    formatter: row => formatCurrency(row.totalDeductions || 0)
+  },
+  {
+    prop: 'otherRemark',
+    label: '其他调整备注',
+    sortable: true,
+    width: '150',
+    formatter: row => row.otherRemark || '-'
+  },
+
+  {
+    prop: 'creatorName',
+    label: '备注',
+    sortable: true,
+    width: '150',
+    formatter: row => row.creatorName || '-'
+  },
+  {
+    prop: 'creatorName',
+    label: '制作人',
+    sortable: true,
+    width: '120',
+    formatter: row => row.creatorName || '-'
+  },
+  {
+    prop: 'createTime',
+    label: '制作时间',
+    sortable: true,
+    width: '180',
+    formatter: row => row.createTime || '-'
+  }
+])
+const updateSalary = async row => {
+  try {
+    const response = await updateSalaryDetail(row.salaryBizId)
+    personSaleryFormModel.value = response.data
+    if (personSaleryFormModel.value.apiSalaryRemittanceFzDTO) {
+      salaryRemittanceDTOList.value =
+        personSaleryFormModel.value.apiSalaryRemittanceFzDTO.salaryRemittanceDTOList.map(item => {
+          return {
+            ...item,
+            signleId: Date.now() + Math.random()
+          }
+        })
+    }
+    detailDialogVisible.value = true
+  } catch (error) {
+    console.error('获取薪资单详情失败:', error)
+    ElMessage.error('获取薪资单详情失败')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* 使用 :deep 穿透 scoped 样式，保证对 el-table__row 生效 */
+:deep(.estimated-row) {
+  background-color: #f0f9ff; /* 浅蓝色，可根据需要修改 */
+}
+.btnBox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

src/views/payslip/wordReferenceSalary.vue

+<template>
+  <div>
+    <CommonPage
+      :operationBtnList="operationBtnList"
+      :visibleDefaultButtons="visibleDefaultButtons"
+      :showSearchForm="true"
+      :show-pagination="true"
+      :total="pageTotal"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+      <!-- 搜索区域 -->
+      <template #searchForm>
+        <SearchForm ref="searchFormRef" :config="searchConfig" />
+      </template>
+
+      <!-- 列表区域 -->
+      <template #table>
+        <!-- 制作薪资单管理列表 -->
+        <el-table
+          :data="tableData"
+          height="400"
+          border
+          highlight-current-row
+          style="width: 100%"
+          v-loading="loading"
+          ref="tableRef"
+          row-key="salaryBizId"
+          :reserve-selection="true"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column
+            v-for="(column, index) in workSalaryTableColumns"
+            :key="index"
+            :fixed="column.fixed"
+            :prop="column.prop"
+            :label="column.label"
+            :width="column.width"
+            :sortable="column.sortable"
+            :formatter="column.formatter"
+          />
+          <el-table-column fixed="right" label="操作" min-width="120">
+            <template #default="{ row }">
+              <el-popover placement="right" :width="200" trigger="click">
+                <template #reference>
+                  <el-icon>
+                    <MoreFilled />
+                  </el-icon>
+                </template>
+                <el-menu @select="handleSelect($event, row)" popper-class="custom-menu">
+                  <el-menu-item
+                    :index="item.value"
+                    v-for="item in getOperateItems(row)"
+                    :key="item.value"
+                    >{{ item.label }}</el-menu-item
+                  >
+                </el-menu>
+              </el-popover>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </CommonPage>
+    <!-- 新增，修改，查看薪资单 -->
+    <CommonDialog
+      :dialogTitle="commonDialogTit"
+      dialogWidth="80%"
+      :openDialog="detailDialogVisible"
+      :showAction="commonDialogType == 'view' ? false : true"
+      :showClose="true"
+      @close="detailDialogVisible = false"
+      @confirm="handleConfirmSingleSalary"
+    >
+      <SearchForm
+        ref="singleSalaryFormRef"
+        :config="personSaleryFormConfig"
+        v-model="personSaleryFormModel"
+        @selectChange="handleFormSelectChange"
+        @inputChange="handleFormInputChange"
+      />
+      <div class="statistics-container" v-if="personSaleryFormModel.apiSalaryRemittanceFzDTO">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
+            <el-statistic
+              :value="personSaleryFormModel.apiSalaryRemittanceFzDTO.totalAmount"
+              :formatter="value => formatCurrency(value)"
+            >
+              <template #title>
+                <div style="display: inline-flex; align-items: center">折合港币合计</div>
+              </template>
+            </el-statistic>
+          </el-col>
+        </el-row>
+      </div>
+      <div>
+        <editTable
+          ref="bankTableRef"
+          :showAdd="commonDialogType == 'view' ? false : true"
+          :showOperation="commonDialogType == 'view' ? false : true"
+          addBtnTxt="添加打款账户"
+          v-model:table-data="salaryRemittanceDTOList"
+          :columns="bankTableColumns"
+          row-id-key="signleId"
+          @delete="handleBankDelete"
+          @add="addSalaryRemittanceRecord"
+          @selectChange="handleBankSelectChange"
+          @cell-change="handleSingleSalaryCellChange"
+        />
+      </div>
+    </CommonDialog>
+    <!-- '批量制作薪资单 -->
+    <CommonDialog
+      dialogTitle="批量制作薪资单"
+      dialogWidth="95%"
+      :openDialog="multipAddSalaryDialog"
+      @close="((multipAddSalaryDialog = false), resetAddReceivablesForm())"
+      @confirm="handleConfirmAddSalary"
+    >
+      <editTable
+        ref="editTableRef"
+        addBtnTxt="添加薪资单"
+        v-model:table-data="apiSalaryBatchAddDTOList"
+        :columns="salaryTableColumns"
+        row-id-key="multipleId"
+        show-operation
+        @delete="handleMultipDelete"
+        @add="addSalaryRecord"
+        @cell-change="handleSplitCellChange"
+        @selectChange="handleSalarySelectChange"
+      />
+    </CommonDialog>
+    <!-- 取消薪资单 -->
+    <CommonDialog
+      dialogTitle="取消薪资单"
+      dialogWidth="80%"
+      :openDialog="cancelDialogVisible"
+      :showAction="true"
+      :showClose="true"
+      @close="cancelDialogVisible = false"
+      @confirm="handleConfirmCancel"
+    >
+      <SearchForm ref="cancelFormRef" :config="cancelFormConfig" v-model="cancelFormModel" />
+    </CommonDialog>
+  </div>
+</template>
+
+<script setup name="WordReferenceSalary">
+import CommonPage from '@/components/commonPage'
+import CommonDialog from '@/components/commonDialog'
+import { ref, reactive, onMounted, computed, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { MoreFilled } from '@element-plus/icons-vue'
+import { exportReceivedFortune } from '@/api/financial/commission'
+import {
+  getSalaryList,
+  batchAddSalary,
+  calculatePaidAmount,
+  getExchangeRate,
+  grossAmountApi,
+  updateSalaryDetail,
+  calculateTotalAmountApi,
+  editSingleSalaryApi,
+  addSingleSalaryApi,
+  cancelSalaryApi,
+  delSalaryApi,
+  submitCheckApi
+} from '@/api/salary'
+import SearchForm from '@/components/SearchForm/SearchForm.vue'
+import { loadDicts, getDictLabel } from '@/utils/useDict'
+import { safeDownload } from '@/utils/safeDownload'
+import { formatCurrency } from '@/utils/number'
+import editTable from '@/components/Table/editTable.vue'
+// 添加表格引用
+const tableRef = ref()
+// 存储所有选中的行数据（用于跨页保持选择）
+const allSelectedRows = ref(new Map())
+const selectedRows = ref([])
+const multipAddSalaryDialog = ref(false)
+const addRecordRef = ref(null)
+const apiSalaryBatchAddDTOList = ref([{}]) //批量新增薪资单
+const salaryRemittanceDTOList = ref([{}]) //银行数据
+const editTableRef = ref(null)
+const bankTableRef = ref(null)
+const singleSalaryFormRef = ref(null)
+const personSaleryFormModel = ref({ apiSalaryRemittanceFzDTO: {} })
+const commonDialogTit = ref('')
+const commonDialogType = ref('')
+const cancelDialogVisible = ref(false)
+const cancelFormRef = ref(null)
+const cancelFormModel = ref({})
+
+// 批量薪资单表格配置
+const salaryTableColumns = ref([
+  {
+    prop: 'brokerBizId',
+    label: '姓名',
+    editType: 'select',
+    api: '/csf/api/salary/broker/list', // 接口地址 这个是get请求，目前表格是post请求，所以需要在完善一下表格的请求方式以及请求参数
+    method: 'get', // ← 指定请求方式为 GET
+    valueKey: 'brokerBizId', // 选项 value 字段名
+    labelKey: 'broker', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    width: 150,
+    requestParams: { name: '' }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'name',
+    onChangeExtraFields: {
+      brokerName: 'broker', // 将选项原始对象的 broker 字段赋值给行数据的 brokerName
+      monthList: 'monthList' // 存储月份列表，供月份列使用
+    }
+    // debounceWait: 300
+  },
+  {
+    editType: 'select',
+    prop: 'month',
+    label: '薪资月份',
+    // options: [],//根据选择得转介人数据动态获取
+    // placeholder: monthList.value.length > 0 ? '请选择月份' : '请先选择转介人',
+    width: 150,
+    // 动态选项，依赖行数据中的 monthList
+    options: row => {
+      const list = row.monthList || []
+      return list.map(m => ({ value: m, label: m })) // 格式：{ value, label }
+    }
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+
+  {
+    prop: 'splitRatio',
+    label: '内部编号',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入内部编号',
+    width: 150
+  },
+
+  {
+    editType: 'input',
+    prop: 'grossAmount',
+    label: '应发金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'mpfAmount',
+    label: 'MPF事项',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入MPF事项',
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'otherAmount',
+    label: '其他调整总金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'otherRemark',
+    label: '备注',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入备注',
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'paidAmount',
+    label: '实发金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'bank1',
+    label: '收款银行1',
+    editType: 'select',
+    api: '/base/api/bank/page', // 接口地址
+    valueKey: 'bankBizId', // 选项 value 字段名
+    labelKey: 'bankName', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    width: 150,
+    requestParams: { pageNo: 1, pageSize: 20 }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'queryContent'
+    // debounceWait: 300
+  },
+  {
+    prop: 'accountEndNo1',
+    label: '账户尾号1',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 150
+  },
+  {
+    editType: 'select',
+    prop: 'currency1',
+    label: '币种1',
+    dictType: 'bx_currency_type',
+    width: 150
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+  {
+    editType: 'input',
+    prop: 'amount1',
+    label: '发放金额1',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'exchangeRate1',
+    label: '汇率1',
+    inputType: 'decimal',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'remark1',
+    label: '备注1',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 180
+  },
+  {
+    prop: 'bank2',
+    label: '收款银行2',
+    editType: 'select',
+    api: '/base/api/bank/page', // 接口地址
+    valueKey: 'bankBizId', // 选项 value 字段名
+    labelKey: 'bankName', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    width: 150,
+    requestParams: { pageNo: 1, pageSize: 20 }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'queryContent'
+    // debounceWait: 300
+  },
+  {
+    prop: 'accountEndNo2',
+    label: '账户尾号2',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 150
+  },
+  {
+    editType: 'select',
+    prop: 'currency2',
+    label: '币种2',
+    width: 150,
+    dictType: 'bx_currency_type'
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+  {
+    editType: 'input',
+    prop: 'amount2',
+    label: '发放金额2',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'exchangeRate2',
+    label: '汇率2',
+    inputType: 'decimal',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'remark2',
+    label: '备注2',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 180
+  }
+])
+//单个薪资单的表格配置
+const bankTableColumns = ref([
+  {
+    prop: 'bank',
+    label: '收款银行',
+    editType: 'select',
+    api: '/base/api/bank/page', // 接口地址
+    valueKey: 'bankBizId', // 选项 value 字段名
+    labelKey: 'bankName', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    requestParams: { pageNo: 1, pageSize: 20 }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'queryContent'
+    // debounceWait: 300
+  },
+  {
+    prop: 'accountEndNo',
+    label: '账户尾号',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 150
+  },
+  {
+    editType: 'select',
+    prop: 'currency',
+    label: '币种',
+    dictType: 'bx_currency_type',
+    width: 150
+    // rules: [{ required: true, message: '必填项', trigger: 'blur' }]
+  },
+  {
+    editType: 'input',
+    prop: 'amount',
+    label: '发放金额',
+    inputType: 'decimalNumber',
+    // required: true,
+    width: 150
+  },
+  {
+    editType: 'input',
+    prop: 'exchangeRate',
+    label: '汇率',
+    inputType: 'decimal',
+    // required: true,
+    width: 150
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    editType: 'input',
+    // required: true,
+    placeholder: '请输入',
+    width: 180
+  }
+])
+//单个薪资单的表单配置
+const personSaleryFormConfig = ref([
+  {
+    prop: 'brokerBizId',
+    label: '姓名',
+    type: 'select',
+    api: '/csf/api/salary/broker/list', // 接口地址 这个是get请求，目前表格是post请求，所以需要在完善一下表格的请求方式以及请求参数
+    method: 'get', // ← 指定请求方式为 GET
+    valueKey: 'brokerBizId', // 选项 value 字段名
+    labelKey: 'broker', // 选项 label 字段名
+    preload: true, // 初始化时自动加载
+    requestParams: { name: '' }, // 固定参数
+    // 远程搜索配置
+    filterable: true,
+    keywordField: 'name',
+    onChangeExtraFields: {
+      brokerName: 'broker', // 将选项原始对象的 broker 字段赋值给行数据的 brokerName
+      monthList: 'monthList' // 存储月份列表，供月份列使用
+    },
+    rules: [{ required: true, message: '姓名必填', trigger: 'blur' }]
+    // debounceWait: 300
+  },
+  {
+    type: 'select',
+    prop: 'month',
+    label: '薪资月份',
+    // 动态选项，依赖行数据中的 monthList
+    options: row => {
+      const list = row.monthList || []
+      return list.map(m => ({ value: m, label: m })) // 格式：{ value, label }
+    },
+    rules: [{ required: true, message: '薪资月份必填', trigger: 'blur' }]
+  },
+
+  {
+    prop: 'splitRatio',
+    label: '内部编号',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入内部编号'
+  },
+
+  {
+    type: 'input',
+    prop: 'grossAmount',
+    label: '应发金额',
+    inputType: 'decimalNumber'
+    // required: true,
+  },
+  {
+    prop: 'mpfAmount',
+    label: 'MPF事项',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入MPF事项'
+  },
+  {
+    type: 'input',
+    prop: 'otherAmount',
+    label: '其他调整总金额',
+    inputType: 'decimalNumber'
+    // required: true,
+  },
+  {
+    prop: 'otherRemark',
+    label: '其他调整备注',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入'
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入备注'
+  },
+  {
+    type: 'input',
+    prop: 'paidAmount',
+    label: '实发金额',
+    inputType: 'decimalNumber'
+    // required: true,
+  }
+])
+//单个薪资单的表单配置
+const cancelFormConfig = ref([
+  {
+    prop: 'cancelRemark',
+    label: '备注',
+    type: 'input',
+    // required: true,
+    placeholder: '请输入备注',
+    span: 12
+  }
+])
+// 提交核对
+const handleSubmitCheck = async () => {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要核对的记录')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确认完成 ${selectedRows.value.length} 条记录的核对操作吗？`,
+      '提示',
+      { type: 'warning' }
+    )
+    console.log(selectedRows.value)
+    const arr = selectedRows.value.map(item => item.salaryBizId).join(',')
+
+    // 调用出账API
+    await submitCheckApi({ salaryBizId: arr })
+    const params = searchFormRef.value.getFormData()
+    loadTableData(params)
+    ElMessage.success('核对操作成功')
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('核对操作失败')
+    }
+  }
+}
+//==============表格复选框开始===========
+// 选择行变化
+const handleSelectionChange = selection => {
+  selectedRows.value = selection
+  // 更新全局选中状态
+  updateAllSelectedRows()
+}
+// 更新全局选中状态
+const updateAllSelectedRows = () => {
+  // 更新当前页的选中状态
+  tableData.value.forEach(row => {
+    const isSelected = selectedRows.value.some(
+      selectedRow => selectedRow.salaryBizId === row.salaryBizId
+    )
+
+    if (isSelected) {
+      allSelectedRows.value.set(row.salaryBizId, row)
+    } else {
+      allSelectedRows.value.delete(row.salaryBizId)
+    }
+  })
+}
+// 设置当前页的选中状态
+const setCurrentPageSelection = () => {
+  if (!tableRef.value) return
+
+  // 清除当前页的选择
+  // tableRef.value.clearSelection()
+
+  // 设置当前页应该选中的行
+  tableData.value.forEach(row => {
+    if (allSelectedRows.value.has(row.salaryBizId)) {
+      tableRef.value.toggleRowSelection(row, true)
+    }
+  })
+}
+// 清空所有选择
+const clearAllSelection = () => {
+  allSelectedRows.value.clear()
+  selectedRows.value = []
+  if (tableRef.value) {
+    tableRef.value.clearSelection()
+  }
+}
+//==============表格复选框结束===========
+const addSalaryRecord = () => {
+  apiSalaryBatchAddDTOList.value.push({
+    multipleId: Date.now() + Math.random() // 或使用 uuid
+  })
+}
+const addSalaryRemittanceRecord = () => {
+  salaryRemittanceDTOList.value.push({
+    signleId: Date.now() + Math.random() // 或使用 uuid
+  })
+}
+const handleSalarySelectChange = async ({ prop, value, col, rowIndex }) => {
+  const currentRow = apiSalaryBatchAddDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+
+  //计算应发金额
+  if (prop === 'month' || prop === 'brokerBizId') {
+    if (currentRow.brokerBizId && currentRow.month) {
+      try {
+        let params = {
+          brokerBizId: currentRow.brokerBizId,
+          month: currentRow.month
+        }
+        const res = await grossAmountApi(params)
+        updatedRow.grossAmount = res.data
+        updatedRow.mpfAmount = 0
+        updatedRow.otherAmount = 0
+        updatedRow.paidAmount = res.data
+        needUpdate = true
+      } catch (error) {
+        console.log('应发金额计算失败', error)
+        ElMessage.error('应发金额计算失败')
+      }
+    }
+  }
+  if (prop === 'currency1' || prop === 'currency2') {
+    if (value) {
+      try {
+        let params = {
+          fromCurrency: value,
+          toCurrency: 'HKD'
+        }
+        const res = await getExchangeRate(params)
+        if (prop === 'currency1') {
+          updatedRow.exchangeRate1 = res.data
+        } else if (prop === 'currency2') {
+          updatedRow.exchangeRate2 = res.data
+        }
+        needUpdate = true
+      } catch (error) {
+        console.log('汇率计算失败', error)
+        ElMessage.error('汇率计算失败')
+      }
+    }
+  }
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...apiSalaryBatchAddDTOList.value]
+    newData[rowIndex] = updatedRow
+    apiSalaryBatchAddDTOList.value = newData
+  }
+}
+const handleSplitCellChange = async ({ row, col, newValue, oldValue, rowIndex, prop }) => {
+  console.log('单元格改变', row, col, newValue, oldValue, rowIndex, prop)
+
+  const currentRow = apiSalaryBatchAddDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+  //计算实发金额
+  if (prop === 'grossAmount' || prop === 'mpfAmount' || prop === 'otherAmount') {
+    if (currentRow.grossAmount && currentRow.mpfAmount && currentRow.otherAmount) {
+      try {
+        let params = {
+          grossAmount: currentRow.grossAmount,
+          mpfAmount: currentRow.mpfAmount,
+          otherAmount: currentRow.otherAmount
+        }
+        const res = await calculatePaidAmount(params)
+        updatedRow.paidAmount = res.data
+        needUpdate = true
+      } catch (error) {
+        console.log('实发金额计算失败', error)
+        ElMessage.error('实发金额计算失败')
+      }
+    }
+  }
+  // 如果用户手动修改了 hkdAmount，不做反向联动（符合需求）
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...apiSalaryBatchAddDTOList.value]
+    newData[rowIndex] = updatedRow
+    apiSalaryBatchAddDTOList.value = newData
+  }
+}
+
+// 弹窗表单重置
+const resetAddReceivablesForm = () => {
+  // addRecordRef.value.resetForm()
+}
+
+const handleConfirmAddSalary = async () => {
+  // 调用组件的校验方法
+  const isValid = await editTableRef.value.validateAndShow()
+  if (isValid) {
+    try {
+      let params = {
+        apiSalaryBatchAddDTOList: apiSalaryBatchAddDTOList.value
+      }
+      const res = await batchAddSalary(params)
+      multipAddSalaryDialog.value = false
+      ElMessage.success('批量添加薪资单成功')
+      const searchParams = searchFormRef.value.getFormData()
+      loadTableData(searchParams)
+    } catch (error) {
+      multipAddSalaryDialog.value = true
+      console.log('批量添加薪资单错误', error)
+      ElMessage.error('批量添加薪资单失败')
+    }
+  }
+}
+// 单个薪资单下拉框改变
+const handleBankSelectChange = async ({ prop, value, col, rowIndex }) => {
+  const currentRow = salaryRemittanceDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+
+  if (prop === 'currency') {
+    if (value) {
+      try {
+        let params = {
+          fromCurrency: value,
+          toCurrency: 'HKD'
+        }
+        const res = await getExchangeRate(params)
+        updatedRow.exchangeRate = res.data
+        needUpdate = true
+      } catch (error) {
+        console.log('汇率计算失败', error)
+        ElMessage.error('汇率计算失败')
+      }
+    }
+  }
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...salaryRemittanceDTOList.value]
+    newData[rowIndex] = updatedRow
+    salaryRemittanceDTOList.value = newData
+  }
+  //计算折合港币总金额，改变币种汇率也会改变，所以等表格更新完在更新折合港币总金额
+  if (prop === 'currency') {
+    if (value) {
+      if (currentRow.amount && currentRow.exchangeRate && currentRow.currency) {
+        try {
+          let calculateTotalAmountDTOList = JSON.parse(
+            JSON.stringify(salaryRemittanceDTOList.value)
+          )
+          let params = calculateTotalAmountDTOList.reduce((acc, item) => {
+            if (item.amount && item.exchangeRate && item.currency) {
+              acc.push({ ...item })
+            }
+            return acc
+          }, [])
+          const res = await calculateTotalAmountApi({ calculateTotalAmountDTOList: params })
+          personSaleryFormModel.value.apiSalaryRemittanceFzDTO.totalAmount = res.data
+        } catch (error) {
+          console.log('折合港币总金额计算失败', error)
+          ElMessage.error('折合港币总金额计算失败')
+        }
+      }
+    }
+  }
+}
+// 单个薪资单输入框改变
+const handleSingleSalaryCellChange = async ({ row, col, newValue, oldValue, rowIndex, prop }) => {
+  // console.log('单元格改变', row, col, newValue, oldValue, rowIndex, prop)
+
+  const currentRow = salaryRemittanceDTOList.value[rowIndex]
+  if (!currentRow) return
+  let needUpdate = false
+  const updatedRow = { ...currentRow }
+
+  // 如果用户手动修改了 hkdAmount，不做反向联动（符合需求）
+  if (needUpdate) {
+    // 更新表格数据（整体替换，触发视图更新）
+    const newData = [...salaryRemittanceDTOList.value]
+    newData[rowIndex] = updatedRow
+    salaryRemittanceDTOList.value = newData
+  }
+  //计算折合港币总金额，改变币种汇率也会改变，所以等表格更新完在更新折合港币总金额
+  if (prop === 'amount' || prop === 'exchangeRate') {
+    if (currentRow.amount && currentRow.exchangeRate && currentRow.currency) {
+      try {
+        let calculateTotalAmountDTOList = JSON.parse(JSON.stringify(salaryRemittanceDTOList.value))
+        let params = calculateTotalAmountDTOList.reduce((acc, item) => {
+          if (item.amount && item.exchangeRate && item.currency) {
+            acc.push({ ...item })
+          }
+          return acc
+        }, [])
+        const res = await calculateTotalAmountApi({ calculateTotalAmountDTOList: params })
+        personSaleryFormModel.value.apiSalaryRemittanceFzDTO.totalAmount = res.data
+      } catch (error) {
+        console.log('折合港币总金额计算失败', error)
+        ElMessage.error('折合港币总金额计算失败')
+      }
+    }
+  }
+}
+// 单个薪资单的新增，修改
+const handleConfirmSingleSalary = async () => {
+  let formData = await singleSalaryFormRef.value.validate()
+  try {
+    if (formData.apiSalaryRemittanceFzDTO) {
+      formData.apiSalaryRemittanceFzDTO.salaryRemittanceDTOList = JSON.parse(
+        JSON.stringify(salaryRemittanceDTOList.value)
+      )
+    }
+    if (commonDialogType.value == 'edit') {
+      const res = await editSingleSalaryApi(formData)
+      ElMessage.success('薪资单修改成功')
+      detailDialogVisible.value = false
+    } else if (commonDialogType.value == 'add') {
+      const res = await addSingleSalaryApi(formData)
+      ElMessage.success('薪资单新增成功')
+    }
+    detailDialogVisible.value = false
+    const searchParams = searchFormRef.value.getFormData()
+    loadTableData(searchParams)
+  } catch (error) {
+    if (commonDialogType.value == 'edit') {
+      ElMessage.error('薪资单修改失败')
+    } else if (commonDialogType.value == 'add') {
+      ElMessage.error('薪资单新增失败')
+    }
+    detailDialogVisible.value = true
+    if (error.message && error.message.includes('Validation')) {
+      ElMessage.error('必填项不能为空')
+    }
+  }
+}
+
+const searchFormRef = ref(null)
+const searchParams = ref({})
+const searchConfig = ref([
+  {
+    type: 'input',
+    prop: 'brokerName',
+    label: '转介人'
+  },
+  {
+    type: 'month',
+    prop: 'month',
+    label: '薪资年月',
+    startPlaceholder: '开始时间',
+    endPlaceholder: '结束时间'
+  },
+  {
+    type: 'select',
+    prop: 'status',
+    label: '薪资单状态',
+    // multiple: true,
+    dictType: 'salary_status'
+  }
+])
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const pageTotal = ref(0)
+const loading = ref(false)
+
+// 动态生成操作菜单项（根据行数据）
+const getOperateItems = row => {
+  const items = []
+
+  // 条件：isPart == 1 时不显示分期出账（使用宽松相等，兼容字符串 '1'）
+  // if (row.type == 1) {
+  //   items.push({ label: '设置状态', value: 'setStatus' })
+  //   items.push({ label: '更新数据', value: 'updateData' })
+  // }
+
+  // 始终显示的菜单项（保持原始顺序）
+  items.push({ label: '修改薪资单', value: 'salaryEdit' })
+  items.push({ label: '查看薪资单', value: 'salaryView' })
+  items.push({ label: '取消薪资单', value: 'salaryCancel' })
+
+  return items
+}
+const handleFormInputChange = async (prop, value, item) => {
+  console.log('表单输入框改变', prop, value, item)
+  await nextTick()
+  //计算实发金额
+  if (prop === 'grossAmount' || prop === 'mpfAmount' || prop === 'otherAmount') {
+    if (
+      personSaleryFormModel.value.grossAmount &&
+      personSaleryFormModel.value.mpfAmount &&
+      personSaleryFormModel.value.otherAmount
+    ) {
+      try {
+        let params = {
+          grossAmount: personSaleryFormModel.value.grossAmount,
+          mpfAmount: personSaleryFormModel.value.mpfAmount,
+          otherAmount: personSaleryFormModel.value.otherAmount
+        }
+        const res = await calculatePaidAmount(params)
+        personSaleryFormModel.value.paidAmount = res.data
+      } catch (error) {
+        console.log('实发金额计算失败', error)
+        ElMessage.error('实发金额计算失败')
+      }
+    }
+  }
+}
+const handleFormSelectChange = async (prop, value, item) => {
+  console.log('表单选中项改变', prop, value, item)
+  await nextTick()
+  //计算应发金额
+  if (prop === 'month' || prop === 'brokerBizId') {
+    if (personSaleryFormModel.value.brokerBizId && personSaleryFormModel.value.month) {
+      try {
+        let params = {
+          brokerBizId: personSaleryFormModel.value.brokerBizId,
+          month: personSaleryFormModel.value.month
+        }
+        const res = await grossAmountApi(params)
+        personSaleryFormModel.value.grossAmount = res.data
+        personSaleryFormModel.value.mpfAmount = 0
+        personSaleryFormModel.value.otherAmount = 0
+        personSaleryFormModel.value.paidAmount = res.data
+      } catch (error) {
+        console.log('应发金额计算失败', error)
+        ElMessage.error('应发金额计算失败')
+      }
+    }
+  }
+}
+//设置单个薪资单的表单编辑状态
+const setSignleSalaryFormStatus = () => {
+  personSaleryFormConfig.value = personSaleryFormConfig.value.map(item => {
+    if (commonDialogType.value == 'add' || commonDialogType.value == 'edit') {
+      item.disabled = false
+    } else {
+      item.disabled = true
+    }
+    return item
+  })
+  bankTableColumns.value = bankTableColumns.value.map(item => {
+    if (commonDialogType.value == 'add' || commonDialogType.value == 'edit') {
+      item.disabled = false
+    } else {
+      item.disabled = true
+    }
+    return item
+  })
+}
+const handleSingleAdd = () => {
+  commonDialogTit.value = '增加薪资单'
+  commonDialogType.value = 'add'
+  personSaleryFormModel.value = { apiSalaryRemittanceFzDTO: {} }
+  salaryRemittanceDTOList.value = []
+  setSignleSalaryFormStatus()
+  detailDialogVisible.value = true
+}
+const handleSelect = (e, row) => {
+  console.log('选中行:', e, row)
+  selectedRow.value = row
+  if (e === 'salaryEdit') {
+    commonDialogTit.value = '修改薪资单'
+    commonDialogType.value = 'edit'
+    setSignleSalaryFormStatus()
+    updateSalary(row)
+  } else if (e === 'salaryView') {
+    commonDialogTit.value = '查看薪资单'
+    commonDialogType.value = 'view'
+    setSignleSalaryFormStatus()
+    updateSalary(row)
+  } else if (e === 'salaryCancel') {
+    cancelDialogVisible.value = true
+    cancelFormModel.value = JSON.parse(JSON.stringify(row))
+  }
+}
+const handleConfirmCancel = async () => {
+  let formData = await cancelFormRef.value.validate()
+  try {
+    await cancelSalaryApi(formData)
+    ElMessage.success('薪资单取消成功')
+    cancelDialogVisible.value = false
+    const searchParams = searchFormRef.value.getFormData()
+    loadTableData(searchParams)
+  } catch (error) {
+    ElMessage.error('取消薪资单失败')
+    cancelDialogVisible.value = true
+    if (error.message && error.message.includes('Validation')) {
+      ElMessage.error('必填项不能为空')
+    }
+  }
+}
+
+const handleMultipDelete = async row => {
+  try {
+    // 弹出确认框
+    await ElMessageBox.confirm('确定要删除该记录吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    // 用户点击确定 → 执行删除逻辑
+    const index = apiSalaryBatchAddDTOList.value.findIndex(
+      item => item.multipleId == row.multipleId
+    )
+    if (index !== -1) {
+      apiSalaryBatchAddDTOList.value.splice(index, 1)
+      ElMessage.success('删除成功')
+    }
+  } catch {
+    // 用户取消或关闭弹窗，不做任何操作
+    console.log('取消删除')
+  }
+}
+const handleBankDelete = async row => {
+  try {
+    // 弹出确认框
+    await ElMessageBox.confirm('确定要删除该记录吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    if (row.salaryRemittanceBizId) {
+      await delSalaryApi(row.salaryRemittanceBizId)
+    }
+
+    // 用户点击确定 → 执行删除逻辑
+    const index = salaryRemittanceDTOList.value.findIndex(item => item.signleId == row.signleId)
+    if (index !== -1) {
+      salaryRemittanceDTOList.value.splice(index, 1)
+      ElMessage.success('删除成功')
+    }
+  } catch {
+    // 用户取消或关闭弹窗，不做任何操作
+    console.log('取消删除')
+  }
+}
+const selectedRow = ref(null)
+
+// 表格数据
+const tableData = ref([])
+
+// 按钮事件处理
+const handleAdd = () => {
+  multipAddSalaryDialog.value = true
+  if (addRecordRef.value) {
+    addRecordRef.value.resetForm()
+  }
+  apiSalaryBatchAddDTOList.value = [{}]
+}
+
+const handleExport = async () => {
+  ElMessage.info('导出待开发')
+  return
+  // 获取搜索参数
+  const params = searchFormRef.value?.getFormData() || {}
+  const response = await exportReceivedFortune(params)
+  // 文件名设置为应收款导出_yyyy-MM-dd hh:mm:ss.xlsx,不需要-，用字符串
+  const fileName = `应收款导出_${new Date().toLocaleString().replace(/\//g, '').replace(/:/g, '').replace(/\s/g, '')}.xlsx`
+  await safeDownload(response, fileName, 'application/vnd.ms-excel;charset=utf-8')
+}
+
+const handleReset = () => {
+  // 重置搜索表单
+  searchFormRef.value.resetForm()
+  searchParams.value = {}
+  clearAllSelection()
+  console.log('表单已重置')
+  loadTableData()
+}
+
+const handleQuery = () => {
+  currentPage.value = 1
+  const params = searchFormRef.value.getFormData()
+  loadTableData(params)
+}
+
+const visibleDefaultButtons = ref(['add', 'export', 'reset', 'query'])
+// 按钮配置
+const operationBtnList = ref([
+  { key: 'add', direction: 'left', label: '批量制作薪资单', click: handleAdd },
+  { key: 'singleAdd', direction: 'left', label: '制作薪资单', click: handleSingleAdd },
+  { key: 'check', direction: 'left', label: '提交核对', type: 'warning', click: handleSubmitCheck },
+  // { key: 'import', direction: 'left', click: handleImport },
+  { key: 'export', direction: 'right', click: handleExport },
+  { key: 'reset', direction: 'right', click: handleReset },
+  { key: 'query', direction: 'right', click: handleQuery }
+])
+
+// 分页事件
+const handleSizeChange = val => {
+  pageSize.value = val
+  const params = searchFormRef.value.getFormData()
+  loadTableData(params)
+}
+
+const handleCurrentChange = val => {
+  currentPage.value = val
+  const params = searchFormRef.value.getFormData()
+  loadTableData(params)
+}
+
+// 加载表格数据
+const loadTableData = async searchParams => {
+  loading.value = true
+  try {
+    const params = {
+      ...searchParams,
+      pageNo: currentPage.value,
+      pageSize: pageSize.value
+    }
+    const response = await getSalaryList(params)
+    tableData.value = response.data.records || []
+    pageTotal.value = response.data.total || 0
+    pageSize.value = response.data.size || 50
+    // 数据加载完成后，设置当前页的选中状态
+    nextTick(() => {
+      setCurrentPageSelection()
+    })
+  } catch (error) {
+    console.error('加载数据失败:', error)
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+// 获取入账状态,字典值转化方法
+onMounted(async () => {
+  try {
+    await loadDicts(['salary_status'])
+
+    loadTableData()
+  } catch (error) {
+    console.error('字典加载失败', error)
+  } finally {
+    loading.value = false
+  }
+})
+// 格式化函数（每次渲染都会调用，所以能拿到最新字典）
+const formatStatus = (row, column) => {
+  return getDictLabel('salary_status', row.status) // 实时查缓存
+}
+const detailDialogVisible = ref(false)
+const workSalaryTableColumns = ref([
+  {
+    prop: 'salaryNo',
+    label: '发放编号',
+    sortable: true,
+    width: '150',
+    fixed: 'left',
+    formatter: row => row.salaryNo || '-'
+  },
+  {
+    prop: 'salaryBizId',
+    label: '业务编号',
+    sortable: true,
+    width: '220',
+    formatter: row => row.salaryBizId || '-'
+  },
+  {
+    prop: 'brokerName',
+    label: '转介人',
+    sortable: true,
+    width: '100',
+    formatter: row => row.brokerName || '-'
+  },
+  {
+    prop: 'internalNumber',
+    label: '内部编号',
+    sortable: true,
+    width: '150',
+    formatter: row => row.internalNumber || '-'
+  },
+  {
+    prop: 'teamName',
+    label: '所属团队',
+    sortable: true,
+    width: '130',
+    formatter: row => row.teamName || '-'
+  },
+  {
+    prop: 'paidAmount',
+    label: '发放金额',
+    sortable: true,
+    width: '150',
+    formatter: row => formatCurrency(row.paidAmount || 0)
+  },
+  {
+    prop: 'currencyList',
+    label: '发放币种',
+    sortable: true,
+    width: '150',
+    formatter: row => row.currencyList || '-'
+  },
+  {
+    prop: 'month',
+    label: '出账月（实）',
+    sortable: true,
+    width: '120',
+    formatter: row => row.month || '-'
+  },
+  {
+    prop: 'status',
+    label: '薪资单状态',
+    sortable: true,
+    width: '120',
+    formatter: row => formatStatus(row) || '-'
+  },
+  {
+    prop: 'creatorName',
+    label: '制作人',
+    sortable: true,
+    width: '120',
+    formatter: row => row.creatorName || '-'
+  },
+  {
+    prop: 'createTime',
+    label: '制作时间',
+    sortable: true,
+    width: '180',
+    formatter: row => row.createTime || '-'
+  }
+])
+const updateSalary = async row => {
+  try {
+    const response = await updateSalaryDetail(row.salaryBizId)
+    personSaleryFormModel.value = response.data
+    if (personSaleryFormModel.value.apiSalaryRemittanceFzDTO) {
+      salaryRemittanceDTOList.value =
+        personSaleryFormModel.value.apiSalaryRemittanceFzDTO.salaryRemittanceDTOList.map(item => {
+          return {
+            ...item,
+            signleId: Date.now() + Math.random()
+          }
+        })
+    }
+    detailDialogVisible.value = true
+  } catch (error) {
+    console.error('获取薪资单详情失败:', error)
+    ElMessage.error('获取薪资单详情失败')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* 使用 :deep 穿透 scoped 样式，保证对 el-table__row 生效 */
+:deep(.estimated-row) {
+  background-color: #f0f9ff; /* 浅蓝色，可根据需要修改 */
+}
+</style>