wuye / webui

<template>
  <div class="app-container">
    <div class="resizable-layout">
      <!-- 左侧树形组件 -->
      <div class="tree-panel" :style="{ width: treeWidth + 'px' }">
        <room-tree-div ref="roomTreeDiv" @selectRoom="handleSelectRoom"></room-tree-div>
      </div>

      <!-- 拖拽分隔线 -->
      <div class="resize-handle" @mousedown="startResize" @mouseover="showResizeCursor" @mouseleave="hideResizeCursor">
        <div class="resize-line"></div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-panel" :style="{ width: 'calc(100% - ' + (treeWidth + 10) + 'px)' }">
        <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="$t('roomCreateFee.roomFee')" 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="$t('roomCreateFee.paymentHistory')"
              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="$t('roomCreateFee.rooms')" name="simplifyOwnerRooms">
              <simplify-owner-rooms v-if="roomCreateFeeInfo._currentTab === 'simplifyOwnerRooms'"
                ref="simplifyOwnerRooms" :key="'simplifyOwnerRooms' + roomCreateFeeInfo.roomId" hasChange="N"></simplify-owner-rooms>
            </el-tab-pane>
            <el-tab-pane v-if="roomCreateFeeInfo.ownerId" :label="$t('roomCreateFee.owner')" 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="$t('roomCreateFee.callable')" name="simplifyCallable">
              <simplify-callable v-if="roomCreateFeeInfo._currentTab === 'simplifyCallable'" ref="simplifyCallable"
                :key="'simplifyCallable' + roomCreateFeeInfo.roomId"></simplify-callable>
            </el-tab-pane>
            <el-tab-pane :label="$t('roomCreateFee.receiptReprint')" 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="$t('roomCreateFee.meterReadingRecords')" 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="$t('roomCreateFee.prepaidAccount')"
              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="$t('roomCreateFee.prepaidReprint')"
              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="$t('roomCreateFee.deposit')" 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="$t('roomCreateFee.billingRules')" 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="$t('roomCreateFee.feeBills')" 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>
      </div>
    </div>

    <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: '',
      // 新增：拖拽相关数据
      treeWidth: 250, // 默认树形组件宽度
      minTreeWidth: 200, // 最小宽度
      maxTreeWidth: 600, // 最大宽度
      isResizing: false,
      startX: 0,
      startWidth: 0
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.initRoomTree()
    // 恢复保存的宽度
    this.restoreTreeWidth()
  },
  mounted() {
    // 添加全局鼠标事件监听
    document.addEventListener('mousemove', this.onMouseMove)
    document.addEventListener('mouseup', this.onMouseUp)
  },
  beforeDestroy() {
    // 移除全局事件监听
    document.removeEventListener('mousemove', this.onMouseMove)
    document.removeEventListener('mouseup', this.onMouseUp)
  },
  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('Request failed:', 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() {

      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理&searchType=1&searchValue=' + `${this.roomCreateFeeInfo.floorNum}-${this.roomCreateFeeInfo.unitNum}-${this.roomCreateFeeInfo.roomNum}`)

    },
    _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`
      )
    },
    restoreTreeWidth() {
      const savedWidth = localStorage.getItem('roomCreateFeeTreeWidth')
      if (savedWidth) {
        const width = parseInt(savedWidth)
        if (width >= this.minTreeWidth && width <= this.maxTreeWidth) {
          this.treeWidth = width
        }
      }
    },
    // 新增：保存树形组件宽度
    saveTreeWidth() {
      localStorage.setItem('roomCreateFeeTreeWidth', this.treeWidth.toString())
    },
    // 新增：开始拖拽调整大小
    startResize(event) {
      event.preventDefault()
      this.isResizing = true
      this.startX = event.clientX
      this.startWidth = this.treeWidth
      
      // 添加拖拽时的样式
      document.body.style.cursor = 'col-resize'
      document.body.style.userSelect = 'none'
    },
    // 新增：鼠标移动处理
    onMouseMove(event) {
      if (!this.isResizing) return
      
      const deltaX = event.clientX - this.startX
      const newWidth = this.startWidth + deltaX
      
      // 限制宽度范围
      if (newWidth >= this.minTreeWidth && newWidth <= this.maxTreeWidth) {
        this.treeWidth = newWidth
      }
    },
    // 新增：鼠标释放处理
    onMouseUp() {
      if (this.isResizing) {
        this.isResizing = false
        this.saveTreeWidth()
        
        // 恢复鼠标样式
        document.body.style.cursor = ''
        document.body.style.userSelect = ''
      }
    },
    // 新增：显示调整大小光标
    showResizeCursor() {
      if (!this.isResizing) {
        document.body.style.cursor = 'col-resize'
      }
    },
    // 新增：隐藏调整大小光标
    hideResizeCursor() {
      if (!this.isResizing) {
        document.body.style.cursor = ''
      }
    },
  }
}
</script>
<style scoped>
.app-container {
  padding: 20px;
  height: calc(100vh - 120px);
  overflow: hidden;
}

/* 新增：可调整大小的布局样式 */
.resizable-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.tree-panel {
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  
}

.content-panel {
  overflow-y: auto;
}

/* 新增：拖拽分隔线样式 */
.resize-handle {
  width: 10px;
  cursor: col-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize-handle:hover .resize-line {
  background-color: #409eff;
}

.resize-line {
  width: 2px;
  height: 30px;
  background-color: #dcdfe6;
  border-radius: 1px;
  transition: background-color 0.2s;
}

/* 拖拽时的样式 */
.resizable-layout.resizing {
  cursor: col-resize;
}

.resizable-layout.resizing .tree-panel,
.resizable-layout.resizing .content-panel {
  pointer-events: none;
}

.resizable-layout.resizing .resize-handle {
  pointer-events: auto;
}

/* 原有样式保持不变 */
.header-tools {
  float: right;
}

.filter-container {
  margin-bottom: 20px;
}

/* 确保树形组件在拖拽时不被选中 */
.tree-panel * {
  user-select: none;
}

/* 拖拽时禁用文本选择 */
.resizable-layout.resizing * {
  user-select: none !important;
}
</style>