优化费用缴费代码

wuxw
1 parent 9d019fa6
Showing 21 changed files with 719 additions and 392 deletions
src/App.vue
src/api/fee/printOweFeeApi.js
src/api/fee/roomCreateFeeAddApi.js
src/components/community/editCommunityArea.vue
src/components/fee/addMeterWater.vue
src/components/fee/addProxyFee.vue
src/components/fee/roomCreateFeeAdd.vue
src/components/fee/simplifyRoomFee.vue
src/components/fee/tempImportRoomFee.vue
src/components/fee/viewMainFee.vue
src/i18n/feeI18n.js
src/router/feeRouter.js
src/utils/moneyUtil.js
src/views/fee/createFeeByComboList.vue
src/views/fee/feeConfigManageList.vue
src/views/fee/owePayFeeOrderList.vue
src/views/fee/printOweFeeLang.js
src/views/fee/printOweFeeList.vue
src/views/fee/printPayFeeBangTaiList.vue
src/views/fee/propertyFeeList.vue
@@ -510,4 +510,14 @@ h5 {
 h3 {
     font-size: 16px;
 }
+
+.el-select{
+  width: 100%;
+}
+.el-date-editor{  
+  width: 100%;
+}
+.el-date-editor.el-input{
+  width: 100%;
+}
 </style> 
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 查询欠费列表
+export function listOweFees(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeApi/listOweFees',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询房间信息
+export function listRoomsWhereFeeSet(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listRoomsWhereFeeSet',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印规范
+export function queryFeePrintSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintSpec/queryFeePrintSpec',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
@@ -8,11 +8,8 @@ export function saveRoomCreateFee(data) {
       data
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
         resolve(res)
-      } else {
-        reject(new Error(res.msg || 'Failed to save room create fee'))
-      }
+
     }).catch(error => {
       reject(error)
     })
@@ -27,11 +24,7 @@ export function listFeeConfigs(params) {
       params
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
         resolve(res)
-      } else {
-        reject(new Error(res.msg || 'Failed to list fee configs'))
-      }
     }).catch(error => {
       reject(error)
     })
 <template>
-  <el-dialog :title="$t('enterCommunity.modifyCommunity')" :visible.sync="visible" width="800px" @close="resetForm">
+  <el-dialog :title="$t('common.edit')" :visible.sync="visible" width="800px" @close="resetForm">
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-form-item :label="$t('enterCommunity.communityName')" prop="name">
         <el-input v-model="form.name" disabled />
@@ -78,8 +78,8 @@ export default {
       })
       this.visible = true
       setTimeout(() => {
-          this.$refs.uploadImage.setImages([community.qrCode])
-        }, 500)
+        this.$refs.uploadImage.setImages([community.qrCode])
+      }, 500)
     },
     handleQRUpdate(photosUrl) {
       this.form.qrCode = photosUrl.length > 0 ? photosUrl[0] : ''
 <template>
-  <el-dialog :title="$t('meterWater.addMeterReading')" :visible.sync="dialogVisible" width="50%" @close="handleClose">
+  <el-dialog :title="$t('meterWater.addMeterReading')" :visible.sync="dialogVisible" width="40%" @close="handleClose">
     <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
       <el-form-item :label="$t('meterWater.feeType')" prop="feeTypeCd">
         <el-select v-model="form.feeTypeCd" :placeholder="$t('meterWater.selectFeeType')" style="width: 100%"
@@ -330,4 +330,14 @@ export default {
   color: #999;
   margin-top: 5px;
 }
+.el-form-item{
+  width: 90%;
+  text-align: left;
+}
+.el-select{
+  width: 100%;
+}
+.el-date-editor{  
+  width: 100%;
+}
 </style>
 \ No newline at end of file
 <template>
-  <el-dialog :title="$t('addProxyFee.title')" :visible.sync="visible" width="70%" :before-close="handleClose">
+  <el-dialog :title="$t('addProxyFee.title')" :visible.sync="visible" width="40%" :before-close="handleClose">
     <el-form ref="form" :model="formData" label-width="120px">
       <el-form-item :label="$t('addProxyFee.feeType')" prop="feeTypeCd">
         <el-select v-model="formData.feeTypeCd" @change="handleFeeTypeChange"
@@ -278,4 +278,11 @@ export default {
   font-size: 12px;
   color: #909399;
 }
+.el-form-item{
+  width: 90%;
+  text-align: left;
+}
+.el-date-editor{  
+  width: 100%;
+}
 </style>
 \ No newline at end of file
 <template>
-  <el-dialog
-    :title="$t('roomCreateFeeAdd.title')"
-    :visible.sync="visible"
-    width="70%"
-    :before-close="handleClose"
-  >
+  <el-dialog :title="$t('roomCreateFeeAdd.title')" :visible.sync="visible" width="40%" :before-close="handleClose">
     <el-form ref="form" :model="formData" label-width="120px">
       <el-form-item :label="$t('roomCreateFeeAdd.location')">
-        <el-input 
-          v-model="formData.locationTypeCdName" 
-          disabled
-          :placeholder="$t('roomCreateFeeAdd.locationPlaceholder')"
-        ></el-input>
+        <el-input v-model="formData.locationTypeCdName" disabled
+          :placeholder="$t('roomCreateFeeAdd.locationPlaceholder')"></el-input>
       </el-form-item>
-      
+
       <el-form-item :label="$t('roomCreateFeeAdd.feeType')" prop="feeTypeCd">
-        <el-select
-          v-model="formData.feeTypeCd"
-          @change="handleFeeTypeChange"
-          :placeholder="$t('roomCreateFeeAdd.feeTypePlaceholder')"
-          style="width: 100%"
-        >
+        <el-select v-model="formData.feeTypeCd" @change="handleFeeTypeChange"
+          :placeholder="$t('roomCreateFeeAdd.feeTypePlaceholder')" style="width: 100%">
           <template v-for="item in feeTypeOptions">
-            <el-option
-              v-if="item.statusCd !='888800010017'"
-              :key="item.statusCd"
-              :label="item.name"
-              :value="item.statusCd"
-            ></el-option>
+            <el-option v-if="item.statusCd != '888800010017'" :key="item.statusCd" :label="item.name"
+              :value="item.statusCd"></el-option>
           </template>
         </el-select>
       </el-form-item>
  
-      <el-form-item 
-        v-if="formData.feeTypeCd"
-        :label="$t('roomCreateFeeAdd.feeItem')"
-        prop="configId"
-      >
-        <el-select
-          v-model="formData.configId"
-          @change="handleConfigChange"
-          :placeholder="$t('roomCreateFeeAdd.feeItemPlaceholder')"
-          style="width: 100%"
-        >
-          <el-option
-            v-for="item in feeConfigOptions"
-            :key="item.configId"
-            :label="item.feeName"
-            :value="item.configId"
-          ></el-option>
+      <el-form-item v-if="formData.feeTypeCd" :label="$t('roomCreateFeeAdd.feeItem')" prop="configId">
+        <el-select v-model="formData.configId" @change="handleConfigChange"
+          :placeholder="$t('roomCreateFeeAdd.feeItemPlaceholder')" style="width: 100%">
+          <el-option v-for="item in feeConfigOptions" :key="item.configId" :label="item.feeName"
+            :value="item.configId"></el-option>
         </el-select>
       </el-form-item>
  
-      <el-form-item 
-        v-if="formData.computingFormula == '4004'"
-        :label="$t('roomCreateFeeAdd.amount')"
-        prop="amount"
-      >
-        <el-input
-          v-model="formData.amount"
-          :placeholder="$t('roomCreateFeeAdd.amountPlaceholder')"
-        ></el-input>
+      <el-form-item v-if="formData.computingFormula == '4004'" :label="$t('roomCreateFeeAdd.amount')" prop="amount">
+        <el-input v-model="formData.amount" :placeholder="$t('roomCreateFeeAdd.amountPlaceholder')"></el-input>
       </el-form-item>
  
       <el-form-item :label="$t('roomCreateFeeAdd.startTime')" prop="startTime">
-        <el-date-picker
-          v-model="formData.startTime"
-          type="date"
-          :placeholder="$t('roomCreateFeeAdd.startTimePlaceholder')"
-          value-format="yyyy-MM-dd"
-          @change="validateStartTime"
-        ></el-date-picker>
+        <el-date-picker v-model="formData.startTime" type="date"
+          :placeholder="$t('roomCreateFeeAdd.startTimePlaceholder')" value-format="yyyy-MM-dd"
+          @change="validateStartTime"></el-date-picker>
       </el-form-item>
  
       <el-form-item :label="$t('roomCreateFeeAdd.endTime')" prop="endTime">
-        <el-date-picker
-          v-model="formData.endTime"
-          type="date"
-          :placeholder="$t('roomCreateFeeAdd.endTimePlaceholder')"
-          value-format="yyyy-MM-dd"
-          @change="validateEndTime"
-        ></el-date-picker>
+        <el-date-picker v-model="formData.endTime" type="date" :placeholder="$t('roomCreateFeeAdd.endTimePlaceholder')"
+          value-format="yyyy-MM-dd" @change="validateEndTime"></el-date-picker>
       </el-form-item>
  
-      <el-form-item 
-        v-show="formData.computingFormula == '1102'"
-        :label="$t('roomCreateFeeAdd.rateCycle')"
-        prop="rateCycle"
-      >
-        <el-input
-          v-model="formData.rateCycle"
-          :placeholder="$t('roomCreateFeeAdd.rateCyclePlaceholder')"
-        ></el-input>
+      <el-form-item v-show="formData.computingFormula == '1102'" :label="$t('roomCreateFeeAdd.rateCycle')"
+        prop="rateCycle">
+        <el-input v-model="formData.rateCycle" :placeholder="$t('roomCreateFeeAdd.rateCyclePlaceholder')"></el-input>
       </el-form-item>
  
-      <el-form-item 
-        v-show="formData.computingFormula == '1102'"
-        :label="$t('roomCreateFeeAdd.rate')"
-        prop="rate"
-      >
-        <el-input
-          v-model="formData.rate"
-          :placeholder="$t('roomCreateFeeAdd.ratePlaceholder')"
-        ></el-input>
+      <el-form-item v-show="formData.computingFormula == '1102'" :label="$t('roomCreateFeeAdd.rate')" prop="rate">
+        <el-input v-model="formData.rate" :placeholder="$t('roomCreateFeeAdd.ratePlaceholder')"></el-input>
       </el-form-item>
  
-      <el-form-item 
-        v-show="formData.computingFormula == '1102'"
-        :label="$t('roomCreateFeeAdd.rateStartTime')"
-        prop="rateStartTime"
-      >
-        <el-date-picker
-          v-model="formData.rateStartTime"
-          type="date"
-          :placeholder="$t('roomCreateFeeAdd.rateStartTimePlaceholder')"
-          value-format="yyyy-MM-dd"
-        ></el-date-picker>
+      <el-form-item v-show="formData.computingFormula == '1102'" :label="$t('roomCreateFeeAdd.rateStartTime')"
+        prop="rateStartTime">
+        <el-date-picker v-model="formData.rateStartTime" type="date"
+          :placeholder="$t('roomCreateFeeAdd.rateStartTimePlaceholder')" value-format="yyyy-MM-dd"></el-date-picker>
       </el-form-item>
     </el-form>
  
@@ -175,38 +111,38 @@ export default {
       this.resetForm()
       this.formData.locationObjId = room.roomId
       this.formData.locationTypeCdName = `${room.floorNum}-${room.unitNum}-${room.roomNum}(${room.ownerName})`
-      
+
       if (room.roomName) {
         this.formData.locationTypeCdName = room.roomName
       }
-      
+
       this.formData.roomType = room.roomType
       if (room.roomType === '2020602') {
         this.formData.locationTypeCdName = `${room.floorNum}-${room.roomNum}(${room.ownerName})`
       }
-      
+
       this.loadFeeTypes()
       this.visible = true
     },
-    
+
     loadFeeTypes() {
       getDict('pay_fee_config', 'fee_type_cd').then(data => {
-        this.feeTypeOptions = data.filter(item => 
+        this.feeTypeOptions = data.filter(item =>
           item.statusCd !== '888800010015' && item.statusCd !== '888800010016'
         )
       })
     },
-    
+
     handleFeeTypeChange(value) {
       if (value === '888800010006' || value === '888800010014') {
         this.formData.startTime = this.$dayjs().format('YYYY-MM-DD')
         this.formData.endTime = this.$dayjs().add(1, 'month').format('YYYY-MM-DD')
       }
-      
+
       this.formData.configId = ''
       this.loadFeeConfigs(value)
     },
-    
+
     loadFeeConfigs(feeTypeCd) {
       listFeeConfigs({
         page: 1,
@@ -216,24 +152,24 @@ export default {
         isDefault: 'F',
         state: 'Y'
       }).then(response => {
-        this.feeConfigOptions = response.data.feeConfigs
+        this.feeConfigOptions = response.feeConfigs
       })
     },
-    
+
     handleConfigChange(configId) {
-      if (this.formData.feeTypeCd !== '888800010006' && 
-          this.formData.feeTypeCd !== '888800010014' && 
-          this.formData.feeFlag === '1003006') {
+      if (this.formData.feeTypeCd !== '888800010006' &&
+        this.formData.feeTypeCd !== '888800010014' &&
+        this.formData.feeFlag === '1003006') {
         this.formData.endTime = ''
       }
-      
+
       const config = this.feeConfigOptions.find(item => item.configId === configId)
       if (config) {
         this.formData.feeFlag = config.feeFlag
         this.formData.computingFormula = config.computingFormula
       }
     },
-    
+
     validateStartTime(value) {
       if (!this.formData.feeFlag && !this.formData.feeTypeCd) {
         const start = new Date(value)
@@ -244,7 +180,7 @@ export default {
         }
       }
     },
-    
+
     validateEndTime(value) {
       const start = new Date(this.formData.startTime)
       const end = new Date(value)
@@ -253,23 +189,23 @@ export default {
         this.formData.endTime = ''
       }
     },
-    
+
     handleSubmit() {
       this.$refs.form.validate(valid => {
         if (!valid) return
-        
+
         if (this.formData.feeTypeCd !== '888800010006' && this.formData.feeFlag !== '1003006') {
           if (!this.formData.endTime) {
             this.$message.error(this.$t('roomCreateFeeAdd.validate.endTimeRequired'))
             return
           }
         }
-        
+
         const params = {
           ...this.formData,
           communityId: getCommunityId()
         }
-        
+
         saveRoomCreateFee(params).then(() => {
           this.$message.success(this.$t('roomCreateFeeAdd.successMessage'))
           this.$emit('success')
@@ -279,7 +215,7 @@ export default {
         })
       })
     },
-    
+
     resetForm() {
       if (this.$refs.form) {
         this.$refs.form.resetFields()
@@ -302,11 +238,23 @@ export default {
         feeFlag: ''
       }
     },
-    
+
     handleClose() {
       this.visible = false
       this.resetForm()
     }
   }
 }
-</script>
 \ No newline at end of file
+</script>
+<style scoped>
+.el-form-item{
+  width: 90%;
+  text-align: left;
+}
+.el-select{
+  width: 100%;
+}
+.el-date-editor{  
+  width: 100%;
+}
+</style>
 \ No newline at end of file
@@ -259,9 +259,13 @@
       </el-col>
     </el-row>
     <!-- Modal Components -->
-    <delete-fee ref="deleteFee"></delete-fee>
-    <edit-fee ref="editFee"></edit-fee>
-    <temp-import-room-fee ref="tempImportRoomFee"></temp-import-room-fee>
+    <delete-fee ref="deleteFee" @success="handleNotify"></delete-fee>
+    <edit-fee ref="editFee" @success="handleNotify"></edit-fee>
+    <temp-import-room-fee ref="tempImportRoomFee" @success="handleNotify"></temp-import-room-fee>
+    <room-create-fee-add ref="roomCreateFeeAdd" @success="handleNotify"></room-create-fee-add>
+    <add-meter-water ref="addMeterWater" @success="handleNotify"></add-meter-water>
+    <add-proxy-fee ref="addProxyFee" @success="handleNotify"></add-proxy-fee>
+    
   </div>
 </template>
  
@@ -274,6 +278,9 @@ import TempImportRoomFee from &#39;./tempImportRoomFee&#39;
 import { dateFormat } from '@/utils/dateUtil'
 import DeleteFee from '@/components/fee/deleteFee'
 import EditFee from '@/components/fee/editFee'
+import RoomCreateFeeAdd from '@/components/fee/roomCreateFeeAdd'
+import AddMeterWater from '@/components/fee/addMeterWater'
+import AddProxyFee from '@/components/fee/addProxyFee'
  
 export default {
   name: 'SimplifyRoomFee',
@@ -281,6 +288,9 @@ export default {
     TempImportRoomFee,
     DeleteFee,
     EditFee,
+    RoomCreateFeeAdd,
+    AddMeterWater,
+    AddProxyFee,
   },
   data() {
     return {
@@ -395,18 +405,19 @@ export default {
     },
     openRoomCreateFeeAddModal() {
       this.simplifyRoomFeeInfo.ownerName = this.simplifyRoomFeeInfo.name
-      this.$emit('openRoomCreateFeeAddModal', {
+      this.$refs.roomCreateFeeAdd.open({
         isMore: false,
-        room: this.simplifyRoomFeeInfo,
+        roomId: this.simplifyRoomFeeInfo.roomId,
+        roomName: this.simplifyRoomFeeInfo.roomName,
         ownerName: this.simplifyRoomFeeInfo.name
       })
     },
     openAddMeterWaterSimplifyModal() {
-      this.$emit('openAddMeterWaterModal', {
+      this.$refs.addMeterWater.open({
         roomId: this.simplifyRoomFeeInfo.roomId,
         roomName: this.simplifyRoomFeeInfo.roomName,
         ownerName: this.simplifyRoomFeeInfo.name
-      })
+      });
     },
     getAttrValue(attrs, specCd) {
       const attr = attrs.find(item => item.specCd === specCd)
@@ -422,7 +433,7 @@ export default {
       return dateFormat(fee.endTime)
     },
     openProxyFeeModal() {
-      this.$emit('openAddProxyFeeModal', {
+      this.$refs.addProxyFee.open({
         roomId: this.simplifyRoomFeeInfo.roomId,
         roomName: this.simplifyRoomFeeInfo.roomName,
         ownerName: this.simplifyRoomFeeInfo.name
 <template>
-  <el-dialog 
-    :title="$t('tempImportRoomFee.title')"
-    :visible.sync="dialogVisible"
-    width="70%"
-    @close="clearTempImportRoomFeeInfo"
-  >
-    <el-form :model="form" label-width="120px">
+  <el-dialog :title="$t('tempImportRoomFee.title')" :visible.sync="dialogVisible" width="40%"
+    @close="clearTempImportRoomFeeInfo">
+    <el-form :model="form" label-width="120px" class="text-left">
       <el-form-item :label="$t('tempImportRoomFee.feeType')">
-        <el-select 
-          v-model="form.feeTypeCd"
-          @change="changeFeeTypeCd"
-          :placeholder="$t('tempImportRoomFee.selectFeeType')"
-        >
-          <el-option 
-            v-for="(item,index) in feeTypeCds" 
-            :key="index"
-            :label="item.name"
-            :value="item.statusCd"
-          ></el-option>
+        <el-select v-model="form.feeTypeCd" @change="changeFeeTypeCd"
+          :placeholder="$t('tempImportRoomFee.selectFeeType')">
+          <el-option v-for="(item, index) in feeTypeCds" :key="index" :label="item.name"
+            :value="item.statusCd"></el-option>
         </el-select>
       </el-form-item>
-      
+
       <el-form-item :label="$t('tempImportRoomFee.feeObj')">
-        <el-input 
-          v-model="form.objName" 
-          disabled
-          :placeholder="$t('tempImportRoomFee.inputFeeObj')"
-        ></el-input>
+        <el-input v-model="form.objName" disabled :placeholder="$t('tempImportRoomFee.inputFeeObj')"></el-input>
       </el-form-item>
  
       <el-form-item :label="$t('tempImportRoomFee.feeName')" v-if="form.feeNameFlag === 'S'">
-        <el-select 
-          v-model="form.configId"
-          :placeholder="$t('tempImportRoomFee.selectFeeItem')"
-        >
-          <el-option 
-            v-for="(item,index) in feeConfigs" 
-            :key="index"
-            :label="item.feeName"
-            :value="item.configId"
-          ></el-option>
+        <el-select v-model="form.configId" :placeholder="$t('tempImportRoomFee.selectFeeItem')">
+          <el-option v-for="(item, index) in feeConfigs" :key="index" :label="item.feeName"
+            :value="item.configId"></el-option>
         </el-select>
-        <span>{{$t('tempImportRoomFee.feeItemDesc')}}</span>
+        <span>{{ $t('tempImportRoomFee.feeItemDesc') }}</span>
       </el-form-item>
  
       <el-form-item :label="$t('tempImportRoomFee.feeName')" v-else>
         <el-col :span="18">
-          <el-input 
-            v-model="form.feeName" 
-            :placeholder="$t('tempImportRoomFee.inputFeeName')"
-          ></el-input>
+          <el-input v-model="form.feeName" :placeholder="$t('tempImportRoomFee.inputFeeName')"></el-input>
         </el-col>
         <el-col :span="6">
-          <el-button @click="toggleFeeNameFlag">{{$t('tempImportRoomFee.select')}}</el-button>
+          <el-button @click="toggleFeeNameFlag">{{ $t('tempImportRoomFee.select') }}</el-button>
         </el-col>
       </el-form-item>
  
       <el-form-item :label="$t('tempImportRoomFee.amount')">
-        <el-input 
-          v-model="form.amount" 
-          :placeholder="$t('tempImportRoomFee.inputAmount')"
-        ></el-input>
+        <el-input v-model="form.amount" :placeholder="$t('tempImportRoomFee.inputAmount')"></el-input>
       </el-form-item>
  
       <el-form-item :label="$t('tempImportRoomFee.startTime')">
-        <el-date-picker
-          v-model="form.startTime"
-          type="datetime"
-          :placeholder="$t('tempImportRoomFee.selectStartTime')"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        ></el-date-picker>
+        <el-date-picker v-model="form.startTime" type="datetime" :placeholder="$t('tempImportRoomFee.selectStartTime')"
+          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
       </el-form-item>
  
       <el-form-item :label="$t('tempImportRoomFee.endTime')">
-        <el-date-picker
-          v-model="form.endTime"
-          type="datetime"
-          :placeholder="$t('tempImportRoomFee.selectEndTime')"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        ></el-date-picker>
+        <el-date-picker v-model="form.endTime" type="datetime" :placeholder="$t('tempImportRoomFee.selectEndTime')"
+          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
       </el-form-item>
     </el-form>
  
     <div slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">{{$t('tempImportRoomFee.cancel')}}</el-button>
-      <el-button type="primary" @click="saveTempImportFeeInfo">{{$t('tempImportRoomFee.submit')}}</el-button>
+      <el-button @click="dialogVisible = false">{{ $t('tempImportRoomFee.cancel') }}</el-button>
+      <el-button type="primary" @click="saveTempImportFeeInfo">{{ $t('tempImportRoomFee.submit') }}</el-button>
     </div>
   </el-dialog>
 </template>
@@ -191,7 +155,7 @@ export default {
     },
     async saveTempImportFeeInfo() {
       if (!this.validateForm()) return
-      
+
       try {
         const res = await importTempData({
           ...this.form,
@@ -240,4 +204,12 @@ export default {
     }
   }
 }
-</script>
 \ No newline at end of file
+</script>
+<style scoped>
+.el-form-item{
+  width: 90%;
+}
+.el-date-editor{  
+  width: 100%;
+}
+</style>
 \ No newline at end of file
 <template>
   <el-card class="box-card">
-    <div slot="header" class="clearfix">
+    <div slot="header" class="flex justify-between">
       <span>{{ $t('viewMainFee.feeInfo') }}</span>
-      <el-button 
-        type="primary" 
-        size="small" 
-        style="float: right; margin-left: 10px;"
-        @click="_openCallBackOwner"
-      >
+      <el-button type="primary" size="small" style="float: right; margin-left: 10px;" @click="_openCallBackOwner">
         {{ $t('common.back') }}
       </el-button>
     </div>
-    
-    <el-row :gutter="20">
+
+    <el-row :gutter="20" class="text-left">
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.feeId') }}</label>
+          <label>{{ $t('viewMainFee.feeId') }}:</label>
           <div>{{ mainFeeInfo.feeId }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.feeFlag') }}</label>
+          <label>{{ $t('viewMainFee.feeFlag') }}:</label>
           <div>{{ mainFeeInfo.feeFlagName }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.feeType') }}</label>
+          <label>{{ $t('viewMainFee.feeType') }}:</label>
           <div>{{ mainFeeInfo.feeTypeCdName }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.payerObj') }}</label>
+          <label>{{ $t('viewMainFee.payerObj') }}:</label>
           <div>
             {{ mainFeeInfo.payerObjName }}
-            <view-room-data 
-              v-if="mainFeeInfo.payerObjType == '3333'"
-              ref="viewRoomData"
-            />
+            <view-room-data v-if="mainFeeInfo.payerObjType == '3333'" ref="viewRoomData" />
           </div>
         </div>
       </el-col>
-      
+
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.feeItem') }}</label>
+          <label>{{ $t('viewMainFee.feeItem') }}:</label>
           <div class="hand" @click="_viewFeeConfig">
             {{ mainFeeInfo.feeName }}
             <view-fee-config-data ref="viewFeeConfigData" />
@@ -55,43 +47,43 @@
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.feeStatus') }}</label>
+          <label>{{ $t('viewMainFee.feeStatus') }}:</label>
           <div>{{ mainFeeInfo.stateName }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.startTime') }}</label>
+          <label>{{ $t('viewMainFee.startTime') }}:</label>
           <div>{{ mainFeeInfo.startTime }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.billingStartTime') }}</label>
+          <label>{{ $t('viewMainFee.billingStartTime') }}:</label>
           <div>{{ _getEndTime(mainFeeInfo) }}</div>
         </div>
       </el-col>
-      
+
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.billingEndTime') }}</label>
+          <label>{{ $t('viewMainFee.billingEndTime') }}:</label>
           <div>{{ _getDeadlineTime(mainFeeInfo) }}</div>
         </div>
       </el-col>
       <el-col :span="6" v-if="mainFeeInfo.amount != '-1.00'">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.feeAmount') }}</label>
+          <label>{{ $t('viewMainFee.feeAmount') }}:</label>
           <div>{{ mainFeeInfo.amount }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.batch') }}</label>
+          <label>{{ $t('viewMainFee.batch') }}:</label>
           <div>{{ mainFeeInfo.batchId }}</div>
         </div>
       </el-col>
-      
-      <template v-for="(item,index) in mainFeeInfo.feeAttrs">
+
+      <template v-for="(item, index) in mainFeeInfo.feeAttrs">
         <el-col :span="6" :key="index">
           <div class="form-item">
             <label>{{ item.specCdName }}：</label>
@@ -100,32 +92,32 @@
         </el-col>
       </template>
     </el-row>
-    
+
     <el-row :gutter="20" v-if="mainFeeInfo.payerObjType == '3333'">
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.area') }}</label>
+          <label>{{ $t('viewMainFee.area') }}:</label>
           <div>{{ mainFeeInfo.builtUpArea }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.unitPrice') }}</label>
+          <label>{{ $t('viewMainFee.unitPrice') }}:</label>
           <div>{{ mainFeeInfo.squarePrice }}</div>
         </div>
       </el-col>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.additionalFee') }}</label>
+          <label>{{ $t('viewMainFee.additionalFee') }}:</label>
           <div>{{ mainFeeInfo.additionalAmount }}</div>
         </div>
       </el-col>
     </el-row>
-    
+
     <el-row :gutter="20" v-else>
       <el-col :span="6">
         <div class="form-item">
-          <label>{{ $t('viewMainFee.fixedFee') }}</label>
+          <label>{{ $t('viewMainFee.fixedFee') }}:</label>
           <div>{{ mainFeeInfo.additionalAmount }}</div>
         </div>
       </el-col>
@@ -201,11 +193,11 @@ export default {
           page: 1,
           row: 1
         })
-        
-        if (res.data && res.data.length > 0) {
-          Object.assign(this.mainFeeInfo, res.data[0])
-          this.mainFeeInfo.feeAttrs = res.data[0].feeAttrs || []
-          
+
+        if (res.fees && res.fees.length > 0) {
+          Object.assign(this.mainFeeInfo, res.fees[0])
+          this.mainFeeInfo.feeAttrs = res.fees[0].feeAttrs || []
+
           if (this.mainFeeInfo.payerObjType === '3333') {
             this._loadRoomAndOwnerByRoomId()
           } else if (this.mainFeeInfo.payerObjType === '6666') {
@@ -213,7 +205,7 @@ export default {
           } else {
             this._loadContractAndOwnerByContractId()
           }
-          
+
           this.$emit('listFeeDetail', { feeId: this.mainFeeInfo.feeId })
         }
       } catch (error) {
@@ -256,23 +248,21 @@ export default {
  
 <style scoped>
 .form-item {
-  margin-bottom: 20px;
-  
-  label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-  
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin-bottom: 30px;
+  align-items: center;
+
   div {
-    padding: 8px 0;
+    margin-left: 10px;
   }
 }
  
 .hand {
   cursor: pointer;
   color: #409EFF;
-  
+
   &:hover {
     text-decoration: underline;
   }
@@ -31,6 +31,7 @@ import { messages as payFeeOrderMessages } from &#39;../views/fee/payFeeOrderLang&#39;
 import { messages as refundDepositFeeMessages } from '../views/fee/refundDepositFeeLang'
 import { messages as createFeeByComboMessages } from '../views/fee/createFeeByComboLang'
 import { messages as owePayFeeOrderMessages } from '../views/fee/owePayFeeOrderLang'
+import { messages as printOweFeeMessages } from '../views/fee/printOweFeeLang'
  
 export const messages = {
     en: {
@@ -67,6 +68,7 @@ export const messages = {
         ...refundDepositFeeMessages.en,
         ...createFeeByComboMessages.en,
         ...owePayFeeOrderMessages.en,
+        ...printOweFeeMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
@@ -102,5 +104,6 @@ export const messages = {
         ...refundDepositFeeMessages.zh,
         ...createFeeByComboMessages.zh,
         ...owePayFeeOrderMessages.zh,
+        ...printOweFeeMessages.zh,
     }
 }
 \ No newline at end of file
@@ -149,5 +149,10 @@ export default [
         name: '/views/fee/owePayFeeOrder',
         component: () => import('@/views/fee/owePayFeeOrderList.vue')
     },
+    {
+        path: '/views/fee/printOweFee',
+        name: '/views/fee/printOweFee',
+        component: () => import('@/views/fee/printOweFeeList.vue')
+    },
  
 ]
 \ No newline at end of file
+export function changeNumMoneyToChinese(money) {
+    let cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
+    let cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
+    let cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
+    let cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
+    let cnInteger = "整"; //整数金额时后面跟的字符
+    let cnIntLast = "元"; //整型完以后的单位
+    let maxNum = 999999999999999.9999; //最大处理的数字
+    let IntegerNum; //金额整数部分
+    let DecimalNum; //金额小数部分
+    let ChineseStr = ""; //输出的中文金额字符串
+    let parts; //分离金额后用的数组，预定义
+    let Symbol = ""; //正负值标记
+    if (money == "") {
+        return "";
+    }
+
+    money = parseFloat(money);
+    if (money >= maxNum) {
+        alert('超出最大处理数字');
+        return "";
+    }
+    if (money == 0) {
+        ChineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return ChineseStr;
+    }
+    if (money < 0) {
+        money = -money;
+        Symbol = "负 ";
+    }
+    money = money.toString(); //转换为字符串
+    if (money.indexOf(".") == -1) {
+        IntegerNum = money;
+        DecimalNum = '';
+    } else {
+        parts = money.split(".");
+        IntegerNum = parts[0];
+        DecimalNum = parts[1].substr(0, 4);
+    }
+    if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
+        var zeroCount = 0;
+        var IntLen = IntegerNum.length;
+        for (var i = 0; i < IntLen; i++) {
+            var n = IntegerNum.substr(i, 1);
+            var p = IntLen - i - 1;
+            var q = p / 4;
+            var m = p % 4;
+            if (n == "0") {
+                zeroCount++;
+            } else {
+                if (zeroCount > 0) {
+                    ChineseStr += cnNums[0];
+                }
+                zeroCount = 0; //归零
+                ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+            }
+            if (m == 0 && zeroCount < 4) {
+                ChineseStr += cnIntUnits[q];
+            }
+        }
+        ChineseStr += cnIntLast;
+        //整型部分处理完毕
+    }
+    if (DecimalNum != '') { //小数部分
+        var decLen = DecimalNum.length;
+        for (let i = 0; i < decLen; i++) {
+            let n = DecimalNum.substr(i, 1);
+            if (n != '0') {
+                ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
+            }
+        }
+    }
+    if (ChineseStr == '') {
+        ChineseStr += cnNums[0] + cnIntLast + cnInteger;
+    } else if (DecimalNum == '') {
+        ChineseStr += cnInteger;
+    }
+    ChineseStr = Symbol + ChineseStr;
+
+    return ChineseStr;
+}
 \ No newline at end of file
 <template>
   <div class="create-fee-by-combo-container">
     <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>{{ createFeeByComboInfo.payerObjName }}</span>
-        <span>{{ $t('createFeeByCombo.title') }}</span>
+      <div slot="header" class="flex justify-between">
+        <div>
+          <span>{{ createFeeByComboInfo.payerObjName }}</span>
+          <span>{{ $t('createFeeByCombo.title') }}</span>
+        </div>
         <div class="header-tools">
           <el-button type="primary" size="small" @click="_chooseFeeCombo()">
             <i class="el-icon-search"></i>{{ $t('createFeeByCombo.chooseFeeCombo') }}
@@ -37,7 +37,8 @@
               <el-col :span="4">
                 <el-form-item>
                   <el-select v-model="conditions.feeFlag" :placeholder="$t('feeConfigManage.selectFeeFlag')" clearable>
-                    <el-option v-for="item in feeFlags" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
+                    <el-option v-for="item in feeFlags" :key="item.statusCd" :label="item.name"
+                      :value="item.statusCd" />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -194,7 +194,7 @@ export default {
         payType: 'common',
         authCode: '',
         orderId: '',
-        printUrl: '/print.html#/pages/property/printPayFee',
+        printUrl: '/#/pages/fee/printPayFee',
         detailIds: '',
         paymentPoolId: ''
       },
@@ -496,7 +496,7 @@ export default {
     },
  
     _printOwnOrder() {
-      window.open(`/print.html#/pages/property/printOweFee?payObjId=${this.owePayFeeOrderInfo.payObjId}&payObjType=${this.owePayFeeOrderInfo.payObjType}&payObjName=${this.owePayFeeOrderInfo.roomName}`)
+      window.open(`/#/views/fee/printOweFee?payObjId=${this.owePayFeeOrderInfo.payObjId}&payObjType=${this.owePayFeeOrderInfo.payObjType}&payObjName=${this.owePayFeeOrderInfo.roomName}`)
     },
  
     _printOwnOrder2() {
+export const messages = {
+  en: {
+    printOweFee: {
+      paymentNotice: 'Payment Notice',
+      owner: 'Owner',
+      printTime: 'Print Time',
+      chargeObject: 'Charge Object',
+      itemName: 'Item Name',
+      feePeriod: 'Fee Period',
+      unit: 'Unit',
+      areaUsage: 'Area/Usage',
+      unitPrice: 'Unit Price',
+      amount: 'Amount',
+      amountInWords: 'Amount in Words',
+      noData: 'No payment notice data available'
+    }
+  },
+  zh: {
+    printOweFee: {
+      paymentNotice: '缴费通知单',
+      owner: '业主',
+      printTime: '打印时间',
+      chargeObject: '收费对象',
+      itemName: '项目名称',
+      feePeriod: '费用期间',
+      unit: '单位',
+      areaUsage: '面积/用量',
+      unitPrice: '单价',
+      amount: '金额',
+      amountInWords: '大写人民币（元）',
+      noData: '当前没有缴费通知数据'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="print-owe-fee-container">
+    <el-card>
+      <div class="text-center">
+        <h1>{{ printPayFeeInfo.printName }}{{ $t('printOweFee.paymentNotice') }}</h1>
+      </div>
+      <div class="margin-top flex justify-between" style="color:#000;font-size:14px">
+        <div >
+          {{ $t('printOweFee.owner') }}：{{ printPayFeeInfo.ownerName }}
+        </div>
+        <div>
+          {{ $t('printOweFee.printTime') }}：{{ printPayFeeInfo.feeTime }}
+        </div>
+      </div>
+      <!-- 费用明细表格（原el-table） -->
+      <table style="width: 100%; border-collapse: collapse; color: #000; font-size: 14px; margin-top: 10px;">
+        <thead>
+          <tr>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.chargeObject')}}</th>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.itemName')}}</th>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.feePeriod')}}</th>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.unit')}}</th>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.areaUsage')}}</th>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.unitPrice')}}</th>
+            <th style="border: 1px solid #dcdfe6; text-align: center;">{{$t('printOweFee.amount')}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, idx) in printPayFeeInfo.fees" :key="idx">
+            <td style="border: 1px solid #dcdfe6; text-align: center;">{{ row.payerObjName }}</td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;">{{ row.feeName }}</td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;">
+              <div v-if="row.preDegrees">
+                {{ dateFormat(row.endTime) }}至{{ _getDeadlineTime(row) }}<br>
+                {{ row.preDegrees }} 至 {{ row.curDegrees }}
+              </div>
+              <div v-else>
+                {{ dateFormat(row.endTime) }}至{{ _getDeadlineTime(row) }}
+              </div>
+            </td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;">元</td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;">
+              {{ row.preDegrees ? (row.curDegrees - row.preDegrees).toFixed(2) : printPayFeeInfo.builtUpArea }}
+            </td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;">
+              {{ row.preDegrees && row.mwPrice > 0 ? row.mwPrice : `${row.squarePrice}/${row.additionalAmount}` }}
+            </td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;">{{ row.feeTotalPrice }}</td>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #dcdfe6; text-align: center;" >
+              {{$t('printOweFee.amountInWords')}}
+            </td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;" colspan="4">
+              {{ changeNumMoneyToChinese(printPayFeeInfo.feePrices) }}
+            </td>
+            <td style="border: 1px solid #dcdfe6; text-align: center;" colspan="2">
+              {{ printPayFeeInfo.feePrices }}
+            </td>
+          </tr>
+          <tr v-if="printPayFeeInfo.content"> 
+          <td style="border: 1px solid #dcdfe6; width: 300px;">
+            <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
+          </td>
+          <td style="border: 1px solid #dcdfe6; text-align: center;">
+            <img :src="printPayFeeInfo.qrImg" width="150px" height="150px">
+          </td>
+        </tr>
+        </tbody>
+      </table>
+
+
+      <div id="print-btn" class="margin-top ">
+        <el-button type="primary" class="float-right" @click="_printPurchaseApplyDiv">
+          <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
+        </el-button>
+        <el-button type="warning" class="float-right" style="margin-right:20px;" @click="_closePage">
+          {{ $t('common.cancel') }}
+        </el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { listOweFees, listRoomsWhereFeeSet, queryFeePrintSpec } from '@/api/fee/printOweFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { dateFormat } from '@/utils/dateUtil'
+import { changeNumMoneyToChinese } from '@/utils/moneyUtil'
+
+export default {
+  name: 'PrintOweFeeList',
+  data() {
+    return {
+      printPayFeeInfo: {
+        communityName: '',
+        roomName: '',
+        feePrices: 0.00,
+        fees: [],
+        feeTime: '',
+        wechatName: '',
+        content: '',
+        qrImg: '',
+        payObjId: '',
+        builtUpArea: '',
+        payObjType: '',
+        payObjName: '',
+        ownerName: '',
+        printName: '',
+        targetEndTime: '',
+      },
+      printFlag: '0',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._initData()
+  },
+  methods: {
+    _initData() {
+      this.printPayFeeInfo.payObjId = this.$route.query.payObjId
+      this.printPayFeeInfo.payObjType = this.$route.query.payObjType
+      this.printPayFeeInfo.payObjName = this.$route.query.payObjName
+      this.printPayFeeInfo.targetEndTime = this.$route.query.targetEndTime
+
+      this._loadOweFees()
+      this._printOweRoom()
+
+      this.printPayFeeInfo.feeTime = dateFormat(new Date().getTime())
+      this.printPayFeeInfo.communityName = this.communityId
+
+      this._loadPrintSpec()
+    },
+    _loadPrintSpec() {
+      const param = {
+        page: 1,
+        row: 1,
+        specCd: 1010,
+        communityId: this.communityId
+      }
+
+      queryFeePrintSpec(param).then(res => {
+        if (res.data.length > 0) {
+          this.printPayFeeInfo.content = res.data[0].content
+          this.printPayFeeInfo.qrImg = res.data[0].qrImg
+          this.printPayFeeInfo.printName = res.data[0].printName
+        }
+      }).catch(err => {
+        console.error('请求失败:', err)
+      })
+    },
+    _printPurchaseApplyDiv() {
+      this.printFlag = '1'
+      document.getElementById("print-btn").style.display = "none"
+      window.print()
+      window.opener = null
+      window.close()
+    },
+    _closePage() {
+      window.opener = null
+      window.close()
+    },
+    _printOweRoom() {
+      if (this.printPayFeeInfo.payObjType !== '3333') {
+        return
+      }
+      const param = {
+        page: 1,
+        row: 1,
+        roomId: this.printPayFeeInfo.payObjId,
+        communityId: this.communityId
+      }
+
+      listRoomsWhereFeeSet(param).then(res => {
+        const listRoomData = res
+        Object.assign(this.printPayFeeInfo, listRoomData.rooms[0])
+        if (listRoomData.rooms[0].roomType === '2020602') {
+          this.printPayFeeInfo.roomName = `${listRoomData.rooms[0].floorNum}-${listRoomData.rooms[0].roomNum}`
+        } else {
+          this.printPayFeeInfo.roomName = `${listRoomData.rooms[0].floorNum}-${listRoomData.rooms[0].unitNum}-${listRoomData.rooms[0].roomNum}`
+        }
+      }).catch(err => {
+        console.error('请求失败:', err)
+      })
+    },
+    _loadOweFees() {
+      const param = {
+        page: 1,
+        row: 50,
+        communityId: this.communityId,
+        payObjId: this.printPayFeeInfo.payObjId,
+        payObjType: this.printPayFeeInfo.payObjType,
+        targetEndTime: this.printPayFeeInfo.targetEndTime,
+      }
+
+      listOweFees(param).then(res => {
+        const _fees = res.data
+        if (_fees.length < 1) {
+          this.printPayFeeInfo.oweFees = []
+          this.$message.warning(this.$t('printOweFee.noData'))
+          return
+        }
+        this.printPayFeeInfo.fees = _fees
+        let _totalAmount = 0.0
+        this.printPayFeeInfo.fees.forEach(item => {
+          _totalAmount += item.feeTotalPrice
+        })
+        _totalAmount = Math.round(_totalAmount * 100) / 100
+        this.printPayFeeInfo.feePrices = _totalAmount
+      }).catch(err => {
+        console.error('请求失败:', err)
+      })
+    },
+    _getDeadlineTime(_fee) {
+      if (_fee.amountOwed === 0 && _fee.endTime === _fee.deadlineTime) {
+        return "-"
+      }
+      if (_fee.state === '2009001') {
+        return "-"
+      }
+      return dateFormat(_fee.deadlineTime)
+    },
+    dateFormat,
+    changeNumMoneyToChinese
+  }
+}
+</script>
+
+<style scoped>
+.print-owe-fee-container {
+  padding: 20px;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.float-right {
+  float: right;
+}
+
+.text-center {
+  text-align: center;
+}
+th{
+  height: 40px;
+}
+td{
+  height: 40px;
+}
+</style>
 \ No newline at end of file
@@ -112,6 +112,7 @@ import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from &#39;@/api
 import { getCommunityId } from '@/api/community/communityApi'
 import { getUserId,getUserName } from '@/api/user/userApi'
 import { dateFormat } from '@/utils/dateUtil'
+import { changeNumMoneyToChinese } from '@/utils/moneyUtil'
  
 export default {
   name: 'PrintPayFeeBangTaiList',
@@ -249,11 +250,7 @@ export default {
       if (!date) return ''
       return dateFormat(date)
     },
-    changeNumMoneyToChinese(num) {
-      // 这里实现数字转中文大写金额的逻辑
-      // 由于实现较复杂，建议使用第三方库或自行实现
-      return num // 暂时返回原值
-    },
+    changeNumMoneyToChinese,
     printPurchaseApplyDiv() {
       this.printFlag = '1'
       document.getElementById("print-btn").style.display = "none"
 <template>
   <div class="property-fee-container">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>{{ $t('propertyFee.title') }}</span>
-      </div>
-      
-      <!-- 主费用信息组件 -->
-      <view-main-fee 
-        ref="viewMainFee"
-        :fee-name="$t('propertyFee.feeName')"
-        fee-type-cd="888800010001"
-        pay-name="propertyPay"
-      />
  
-      <el-card class="box-card" style="margin-top: 20px;">
-        <div slot="header" class="clearfix">
-          <span>{{ $t('propertyFee.paymentHistory') }}</span>
-        </div>
-        
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-date-picker
-              v-model="feeDetailInfo.startTime"
-              type="date"
-              :placeholder="$t('propertyFee.selectStartTime')"
-              style="width: 100%;"
-            />
-          </el-col>
-          <el-col :span="6">
-            <el-date-picker
-              v-model="feeDetailInfo.endTime"
-              type="date"
-              :placeholder="$t('propertyFee.selectEndTime')"
-              style="width: 100%;"
-            />
-          </el-col>
-          <el-col :span="12">
-            <el-button type="primary" @click="queryFeeDetailMethod()">
-              <i class="el-icon-search"></i>
-              {{ $t('propertyFee.searchNow') }}
-            </el-button>
-            <el-button type="info" @click="resetFeeDetailMethod()" style="margin-left: 20px;">
-              <i class="el-icon-refresh"></i>
-              {{ $t('propertyFee.reset') }}
-            </el-button>
-          </el-col>
-        </el-row>
  
-        <el-table
-          :data="feeDetailInfo.feeDetails"
-          style="width: 100%; margin-top: 20px;"
-          border
-          stripe
-        >
-          <el-table-column prop="detailId" :label="$t('propertyFee.paymentId')" align="center" />
-          <el-table-column prop="cycles" :label="$t('propertyFee.cycle')" align="center" />
-          <el-table-column prop="primeRateName" :label="$t('propertyFee.paymentMethod')" align="center" />
-          <el-table-column :label="$t('propertyFee.receivableAmount')" align="center">
-            <template slot-scope="scope">
-              <span v-if="scope.row.state=='1500'">{{scope.row.payerObjName}}{{$t('propertyFee.viewInFee')}}</span>
-              <span v-else>{{scope.row.receivableAmount}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('propertyFee.receivedAmount')" align="center">
-            <template slot-scope="scope">
-              {{scope.row.receivedAmount}}<br>
-              <div v-if="scope.row.acctAmount>0">
-                {{$t('propertyFee.accountDeduction')}}: {{scope.row.acctAmount}}<br>
-              </div>
-              <div v-for="(item,index) in scope.row.payFeeDetailDiscountDtoList" :key="index">
-                {{item.discountName}}: {{Math.abs(item.discountPrice)}}<br>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="createTime" :label="$t('propertyFee.paymentTime')" align="center" />
-          <el-table-column :label="$t('propertyFee.startTime')" align="center">
-            <template slot-scope="scope">
-              {{dateFormat(scope.row.startTime)}}
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('propertyFee.endTime')" align="center">
-            <template slot-scope="scope">
-              {{dateFormat(scope.row.endTime)}}
-            </template>
-          </el-table-column>
-          <el-table-column prop="cashierName" :label="$t('propertyFee.cashier')" align="center" />
-          <el-table-column prop="stateName" :label="$t('propertyFee.status')" align="center" />
-          <el-table-column prop="remark" :label="$t('propertyFee.remark')" align="center" />
-          <el-table-column :label="$t('propertyFee.operation')" align="center">
-            <template slot-scope="scope">
-              <el-button-group>
-                <el-button 
-                  v-if="scope.row.state=='1400' || scope.row.state== '1200' || scope.row.state== ''"
-                  size="mini"
-                  @click="_openRefundModel(scope.row)"
-                >
-                  {{ $t('propertyFee.applyRefund') }}
-                </el-button>
-                <el-button 
-                  v-if="scope.row.state!='1500'"
-                  size="mini"
-                  @click="_openFeeDetailDiscountModal(scope.row)"
-                >
-                  {{ $t('propertyFee.discount') }}
-                </el-button>
-              </el-button-group>
-            </template>
-          </el-table-column>
-        </el-table>
+    <!-- 主费用信息组件 -->
+    <view-main-fee ref="viewMainFee" :fee-name="$t('propertyFee.feeName')" fee-type-cd="888800010001"
+      pay-name="propertyPay" />
+
+    <el-card class="box-card" style="margin-top: 20px;">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('propertyFee.paymentHistory') }}</span>
+      </div>
  
-        <el-pagination
-          :current-page.sync="page.current"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="page.size"
-          :total="page.total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          style="margin-top: 20px;"
-        />
-      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-date-picker v-model="feeDetailInfo.startTime" type="date" :placeholder="$t('propertyFee.selectStartTime')"
+            style="width: 100%;" />
+        </el-col>
+        <el-col :span="6">
+          <el-date-picker v-model="feeDetailInfo.endTime" type="date" :placeholder="$t('propertyFee.selectEndTime')"
+            style="width: 100%;" />
+        </el-col>
+        <el-col :span="12">
+          <el-button type="primary" @click="queryFeeDetailMethod()">
+            <i class="el-icon-search"></i>
+            {{ $t('propertyFee.searchNow') }}
+          </el-button>
+          <el-button type="info" @click="resetFeeDetailMethod()" style="margin-left: 20px;">
+            <i class="el-icon-refresh"></i>
+            {{ $t('propertyFee.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
  
-      <!-- 子组件 -->
-      <return-pay-fee ref="returnPayFee" />
-      <view-fee-detail-discount ref="viewFeeDetailDiscount" />
+      <el-table :data="feeDetailInfo.feeDetails" style="width: 100%; margin-top: 20px;" border stripe>
+        <el-table-column prop="detailId" :label="$t('propertyFee.paymentId')" align="center" />
+        <el-table-column prop="cycles" :label="$t('propertyFee.cycle')" align="center" />
+        <el-table-column prop="primeRateName" :label="$t('propertyFee.paymentMethod')" align="center" />
+        <el-table-column :label="$t('propertyFee.receivableAmount')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.state == '1500'">{{ scope.row.payerObjName }}{{ $t('propertyFee.viewInFee') }}</span>
+            <span v-else>{{ scope.row.receivableAmount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('propertyFee.receivedAmount')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.receivedAmount }}<br>
+            <div v-if="scope.row.acctAmount > 0">
+              {{ $t('propertyFee.accountDeduction') }}: {{ scope.row.acctAmount }}<br>
+            </div>
+            <div v-for="(item, index) in scope.row.payFeeDetailDiscountDtoList" :key="index">
+              {{ item.discountName }}: {{ Math.abs(item.discountPrice) }}<br>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('propertyFee.paymentTime')" align="center" />
+        <el-table-column :label="$t('propertyFee.startTime')" align="center">
+          <template slot-scope="scope">
+            {{ dateFormat(scope.row.startTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('propertyFee.endTime')" align="center">
+          <template slot-scope="scope">
+            {{ dateFormat(scope.row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="cashierName" :label="$t('propertyFee.cashier')" align="center" />
+        <el-table-column prop="stateName" :label="$t('propertyFee.status')" align="center" />
+        <el-table-column prop="remark" :label="$t('propertyFee.remark')" align="center" />
+        <el-table-column :label="$t('propertyFee.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button v-if="scope.row.state == '1400' || scope.row.state == '1200' || scope.row.state == ''"
+                size="mini" @click="_openRefundModel(scope.row)">
+                {{ $t('propertyFee.applyRefund') }}
+              </el-button>
+              <el-button v-if="scope.row.state != '1500'" size="mini" @click="_openFeeDetailDiscountModal(scope.row)">
+                {{ $t('propertyFee.discount') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" style="margin-top: 20px;" />
     </el-card>
+
+    <!-- 子组件 -->
+    <return-pay-fee ref="returnPayFee" />
+    <view-fee-detail-discount ref="viewFeeDetailDiscount" />
+
   </div>
 </template>
  
@@ -163,6 +129,8 @@ export default {
   },
   created() {
     this.communityId = getCommunityId()
+    this.feeDetailInfo.feeId = this.$route.query.feeId
+    this.queryFeeDetailMethod()
   },
   methods: {
     dateFormat(date) {
@@ -179,9 +147,9 @@ export default {
           startTime: this.feeDetailInfo.startTime,
           endTime: this.feeDetailInfo.endTime
         }
-        
-        const { data, total, records } = await queryFeeDetail(params)
-        this.feeDetailInfo.feeDetails = data
+
+        const { feeDetails, total, records } = await queryFeeDetail(params)
+        this.feeDetailInfo.feeDetails = feeDetails
         this.feeDetailInfo.total = total
         this.feeDetailInfo.records = records
         this.page.total = records
@@ -219,11 +187,11 @@ export default {
 <style lang="scss" scoped>
 .property-fee-container {
   padding: 20px;
-  
+
   .box-card {
     margin-bottom: 20px;
   }
-  
+
   .clearfix {
     font-size: 18px;
     font-weight: bold;
@@ -108,9 +108,7 @@
     </el-row>
  
  
-    <room-create-fee-add ref="roomCreateFeeAdd"></room-create-fee-add>
-    <add-meter-water ref="addMeterWater"></add-meter-water>
-    <add-proxy-fee ref="addProxyFee"></add-proxy-fee>
+    
     <export-fee-import-excel ref="exportFeeImportExcel"></export-fee-import-excel>
     <do-import-create-fee ref="doImportCreateFee"></do-import-create-fee>
     <download-collection-letter-order ref="downloadCollectionLetterOrder"></download-collection-letter-order>
@@ -134,9 +132,7 @@ import SimplifyRefundDeposit from &#39;@/components/fee/simplifyRefundDeposit&#39;
 import FeeDetailFeeRule from '@/components/fee/feeDetailFeeRule'
 import FeeDetailRuleBill from '@/components/fee/feeDetailRuleBill'
  
-import RoomCreateFeeAdd from '@/components/fee/roomCreateFeeAdd'
-import AddMeterWater from '@/components/fee/addMeterWater'
-import AddProxyFee from '@/components/fee/addProxyFee'
+
 import ExportFeeImportExcel from '@/components/fee/exportFeeImportExcel'
 import DoImportCreateFee from '@/components/fee/doImportCreateFee'
 import DownloadCollectionLetterOrder from '@/components/fee/downloadCollectionLetterOrder'
@@ -162,9 +158,7 @@ export default {
     FeeDetailFeeRule,
     FeeDetailRuleBill,
  
-    RoomCreateFeeAdd,
-    AddMeterWater,
-    AddProxyFee,
+
     ExportFeeImportExcel,
     DoImportCreateFee,
     DownloadCollectionLetterOrder