报表功能测试完成

wuxw
1 parent 59833eeb
Showing 16 changed files with 358 additions and 106 deletions
src/api/report/printCommonReportTableApi.js
src/components/report/commonReportTable.vue
src/components/report/reportFeeDetailRoom.vue
src/components/report/reportProficientCarFee.vue
src/components/report/reportProficientRoomFee.vue
src/components/store/AdminLoginProperty.vue
src/i18n/reportI18n.js
src/router/index.js
src/router/reportRouter.js
src/views/report/feeRemindList.vue
src/views/report/printCommonReportTableLang.js
src/views/report/printCommonReportTableList.vue
src/views/report/reportFeeDetailList.vue
src/views/report/reportOweFeeDetailList.vue
src/views/report/reportPayFeeDetailList.vue
src/views/report/reportRepairList.vue
+import request from '@/utils/request'
+
+/**
+ * 获取通用报表数据
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function getPrintCommonReportTableData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/report/api/printCommonReportTable.getPrintCommonReportTableData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 保存通用报表数据
+ * @param {Object} data 报表数据
+ * @returns {Promise} Promise对象
+ */
+export function savePrintCommonReportTableData(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/report/api/printCommonReportTable.savePrintCommonReportTableData',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 打印通用报表
+ * @param {Object} data 打印数据
+ * @returns {Promise} Promise对象
+ */
+export function printCommonReportTable(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/report/api/printCommonReportTable.printCommonReportTable',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
@@ -2,7 +2,7 @@
   <div class="common-report-table">
     <div v-for="(item, index) in commonReportTableInfo.components" :key="index">
       <el-card v-if="item.conditions && item.conditions.length > 0" class="query-card">
-        <div slot="header" class="clearfix">
+        <div slot="header" class="flex justify-between">
           <span>{{ $t('commonReportTable.queryConditions') }}</span>
         </div>
         <el-row :gutter="20">
@@ -24,7 +24,7 @@
       </el-card>
       <el-card class="table-card">
-        <div slot="header" class="clearfix">
+        <div slot="header" class="flex justify-between">
           <span>{{ item.componentName }}</span>
           <div style="float: right;">
             <el-button type="primary" size="small" @click="_exportReportTableMethod(item)">
@@ -220,8 +220,8 @@ export default {
       }
     },
     _printReportTableMethod(data) {
-      this.$store.commit('SET_PRINT_DATA', data)
-      window.open('/print.html#/pages/property/printCommonReportTable')
+      localStorage.setItem('printCommonReportTableData', JSON.stringify(data))
+      window.open('/#/pages/property/printCommonReportTable')
     }
   }
 }
@@ -2,7 +2,7 @@
   <div class="report-fee-detail-room">
     <el-row :gutter="20">
       <el-col :span="4">
-        <el-card class="floor-tree">
+        <div class="floor-tree">
           <el-scrollbar style="height: 650px;">
             <el-menu>
               <el-menu-item @click="swatchFloor('')" :class="{ 'is-active': reportFeeDetailRoomInfo.floorId === '' }">
@@ -15,7 +15,7 @@
               </el-menu-item>
             </el-menu>
           </el-scrollbar>
-        </el-card>
+        </div>
       </el-col>
       <el-col :span="20">
         <div class="operation-bar">
 <template>
   <div class="report-proficient-car-fee">
     <div class="table-container">
-      <el-table :data="reportProficientCarFeeInfo.fees" border style="width: 100%" height="500">
+      <el-table :data="reportProficientCarFeeInfo.fees" border style="width: 100%" >
         <!-- 固定列：基本信息 -->
         <el-table-column prop="ownerName" :label="$t('reportProficientCarFee.name')" align="center" fixed="left" width="120">
         </el-table-column>
 <template>
   <div class="report-proficient-room-fee">
     <div class="table-container">
-      <el-table :data="reportProficientRoomFeeInfo.fees" border style="width: 100%" height="500">
+      <el-table :data="reportProficientRoomFeeInfo.fees" border style="width: 100%" >
         <!-- 固定列：基本信息 -->
         <el-table-column prop="ownerName" :label="$t('reportProficientRoomFee.name')" align="center" fixed="left" width="120">
         </el-table-column>
 <template>
-  <el-dialog :title="$t('propertyCompanyManage.passwordConfirm')" :visible.sync="visible" width="50%">
+  <el-dialog :title="$t('propertyCompanyManage.passwordConfirm')" :visible.sync="visible" width="30%">
     <el-form>
       <el-form-item :label="$t('propertyCompanyManage.password')" required>
         <el-input v-model="password" type="password" :placeholder="$t('propertyCompanyManage.enterCurrentPassword')" />
@@ -19,6 +19,7 @@ import { messages as reportOwnerPayFeeMessages } from &#39;../views/report/reportOwn
 import { messages as reportHuaningMessages } from '../views/report/reportHuaningLang'
 import { messages as reportPayFeeDepositMessages } from '../views/report/reportPayFeeDepositLang'
 import { messages as commonReportMessages } from '../views/report/commonReportLang'
+import { messages as printCommonReportTableMessages } from '../views/report/printCommonReportTableLang'
 export const messages = {
     en: {
@@ -42,6 +43,7 @@ export const messages = {
         ...reportHuaningMessages.en,
         ...reportPayFeeDepositMessages.en,
         ...commonReportMessages.en,
+        ...printCommonReportTableMessages.en,
     },
     zh: {
         ...reportCustomComponentRelManageMessages.zh,
@@ -63,5 +65,6 @@ export const messages = {
         ...reportHuaningMessages.zh,
         ...reportPayFeeDepositMessages.zh,
         ...commonReportMessages.zh,
+        ...printCommonReportTableMessages.zh,
     }
 }
 \ No newline at end of file
@@ -700,15 +700,20 @@ const routes = [
     component: () => import('@/views/account/printAccountReceiptList.vue')
   },
   {
-    path:'/pages/property/printSmallAccountReceipt',
-    name:'/pages/property/printSmallAccountReceipt',
+    path: '/pages/property/printSmallAccountReceipt',
+    name: '/pages/property/printSmallAccountReceipt',
     component: () => import('@/views/account/printSmallAccountReceiptList.vue')
-    },
-    {
-      path:'/pages/property/printRepairDetail',
-      name:'/pages/property/printRepairDetail',
-      component: () => import('@/views/work/printRepairDetailList.vue')
-      },
+  },
+  {
+    path: '/pages/property/printRepairDetail',
+    name: '/pages/property/printRepairDetail',
+    component: () => import('@/views/work/printRepairDetailList.vue')
+  },
+  {
+    path: '/pages/property/printCommonReportTable',
+    name: '/pages/property/printCommonReportTable',
+    component: () => import('@/views/report/printCommonReportTableList.vue')
+  },
 ]
 const router = new VueRouter({
@@ -69,4 +69,5 @@ export default [
         name: '/pages/property/commonReport',
         component: () => import('@/views/report/commonReportList.vue')
     },
+
 ]
 \ No newline at end of file
@@ -13,8 +13,8 @@
             clearable />
         </el-col>
         <el-col :span="4">
-          <el-input v-model.trim="feeRemindInfo.conditions.ownerName" :placeholder="$t('feeRemind.ownerNamePlaceholder')"
-            clearable />
+          <el-input v-model.trim="feeRemindInfo.conditions.ownerName"
+            :placeholder="$t('feeRemind.ownerNamePlaceholder')" clearable />
         </el-col>
         <el-col :span="4">
           <el-input v-model.trim="feeRemindInfo.conditions.link" :placeholder="$t('feeRemind.linkPlaceholder')"
@@ -48,7 +48,7 @@
     </el-card>
     <el-card class="box-card margin-top">
-      <el-tabs v-model="feeRemindInfo._currentTab" @tab-click="changeTab">
+      <el-tabs v-model="feeRemindInfo._currentTab" @tab-click="changeTab(feeRemindInfo._currentTab)">
         <el-tab-pane :label="$t('feeRemind.prePaymentRemind')" name="reportPrePaymentFee">
           <report-pre-payment-fee v-if="feeRemindInfo._currentTab === 'reportPrePaymentFee'" ref="prePaymentFee" />
         </el-tab-pane>
@@ -99,9 +99,9 @@ export default {
   },
   methods: {
     changeTab(tab) {
-      this.feeRemindInfo._currentTab = tab.name || tab
+      this.feeRemindInfo._currentTab = tab
       setTimeout(() => {
-        if (tab.name === 'reportPrePaymentFee') {
+        if (tab === 'reportPrePaymentFee') {
           this.$refs.prePaymentFee && this.$refs.prePaymentFee.loadData(this.feeRemindInfo.conditions)
         } else {
           this.$refs.deadlineFee && this.$refs.deadlineFee.loadData(this.feeRemindInfo.conditions)
+export const messages = {
+  en: {
+    printCommonReportTable: {
+      print: 'Print',
+      cancel: 'Cancel',
+      componentName: 'Report Name',
+      tableHeader: 'Table Header',
+      footer: 'Footer Information'
+    }
+  },
+  zh: {
+    printCommonReportTable: {
+      print: '打印',
+      cancel: '取消',
+      componentName: '报表名称',
+      tableHeader: '表头',
+      footer: '页脚信息'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="print-common-report-table-container">
+
+      <div class="top-1">
+        <h1 class="text-center">{{ printCommonReportTableInfo.componentName }}</h1>
+      </div>
+
+      <div class="context-1">
+        <table class="custom-table">
+          <thead>
+            <tr>
+              <th v-for="(itemTh, indexTh) in printCommonReportTableInfo.th" :key="indexTh" 
+                  style="color: #000; font-size: 20px; text-align: center; padding: 12px 8px; border: 1px solid #000;">
+                {{ itemTh }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, rowIndex) in printCommonReportTableInfo.data" :key="rowIndex">
+              <td v-for="(itemTh, indexTh) in printCommonReportTableInfo.th" :key="indexTh"
+                  style="color: #000; font-size: 20px; text-align: center; padding: 12px 8px; border: 1px solid #000;">
+                {{ row[itemTh] }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <el-row v-if="printCommonReportTableInfo.footer" class="padding-left">
+          <el-col v-for="(value, key) in printCommonReportTableInfo.footer" :key="key" :span="4">
+            <div>{{ key }}: {{ value }}</div>
+          </el-col>
+        </el-row>
+
+        <div class="text-right" id="print-btn">
+          <el-button type="primary" class="float-right" @click="_printPurchaseApplyDiv">
+            <i class="el-icon-printer"></i>&nbsp;{{ $t('printCommonReportTable.print') }}
+          </el-button>
+          <el-button type="warning" class="float-right" style="margin-right: 20px;" @click="_closePage">
+            {{ $t('printCommonReportTable.cancel') }}
+          </el-button>
+        </div>
+      </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PrintCommonReportTableList',
+  data() {
+    return {
+      printCommonReportTableInfo: {}
+    }
+  },
+  created() {
+    this._initData()
+  },
+  methods: {
+    _initData() {
+      this.printCommonReportTableInfo = JSON.parse(localStorage.getItem('printCommonReportTableData'))
+    },
+    _printPurchaseApplyDiv() {
+      document.getElementById("print-btn").style.display = "none"
+      window.print()
+      window.opener = null
+      window.close()
+    },
+    _closePage() {
+      window.opener = null
+      window.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.print-common-report-table-container {
+  padding: 20px;
+
+  .top-1 {
+    margin-bottom: 20px;
+
+    h1 {
+      color: #000;
+      font-weight: 400;
+    }
+  }
+
+  .context-1 {
+    .custom-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 20px;
+      
+      th, td {
+        border: 1px solid #000;
+        background-color: #fff;
+      }
+      
+      th {
+        background-color: #f5f5f5;
+        font-weight: bold;
+      }
+      
+      tr:nth-child(even) {
+        background-color: #fafafa;
+      }
+      
+      tr:hover {
+        background-color: #f0f0f0;
+      }
+    }
+
+    .padding-left {
+      padding-left: 20px;
+      margin-top: 20px;
+      font-size: 20px;
+      color: #000;
+    }
+
+    .text-right {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
 \ No newline at end of file
@@ -79,7 +79,8 @@
           </report-fee-detail-contract>
         </el-tab-pane>
         <el-tab-pane label="车辆费用明细" name="reportFeeDetailCar">
-          <report-fee-detail-car v-if="reportFeeDetailInfo._currentTab === 'reportFeeDetailCar'" ref="reportFeeDetailCar">
+          <report-fee-detail-car v-if="reportFeeDetailInfo._currentTab === 'reportFeeDetailCar'"
+            ref="reportFeeDetailCar">
           </report-fee-detail-car>
         </el-tab-pane>
       </el-tabs>
@@ -163,8 +164,8 @@ export default {
       this.reportFeeDetailInfo._currentTab = tab.name || tab
       setTimeout(() => {
         this.$refs[tab.name || tab].open(this.reportFeeDetailInfo.conditions)
-      },500)
-      
+      }, 500)
+
     },
     queryMethod() {
       this.changeTab(this.reportFeeDetailInfo._currentTab)
@@ -2,19 +2,7 @@
   <div class="report-owe-fee-detail-container animated fadeInRight">
     <el-row :gutter="20">
       <el-col :span="3">
-        <el-card class="floor-list-card">
-          <ul class="floor-list">
-            <li class="floor-item" @click="swatchFloor('')"
-              :class="{ 'active': reportOweFeeDetailInfo.conditions.floorId === '' }">
-              {{ $t('reportOweFeeDetail.all') }}
-            </li>
-            <li class="floor-item" v-for="(item, index) in reportOweFeeDetailInfo.floors" :key="index"
-              @click="swatchFloor(item.floorId)"
-              :class="{ 'active': reportOweFeeDetailInfo.conditions.floorId === item.floorId }">
-              {{ item.floorName }}
-            </li>
-          </ul>
-        </el-card>
+        <select-community-floor ref="selectCommunityFloor" />
       </el-col>
       <el-col :span="21">
         <el-card>
@@ -22,7 +10,7 @@
             <span>{{ $t('reportOweFeeDetail.searchCondition') }}</span>
           </div>
           <el-form :inline="true" :model="reportOweFeeDetailInfo.conditions" class="search-form text-left">
-            <el-form-item :label="$t('reportOweFeeDetail.feeType')">
+            <el-form-item >
               <el-select v-model="reportOweFeeDetailInfo.conditions.feeTypeCd"
                 :placeholder="$t('reportOweFeeDetail.selectFeeType')" style="width:100%">
                 <el-option v-for="(item, index) in reportOweFeeDetailInfo.feeTypeCds" :key="index" :label="item.name"
@@ -31,25 +19,26 @@
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('reportOweFeeDetail.roomNum')">
+            <el-form-item >
               <el-input v-model="reportOweFeeDetailInfo.conditions.objNameLike"
                 :placeholder="$t('reportOweFeeDetail.inputRoomNum')">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('reportOweFeeDetail.startTime')">
+            <el-form-item >
               <el-date-picker v-model="reportOweFeeDetailInfo.conditions.startTime" type="date"
                 :placeholder="$t('reportOweFeeDetail.selectStartTime')">
               </el-date-picker>
             </el-form-item>
-            <el-form-item :label="$t('reportOweFeeDetail.endTime')">
+            <el-form-item >
               <el-date-picker v-model="reportOweFeeDetailInfo.conditions.endTime" type="date"
                 :placeholder="$t('reportOweFeeDetail.selectEndTime')">
               </el-date-picker>
             </el-form-item>
-            <el-form-item v-if="reportOweFeeDetailInfo.communitys.length > 1" :label="$t('reportOweFeeDetail.community')">
+            <el-form-item v-if="reportOweFeeDetailInfo.communitys.length > 1"
+              >
               <el-select v-model="reportOweFeeDetailInfo.conditions.communityId" @change="_changCommunity"
                 :placeholder="$t('reportOweFeeDetail.selectCommunity')" style="width:100%">
                 <el-option v-for="(item, index) in reportOweFeeDetailInfo.communitys" :key="index" :label="item.name"
@@ -60,12 +49,10 @@
             <el-form-item>
               <el-button type="primary" @click="_queryMethod">{{ $t('reportOweFeeDetail.search') }}</el-button>
-              <el-button @click="_resetMethod" style="margin-left: 10px;">{{ $t('reportOweFeeDetail.reset') }}</el-button>
+              <el-button @click="_resetMethod" style="margin-left: 10px;">{{ $t('reportOweFeeDetail.reset')
+                }}</el-button>
             </el-form-item>
-          </el-form>
-
-          <el-form :inline="true" class="search-form text-left">
-            <el-form-item :label="$t('reportOweFeeDetail.ownerName')">
+            <el-form-item >
               <el-input v-model="reportOweFeeDetailInfo.conditions.ownerNameLike"
                 :placeholder="$t('reportOweFeeDetail.inputOwnerName')">
               </el-input>
@@ -132,7 +119,7 @@
           </div>
           <div class="footer">
-            <div class="footer-left">
+            <div class="text-left table-desc">
               <p>{{ $t('reportOweFeeDetail.feeStartTimeDesc') }}</p>
               <p>{{ $t('reportOweFeeDetail.oweDaysDesc1') }}</p>
               <p>{{ $t('reportOweFeeDetail.oweDaysDesc2') }}</p>
@@ -154,14 +141,19 @@
 <script>
 import { getDict } from '@/api/community/communityApi'
 import { getCommunityId } from '@/api/community/communityApi'
+import SelectCommunityFloor from '@/components/report/selectCommunityFloor'
+
 import { queryOweFeeDetail, exportData } from '@/api/report/reportOweFeeDetailApi'
-import {searchFloors} from '@/api/room/searchFloorApi'
+import { searchFloors } from '@/api/room/searchFloorApi'
 import {
   listMyEnteredCommunitys
 } from '@/api/report/dataReportApi'
 export default {
   name: 'ReportOweFeeDetailList',
+  components: {
+    SelectCommunityFloor
+  },
   data() {
     return {
       loading: false,
@@ -197,6 +189,14 @@ export default {
   },
   created() {
     this.initData()
+    setTimeout(() => {
+      this.$refs.selectCommunityFloor.open({
+        callBack: (floor) => {
+          this.reportOweFeeDetailInfo.conditions.floorId = floor.floorId
+            this._listFees()
+        }
+      })
+    }, 500)
   },
   methods: {
     async initData() {
@@ -369,7 +369,6 @@ export default {
   }
   .search-form {
-    margin-bottom: 20px;
     .el-form-item {
       margin-right: 20px;
@@ -377,9 +376,7 @@ export default {
   }
   .summary {
-    margin: 20px 0;
     padding: 10px;
-    background-color: #f5f7fa;
     border-radius: 4px;
     .summary-item {
@@ -398,7 +395,6 @@ export default {
   .footer {
     display: flex;
     justify-content: space-between;
-    margin-top: 20px;
     .footer-left {
       width: 60%;
@@ -147,11 +147,11 @@
         <el-table-column prop="lateFee" :label="$t('reportPayFeeDetail.table.lateFee')" align="center" />
         <el-table-column prop="builtUpArea" :label="$t('reportPayFeeDetail.table.area')" align="center" />
         <el-table-column prop="psName" :label="$t('reportPayFeeDetail.table.parkingSpace')" align="center" />
-        <el-table-column prop="remark" :label="$t('reportPayFeeDetail.table.remark')" align="center" width="200" />
+        <el-table-column prop="remark" :label="$t('reportPayFeeDetail.table.remark')" align="center" width="100" />
       </el-table>
       <!-- 统计信息 -->
-      <el-row class="summary-row">
+      <el-row class="summary-row text-left">
         <el-col :span="24">
           <el-row>
             <el-col :span="2">{{ $t('reportPayFeeDetail.summary.subtotal') }}</el-col>
@@ -201,7 +201,7 @@
       </el-row>
       <!-- 说明 -->
-      <el-row class="explanation-row">
+      <el-row class="text-left table-desc">
         <el-col :span="18">
           <div>{{ $t('reportPayFeeDetail.explanation.preferential') }}</div>
           <div>{{ $t('reportPayFeeDetail.explanation.deduction') }}</div>
@@ -73,7 +73,7 @@
       </el-col>
     </el-row>
-    <el-row :gutter="20" style="margin-top: 20px;">
+    <el-row :gutter="20" >
       <el-col :span="24">
         <el-card class="box-card">
           <div slot="header" class="flex justify-between">
@@ -91,46 +91,53 @@
             </div>
           </div>
           <div class="card-body">
-            <el-table :data="reportRepairInfo.repairs" border style="width: 100%" v-loading="loading">
-              <el-table-column prop="index" :label="$t('reportRepair.repairId')" align="center" width="80">
-                <template slot-scope="scope">
-                  {{ scope.$index + 1 }}
-                </template>
-              </el-table-column>
-              <el-table-column prop="staffId" :label="$t('reportRepair.staffId')" align="center" />
-              <el-table-column prop="staffName" :label="$t('reportRepair.staffName')" align="center" />
-              <el-table-column prop="dealAmount" :label="$t('reportRepair.dealing')" align="center" />
-              <el-table-column prop="dispatchAmount" :label="$t('reportRepair.dispatch')" align="center" />
-              <el-table-column prop="transferOrderAmount" :label="$t('reportRepair.transfer')" align="center" />
-              <el-table-column prop="chargebackAmount" :label="$t('reportRepair.chargeback')" align="center" />
-              <el-table-column prop="returnAmount" :label="$t('reportRepair.returnVisit')" align="center" />
-              <el-table-column prop="statementAmount" :label="$t('reportRepair.finished')" align="center" />
-              <el-table-column prop="score" :label="$t('reportRepair.score')" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.score || '-' }}
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <el-table :data="[{}]" border style="width: 100%; margin-top: 20px;">
-              <el-table-column :label="$t('reportRepair.statistics')" align="center" width="80"
-                class-name="statistics-cell" />
-              <el-table-column label="---" align="center" class-name="statistics-cell" />
-              <el-table-column label="---" align="center" class-name="statistics-cell" />
-              <el-table-column :label="reportRepairInfo.conditions.dealNumber" align="center"
-                class-name="statistics-cell" />
-              <el-table-column :label="reportRepairInfo.conditions.dispatchNumber" align="center"
-                class-name="statistics-cell" />
-              <el-table-column :label="reportRepairInfo.conditions.transferOrderNumber" align="center"
-                class-name="statistics-cell" />
-              <el-table-column :label="reportRepairInfo.conditions.chargebackNumber" align="center"
-                class-name="statistics-cell" />
-              <el-table-column :label="reportRepairInfo.conditions.returnNumber" align="center"
-                class-name="statistics-cell" />
-              <el-table-column :label="reportRepairInfo.conditions.statementNumber" align="center"
-                class-name="statistics-cell" />
-              <el-table-column label="---" align="center" class-name="statistics-cell" />
-            </el-table>
+            <div class="table-container" v-loading="loading">
+              <table class="custom-table">
+                <thead>
+                  <tr>
+                    <th style="width: 80px; text-align: center; padding: 12px 8px;">{{ $t('reportRepair.repairId') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.staffId') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.staffName') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.dealing') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.dispatch') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.transfer') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.chargeback') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.returnVisit') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.finished') }}</th>
+                    <th style="text-align: center; padding: 12px 8px;">{{ $t('reportRepair.score') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <!-- 数据行 -->
+                  <tr v-for="(item, index) in reportRepairInfo.repairs" :key="index" class="data-row">
+                    <td style="text-align: center; padding: 12px 8px;">{{ index + 1 }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.staffId }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.staffName }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.dealAmount }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.dispatchAmount }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.transferOrderAmount }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.chargebackAmount }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.returnAmount }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.statementAmount }}</td>
+                    <td style="text-align: center; padding: 12px 8px;">{{ item.score || '-' }}</td>
+                  </tr>
+                  
+                  <!-- 统计汇总行 -->
+                  <tr class="statistics-row">
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ $t('reportRepair.statistics') }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">---</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">---</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ reportRepairInfo.conditions.dealNumber }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ reportRepairInfo.conditions.dispatchNumber }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ reportRepairInfo.conditions.transferOrderNumber }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ reportRepairInfo.conditions.chargebackNumber }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ reportRepairInfo.conditions.returnNumber }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">{{ reportRepairInfo.conditions.statementNumber }}</td>
+                    <td style="text-align: center; padding: 12px 8px; font-size: 18px; color: red;">---</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
               :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
@@ -327,17 +334,48 @@ export default {
       justify-content: space-between;
     }
-    .card-body {
-      padding: 20px 0;
-    }
+    
   }
-  .el-table {
-    margin-top: 20px;
+  .table-container {
+   
+    overflow-x: auto;
+  }
-    .statistics-cell {
-      font-size: 18px;
-      color: red;
+  .custom-table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #EBEEF5;
+    
+    th, td {
+      border: 1px solid #EBEEF5;
+      background-color: #fff;
+    }
+    
+    th {
+      background-color: #fafafa;
+      font-weight: 500;
+      color: #606266;
+    }
+    
+    .data-row {
+      &:hover {
+        background-color: #f5f7fa;
+      }
+      
+      &:nth-child(even) {
+        background-color: #fafafa;
+      }
+    }
+    
+    .statistics-row {
+      background-color: #fff !important;
+      
+      td {
+        font-size: 18px;
+        color: red;
+        font-weight: bold;
+      }
     }
   }