wuye / webui

<template>
  <div class="car-create-fee-container">
    <el-card class="box-card">
      <div slot="header" class="flex justify-between">
        <div>{{ $t('carCreateFee.queryCondition') }}</div>
      </div>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model.trim="queryParams.allNum" :placeholder="$t('carCreateFee.parkingSpacePlaceholder')"
            @keyup.enter.native="handleQuery" />
        </el-col>
        <el-col :span="4">
          <el-input v-model.trim="queryParams.carNumLike" :placeholder="$t('carCreateFee.carNumPlaceholder')"
            @keyup.enter.native="handleQuery" />
        </el-col>
        <el-col :span="4">
          <el-input v-model.trim="queryParams.ownerName" :placeholder="$t('carCreateFee.ownerNamePlaceholder')"
            @keyup.enter.native="handleQuery" />
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryParams.state" :placeholder="$t('carCreateFee.parkingSpaceStatus')"
            style="width:100%">
            <el-option v-for="item in states" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
          </el-select>
        </el-col>
        <el-col :span="4" style="text-align:right">
          <el-button type="primary" size="small" @click="handleQuery">
            <i class="el-icon-search"></i>
            {{ $t('carCreateFee.query') }}
          </el-button>
          <el-button size="small" @click="handleReset" style="margin-left:10px">
            <i class="el-icon-refresh"></i>
            {{ $t('carCreateFee.reset') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="flex justify-between">
        <div>{{ $t('carCreateFee.vehicleCharging') }}</div>
        <div>
          <el-button size="small" @click="handleOpenFeeImportExcel">
            <i class="el-icon-plus"></i>
            {{ $t('carCreateFee.customTemplate') }}
          </el-button>
          <el-button size="small" @click="handleOpenDoCreateRoomFee" style="margin-left:10px">
            <i class="el-icon-plus"></i>
            {{ $t('carCreateFee.customCreate') }}
          </el-button>
          <el-button type="primary" size="small" @click="handleBatchCreate" style="margin-left:10px">
            {{ $t('carCreateFee.batchCreate') }}
          </el-button>
          <el-button type="primary" size="small" @click="handleBuyMonthlyCard" style="margin-left:10px">
            {{ $t('carCreateFee.buyMonthlyCard') }}
          </el-button>
        </div>
      </div>

      <el-table :data="cars" border style="width:100%">
        <el-table-column prop="carNum" :label="$t('carCreateFee.licensePlate')" align="center" />
        <el-table-column prop="areaNum" :label="$t('carCreateFee.parkingLot')" align="center" />
        <el-table-column prop="num" :label="$t('carCreateFee.parkingSpace')" align="center" />
        <el-table-column prop="ownerName" :label="$t('carCreateFee.ownerName')" align="center" />
        <el-table-column prop="link" :label="$t('carCreateFee.contact')" align="center" />
        <el-table-column prop="stateName" :label="$t('carCreateFee.status')" align="center" />
        <el-table-column :label="$t('carCreateFee.operation')" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleViewCharges(scope.row)">
              {{ $t('carCreateFee.viewCharges') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top:20px" :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]"
        :page-size="pagination.size" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <!-- 子组件 -->
    <car-create-fee-add ref="carCreateFeeAdd" @success="handleSuccess" />
    <export-car-fee-import-excel ref="exportCarFeeImportExcel" />
    <do-import-create-fee ref="doImportCreateFee" />
  </div>
</template>

<script>
import { listCarCreateFees } from '@/api/fee/carCreateFeeApi'
import { getDict } from '@/api/community/communityApi'

export default {
  name: 'CarCreateFeeList',
  components: {
    'car-create-fee-add': () => import('@/components/fee/carCreateFeeAdd'),
    'export-car-fee-import-excel': () => import('@/components/fee/exportCarFeeImportExcel'),
    'do-import-create-fee': () => import('@/components/fee/doImportCreateFee')
  },
  data() {
    return {
      queryParams: {
        allNum: '',
        carNumLike: '',
        ownerName: '',
        state: '',
        carTypeCd: '1001',
        page: 1,
        row: 10
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      cars: [],
      states: []
    }
  },
  created() {
    this.getDictData()
    this.fetchData()
  },
  methods: {
    async getDictData() {
      try {
        this.states = await getDict('owner_car', 'state')
      } catch (error) {
        console.error('获取字典数据失败:', error)
      }
    },
    async fetchData() {
      try {
        const res = await listCarCreateFees(this.queryParams)
        this.cars = res.data || []
        this.pagination.total = res.total || 0
      } catch (error) {
        this.$message.error(this.$t('common.fetchError'))
      }
    },
    handleQuery() {
      this.queryParams.page = 1
      this.fetchData()
    },
    handleReset() {
      this.queryParams = {
        allNum: '',
        carNumLike: '',
        ownerName: '',
        state: '',
        carTypeCd: '1001',
        page: 1,
        row: this.queryParams.row
      }
      this.fetchData()
    },
    handleSizeChange(size) {
      this.queryParams.row = size
      this.fetchData()
    },
    handleCurrentChange(current) {
      this.queryParams.page = current
      this.fetchData()
    },
    handleBatchCreate() {
      this.$refs.carCreateFeeAdd.open({ isMore: true })
    },
    handleOpenFeeImportExcel() {
      this.$refs.exportCarFeeImportExcel.open()
    },
    handleOpenDoCreateRoomFee() {
      this.$refs.doImportCreateFee.open()
    },
    handleBuyMonthlyCard() {
      this.$router.push({ path: '/views/fee/buyCarMonthCard' })
    },
    handleViewCharges(row) {
      this.$router.push({
        path: '/views/fee/listCarFee',
        query: {
          carId: row.carId,
          carNum: row.carNum,
          areaNum: row.areaNum,
          num: row.num
        }
      })
    },
    handleSuccess() {
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.car-create-fee-container {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;
  }

  .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h5 {
      margin: 0;
      font-size: 16px;
    }
  }
}
</style>