src/views/order/index.vue

<template>
  <div>
    <div class="serch-wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="60px" label-position="left">
          <!--<el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">-->
            <!--<el-form-item label="停车场">-->
              <!--<el-select v-model="form.plNos" placeholder="请选择停车场">-->
                <!--<el-option label="停车场BA" value="shanghai"/>-->
                <!--<el-option label="停车场" value="beijing"/>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
            <el-form-item label="车牌">
              <el-input v-model="form.carNum" maxlength="10" />
            </el-form-item>
          </el-col>
          <!--<el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">-->
            <!--<el-form-item label="类型">-->
              <!--<el-select v-model="form.region" placeholder="请选择类型">-->
                <!--<el-option label="室内停车场" value="shanghai"/>-->
                <!--<el-option label="路侧停车场" value="beijing"/>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :xs="8" :sm="6" :md="3" :lg="3" :xl="1" >
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="table-wrap">
      <p class="table-title">订单详情</p>
      <el-table
        :data="orderData"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        style="width: 100%;"
        :show-overflow-tooltip="true">
        <el-table-column
          prop="plName"
          label="停车场"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="carNumber"
          label="车牌"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="orderTotalFee"
          label="应收费用">
          <template slot-scope="scope">
            <span>{{(scope.row.orderTotalFee) |fen2Yuan}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderActFee"
          label="实收费用">
          <template slot-scope="scope">
            <span>{{(scope.row.orderActFee) |fen2Yuan}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkInTime"
          label="入场时间"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row.parkInTime) |string2Date(7)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkOutTime"
          label="出场时间"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row.parkOutTime) |string2Date(7)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkingDuration"
          label="停车时长"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row) |parkingDurationFormatter(scope.row.parkingDuration)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="berthNo"
          label="泊位编号">
        </el-table-column>
        <el-table-column
          prop="orderState"
          label="订单状态">
          <template slot-scope="scope">
            <span>{{(scope.row) |inOutStateFormatter}} </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
        @prev-click="handleSizeChange"
        @next-click="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {queryOwnerParkRecord} from '@/api/index';
  import {fen2Yuan,string2Date,inOutStateFormatter,parkingDurationFormatter} from '@/filters/index';
export default {
  data() {
    return {
      form: {
        plNos: null,
        carNum: null,
      },
      loading:false,
      total: 0,
      currentPage: 1,
      pageSize: 6,
      orderData: [
      ]
    }
  },
  mounted: function() {
    this.queryOwnerParkRecord();
  },
  methods: {
    /**
     * 获取查询参数
     */
    getQueryParams: function() {
      let userInfo = this.$store.state.user.userInfo;
      let plNos = [];
      if(this.form.plNos != null && this.form.plNos != ''){
        plNos.push(this.form.plNos);
      }
      let req = {
        custId:userInfo.custId,
        // custId:'501519113641649119232',
        plNos:plNos,
        carNum:this.form.carNum,
      }
      return req;
    },
    /**
     * 查询订单信息
     */
    queryOwnerParkRecord: function() {
      this.loading=true;
      let req = this.getQueryParams();
      req.baseRequest={
        pageNum:this.currentPage,
        pageSize:this.pageSize,
      },
        queryOwnerParkRecord (req).then(response =>{
          if(response.code=='8888'){
            this.loading=false;
            this.orderData = response.data.dataList;
            this.total = response.data.pageTotals;
          }else{
            console.log(response);
          }
        });
    },
    // 获取子组件页码方法
    handleSizeChange: function(page) {
      console.log(page)
      this.currentPage = page;
      /** 调用表格数据.*/
      this.queryOwnerParkRecord();
    },
    onSubmit() {
      this.queryOwnerParkRecord();
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>
<style scoped>
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
</style>