luohe_fronted/src/pages/index/components/car_owner_credit.vue

<template xmlns:piechart="http://www.w3.org/1999/html">
  <div class="body-wrapper">
    <div class="search-card">
      <h5>车主停车欠费情况</h5>
    </div>
    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
                     :current-page.sync="pageNum5" :page-size.sync="pageSize5">
      </el-pagination>
    </div>
    <br>


  </div>
</template>
<script>
import api from "@/api/audit.js";
import piechart from "@/components/pieChart";

export default {
  components: {
    piechart
  },
  data() {
    return {
      columns: [
        {
          label: '姓名',
          key: 'resourceName'
        },
        {
          label: '欠费金额',
          key: 'resourceType'
        } ,{
          label: '信用分',
          key: 'resourceName'
        }
      ],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
      searchWords: undefined,
      searchWords2: undefined,
    }
  },
  mounted() {
    this.getTableData()
  },
  watch: {
  },
  methods: {
    handlePageChange() {
      this.getTableData()
    },
    handleAudit(row) {
      this.selRow = row
      this.dialogVisible = true
    },
    handleCancelApply(row) {
      console.log('enter handle cancel apply')
    },
    handleConfirm() {
      const {id} = this.selRow
      api.applyResource({id, applyType: this.radio}).then(res => {
        if(res.success) {
          this.dialogVisible = false
          this.$message({
            message: '审核成功!',
            type: 'success'
          })
          this.getTableData()
        }
      })
    },
    getTableData() {
      const {pageNum, pageSize, searchWords} = this
      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
        this.tableData = []
        res.data.records.map((item, index) => {
          const newItem = {...item}
          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
          this.tableData.push(newItem)
        })
        this.total = res.data.total
      })
    },
    getTableData2() {
      api.applyList({}).then(res => {
        this.tableData2 =  res.data.data
        this.total2 = res.data.total
      })
    },

    getTableData3() {
      api.applyList({pageNum: this.pageNum2, pageSize:this.pageSize2, resourceName: this.searchWords2}).then(res => {
        this.tableData3 =  res.data.data
        this.total3 = res.data.total
      })
    },


    getApplyTypeText(val) {
      if (!val){
        return '未申请'
      }
      const textMap = {
        1: '待审批',
        2: '审批通过',
        3: '审批驳回'
      }
      return textMap[val]
    },
    handleSearch() {
      this.pageNum = 1
      this.getTableData()
    }
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;
    .input-wrapper{
      width: 36%;
    }
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
</style>