增加薪资发放记录界面，封装通过表单组件增加月份选择区间

src/api/financial/commission.js

@@ -430,3 +430,22 @@ export function receivableReport(data) {
     data: data
   })
 }
+
+// 薪资拆分应发信息汇总列表
+export function salarySummary(data) {
+  return request({
+    url:'csf/api/salarySplit/summary/page',
+     method: 'post',
+    data: data
+  })
+}
+
+// 薪资拆分应发信息汇总列表下载---待提供
+export function exportPayRoll(data) {
+  return request({
+    url:'csf/api/salarySplit/summary/page',
+     method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
\ No newline at end of file

src/components/SearchForm/SearchForm.vue

@@ -82,14 +82,28 @@
             v-model="localModel[item.prop]"
             type="daterange"
             range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            :start-placeholder="item.startPlaceholder || '开始日期'"
+            :end-placeholder="item.endPlaceholder || '结束日期'"
             :value-format="item.valueFormat || 'YYYY-MM-DD'"
             :disabled="item.disabled"
             :disabled-date="getDisabledDateFn(item)"
             style="width: 100%"
             @change="val => handleModelChange(val, item)"
           />
+          <!-- Monthrange (新增) -->
+          <el-date-picker
+            v-else-if="item.type === 'monthrange'"
+            v-model="localModel[item.prop]"
+            type="monthrange"
+            range-separator="至"
+            :start-placeholder="item.startPlaceholder || '开始月份'"
+            :end-placeholder="item.endPlaceholder || '结束月份'"
+            :value-format="item.valueFormat || 'YYYY-MM'"
+            :disabled="item.disabled"
+            :disabled-date="getDisabledDateFn(item)"
+            style="width: 100%"
+            @change="val => handleModelChange(val, item)"
+          />
 
           <!-- Checkbox Group -->
           <el-checkbox-group
@@ -359,7 +373,7 @@ watch(
       // 优先用父传值，否则用默认值
       if (props.modelValue?.[key] !== undefined) {
         initialModel[key] = props.modelValue[key]
-      } else if (item.multiple || ['checkbox-group', 'daterange'].includes(item.type)) {
+      } else if (item.multiple || ['checkbox-group', 'daterange','monthrange'].includes(item.type)) {
         initialModel[key] = item.defaultValue ?? []
       } else {
         initialModel[key] = item.defaultValue ?? ''
@@ -396,7 +410,7 @@ function syncModelFromProps(newModelValue, newConfig) {
     const key = item.prop
     if (newModelValue.hasOwnProperty(key)) {
       synced[key] = newModelValue[key]
-    } else if (item.multiple || ['checkbox-group', 'daterange'].includes(item.type)) {
+    } else if (item.multiple || ['checkbox-group', 'daterange','monthrange'].includes(item.type)) {
       synced[key] = item.defaultValue ?? []
     } else {
       synced[key] = item.defaultValue ?? ''
@@ -571,7 +585,7 @@ onMounted(async () => {
     if (localModel.value[key] == null) {
       if (item.multiple) {
         initialData[key] = item.defaultValue ?? []
-      } else if (['checkbox-group', 'daterange'].includes(item.type)) {
+      } else if (['checkbox-group', 'daterange','monthrange'].includes(item.type)) {
         initialData[key] = item.defaultValue ?? []
       } else {
         initialData[key] = item.defaultValue ?? ''
@@ -885,7 +899,7 @@ defineExpose({
     const resetData = {}
     internalConfig.value.forEach(item => {
       const key = item.prop
-      if (['checkbox-group', 'daterange'].includes(item.type) || item.multiple) {
+      if (['checkbox-group', 'daterange','monthrange'].includes(item.type) || item.multiple) {
         resetData[key] = item.defaultValue ?? []
       } else if (item.type === 'upload') {
         resetData[key] = item.defaultValue ?? [] // upload 也是数组

src/views/financialCenter/payroll.vue

+<template>
+  <div class='app-container'>
+    <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" v-loading="loading" ref="tableRef"
+          row-key="salarySplitNo" :reserve-selection="true" :border="true">
+                <el-table-column v-for="(column, index) in tableColumns" :key="index" :fixed="column.fixed"
+                        :prop="column.prop" :label="column.label" :width="column.width" :sortable="column.sortable"
+                        :formatter="column.formatter" />
+        </el-table>
+      </template>
+    </CommonPage>
+
+   
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import CommonPage from '@/components/commonPage'
+import {salarySummary,exportPayRoll} from '@/api/financial/commission'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import SearchForm from '@/components/SearchForm/SearchForm.vue'
+const searchFormRef = ref(null)
+const searchParams = ref({})
+const searchConfig = ref([
+  {
+    type: 'select',
+    prop: 'brokerBizIdList',
+    label: '转介人',
+    api: '/insurance/base/api/userSaleExpand/page',
+    keywordField: 'realName',
+    requestParams: { pageNo: 1, pageSize: 20 },
+    placeholder: '输入转介人名称搜索',
+    debounceWait: 500, // 自定义防抖时间
+    valueKey: 'clientUserBizId',
+    labelKey: 'realName',
+    multiple: true,
+    transform: (res) => {
+      return res?.data.records || []
+    }
+  },
+  {
+    type: 'monthrange',
+    prop: 'payoutMonth',
+    label: '出账年月（实）',
+    startPlaceholder: '开始年月',
+    endPlaceholder: '结束年月'
+  },
+  {
+    type: 'input',
+    prop: 'billOrg',
+    label: '出账机构',
+  }
+])
+
+const tableColumns = ref([
+    { prop: 'salarySplitNo', label: '发放编号', sortable: true, width: '150',fixed:'left'},
+    { prop: 'brokerName', label: '转介人', sortable: true, width: '150',fixed:'left'},
+    { prop: 'internalNumber', label: '内部编号', sortable: true, width: '150'},
+    { prop: 'team', label: '所属团队', sortable: true, width: '150'},
+    { prop: 'fromAmount', label: '原币种金额', sortable: true, width: '150'},
+    { prop: 'currency', label: '原币种', sortable: true, width: '150'},
+    { prop: 'exchangeRate', label: '汇率（原币种->目标币种)', sortable: true, width: '150'},
+    { prop: 'toAmount', label: '目标金额', sortable: true, width: '150'},
+    { prop: 'toCurrency', label: '目标币种', sortable: true, width: '150'},
+    { prop: 'fortuneAccountMonth', label: '出账月（实）', sortable: true, width: '150'},
+    { prop: 'billOrg', label: '出账机构', sortable: true, width: '150'},
+    { prop: '"hkdAmount', label: '本期总出账金额(原币种)', sortable: true, width: '150'},
+    { prop: 'fortuneAccountBizId', label: '出账记录业务id', sortable: true, width: '150'},
+
+])
+// 添加表格引用
+const tableRef = ref()
+
+// 表格数据
+const tableData = ref([])
+const loading = ref(false)
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const pageTotal = ref(0)
+
+
+// 分页事件
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getList()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  getList()
+}
+
+
+// 获取数据列表
+const getList = async (searchParams = {}) => {
+  loading.value = true
+  try {
+    const params = {
+      ...searchParams,
+      startMonth:searchParams.payoutMonth[0],
+      endMonth:searchParams.payoutMonth[1],
+      payoutMonth:undefined,
+      pageNo: currentPage.value,
+      pageSize: pageSize.value
+    }
+    const response = await salarySummary(params)
+
+    if (response.data.page) {
+      tableData.value = response.data.page.records
+      pageTotal.value = response.data.page.total
+      loading.value = false
+    }
+    // 数据加载完成后，设置当前页的选中状态
+    nextTick(() => {
+      setCurrentPageSelection()
+    })
+  } catch (error) {
+    loading.value = false
+    // ElMessage.error('获取数据失败')
+  }
+}
+getList()
+
+// 查询
+const handleQuery = () => {
+  const params = searchFormRef.value.getFormData()
+  console.log('父组件发起查询:', params)
+  getList(params)
+}
+
+// 重置查询
+const handleReset = () => {
+  // 重置搜索表单
+  searchFormRef.value.resetForm()
+  searchParams.value = {}
+  console.log('表单已重置')
+  getList(searchParams.value)
+}
+
+const handleExport = async () => {
+  // 获取搜索参数
+  const params = searchFormRef.value?.getFormData() || {}
+  const response = await exportPayRoll(params)
+  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 visibleDefaultButtons = ref(['export','reset', 'query'])
+// 按钮配置
+const operationBtnList = ref([
+  {
+    key: 'reset',
+    direction: 'right',
+    click: handleReset
+  },
+  {
+    key: 'query',
+    direction: 'right',
+    click: handleQuery
+  },
+   {
+    key: 'export',
+    direction: 'right',
+    click: handleExport
+  }
+])
+
+</script>
+
+<style scoped></style>
\ No newline at end of file