erp/resources/frontend/src/views/plat/orderList.vue

<template>
  <div class="conent">
    <el-card>
      <el-form ref="form" :inline="true" label-width="90px">
        <el-form-item label="所属店铺:">
          <el-select v-model="filter.shop_id" placeholder="店铺" @change="handleChoose()">
            <el-option v-for="item in shopsList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="发货状态:">
          <el-select v-model="filter.shipping_status" placeholder="发货状态" @change="handleChoose()">
            <el-option value="" label="全部"></el-option>
            <el-option value="0" label="未发货"></el-option>
            <el-option value="2" label="部分发货"></el-option>
            <el-option value="1" label="已发货"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单类型:">
          <el-select v-model="filter.is_supplier" placeholder="订单类型" @change="handleChoose()">
            <el-option value="" label="全部订单"></el-option>
            <el-option :value="1" label="自卖团订单"></el-option>
            <el-option :value="0" label="帮卖团订单"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单状态:">
          <el-select v-model="filter.cancel_status" placeholder="订单状态" @change="handleChoose()">
            <el-option value="" label="全部"></el-option>
            <el-option :value="0" label="未取消"></el-option>
            <el-option :value="1" label="已取消"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="售后状态:">
          <el-select v-model="filter.after_sales_status" placeholder="售后状态" @change="handleChoose()">
            <el-option value="" label="全部"></el-option>
            <el-option :value="0" label="未售后"></el-option>
            <el-option :value="1" label="有售后"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="商品数量:">
          <el-select v-model="filter.goods_sku_num" placeholder="商品数量" @change="handleChoose()">
            <el-option value="" label="全部"></el-option>
            <el-option :value="1" label="1个商品"></el-option>
            <el-option :value="2" label="2-5个商品"></el-option>
            <el-option :value="6" label="6个以上商品"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单商品:">
          <el-select v-model="filter.external_sku_ids" multiple filterable remote reserve-keyword placeholder="订单商品"
            :remote-method="remoteMethod" :loading="searchLoading">
            <el-option v-for="item in options" :key="item.external_sku_id" :label="item.title"
                :value="item.external_sku_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="下单时间:">
          <el-date-picker v-model="confirmAt" type="datetimerange" range-separator="-" start-placeholder="起"
            end-placeholder="止" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="handleChoose()">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="跟团号:">
          <el-input v-model="filter.pno" placeholder="跟团号" @keyup.enter.native="handleChoose"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleChoose">筛选</el-button>
          <el-button plain @click="handleReChoose">重置筛选</el-button>
          <el-button type="primary" @click="print">打印</el-button>
          <!-- <el-button v-if="form.goods_sku_num === 2" type="primary">配货单导出</el-button> -->
          <el-button type="warning" :loading="exportLoading" @click="handleExport" icon="el-icon-download">数据导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-table v-loading="loading" ref="multipleTable" :data="orderList" style="width: 100%" border
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="店铺名称" prop="shop.name" />
        <el-table-column label="跟团号" align="center">
          <template slot-scope="scope">
            {{ scope.row.is_supplier ? '自卖团: ' : '帮卖团: ' }}
            {{ scope.row.is_supplier ? scope.row.participate_no : scope.row.supply_participate_no }}
          </template>
        </el-table-column>

        <el-table-column label="收件人信息" width="240">
          <template slot-scope="scope">
            <p>{{ scope.row.receiver_name }}&nbsp;&nbsp;{{ scope.row.receiver_mobile }}</p>
            <p>{{ scope.row.receiver_address_province }}/{{ scope.row.receiver_address_city }}/{{
                scope.row.receiver_address_district }}</p>
            <p>{{ scope.row.receiver_address_detail }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="shipping_status" label="发货状态" align="center"></el-table-column>
        <el-table-column prop="cancel_status" label="订单状态" align="center"></el-table-column>
        <el-table-column prop="after_sales_status" label="售后状态" align="center"></el-table-column>
        <el-table-column label="商品信息" width="380">
          <template slot-scope="scope">
            <div v-for="item in scope.row.items" :key="item.id">
              {{ item.goods_name }}
              <span style="color: red;">+{{ item.goods_number }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="confirm_at" label="下单时间" width="150" align="center"></el-table-column>
      </el-table>

      <div class="page-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 50, 100]"
          :page-size="per_page"
          layout="prev, pager, next, sizes, jumper, total"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { platOrderList, printOrders, printSuccess, exportOrder } from "@/api/plat";
import { storeList } from "@/api/shop"
import { goodsSkusList } from "@/api/goods"
import dayjs from 'dayjs'

export default {
  data() {
    return {
      filter: {
        shop_id: '',
        shipping_status: '',
        is_supplier: '',
        cancel_status: 0,
        after_sales_status: 0,
        goods_sku_num: '',
        external_sku_ids: '',
        pno: ''
      },
      loading: false,
      searchLoading: false,
      options: [],
      orderList: [],
      total: 0,
      page: 1, //当前页
      per_page: 10, //每页显示数量
      shopsList: [],
      confirmAt: [],
      print_order_ids: '',
      print_documents: [],
      socket: null,
      lockReconnect: false, //是否真正建立连接
      timeout: 58 * 1000, //58秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      timeoutnum: null, //断开 重连倒计时
      defaultPrinter: null,
      taskIDArray: [],
      requestIDGetGlobalConfig: '',
      exportLoading: false
    }
  },
  created() {
      let start = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
      let end = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
      this.confirmAt = [start, end]
      this.getOrderList()
      this.getShopsList()
  },
  methods: {
    getOrderList() {
      this.loading = true
      let params = {
        ...this.filter,
        page: this.page,
        per_page: this.per_page,
        confirm_at_start: this.confirmAt ? this.confirmAt[0] : '',
        confirm_at_end: this.confirmAt ? this.confirmAt[1] : ''
      }
      platOrderList(params).then((res) => {
        this.orderList = res.data.data
        this.total = res.data.meta.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getShopsList() {
      let params = {
        page: 0,
        per_page: 99
      }
      storeList(params).then((res) => {
        this.shopsList = res.data.data
      })
    },
    handleSizeChange(val) {
      this.page = 1
      this.per_page = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getOrderList()
    },
    handleChoose() {
      this.page = 1
      this.getOrderList()
    },
    handleReChoose() {
      this.filter = {
        shop_id: '',
        shipping_status: '',
        is_supplier: '',
        cancel_status: 0,
        after_sales_status: 0,
        goods_sku_num: '',
        external_sku_ids: '',
        pno: ''
      }
      this.page = 1
      this.getOrderList()
    },
    remoteMethod(query) {
      if (query !== '') {
        this.searchLoading = true;
        setTimeout(() => {
          this.searchLoading = false;
          goodsSkusList(query).then((res) => {
            this.options = res.data.filter(item => {
              return item.title.toLowerCase().indexOf(query.toLowerCase()) > -1;
            });
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    print() {
      const print_loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      });
      printOrders(this.filter).then((res) => {
          this.print_documents = res.data.documents;
          this.print_order_ids = res.data.order_ids;
          print_loading.close();
          this.doPrint();
      })
    },
    handleSelectionChange(val) {
      let ids = []
      val.forEach((item) => {
          ids.push(item.id)
      })
      this.filter.ids = ids
    },
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://127.0.0.1:5000";
      this.socket = new WebSocket(wsuri);
      // 客户端接收服务端数据时触发
      this.socket.onmessage = this.websocketonmessage;
      // 连接建立时触发
      this.socket.onopen = this.websocketonopen;
      // 通信发生错误时触发
      this.socket.onerror = this.websocketonerror;
      // 连接关闭时触发
      this.socket.onclose = this.websocketclose;
    },
    // 连接建立时触发
    websocketonopen() {
      //开启心跳
      this.start();
      if (this.socket.readyState === 1) {
        // 获取打印机列表
        this.getPrinters();
      }
    },
    start() {
      //开启心跳
      console.log("开启心跳");
      var self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      self.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.socket.readyState == 1) {
            //如果连接正常
        } else {
            //否则重连
            self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function () {
            //超时关闭
            self.socket.close();
        }, self.timeout);
      }, self.timeout);
    },
    reconnect() {
      //重新连接
      var that = this;
      if (that.lockReconnect) {
          return;
      }
      that.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      that.timeoutnum = setTimeout(function () {
          //新连接
          that.initWebSocket();
          that.lockReconnect = false;
      }, 5000);
    },
    // 通信发生错误时触发
    websocketonerror() {
      console.log("出现错误");
      this.reconnect();
    },
    // 客户端接收服务端数据时触发
    websocketonmessage(e) {
      console.log(e);
      if (JSON.parse(e.data).printers !== undefined) {
          this.defaultPrinter = JSON.parse(e.data).defaultPrinter;
      }
      // JSON.parse 用来解析JSON字符串
      console.log("默认打印机" + this.defaultPrinter)

      if (JSON.parse(e.data).status === 'success') {
          console.log("打印就绪..")
      }
      if (JSON.parse(e.data).status === 'failed') {
          console.log("打印未就绪..")
      }
      if (JSON.parse(e.data).taskStatus === 'printed') {
          console.log('出纸成功--打印成功')
          // 打印成功回调
          printSuccess({ order_ids: this.print_order_ids }).then((res) => {
              console.log(res)
          })
      }
      if (JSON.parse(e.data).taskStatus === 'failed') {
          console.log("打印失败!")
      }
      if (JSON.parse(e.data).taskStatus === 'canceled') {
          console.log("打印取消!")
      }

      //收到服务器信息，心跳重置
      this.reset();
    },
    reset() {
      //重置心跳
      var that = this;
      //清除时间
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //重启心跳
      that.start();
    },
    websocketsend(Data) {
      //数据发送
      this.socket.send(Data);
    },
    // 连接关闭时触发
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
      //重连
      this.reconnect();
    },
    getPrinters() {
      var request = this.getRequestObject("getPrinters");
      this.websocketsend(JSON.stringify(request));
    },
    doPrint() {
      var request = this.getRequestObject("print");
      request.task = new Object();
      request.task.taskID = this.getUUID(8, 10);
      // 把每次打印的任务 taskID 保存到 taskIDArray 数组
      this.taskIDArray.push(request.task.taskID)
      // 记录当前打印请求的ID
      this.requestIDGetGlobalConfig = request.task.taskID
      request.task.preview = false;
      request.task.printer = this.defaultPrinter;
      request.task.documents = this.print_documents;
      console.log(request.task.documents)

      this.websocketsend(JSON.stringify(request));
    },
    getRequestObject(cmd) {
      var request = new Object();
      // 必须:请求的ID,用于唯一标识每个请求，每个客户端保证生成唯一的ID
      request.requestID = this.getUUID(8, 16);
      //必须: 协议当前版本
      request.version = "1.0";
      //必须: 请求命令名称
      request.cmd = cmd;

      return request;
    },
    getUUID(len, radix) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
      var uuid = [], i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16;
            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
          }
        }
      }

      return uuid.join('');
    },
    handleExport() {
      this.exportLoading = true
      let params = {
        ...this.form,
        page: 1,
        per_page: this.per_page,
        confirm_at_start: this.confirmAt[0] ? this.confirmAt[0] : '',
        confirm_at_end: this.confirmAt[1] ? this.confirmAt[1] : '',
        is_export: 1
      }
      // window.open("/api/plat_orders?" + this.objectToQueryString(params))

      exportOrder(params).then((res) => {
        this.downLoadXls(res.data)
        this.$message({ type: 'success', message: '导出成功！' })
        this.exportLoading = false
      }).catch(() => {
        this.exportLoading = false
      })
    },
    downLoadXls(response) {
      const content = response
      const blob = new Blob([content])
      const today = new Date().toLocaleDateString()
      const fileName = `订单列表${today}.xlsx`
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    objectToQueryString(obj) {
      return Object.keys(obj)
        .map(key => encodeURIComponent(key) + '=' + (obj[key] ? encodeURIComponent(obj[key]) : ''))
        .join('&');
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>