src/views/fee/roomCreateFeeList.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" class="tree-container">
        <room-tree-div ref="roomTreeDiv" @selectRoom="handleSelectRoom"></room-tree-div>
      </el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <div slot="header" class="flex justify-between">
            <span>{{ roomCreateFeeInfo.roomName }}</span>
            <div class="header-tools">
              <el-button v-if="hasPrivilege('502022073096990007')" size="small" @click="_openFeeImportExcel">
                <i class="el-icon-download"></i>
                {{ $t('roomCreateFee.customTemplate') }}
              </el-button>
              <el-button v-if="hasPrivilege('502022073096990007')" size="small" @click="_openDoCreateRoomFee">
                <i class="el-icon-plus"></i>
                {{ $t('roomCreateFee.customImport') }}
              </el-button>
              <el-button v-if="hasPrivilege('502022073096990007')" size="small" @click="_toBatchCreateFee(null, true)">
                <i class="el-icon-plus"></i>
                {{ $t('roomCreateFee.batchCreate') }}
              </el-button>
              <el-button size="small" @click="_downloadCollectionLetterOrder">
                <i class="el-icon-download"></i>
                {{ $t('roomCreateFee.batchCollectionLetter') }}
              </el-button>
            </div>
          </div>
          <div class="filter-container">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-input v-model="roomCreateFeeInfo.condition.roomNum"
                  :placeholder="$t('roomCreateFee.roomNumPlaceholder')" clearable
                  @blur="listRoomInRoomCreateFee"></el-input>
                <input-search-room ref="inputSearchRoom"></input-search-room>
              </el-col>
              <el-col :span="6">
                <el-input v-model="roomCreateFeeInfo.condition.ownerName"
                  :placeholder="$t('roomCreateFee.ownerNamePlaceholder')" clearable
                  @input="_inputRoomByOwner"></el-input>
                <input-search-room-by-owner ref="inputSearchRoomByOwner"></input-search-room-by-owner>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" size="small" @click="_queryRoomCreateFeeMethod">
                  {{ $t('common.query') }}
                </el-button>
                <el-button size="small" @click="_resetRoomCreateFeeMethod">
                  {{ $t('common.reset') }}
                </el-button>
              </el-col>
            </el-row>
          </div>
          <el-tabs v-model="roomCreateFeeInfo._currentTab" @tab-click="changeTab(roomCreateFeeInfo._currentTab)">
            <el-tab-pane label="房屋费用" name="simplifyRoomFee" >
              <simplify-room-fee v-if="roomCreateFeeInfo._currentTab === 'simplifyRoomFee'"
                ref="simplifyRoomFee" :key="'simplifyRoomFee'+roomCreateFeeInfo.roomId"></simplify-room-fee>
            </el-tab-pane>
            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="缴费历史" name="simplifyHisFee">
              <simplify-his-fee v-if="roomCreateFeeInfo._currentTab === 'simplifyHisFee'"
                ref="simplifyHisFee" :key="'simplifyHisFee'+roomCreateFeeInfo.roomId"></simplify-his-fee>
            </el-tab-pane>
            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="房屋" name="simplifyOwnerRooms">
              <simplify-owner-rooms v-if="roomCreateFeeInfo._currentTab === 'simplifyOwnerRooms'"
                ref="simplifyOwnerRooms" :key="'simplifyOwnerRooms'+roomCreateFeeInfo.roomId"></simplify-owner-rooms>
            </el-tab-pane>
            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="业主" name="carDetailOwner">
              <car-detail-owner v-if="roomCreateFeeInfo._currentTab === 'carDetailOwner'"
                ref="carDetailOwner" :key="'carDetailOwner'+roomCreateFeeInfo.roomId"></car-detail-owner>
            </el-tab-pane>
            <el-tab-pane label="催缴" name="simplifyCallable">
              <simplify-callable v-if="roomCreateFeeInfo._currentTab === 'simplifyCallable'"
                ref="simplifyCallable" :key="'simplifyCallable'+roomCreateFeeInfo.roomId"></simplify-callable>
            </el-tab-pane>
            <el-tab-pane label="补打收据" v-if="hasPrivilege('502020092373407363')" name="simplifyFeeReceipt" >
              <simplify-fee-receipt v-if="roomCreateFeeInfo._currentTab === 'simplifyFeeReceipt'"
                ref="simplifyFeeReceipt" :key="'simplifyFeeReceipt'+roomCreateFeeInfo.roomId"></simplify-fee-receipt>
            </el-tab-pane>
            <el-tab-pane label="抄表记录" name="simplifyMeterWaterLog">
              <simplify-meter-water-log v-if="roomCreateFeeInfo._currentTab === 'simplifyMeterWaterLog'"
                ref="simplifyMeterWaterLog" :key="'simplifyMeterWaterLog'+roomCreateFeeInfo.roomId"></simplify-meter-water-log>
            </el-tab-pane>
            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="预存账户" name="ownerDetailAccount">
              <owner-detail-account v-if="roomCreateFeeInfo._currentTab === 'ownerDetailAccount'"
                ref="ownerDetailAccount" :key="'ownerDetailAccount'+roomCreateFeeInfo.roomId"></owner-detail-account>
            </el-tab-pane>
            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" label="预存补打" name="ownerDetailAccountReceipt">
              <owner-detail-account-receipt v-if="roomCreateFeeInfo._currentTab === 'ownerDetailAccountReceipt'"
                ref="ownerDetailAccountReceipt" :key="'ownerDetailAccountReceipt'+roomCreateFeeInfo.roomId"></owner-detail-account-receipt>
            </el-tab-pane>
            <el-tab-pane label="押金" name="simplifyRefundDeposit">
              <simplify-refund-deposit v-if="roomCreateFeeInfo._currentTab === 'simplifyRefundDeposit'"
                ref="simplifyRefundDeposit" :key="'simplifyRefundDeposit'+roomCreateFeeInfo.roomId"></simplify-refund-deposit>
            </el-tab-pane>
            <el-tab-pane label="账单规则" name="feeDetailFeeRule">
              <fee-detail-fee-rule v-if="roomCreateFeeInfo._currentTab === 'feeDetailFeeRule'"
                ref="feeDetailFeeRule" :key="'feeDetailFeeRule'+roomCreateFeeInfo.roomId"></fee-detail-fee-rule>
            </el-tab-pane>
            <el-tab-pane label="费用账单" name="feeDetailRuleBill">
              <fee-detail-rule-bill v-if="roomCreateFeeInfo._currentTab === 'feeDetailRuleBill'"
                ref="feeDetailRuleBill" :key="'feeDetailRuleBill'+roomCreateFeeInfo.roomId"></fee-detail-rule-bill>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    
    <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>
  </div>
</template>
<script>
import RoomTreeDiv from '@/components/room/roomTreeDiv'
import InputSearchRoom from '@/components/fee/inputSearchRoom'
import InputSearchRoomByOwner from '@/components/fee/inputSearchRoomByOwner'
import SimplifyRoomFee from '@/components/fee/simplifyRoomFee'
import SimplifyHisFee from '@/components/fee/simplifyHisFee'
import SimplifyOwnerRooms from '@/components/fee/simplifyOwnerRooms'
import CarDetailOwner from '@/components/fee/carDetailOwner'
import SimplifyCallable from '@/components/fee/simplifyCallable'
import SimplifyFeeReceipt from '@/components/fee/simplifyFeeReceipt'
import SimplifyMeterWaterLog from '@/components/fee/simplifyMeterWaterLog'
import OwnerDetailAccount from '@/components/owner/ownerDetailAccount'
import OwnerDetailAccountReceipt from '@/components/owner/ownerDetailAccountReceipt'
import SimplifyRefundDeposit from '@/components/fee/simplifyRefundDeposit'
import FeeDetailFeeRule from '@/components/fee/feeDetailFeeRule'
import FeeDetailRuleBill from '@/components/fee/feeDetailRuleBill'
import ExportFeeImportExcel from '@/components/fee/exportFeeImportExcel'
import DoImportCreateFee from '@/components/fee/doImportCreateFee'
import DownloadCollectionLetterOrder from '@/components/fee/downloadCollectionLetterOrder'
import { getCommunityId } from '@/api/community/communityApi'
import { queryRooms } from '@/api/fee/roomCreateFeeApi'
export default {
  name: 'RoomCreateFeeList',
  components: {
    RoomTreeDiv,
    InputSearchRoom,
    InputSearchRoomByOwner,
    SimplifyRoomFee,
    SimplifyHisFee,
    SimplifyOwnerRooms,
    CarDetailOwner,
    SimplifyCallable,
    SimplifyFeeReceipt,
    SimplifyMeterWaterLog,
    OwnerDetailAccount,
    OwnerDetailAccountReceipt,
    SimplifyRefundDeposit,
    FeeDetailFeeRule,
    FeeDetailRuleBill,
    ExportFeeImportExcel,
    DoImportCreateFee,
    DownloadCollectionLetterOrder
  },
  data() {
    return {
      roomCreateFeeInfo: {
        roomName: '',
        roomId: '',
        ownerId: '',
        ownerName: '',
        roomType: '',
        _currentTab: 'simplifyRoomFee',
        condition: {
          roomNum: '',
          ownerName: ''
        },
        timer: null
      },
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.initRoomTree()
  },
  methods: {
    initRoomTree() {
      // this.$refs.roomTreeDiv.initRoomTreeDiv({
      //   callName: 'roomCreateFee'
      // })
    },
    handleSelectRoom(param) {
      this.roomCreateFeeInfo.ownerName = ''
      this.roomCreateFeeInfo.ownerId = ''
      this.roomCreateFeeInfo.roomId = param.roomId
      this.roomCreateFeeInfo.roomName = param.roomName
      this.roomCreateFeeInfo.condition.ownerName = ''
      this.roomCreateFeeInfo.condition.roomNum = ''
      this.listRoomInRoomCreateFee()
    },
    notifyRoomByOwner(room) {
      this.$set(this.roomCreateFeeInfo, 'ownerName', room.ownerName)
      this.$set(this.roomCreateFeeInfo, 'ownerId', room.ownerId)
      this.$set(this.roomCreateFeeInfo, 'roomId', room.roomId)
      this.$set(
        this.roomCreateFeeInfo,
        'roomName',
        `${room.floorNum}-${room.unitNum}-${room.roomNum}`
      )
      this.listRoomInRoomCreateFee()
    },
    async listRoomInRoomCreateFee() {
      const param = {
        page: 1,
        row: 1,
        communityId: this.communityId,
        roomId: this.roomCreateFeeInfo.roomId
      }
      if (this.roomCreateFeeInfo.condition.roomNum) {
        param.flag = '1'
        param.roomNum = this.roomCreateFeeInfo.condition.roomNum
        param.roomId = ''
        this.roomCreateFeeInfo.roomName = ''
        this.roomCreateFeeInfo.ownerName = ''
        this.roomCreateFeeInfo.ownerId = ''
        this.roomCreateFeeInfo.roomId = ''
      }
      try {
        const response = await queryRooms(param)
        const room = response.rooms[0]
        Object.assign(this.roomCreateFeeInfo, room)
        this.changeTab('simplifyRoomFee')
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    _inputRoomByOwner() {
      if (this.roomCreateFeeInfo.timer) {
        clearTimeout(this.roomCreateFeeInfo.timer)
      }
      this.roomCreateFeeInfo.timer = setTimeout(() => {
        this.$refs.inputSearchRoomByOwner.$emit('searchRoom', {
          callComponent: 'roomCreateFee',
          ownerName: this.roomCreateFeeInfo.condition.ownerName
        })
      }, 1500)
    },
    _queryRoomCreateFeeMethod() {
      this.listRoomInRoomCreateFee()
    },
    _resetRoomCreateFeeMethod() {
      this.$refs.inputSearchRoom.$emit('close', {})
      this.$refs.inputSearchRoomByOwner.$emit('close', {})
      this.roomCreateFeeInfo.roomNum = ''
      this.roomCreateFeeInfo.ownerName = ''
      this.roomCreateFeeInfo.ownerId = ''
      this.roomCreateFeeInfo.condition.ownerName = ''
      this.roomCreateFeeInfo.condition.roomNum = ''
      this.changeTab('simplifyRoomFee')
    },
    changeTab(tab) {
      this.roomCreateFeeInfo._currentTab = tab
      setTimeout(() => {
        if (this.$refs[tab]) {
          if(tab === 'ownerDetailAccount' || tab === 'ownerDetailAccountReceipt') {
            this.$refs[tab].open(this.roomCreateFeeInfo.ownerId, this.roomCreateFeeInfo.ownerName, this.roomCreateFeeInfo.roomId)
            return;
          } 
          this.$refs[tab].open({
            ownerId: this.roomCreateFeeInfo.ownerId,
            ownerName: this.roomCreateFeeInfo.ownerName,
            roomId: this.roomCreateFeeInfo.roomId,
            roomName: this.roomCreateFeeInfo.roomName
          })
        }
      }, 500)
    },
    _roomCreateFeetoSimplifyAcceptance() {
      const date = new Date()
      localStorage.setItem('JAVA110_IS_BACK', date.getTime())
      localStorage.setItem(
        'simplifyAcceptanceSearch',
        JSON.stringify({
          searchType: '1',
          searchValue: `${this.roomCreateFeeInfo.floorNum}-${this.roomCreateFeeInfo.unitNum}-${this.roomCreateFeeInfo.roomNum}`,
          searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
        })
      )
      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理')
    },
    _toBatchCreateFee() {
      this.$router.push('/pages/fee/roomCreatePayFee')
    },
    _downloadCollectionLetterOrder() {
      this.$router.push('/views/fee/addOweFeeCallable?callableWay=EXCEL')
    },
    _downloadRoomCollectionLetterOrder(room) {
      this.$refs.downloadCollectionLetterOrder.open({
        roomId: room.roomId
      })
    },
    _openFeeImportExcel() {
      this.$refs.exportFeeImportExcel.open()
    },
    _openDoCreateRoomFee() {
      this.$refs.doImportCreateFee.open()
    },
    _openRoomCreateFeeComboModal() {
      this.$router.push(
        `/pages/property/createFeeByCombo?payerObjId=${this.roomCreateFeeInfo.roomId}&payerObjName=${this.roomCreateFeeInfo.roomName}&payerObjType=3333`
      )
    },
  }
}
</script>
<style scoped>
.app-container {
  padding: 20px;
}
  .tree-container {
    min-height: 450px;
    overflow-y: auto;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
  }
.header-tools {
  float: right;
}
.filter-container {
  margin-bottom: 20px;
}
</style>