carTable.vue

<template>
  <div>
    <el-table :data="tableData" style="width: 98%;margin:0 auto;" v-loading.body="loading">
      <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
      <el-table-column label="车牌号码" property="vehicle.plate_text" type="name" width="180" align="center"></el-table-column>
      <el-table-column label="车库类型" property="lib_code" type="name" width="180" align="center" :formatter="setLib"></el-table-column>
      <el-table-column label="车牌类型" property="vehicle.plate_type" :formatter="setPlateType" width="180" align="center"></el-table-column>
      <el-table-column label="车辆类型" property="vehicle.vehicle_type" :formatter="setCarType" align="center"> </el-table-column>
      <el-table-column label="车身颜色" property="vehicle.body_color" :formatter="setCarColor" align="center"> </el-table-column>
      <el-table-column label="车主姓名" property="owner.name" align="center"> </el-table-column>
      <el-table-column label="身份证号" property="owner.cnsf_id" align="center"></el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scope">
          <div class="tab-btn-box">
            <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">查看详情</span>
            <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑车辆</span>
            <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination class="pages" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :page-size="limit" layout="total,prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div>
      <carDetail ref='detail'></carDetail>
    </div>
  </div>
</template>
<script>
  import carDetail from './carDetail'
  export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        limit: 20,
        total: 0,
        offset: 0,
        loading: true,
        provenceName: "",
        cityName: "",
        cData: '',
        carLibs:[]
      };
    },
    props: {
      lib_code: {
        //库名称
        // type: String
      },
      plateType: {
        //车牌类型
        // type: String
      },
      plateText: {
        //车牌号码
        // type: String
      },
      carOwner: {
        //车主姓名
      }
    },
    methods: {
      handleSee(index, row) {
        this.$refs.detail.dataInit(row)
      },
      handleEdit(index, row) {
        this.$emit("edit", index, row);
      },
      handleDelete(index, row) {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            console.log(this.axios)
            this.axios
              .delete(this.IP + "/api/v1/alarm/traffic/lib_vehicles/" + row.unid)
              .then((response)=> {
                this.initTable();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      setLib(row, column, cellValue){
        let str;
        this.carLibs.forEach(ele => {
          if (ele.lib==cellValue) {
            str = ele.name
          }
        });
        return str
      },
      setPlateType(row, column, cellValue) {
        return this.getCode('号牌类型', cellValue)
      },
      setCarType(row, column, cellValue) {
        return this.getCode('车辆类型', cellValue)
      },
      setCarColor(row, column, cellValue) {
        return this.getCode('车身颜色', cellValue)
      },
      handleSizeChange(val) {
        alert(val);
      },
      handleCurrentChange(val) {
        this.offset = (val - 1) * this.limit;
        this.initTable();
      },
      initTable() {
        this.axios
          .get(this.IP + "/api/v1/alarm/traffic/lib_vehicles", {
            params: {
              offset: this.offset,
              limit: this.limit,
              plate_text__like: this.plateText,
              plate_type: this.plateType,
              owner_name__like: this.carOwner,
              lib_code: this.lib_code,
            }
          }).then((response)=> {
            this.tableData = response.data.list_data;
            this.total = response.data.total_num;
            this.loading = false;
          });
      }
    },
    components: {
      carDetail
    },
    computed: {},
    created() {
      this.faceapi.getCarDbData().then(res=>{
        this.carLibs = res.list_data
        this.initTable();
      })
    }
  };

</script>
<style lang="stylus" scoped>
  .mb20 {
    margin-bottom: 50px;
  }

  .pages {
    float: right;
    margin: 20px 15px 30px 0;
  }

</style>