wuye / webui

  <template>
    <div>
      <div class="margin-top">

        <el-table :data="feeDetailOwnerInfo.owners" border style="width: 100%">
          <el-table-column :label="$t('feeDetailOwner.ownerFace')" align="center">
            <template #default="{ row }">
              <el-image style="width: 60px; height: 60px;" class="border-radius" :src="row.url || '/img/noPhoto.jpg'"
                :preview-src-list="[row.url]" v-if="row.url"></el-image>
              <el-image style="width: 60px; height: 60px;" class="border-radius" src="/img/noPhoto.jpg" v-else></el-image>

            </template>
          </el-table-column>

          <el-table-column prop="name" :label="$t('feeDetailOwner.name')" align="center">
            <template #default="{ row }">
              {{ row.name }}({{ row.link }})

            </template>
          </el-table-column>

          <el-table-column prop="sex" :label="$t('feeDetailOwner.gender')" align="center">
            <template #default="{ row }">
              {{ row.sex === 0 ? $t('feeDetailOwner.male') : $t('feeDetailOwner.female') }}

            </template>
          </el-table-column>

          <el-table-column prop="idCard" :label="$t('feeDetailOwner.idCard')" align="center"></el-table-column>
          <el-table-column prop="address" :label="$t('feeDetailOwner.address')" align="center"></el-table-column>
          <el-table-column prop="roomCount" :label="$t('feeDetailOwner.roomCount')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewOwnerRooms(row)">

                {{ row.roomCount || 0 }}

              </el-link>
            </template>
          </el-table-column>

          <el-table-column prop="memberCount" :label="$t('feeDetailOwner.memberCount')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewOwnerMembers(row)">

                {{ row.memberCount || 0 }}

              </el-link>
            </template>
          </el-table-column>

          <el-table-column prop="carCount" :label="$t('feeDetailOwner.carCount')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewOwnerCars(row)">

                {{ row.carCount || 0 }}

              </el-link>
            </template>
          </el-table-column>

          <el-table-column prop="complaintCount" :label="$t('feeDetailOwner.complaintCount')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewComplaints(row)">

                {{ row.complaintCount || 0 }}

              </el-link>
            </template>
          </el-table-column>

          <el-table-column prop="repairCount" :label="$t('feeDetailOwner.repairCount')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewRepairs(row)">

                {{ row.repairCount || 0 }}

              </el-link>
            </template>
          </el-table-column>

          <el-table-column prop="oweFee" :label="$t('feeDetailOwner.oweFee')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewOweFees(row)">

                {{ row.oweFee || '0.00' }}

              </el-link>
            </template>
          </el-table-column>

          <el-table-column prop="contractCount" :label="$t('feeDetailOwner.contractCount')" align="center">
            <template #default="{ row }">

              <el-link type="primary" @click="_viewRoomContracts(row)">

                {{ row.contractCount || 0 }}

              </el-link>
            </template>
          </el-table-column>
        </el-table>
  
        <el-row class="margin-top">
          <el-col :span="4"></el-col>
          <el-col :span="20">

            <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
              layout="total, prev, pager, next, jumper" :total="total"></el-pagination>

          </el-col>
        </el-row>
      </div>
  
      <owner-rooms ref="ownerRooms"></owner-rooms>
      <owner-members ref="ownerMembers"></owner-members>
      <owner-cars ref="ownerCars"></owner-cars>
      <owner-complaints ref="ownerComplaints"></owner-complaints>
      <owner-repairs ref="ownerRepairs"></owner-repairs>
      <owner-owe-fees ref="ownerOweFees"></owner-owe-fees>
      <room-contracts ref="roomContracts"></room-contracts>
    </div>
  </template>
  
  <script>
  import { queryOwners } from '@/api/fee/feeDetailOwnerApi'
  import OwnerRooms from '@/components/owner/ownerRooms'
  import OwnerMembers from '@/components/owner/ownerMembers'
  import OwnerCars from '@/components/owner/ownerCars'
  import OwnerComplaints from '@/components/owner/ownerComplaints'
  import OwnerRepairs from '@/components/owner/ownerRepairs'
  import OwnerOweFees from '@/components/owner/ownerOweFees'
  import RoomContracts from '@/components/room/roomContracts'

  import { getCommunityId } from '@/api/community/communityApi'

  
  export default {
    name: 'FeeDetailOwner',
    components: {
      OwnerRooms,
      OwnerMembers,
      OwnerCars,
      OwnerComplaints,
      OwnerRepairs,
      OwnerOweFees,
      RoomContracts
    },
    data() {
      return {
        feeDetailOwnerInfo: {
          owners: [],
          ownerId: ''
        },
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    methods: {
      open(params) {
        if (!params.ownerId) return
        this.feeDetailOwnerInfo.ownerId = params.ownerId
        this._loadFeeDetailOwnerData(this.currentPage, this.pageSize)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this._loadFeeDetailOwnerData(this.currentPage, this.pageSize)
      },
      async _loadFeeDetailOwnerData(page, row) {
        try {
          const params = {
            ownerId: this.feeDetailOwnerInfo.ownerId,

            communityId: getCommunityId(),

            ownerTypeCd: '1001',
            page,
            row
          }

          const res = await queryOwners(params)
          this.feeDetailOwnerInfo.owners = res.data
          this.total = res.records
        } catch (error) {
          console.error('Failed to load owner data:', error)
        }
      },
      _viewOwnerRooms(owner) {
        this.$refs.ownerRooms.open(owner)
      },
      _viewOwnerMembers(owner) {
        this.$refs.ownerMembers.open(owner)
      },
      _viewOwnerCars(owner) {
        this.$refs.ownerCars.open(owner)
      },
      _viewComplaints(owner) {
        this.$refs.ownerComplaints.open(owner)
      },
      _viewRepairs(owner) {
        this.$refs.ownerRepairs.open(owner)
      },
      _viewOweFees(owner) {
        this.$refs.ownerOweFees.open(owner)
      },
      _viewRoomContracts(owner) {
        this.$refs.roomContracts.open(owner)
      }
    }
  }
  </script>