src/views/payback/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-input v-model="form.name" maxlength="10" />
            </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">
      <el-row :gutter="20">
        <el-col :xs="8" :sm="6" :md="3" :lg="22" :xl="1">
          <p class="table-title">订单详情</p>
        </el-col>
        <el-col :xs="8" :sm="3" :md="3" :lg="2" :xl="1">
          <el-button style="margin-top: 8px" size="small" type="primary" @click="toBackSubmit">补缴</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="orderData"
        style="width: 100%;"
        :show-overflow-tooltip="true"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <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="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>
    <!--补缴对话框-->
    <el-dialog
      title="补缴"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false">
      <span>这是二维码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </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,
        },
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orderData: [
        ],
        multipleSelection:[],
        dialogVisible:false,
      }
    },
    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',
          orderStates:[52],
          plNos:plNos,
          carNum:this.form.carNum,
        }
        return req;
      },
      /**
       * 查询订单信息
       */
      queryOwnerParkRecord: function() {
        let req = this.getQueryParams();
        req.baseRequest={
          pageNum:this.currentPage,
          pageSize:this.pageSize,
        },
          queryOwnerParkRecord (req).then(response =>{
            if(response.code=='8888'){
              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();
      },
      //多选
      handleSelectionChange:function(val) {
        this.multipleSelection = val;
      },
      toBackSubmit:function(){
        let selects = this.multipleSelection;
        if(selects == null || selects.length < 1){
          this.$message({
            message: '请至少选择一行数据!',
            type: 'warning'
          });
          return;
        }
        let backs = [];
        selects.forEach(item=>{
          backs.push({orderId:item.orderId,carNumber:item.carNumber});
        });
        console.log(backs);
        //TODO 调用后台接口获取二维码信息
        this.dialogVisible = true;
      },
      onSubmit:function() {
        this.queryOwnerParkRecord();
      },
      onCancel:function() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }
</script>
<style scoped>
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
</style>