添加导出/批量发货功能及接口;联调列表接口

......@@ -3,39 +3,50 @@ import request from '@/utils/request'
// 查询order列表
export function listOrder(query) {
return request({
url: '/system/order/list',
url: '/system/order/getOrderList',
method: 'get',
params: query
})
}
// 查询order详细
export function getOrder (id) {
export function orderInfo (query) {
return request({
url: '/system/order/getInfo?order_id='+id,
method: 'get'
url: '/system/order/getOrderInfo',
method: 'get',
params: query
})
}
// order发货
export function sendOrder(data) {
return request({
url: '/system/order/sendOrder',
url: '/system/order/sendOrde',
method: 'post',
data: data
})
}
//查看物流
export function getExpressInfo(data){
export function expressInfoNew(data){
return request({
url: '/system/order/getExpressInfoNew',
method: 'post',
data: data
})
}
//订单备注
export function remarkOrder(data){
return request({
url: '/system/order/getExpressInfo',
url: '/system/order/remarkOrder',
method: 'post',
data: data
})
}
// 获取 所有物流信息
export function getExpressList(query) {
export function expressList(query) {
return request({
url: '/system/order/expressList',
method: 'get',
......
......@@ -13,8 +13,8 @@
<el-tab-pane label="全部订单" name="fourth"></el-tab-pane>
</el-tabs>
<div style="position: absolute; top: -5px; right: 0;">
<el-button type="primary" icon="el-icon-download">导出订单</el-button>
<el-button icon="el-icon-position">批量发货</el-button>
<el-button size="mini" type="primary" icon="el-icon-download" @click="handleExport">导出订单</el-button>
<el-button size="mini" icon="el-icon-position" @click="isDeliveryOpen = true">批量发货</el-button>
</div>
</div>
<div class="form-box">
......@@ -22,31 +22,31 @@
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6">
<el-form-item label="订单号:">
<el-input v-model="form.order_sn" placeholder="请输入订单号" />
<el-input size="mini" v-model="form.order_sn" placeholder="请输入订单号" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="商品名称:">
<el-input v-model="form.GoodsName" placeholder="请输入商品名称" />
<el-input size="mini" v-model="form.GoodsName" placeholder="请输入商品名称" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="收货人:">
<el-input v-model="form.shipname" placeholder="请输入收货人" />
<el-input size="mini" v-model="form.shipname" placeholder="请输入收货人" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6">
<el-form-item label="联系电话:">
<el-input v-model="form.Tel" placeholder="请输入联系电话" />
<el-input size="mini" v-model="form.Tel" placeholder="请输入联系电话" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="下单时间:">
<el-date-picker
size="small"
size="mini"
v-model="form.dateTime"
type="daterange"
align="left"
......@@ -58,8 +58,8 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="getListOrder">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetBtn(true)">重置</el-button>
<el-button size="mini" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="getListOrder">搜索</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="resetBtn(true)">重置</el-button>
</el-col>
</el-row>
</el-form>
......@@ -72,10 +72,10 @@
{{formatter(scope.row.Updatetime)}}
</template>
</el-table-column>
<el-table-column label="数量" align="center" prop="Quantity"/>
<el-table-column label="订单金额" align="center" prop="Money"/>
<el-table-column label="收货人" align="center" prop="Shipname"/>
<el-table-column label="联系电话" align="center" prop="Tel"/>
<el-table-column label="数量" align="center" prop="goods_total"/>
<el-table-column label="订单金额" align="center" prop="goods_price"/>
<el-table-column label="收货人" align="center" prop="real_name"/>
<el-table-column label="联系电话" align="center" prop="mobile"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
......@@ -90,6 +90,7 @@
</el-table>
<div class="footer_pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
......@@ -102,16 +103,64 @@
</el-card>
<el-dialog title="订单详情" width="85%" class="cutclass" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="detailDialog" center>
<div style="height:100%;">
<order-detail />
<order-detail :order-detail="order_detail" />
</div>
</el-dialog>
<!-- 批量发货 -->
<el-dialog title="批量发货流程" :visible.sync="isDeliveryOpen" width="60%" center>
<el-steps :active="3" align-center style="width:95%;margin: 0 auto;">
<el-step title="导出发货Excel表单" description="">
<template slot="icon">
<img style="width: 30px;" src="../../../assets/image/dev1.png">
</template>
</el-step>
<el-step title="按模板填写快递信息" description="">
<template slot="icon">
<img style="width: 30px;" src="../../../assets/image/dev2.png">
</template>
</el-step>
<el-step title="上传发货单模板并提交" description="">
<template slot="icon">
<img style="width: 30px;" src="../../../assets/image/dev3.png">
</template>
</el-step>
</el-steps>
<div class="delivery-data-con">
<el-upload
action=""
class="upload-demo"
:auto-upload="false"
:limit = "1"
accept="*/*"
:on-change="importExcel"
:on-remove="removeDevExcel"
ref="upload"
><el-button size="small" type="primary" >上传批量发货Excel表单</el-button>
</el-upload>
</div>
<div class="delivery-tips-con">
<p style="text-align: center">常见问题</p>
<p>1、批量发货规则</p>
<p>必须正确填写了“快递公司 快递单号”才会导入并更改订单状态为已发货!</p>
<p>2、如何获取一个批量发货的excel文件?</p>
<p>在商户后台左侧菜单的 “订单中心” 》“订单列表”里面可以将订单导出为Excel格式的文件,您可以在这里自由导出订单</p>
<p>3、导出excel文件后,批量发货需要输入什么信息?</p>
<p>在我们的导出的excel文件中,打开里面有“快递单号 快递公司”。 您可以在将正确的快递发货单号,快递公司填入对应的列里面,和对应的订单号一对应。然后保存提交,就可以用于批量发货了</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="isDeliveryOpen = false">取 消</el-button>
<el-button type="primary" @click="subDelivery">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {listOrder} from '@/api/module/order'
import {listOrder, exportOrder, orderInfo, deliveryOrder} from '@/api/module/order'
import {dateFormat} from '@/utils'
import OrderDetail from './components/orderDetail.vue'
import XLSX from "xlsx"
export default {
components: {
OrderDetail
......@@ -129,9 +178,12 @@
Tel: '',
dateTime: [],
},
goodsStatus: 0,
goodsStatus: 1,
tableData: [],
detailDialog: false
detailDialog: false,
isDeliveryOpen: false,
excelList: [],
order_detail: ''
}
},
mounted() {
......@@ -162,16 +214,16 @@
switch(this.activeName) {
case 'first':
this.goodsStatus = 0
this.goodsStatus = 1
break
case 'second':
this.goodsStatus = 1
this.goodsStatus = 2
break
case 'third':
this.goodsStatus = 2
this.goodsStatus = 3
break
case 'fourth':
this.goodsStatus = -1
this.goodsStatus = ''
break
default:
break
......@@ -183,28 +235,117 @@
// 获取订单列表
getListOrder() {
this.tableData = []
let params = {
pageNum: this.currentPage,
pageSize: this.pageSize,
goodsStatus: this.goodsStatus,
beginTime: this.form.dateTime[0] || '',
endTime: this.form.dateTime[1] || '',
page: this.currentPage,
limit: this.pageSize,
status: this.goodsStatus,
start_time: this.form.dateTime[0] || '',
end_time: this.form.dateTime[1] || '',
order_sn: this.form.order_sn,
GoodsName: this.form.GoodsName,
shipname: this.form.shipname,
Tel: this.form.Tel,
goods_name: this.form.GoodsName,
real_name: this.form.shipname,
mobile: this.form.Tel,
}
listOrder(params).then(res => {
if (res.code == 1) {
this.total = res.data.total
this.tableData = res.data.list
this.total = res.data.count
this.tableData = res.data.data
}
})
},
// 订单导出
handleExport(row) {
let query = {page: 1, limit: 100}
exportOrder(query).then(res => {
if(res.code === 1) {
const link = document.createElement('a');
link.href = res.data;
//link.download = '订单.xls'; //下载的文件名
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
},
// 上传批量发货Excel表单前
importExcel(file, fileList) {
this.excelList = [];
let _this = this;
_this.file2Xce(file).then(item => {
if (item && item.length > 0) {
// xlsxJson就是解析出来的json数据,数据格式如下
// [{sheetName: sheet1, sheet: sheetData }]
if (item[0] && item[0].sheet && item[0].sheet.length) {
//_this.tableData = item[0].sheet //把数据塞到表格预览
// this.excelList = item[0].sheet
item[0].sheet.map((item, index) => {
this.excelList.push({
id: item['编号ID'],
express_name: item['物流公司'],
express_sn: item['物流单号']
})
})
}
}
})
},
/**
* 解析文件
* @param {Object} file
*/
file2Xce(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
this.wb = XLSX.read(data, {
type: "binary"
});
const result = [];
this.wb.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
});
});
resolve(result);
};
reader.readAsBinaryString(file.raw);
});
},
removeDevExcel(file, fileList) {
this.excelList = [];
},
// 提交导入数据
subDelivery() {
if(this.excelList.length === 0) {
this.$message({type:'warning',message:'请先上传填写好的表格数据'});
return
}
if(this.excelList.length > 0 && this.excelList[0].id && this.excelList[0].express_name && this.excelList[0].express_sn) {
deliveryOrder(this.excelList).then(res=> {
if(res.code === 1) {
this.isDeliveryOpen = false;
this.$message({type:'success',message:'批量发货成功'});
this.getList();
}else {
let msg = res.message || '批量发货失败'
this.$message({type:'error',message:msg});
}
});
}else {
this.$message({type:'error',message:'导入表格数据有误'});
}
},
// 订单详情
handleInfo() {
handleInfo(row) {
this.detailDialog = true
this.order_detail = row.order_sn
orderInfo({order_sn: this.order_detail}).then(res => {
})
},
handleSizeChange(val) {
this.pageSize = val
......@@ -221,14 +362,6 @@
<style scoped>
/deep/.el-range-editor.el-input__inner {
width: 100%;
height: 36px;
line-height: 36px;
}
/deep/.el-range-separator {
line-height: 30px;
}
/deep/.el-input__icon {
line-height: 30px;
}
.form-box {
......@@ -240,4 +373,16 @@
text-align: right;
margin-top: 15px;
}
.delivery-tips-con,.delivery-data-con {
width: 80%;
margin: 5px auto;
font-weight: bold;
}
.delivery-data-con {
height: 100px;
margin: 20px auto;
}
.upload-demo {
text-align : center;
}
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论