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-select v-model="form.orgId" placeholder="请选择公司">
              <el-option v-for="item in orgs" :label="item.orgName" :value="item.orgId"/>
              </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.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="arrearageFee"
          label="欠费金额">
          <template slot-scope="scope">
            <span>{{(scope.row.arrearageFee) |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">
      <div>
        <el-image style="display: block;width: 100%" :src="url" >
        </el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {pageQueryArrearRecordByCondition,selectAllAppOrg,personOrderBackWxPay } from '@/api/index';
  import {fen2Yuan,string2Date,inOutStateFormatter,parkingDurationFormatter} from '@/filters/index';
  export default {
    data() {
      return {
        form: {
          orgId:null,
          plNos: null,
          carNum: null,
        },
        orgs:[],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orderData: [
        ],
        multipleSelection:[],
        dialogVisible:false,
        url:'http://106.15.186.134:9090/group1/M00/20/F3/rBMAsV0exOmAH91dAAZpQUTBbps512.jpg',
      }
    },
    mounted: function() {
      this.selectAllAppOrg();
    },
    methods: {
      /**
       *获取所有组织下拉框
       */
      selectAllAppOrg:function(){
        let req = {};
        selectAllAppOrg (req).then(response =>{
          if(response.code=='8888'){
            this.orgs = response.data;
            this.form.orgId = response.data[0].orgId;
            this.pageQueryArrearRecordByCondition();
          }else{
            console.log(response);
          }
        });
      },
      /**
       * 获取查询参数
       */
      getQueryParams: function() {
        if(this.form.orgId == undefined || this.form.orgId == null){
          console.log("orgId为空");
          return;
        }
        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,
          orgId:this.form.orgId,
          carNum:this.form.carNum,
        }
        return req;
      },
      /**
       * 查询订单信息
       */
      pageQueryArrearRecordByCondition: function() {
        let req = this.getQueryParams();
        req.baseRequest={
          pageNum:this.currentPage,
          pageSize:this.pageSize,
        },
          pageQueryArrearRecordByCondition (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.pageQueryArrearRecordByCondition();
      },
      //多选
      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 orders = [];
        let orgIds = [];
        /*selects.forEach(item=>{
          orders.push({orderId:item.orderId,parkId:item.plNo,orderNotPayFee:item.arrearageFee});
          orgIds.push(item.orgId);
        });*/
        orders.push({orderId:'101519114989403303936',parkId:'P320211005',orderNotPayFee:'72275'});
        orgIds.push('10005');
        if(orders == null || orders.length < 1){
          this.$message({
            message: '请至少选择一行数据!',
            type: 'warning'
          });
          return;
        }
        let req ={
          sysCode:'10003',
          payType:2,
          paySrcType:103,
          carNumber:'京A12333',
          terminalSource:9,
          recordArreaInfos:JSON.stringify(orders)
        };
        // req = JSON.stringify(req);
        //调用后台接口获取二维码信息
        personOrderBackWxPay(req).then(response =>{
          if(response.code=='8888'){
            console.log(response.data);
            this.url = response.data;
          }else{
            console.log(response);
            this.url = "http://106.15.186.134:9090/group1/M00/20/F3/rBMAsV0exOmAH91dAAZpQUTBbps512.jpg";
          }
        });
        this.dialogVisible = true;
      },
      onSubmit:function() {
        this.pageQueryArrearRecordByCondition();
      },
      onCancel:function() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }
</script>
<style scoped>
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
</style>