mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-12-01 14:40:44 +00:00
507 lines
20 KiB
Vue
507 lines
20 KiB
Vue
<template>
|
||
<div class="conent">
|
||
<el-card>
|
||
<el-form ref="form" :inline="true" :model="form">
|
||
<el-form-item label="所属店铺:">
|
||
<el-select v-model="form.shop_id" placeholder="店铺">
|
||
<el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="发货状态:">
|
||
<el-select v-model="form.shipping_status" placeholder="发货状态">
|
||
<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="form.is_supplier" placeholder="订单类型">
|
||
<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="form.cancel_status" placeholder="订单状态">
|
||
<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="form.after_sales_status" placeholder="售后状态">
|
||
<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="form.goods_sku_num" placeholder="商品数量">
|
||
<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="form.print_status" placeholder="打印状态">
|
||
<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="form.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="form.confirm_at" type="datetimerange" range-separator="-" start-placeholder="起"
|
||
end-placeholder="止" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleChoose">筛选</el-button>
|
||
<el-button plain @click="handleReChoose">重置筛选</el-button>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="print">打印</el-button>
|
||
<el-button v-if="form.goods_sku_num === 2" type="primary">配货单导出</el-button>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card style="margin-top: 10px">
|
||
<el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55">
|
||
</el-table-column>
|
||
<el-table-column label="店铺名称">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.shop.name }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="跟团号">
|
||
<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="160">
|
||
<template slot-scope="scope">
|
||
<p>{{ scope.row.receiver_name }}</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="发货状态"></el-table-column>
|
||
<el-table-column prop="cancel_status" label="订单状态"></el-table-column>
|
||
<el-table-column prop="after_sales_status" label="售后状态"></el-table-column>
|
||
<el-table-column label="商品信息" width="420">
|
||
<template slot-scope="scope">
|
||
<div v-for="item in scope.row.items" :key="item.id">
|
||
{{ item.goods_name }}
|
||
<br />
|
||
<span style="color: red;">+{{ item.goods_number }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="confirm_at" label="下单时间" width="100"></el-table-column>
|
||
<el-table-column prop="print_status" label="打印次数"></el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页功能 -->
|
||
<div class="block">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
|
||
</el-pagination>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { platOrderList, printOrders, printSuccess } from "../../api/plat";
|
||
import { storeList } from "../../api/shop";
|
||
import { goodsSkusList } from "../../api/goods";
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
shop_id: "",
|
||
// activity_no: "",
|
||
shipping_status: "",
|
||
// is_supplier: "",
|
||
cancel_status: "0",
|
||
after_sales_status: "0",
|
||
// supply_participate_no: "",
|
||
// participate_no: "",
|
||
goods_sku_num: "",
|
||
print_status: "0",
|
||
external_sku_ids: [],
|
||
confirm_at: [],
|
||
ids: [],
|
||
},
|
||
dialogVisible: false,
|
||
loading: true,
|
||
searchLoading: false,
|
||
options: [],
|
||
tableData: [],
|
||
Paginationdata: {}, //分页相关数据
|
||
current_page: 1, //当前页
|
||
per_page: 10, //每页显示数量
|
||
shops: [],
|
||
groupActivity: [],
|
||
exportForm: {
|
||
shop_id: "",
|
||
start_no: "",
|
||
end_no: "",
|
||
is_supplier: 1,
|
||
},
|
||
exportFormRules: {
|
||
shop_id: [
|
||
{ required: true, trigger: 'blur' }
|
||
],
|
||
start_no: [
|
||
{ required: true, trigger: 'blur' }
|
||
],
|
||
end_no: [
|
||
{ required: true, trigger: 'blur' }
|
||
],
|
||
},
|
||
confirmAt: [],
|
||
print_order_ids: '',
|
||
print_documents: [],
|
||
socket: null,
|
||
lockReconnect: false, //是否真正建立连接
|
||
timeout: 58 * 1000, //58秒一次心跳
|
||
timeoutObj: null, //心跳心跳倒计时
|
||
serverTimeoutObj: null, //心跳倒计时
|
||
timeoutnum: null, //断开 重连倒计时
|
||
defaultPrinter: null,
|
||
taskIDArray: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.initConfirmAt();
|
||
this.getPlatOrderList({
|
||
confirm_at_start: this.form.confirm_at[0],
|
||
confirm_at_end: this.form.confirm_at[1]
|
||
});
|
||
this.initWebSocket();
|
||
},
|
||
mounted() {
|
||
// 展示店铺列表
|
||
this.getShopsList();
|
||
},
|
||
beforeDestroy() {
|
||
// 订阅事件记得要取消
|
||
},
|
||
destroyed() {
|
||
},
|
||
methods: {
|
||
initConfirmAt() {
|
||
const nowTimeDate = new Date();
|
||
nowTimeDate.setHours(0, 0, 0, 0);
|
||
this.form.confirm_at[0] = nowTimeDate.toLocaleString('zh', { hour12: false }).replaceAll('/', '-');
|
||
nowTimeDate.setHours(23, 59, 59, 999);
|
||
this.form.confirm_at[1] = nowTimeDate.toLocaleString('zh', { hour12: false }).replaceAll('/', '-');
|
||
this.confirmAt = this.form.confirm_at;
|
||
},
|
||
// 店铺列表
|
||
getPlatOrderList(params = {}) {
|
||
params.page = this.current_page;
|
||
params.per_page = this.per_page;
|
||
|
||
platOrderList(params).then((res) => {
|
||
this.tableData = res.data.data;
|
||
this.Paginationdata = res.data.meta;
|
||
});
|
||
},
|
||
getShopsList() {
|
||
let page = {
|
||
page: 0,
|
||
per_page: 99,
|
||
};
|
||
storeList(page).then((res) => {
|
||
this.shops = res.data.data;
|
||
});
|
||
this.loading = false;
|
||
},
|
||
//分页功能
|
||
handleSizeChange(val) {
|
||
//当前条数
|
||
this.current_page = 1;
|
||
this.per_page = val;
|
||
this.getPlatOrderList();
|
||
},
|
||
handleCurrentChange(val) {
|
||
//当前页
|
||
this.current_page = val;
|
||
this.getPlatOrderList();
|
||
},
|
||
// 筛选
|
||
handleChoose() {
|
||
this.form.confirm_at_start = this.form.confirm_at[0] ? this.form.confirm_at[0] : '',
|
||
this.form.confirm_at_end = this.form.confirm_at[1] ? this.form.confirm_at[1] : '',
|
||
this.form = {
|
||
...this.form,
|
||
page: 1,
|
||
per_page: this.per_page,
|
||
};
|
||
this.getPlatOrderList(this.form);
|
||
},
|
||
// 重置筛选
|
||
handleReChoose() {
|
||
this.form = {
|
||
shop_id: "",
|
||
// activity_no: "",
|
||
shipping_status: "",
|
||
// is_supplier: "",
|
||
cancel_status: "0",
|
||
after_sales_status: "0",
|
||
// supply_participate_no: "",
|
||
// participate_no: "",
|
||
goods_sku_num: '',
|
||
print_status: 0,
|
||
external_sku_ids: [],
|
||
confirm_at: this.confirmAt,
|
||
multipleSelectionIds: [],
|
||
};
|
||
this.getPlatOrderList();
|
||
},
|
||
derivation(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
window.open("/plat_orders/export?shop_id=" + this.exportForm.shop_id + '&start_no=' + this.exportForm.start_no + '&end_no=' + this.exportForm.end_no + '&is_supplier=' + this.exportForm.is_supplier);
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
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.form).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.form.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('');
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.block {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|