Blame view

src/components/owner/ownerCars.vue 3.49 KB
af1bcbd6   wuxw   房屋页面开发中
1
  <template>
81955f61   wuxw   优化房屋页面
2
    <el-dialog :visible.sync="dialogVisible" :title="$t('ownerCars.title')" width="80%" top="5vh" @close="handleClose">
af1bcbd6   wuxw   房屋页面开发中
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
      <el-row>
        <el-col :span="24">
          <div class="table-container">
            <el-table :data="ownerCarsInfo.cars" border stripe>
              <el-table-column prop="carNum" :label="$t('ownerCars.licensePlate')" align="center" />
              <el-table-column :label="$t('ownerCars.licenseType')" align="center">
                <template #default="{ row }">
                  <span v-if="row.leaseType === 'T'">{{ $t('ownerCars.temporary') }}</span>
                  <span v-else>{{ row.leaseTypeName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="carTypeName" :label="$t('ownerCars.carType')" align="center" />
              <el-table-column prop="carColor" :label="$t('ownerCars.color')" align="center" />
              <el-table-column :label="$t('ownerCars.owner')" align="center">
                <template #default="{ row }">
                  {{ row.ownerName }}<br>({{ row.link }})
                </template>
              </el-table-column>
              <el-table-column :label="$t('ownerCars.parkingSpace')" align="center">
                <template #default="{ row }">
                  <div v-if="row.areaNum && row.state === '1001'">
                    {{ row.areaNum }}{{ $t('ownerCars.park') }}{{ row.num }}{{ $t('ownerCars.space') }}
                  </div>
                  <div v-else>{{ $t('ownerCars.released') }}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('ownerCars.validity')" align="center">
                <template #default="{ row }">
                  <div v-if="row.leaseType === 'H'">
                    {{ row.startTime }}<br>~{{ row.endTime }}
                  </div>
                  <div v-else>-</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
81955f61   wuxw   优化房屋页面
39
40
          <el-pagination background layout="prev, pager, next, sizes, total" :total="totalCount" :page-size="pageSize"
            :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
af1bcbd6   wuxw   房屋页面开发中
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
        </el-col>
      </el-row>
    </el-dialog>
  </template>
  
  <script>
  import { queryOwnerCars } from '@/api/room/ownerCarsApi'
  
  export default {
    name: 'OwnerCars',
    data() {
      return {
        dialogVisible: false,
        ownerCarsInfo: {
          cars: [],
          ownerId: ''
        },
        totalCount: 0,
        pageSize: 10,
        currentPage: 1
      }
    },
    methods: {
      open(ownerId) {
        this.ownerCarsInfo.ownerId = ownerId
        this.dialogVisible = true
        this._loadOwnerCarInfo(1, this.pageSize)
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleSizeChange(size) {
        this.pageSize = size
        this._loadOwnerCarInfo(this.currentPage, size)
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this._loadOwnerCarInfo(page, this.pageSize)
      },
      async _loadOwnerCarInfo(page, size) {
        try {
          const params = {
            page: page,
            row: size,
81955f61   wuxw   优化房屋页面
85
            communityId: this.getCommunityId(),
af1bcbd6   wuxw   房屋页面开发中
86
87
            ownerId: this.ownerCarsInfo.ownerId
          }
81955f61   wuxw   优化房屋页面
88
  
af1bcbd6   wuxw   房屋页面开发中
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
          const response = await queryOwnerCars(params)
          this.ownerCarsInfo.cars = response.data
          this.totalCount = response.total
          this.currentPage = page
        } catch (error) {
          console.error('加载业主车辆信息失败:', error)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .table-container {
    margin-top: 15px;
  }
  </style>