mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-11-30 22:20:45 +00:00
487 lines
16 KiB
Vue
487 lines
16 KiB
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 }} {{ 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>
|