luohe_operation/src/pages/index/components/product_order.vue

<template>
  <div class="body-wrapper">
    <el-tabs  v-model="activeName">
      <el-tab-pane label="停车卡订单查询" name="停车卡订单查询">
        <el-form class="form-wrapper" :inline="true" :model="formInline1" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品名称:">
                <el-input v-model="formInline1.goods_name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发布状态:">
                <el-select clearable v-model="formInline1.release_status" placeholder="请选择" popper-class="cur-select">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="上架" value="1"></el-option>
                  <el-option label="下架" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="可购买时间:">
                <el-date-picker
                  v-model="formInline1.time"
                  type="daterange"
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit1" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border :row-class-name="rowClassName" :data="tableData1" v-loading="loading1">
          <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="total, prev, pager, next, jumper" :total="total1" @current-change="handlePageChange1"
                         :current-page.sync="pageNum1" :page-size.sync="pageSize1">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="错峰卡订单查询" name="错峰卡订单查询">
        <el-form class="form-wrapper" :inline="true" :model="formInline2" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单号: ">
                <el-input v-model="formInline2.orderNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号: ">
                <el-input v-model="formInline2.plateNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border :row-class-name="rowClassName" :data="tableData2" v-loading="loading2">
          <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="total, prev, pager, next, jumper" :total="total1" @current-change="handlePageChange2"
                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预约停车订单" name="预约停车订单">
        <el-form class="form-wrapper" :inline="true" :model="formInline3" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="手机号:">
                <el-input v-model="formInline3.user_phone" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车牌号:">
                <el-input v-model="formInline3.plate_no" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="停车场:">
                <el-select filterable v-model="formInline3.car_park_id" placeholder="请选择" clearable>
                  <el-option
                    v-for="(item,index) in parkDic"
                    :key="index"
                    :label="item.parkName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit3" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border :row-class-name="rowClassName" :data="tableData3" v-loading="loading3">
          <el-table-column v-for="(item, index) in columns3" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="total, prev, pager, next, jumper" :total="total3" @current-change="handlePageChange3"
                         :current-page.sync="pageNum3" :page-size.sync="pageSize3">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/audit.js";
import dictionary from "@/util/dictionary";
import api_z from "@/api/article_z.js";
import moment from 'moment'

export default {
  components: {},
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      activeName: '停车卡订单查询',
      columns1: [
        {
          label: '商品名称',
          key: 'goods_name'
        },
        {
          label: '所需金额（分）',
          key: 'reality_price'
        },
        {
          label: '总库存',
          key: 'goods_total_number'
        },
        {
          label: '剩余库存量',
          key: 'goods_number'
        },
        {
          label: '发布状态',
          key: 'release_status'
        },
        {
          label: '可购买时间',
          key: 'good_range'
        },
        {
          label: '创建时间',
          key: 'goods_create_time'
        },
        {
          label: '最后修改时间',
          key: 'goods_update_time'
        },
      ],
      tableData1: [],
      total1: 0,
      pageSize1: 10,
      pageNum1: 1,
      formInline1: {
        goods_name: '',
        release_status:'',
        time: []
      },
      columns2: [
        {
          label: '订单编号',
          key: 'orderNo'
        },
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '停车场',
          key: 'parkName'
        },
        {
          label: '支付金额',
          key: 'payAmount'
        },
        {
          label: '支付方式',
          key: 'payWay'
        },
        {
          label: '支付状态',
          key: 'payStatus'
        },
      ],
      tableData2: [],
      total2: 0,
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        orderNo: '',
        plateNo:''
      },
      columns3: [
        {
          label: '手机号',
          key: 'appointment_phone'
        },
        {
          label: '车牌号',
          key: 'plate_no'
        },
        {
          label: '车场',
          key: 'car_park_name'
        },
        {
          label: '车位',
          key: 'parking_space'
        },
        {
          label: '预约时间',
          key: 'appointment_time'
        },
        {
          label: '状态',
          key: 'appointment_status'
        },
        {
          label: '取消方',
          key: 'cancel_type'
        },
        {
          label: '取消原因',
          key: 'cancel_reason'
        },
        {
          label: '最后更新时间',
          key: 'latest_time'
        },
      ],
      tableData3: [],
      total3: 0,
      pageSize3: 10,
      pageNum3: 1,
      formInline3: {
        user_phone: '',
        plate_no: '',
        car_park_id:'',
      },
      appointmentMap: {
        0: '进行中',
        1: '已完成',
        2: '已取消',
        3: '已违约'
      },
      parkDic: []
    }
  },
  mounted() {
    this.getParkDic()
    this.getTableData1()
    this.getTableData2()
    this.getTableData3()
  },
  watch: {
  },
  methods: {
    //车场
    getParkDic() {
      api.parkDic().then(res => {
        this.parkDic = res.data || []
      })
    },
    rowClassName({ rowIndex }) {
      // 偶数行和奇数行分别返回不同的类名，也可以根据实际需求基于rowData进行条件判断
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
    onSubmit1() {
      this.pageNum1 = 1
      this.getTableData1()
    },
    onSubmit2() {
      this.pageNum2 = 1
      this.getTableData2()
    },
    onSubmit3() {
      this.pageNum3 = 1
      this.getTableData3()
    },
    handlePageChange1() {
      this.getTableData1()
    },
    getTableData1() {
      this.loading1 = true
      const {pageNum1, pageSize1} = this
      let params = {...this.formInline1}
      if (
        this.formInline1.time && this.formInline1.time.length === 2 &&
        this.formInline1.time[1] !== ""
      ) {
        params.goods_start_time = this.formInline1.time[0].substring(0, 10) + " 00:00:00";
        params.goods_end_time = this.formInline1.time[1].substring(0, 10) + " 23:59:59";
      }
      delete params.time
      api_z.queryProductOrderParkingByPage({curPage: pageNum1, pageSize: pageSize1, ...this.params}).then(res => {
        this.tableData1 = res.data.data.goods_list.map(item => ({...item, release_status: item.release_status === '1' ? '上架' : '下架', good_range: `${moment(item.goods_start_time).format('YYYY-MM-DD')}~${moment(item.goods_end_time).format('YYYY-MM-DD')}`})) || []
        this.total1 = res.data.data.total_rows
        this.loading1 = false
      })
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData2() {
      this.loading2 = true
      const {pageNum2, pageSize2} = this
      api_z.queryProductOrderUnpeakByPage({current: pageNum2, size: pageSize2, ...this.formInline2}).then(res => {
        this.tableData2 = res.data.records || []
        this.total2 = res.data.total
        this.loading2 = false
      })
    },
    handlePageChange3() {
      this.getTableData3()
    },
    getTableData3() {
      this.loading3 = true
      api.orderListByPage({cur_page: pageNum3, page_size: pageSize3, ...this.formInline3}).then(res => {
        this.tableData3 = res.data.data.map(item => ({...item, cancel_type: item.cancel_type === 1 ? '平台':'用户',appointment_status: this.appointmentMap[item.appointment_status]})) || []
        this.total3 = res.data.totalRows
        this.loading3 = false
      })
    },
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  .form-wrapper {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    margin-bottom: 20px;
    text-align: center;
    .input-wrapper{
      width: 36%;
    }
  }
}
</style>