提交 f49f5c54 编写于 作者: lyf's avatar lyf

添加导出流程

上级 e2bbf15a
//
//
<template>
<div class="select-people">
<el-tab-pane label="设定人员" name="fourth">
......
......@@ -346,3 +346,25 @@ export const delActivity = (params) => {
description: '活动列表',
})
};
//
export const uploadExpress = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/v1/app/batch/upload/express`),
method: 'POST',
data: params,
description: '批量更新物流操作',
})
};
export const getUploadProgress = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/v1/app/batch/upload/progress/express/${id}`),
method: 'POST',
data: params,
description: '查询批量更新物流处理进度,id为批次id',
})
};
......@@ -109,27 +109,34 @@
</el-col>
<el-col :span="6" style="text-align: right">
<div class="button-container">
<el-button type="primary" size="small" @click="searchList"
>查询</el-button
>
<el-button
type="default"
size="small"
@click="resetForm"
style="margin-left: 0"
>重置</el-button
>
<el-button type="primary" size="small" @click="exportOrder"
>导出订单</el-button
>
<el-button type="primary" size="small" @click="searchList"
>查询</el-button
>
<el-button
type="default"
size="small"
@click="resetForm"
style="margin-left: 0"
>重置</el-button
>
<el-button type="primary" size="small" @click="exportOrder"
>导出订单</el-button
>
</div>
<div class="button-container">
<el-button
type="primary"
size="small"
@click="ExportLogisticsFlag = true"
>导入物流单号</el-button
>
<el-button
type="primary"
size="small"
@click="cancelOrderFlag = true"
>批量取消订单</el-button
>
</div>
<div class="button-container">
<el-button type="primary" size="small" @click="ExportLogisticsFlag=true">导入物流单号</el-button>
<el-button type="primary" size="small" @click="exportOrder"
>批量取消订单</el-button
>
</div>
</el-col>
</el-row>
</el-form>
......@@ -340,7 +347,11 @@
>查看详情</el-button
>
<el-button
v-if="(scope.row.storeType == 1 || scope.row.storeType == 2) &&scope.row.showStatus == 3 &&scope.row.refundStatus == 0"
v-if="
(scope.row.storeType == 1 || scope.row.storeType == 2) &&
scope.row.showStatus == 3 &&
scope.row.refundStatus == 0
"
@click="openTuiDialog(scope.row)"
type="text"
size="small"
......@@ -466,8 +477,7 @@
</div>
<div>
<el-button type="text" @click="copyTxt">复制单号</el-button>
<el-button type="text" @click="updateOrderNo"
v-if="showStatus == 2"
<el-button type="text" @click="updateOrderNo" v-if="showStatus == 2"
>修改物流单号</el-button
>
</div>
......@@ -475,14 +485,14 @@
<div class="steps-logistics">
<el-steps direction="vertical" :active="0">
<el-step
v-for="(item,index) in expressData"
v-for="(item, index) in expressData"
:title="item.time"
:description="item.context"
:key="index"
>
<div slot="icon">
<div class="dot"></div>
</div>
<div slot="icon">
<div class="dot"></div>
</div>
</el-step>
</el-steps>
</div>
......@@ -612,38 +622,198 @@
@close="ExportLogisticsFlag = false"
width="600px"
>
<el-form
label-width="120px"
>
<el-form label-width="120px">
<el-form-item label="导入文档:">
<el-upload class="upload-excel"
<el-upload
class="upload-excel"
action="#"
accept=".xlsx"
multiple
:limit="1"
:before-upload="uploadExcel"
:show-file-list="false"
:before-upload="uploadExpress"
>
<el-button type="primary" size="small">选择文件</el-button>
<div class="upload-container">
<el-input
class="file-name"
v-model="fileData.fileName"
size="mini"
readonly
></el-input
><el-button type="primary" size="mini">选择文件</el-button>
</div>
</el-upload>
</el-form-item>
<el-form-item label="模板:">
<a class="importUrl" :href="importUrl"> 物流单号修改模板.xlxs</a>
<el-form-item label="模板:">
<a class="importUrl" :href="importUrl"> 物流单号修改模板.xlxs</a>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="cancelExportLogistics">取消</el-button>
<el-button size="small" type="primary" @click="confirmExportLogistics">确认</el-button>
<el-button size="small" type="primary" @click="confirmExport"
>确认</el-button
>
</div>
</el-dialog>
<!-- 批量取消订单 dialog-->
<el-dialog
class="exportlogistics-dialog"
title="批量取消订单"
:visible="cancelOrderFlag"
@close="cancelOrderFlag = false"
width="600px"
>
<el-form label-width="120px">
<el-form-item label="导入文档:">
<el-upload
class="upload-excel"
action="#"
accept=".xlsx"
multiple
:show-file-list="false"
:limit="1"
:before-upload="uploadExpress"
>
<div class="upload-container">
<el-input
class="file-name"
v-model="fileData.fileName"
size="mini"
readonly
></el-input
><el-button type="primary" size="mini">选择文件</el-button>
</div>
</el-upload>
</el-form-item>
<el-form-item label="模板:">
<a class="importUrl" :href="importUrl">批量取消模板.xlxs</a>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="cancelOrder">取消</el-button>
<el-button size="small" type="primary" @click="confirmExport"
>确认</el-button
>
</div>
</el-dialog>
<!-- 导出进度loading -->
<el-dialog
class="exportlogistics-dialog"
:visible="progressFlag"
width="600px"
:close-on-click-modal="false"
:show-close="false"
>
<div>
<div class="progress-container">
<div class="progress-tag">
1/25
<div class="popper__arrow"></div>
</div>
<div class="progress-content">正在导入...</div>
</div>
</div>
</el-dialog>
<!--导入完成 -->
<el-dialog
class="exportlogistics-dialog"
title="导入完成"
:visible="statFlg"
@close="statFlg = false"
width="600px"
>
<div class="stat-container">
<div class="stat-title">模板数据共300条</div>
<div class="stat-result">
<div class="success">成功:285条</div>
<div class="repetition">重复:20条</div>
<div class="failure">失败:10条</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="statFlg = false">取消</el-button>
<el-button size="small" type="primary" @click="confirmCancelOrder"
>查看失败原因</el-button
>
</div>
</el-dialog>
<!-- 结果统计 -->
<el-dialog
class="exportlogistics-dialog"
title="导入完成"
:visible="statFlg"
@close="statFlg = false"
width="600px"
>
<div class="stat-container">
<div class="stat-title">模板数据共300条</div>
<div class="stat-result">
<div class="success">成功:285条</div>
<div class="repetition">重复:20条</div>
<div class="failure">失败:10条</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="statFlg = false">取消</el-button>
<el-button size="small" type="primary" @click="confirmCancelOrder"
>查看失败原因</el-button
>
</div>
</el-dialog>
<!-- 失败原因 -->
<el-dialog
class="exportlogistics-dialog"
title="失败记录"
:visible="FailureReasonFlag"
@close="FailureReasonFlag = false"
width="1000px"
>
<div class="FailureReasonFlag-container">
<el-table :data="FailureTable" border height="300" style="width: 100%">
<el-table-column
prop="id"
label="订单号"
align="center"
></el-table-column>
<el-table-column
prop="goodsQuantityList"
label="快递公司"
align="center"
>
</el-table-column>
<el-table-column label="快递单号" align="center"> </el-table-column>
<el-table-column label="备注" align="center"> </el-table-column>
<el-table-column label="失败原因" align="center"> </el-table-column>
<el-table-column label="操作指引" align="center"> </el-table-column>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="FailureReasonFlag = false"
>取消</el-button
>
<el-button size="small" type="primary" @click="FailureReasonFlag"
>导出失败记录</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue";
import SendSetDialog from "@/components/shop/send-set-dialog";
import { getOrdersExportUrl } from "@/utils/yqrange/yqrangeApi";
import {
getOrdersExportUrl,
uploadExpress,
getUploadProgress,
} from "@/utils/yqrange/yqrangeApi";
import {
queryOrderList,
updateExpress,
......@@ -651,7 +821,7 @@ import {
brokerListAll,
brokerOwnerListAll,
updateExpressNo,
expressInfo
expressInfo,
} from "@/utils/shop";
import { toDecimal2 } from "@/utils";
......@@ -666,7 +836,7 @@ export default {
curmbFirst: "云鹊店铺",
curmbSecond: "订单管理",
activeName: "all",
showStatus:-1,
showStatus: -1,
searchForm: {
showStatus: -1,
storeId: 0,
......@@ -684,9 +854,14 @@ export default {
saleType: 0,
},
// 确认物流
ExportLogisticsFlag:false,
statFlg: false,
ExportLogisticsFlag: false,
FailureReasonFlag: false,
cancelOrderFlag: false,
progressFlag: false,
totalRows: 0,
tableData: [],
FailureTable: [],
closeTradeDialog: false,
reasonTxt: "",
changePriceDialog: false,
......@@ -710,10 +885,12 @@ export default {
{ required: true, message: "请选择退款对象", trigger: "blur" },
],
},
expressData:[{
time:"2021-06-23 12:21:21",
context:"待揽收"
}],
expressData: [
{
time: "2021-06-23 12:21:21",
context: "待揽收",
},
],
showTuiDialog: false,
tuiForm: {
order: null,
......@@ -775,11 +952,16 @@ export default {
label: "批发",
},
],
fileData: {
fileBaseStr: "",
fileName: "",
},
ownerId: "",
brokerList: [],
brokerOwnerList: [],
showOrderNoFlag: false,
importUrl:"",
importUrl: "",
timer: null,
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() > new Date().getTime(); //减去一天的时间代表可以选择同一天;
......@@ -795,50 +977,70 @@ export default {
this.brokerOwnerListAll();
},
methods: {
// 确认导入
confirmExport() {
this.progressFlag = true;
openLoading(this);
uploadExpress(this.fileData).then((res) => {
console.log(res);
closeLoading(this);
this.progressFlag = true;
// _this.setDialog(res);
this.getUploadProgress(id);
});
},
// 获取进度
getUploadProgress(id) {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.time--;
if (this.time === 0) {
getUploadProgress(id).then((res) => {
if (res.code == "0000" && res.status == 1) {
clearInterval(this.timer);
}
});
}
}, 1000);
},
// 取消导入物流信息
cancelExportLogistics(){
this.ExportLogisticsFlag=false
cancelExportLogistics() {
this.ExportLogisticsFlag = false;
},
uploadExcel(file) {
vm.dialogFail = false;
vm.uploadType = "person";
// 导入物流单号
uploadExpress(file) {
let _this = this;
let arr = file.type.split("/");
let ext = "." + arr[1];
let name = file.name;
let reader = new FileReader();
reader.onload = function(e) {
let fileJson = {
fileName: file.name,
file: e.target.result.substr(e.target.result.indexOf("base64,") + 7),
ext: ext
};
let fileArray = [
{
type: "",
base64: fileJson
}
];
let req = {
fileArray: fileArray,
scopeOfAdministrative: vm.getScope("administrative"),
scopeOfDepartment: vm.getScopeDepartment()
};
let projectId = vm.projectId;
console.log("req", req);
let reqStr = JSON.stringify(req);
openLoading(vm);
uploadPersonExcel(reqStr, projectId).then(res => {
closeLoading(vm);
vm.setDialog(res);
});
reader.onload = function (e) {
_this.fileData.fileName = name;
_this.fileData.fileBaseStr = e.target.result.substr(
e.target.result.indexOf("base64,") + 7
);
console.log("fileJson", _this.fileData);
};
reader.readAsDataURL(file);
},
//确认导入物流信息
confirmExportLogistics(){
this.ExportLogisticsFlag=false
confirmExportLogistics() {
this.ExportLogisticsFlag = false;
},
// 确认取消订单
confirmCancelOrder() {
this.cancelOrderFlag = false;
},
// 取消订单
cancelOrder() {
this.cancelOrderFlag = false;
},
searchList() {
this.searchForm.orderBeginTime = this.createRangeTime[0];
this.searchForm.orderEndTime = this.createRangeTime[1];
......@@ -954,17 +1156,17 @@ export default {
},
//查看物流
viewLogistics(row) {
console.log("row-----",row)
console.log("row-----", row);
expressInfo({ expressNo: row.expressNo }).then((res) => {
if (res.code == "000000") {
this.expressData=[...res.data.data,...this.expressData]
this.logisticeInfo = `${row.expressName} ${row.expressNo}`;
this.expressForm.order = row;
this.expressForm.company = `${row.expressName}`;
this.expressForm.no = `${row.expressNo}`;
this.expressForm.extendMessage = `${row.remark}`;
this.showStatus=row.showStatus;
this.viewLogisticsDialog = true;
this.expressData = [...res.data.data, ...this.expressData];
this.logisticeInfo = `${row.expressName} ${row.expressNo}`;
this.expressForm.order = row;
this.expressForm.company = `${row.expressName}`;
this.expressForm.no = `${row.expressNo}`;
this.expressForm.extendMessage = `${row.remark}`;
this.showStatus = row.showStatus;
this.viewLogisticsDialog = true;
}
});
},
......@@ -1166,11 +1368,11 @@ export default {
</script>
<style lang="scss">
.order-manage-wrapper {
.el-step__icon{
.el-step__icon {
border: none;
background: transparent;
}
.el-step__title{
.el-step__title {
font-size: 14px;
}
......@@ -1178,7 +1380,7 @@ export default {
display: block !important;
height: 30%;
}
.dot{
.dot {
border-radius: 50%;
height: 8px;
width: 8px;
......@@ -1188,7 +1390,7 @@ export default {
.order-manage-content {
background: #fff;
padding: 10px;
.button-container{
.button-container {
margin-bottom: 10px;
}
.header-title {
......@@ -1282,10 +1484,90 @@ export default {
width: 193px;
}
}
.exportlogistics-dialog{
.exportlogistics-dialog {
}
.upload-container {
display: flex;
justify-content: flex-start;
align-items: center;
.file-name {
margin-right: 5px;
}
}
.progress-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.progress-content {
width: 150px;
height: 40px;
background: #449284;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.progress-tag {
width: 150px;
height: 40px;
border: 1px solid #ebeef5;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
position: relative;
.popper__arrow {
position: absolute;
bottom: 0px;
left: 50%;
margin-right: 3px;
transform: translateX(-3px);
border-bottom-width: 0;
&::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-top-color: #fff;
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
border-style: solid;
content: " ";
border-width: 6px;
}
}
}
.stat-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.stat-title {
color: #333;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.stat-result {
display: flex;
justify-content: space-between;
width: 300px;
.failure {
color: #e63c3c;
}
}
}
.importUrl{
.importUrl {
color: #449284;
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册