提交 bb11853a authored 作者: huaxinzhu's avatar huaxinzhu

详情

上级 282c70aa
......@@ -69,3 +69,21 @@ export function delOrder(ids) {
data:{ids:ids}
})
}
// 订单导出
export function exportOrder(query) {
return request({
url: '/system/order/batchDeliveryGoodsOut',
method: 'get',
params: query
})
}
// 批量发货
export function deliveryOrder(data) {
return request({
url: '/system/order/batchDeliveryGoods',
method: 'post',
data: data
})
}
......@@ -127,8 +127,17 @@
<el-checkbox v-for="item in tags" :label="item.id" true-label :key="item.id" :disabled="item.isdc" @change="serviceSingleChange(item.id)">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详情描述" style="height:580px; margin-bottom: 0;" prop="description">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;"></quill-editor>
<el-form-item label="详情描述" style="height:550px;" prop="description" v-loading="quillUpdateImg">
<el-upload
class="avatar-uploader2"
action="#"
:http-request="uploadSectionFile"
name="file"
:show-file-list="false"
:file-list="ruleFormdialogImageUrl"
:before-upload="beforeUploadEdit">
</el-upload>
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange" style="height:500px;margin-top:-30px;"></quill-editor>
</el-form-item>
<el-form-item style="margin-bottom: 0;">
<el-button @click="resetGoodsInfForm('ruleForm')">重 置</el-button>
......@@ -138,12 +147,29 @@
</template>
<script>
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
// [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
// [{'header': [1, 2, 3, 4, 5, 6, false]}],
// [{'color': []}, {'background': []}], // dropdown with defaults from theme
// [{'font': []}],
// [{'align': []}],
['image', 'video'],
['clean'] // remove formatting button
]
import {
GetCategory,
GetFreight
GetFreight,
UploadImg
} from '@/api/module/goods'
import {getBrandsInf} from '@/api/module/brand/brand'
export default {
name: 'goods',
props: {
......@@ -173,9 +199,9 @@
value: 'id',
},
content: '',
editorOption: {
placeholder: '编辑内容'
},
// editorOption: {
// placeholder: '编辑内容'
// },
brandOtions: [],
serviceagsTags: [],
ruleForm: {
......@@ -220,7 +246,29 @@
},
// 运费模板列表
freightList: [],
options1: []
options1: [],
/*8888888888888*/
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader2 input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
quillUpdateImg:false,
ruleFormdialogImageUrl:[]
}
},
components: {},
......@@ -246,7 +294,7 @@
deep: true
},
infomationdatas(curVal, oldVal) {
//console.log("商品信息子组件:",curVal);
console.log("商品信息子组件:",curVal);
if (curVal) {
this.ruleForm = curVal;
if(curVal.freightId == 0) {
......@@ -277,6 +325,56 @@
this.getBrands();
},
methods: {
/*************************/
// 上传图片前
beforeUploadEdit(res, file) {
// 显示loading动画
this.quillUpdateImg = true
},
// 上传图片成功
uploadSectionFile(param) {
this.quillUpdateImg = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrl.push({'url': res.data.data.imageUrl});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.data.imageUrl)
// 调整光标到最后
quill.setSelection(length + 1)
}else {
this.$message({ message:'上传失败,请重新上传',type:'error'});
}
this.quillUpdateImg = false;
})
});
/*-----*/
},
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
/*************************/
// 服务标签 中,7天退换和不可退换只能2选一
serviceSingleChange(id) {
let index4 = this.serviceagsTags.indexOf(4);
......
......@@ -71,14 +71,13 @@
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除
</el-button>
......
......@@ -2,7 +2,7 @@
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px" class="queryFormInline">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px" class="queryFormInline" size="small">
<el-form-item label="付款状态" prop="payStatus">
<el-select v-model="queryParams.payStatus" placeholder="付款状态" size="small">
<el-option v-for="item in payOptions" :key="item.value" :label="item.label"
......@@ -77,8 +77,10 @@
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<!-- <el-button type="warning" plain icon="el-icon-download" @click="handleExport">导出订单</el-button>-->
<!-- <el-button type="primary" plain icon="el-icon-position" @click="handleDelivery">批量发货</el-button>-->
</el-form-item>
</el-form>
</div>
......@@ -135,23 +137,28 @@
v-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 0 || scope.row.GoodsStatus == 3"
size="mini"
type="text"
icon="el-icon-truck"
@click="fahuo(scope.row)"
>去发货
</el-button>
<el-divider
direction="vertical"
v-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 0 || scope.row.GoodsStatus == 3"
></el-divider>
<el-button
v-else-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 1 || scope.row.GoodsStatus == 2 && scope.row.DeliverNo"
size="mini"
type="text"
icon="el-icon-location"
@click="handleWl(scope.row)"
v-loading="loading"
>物流
</el-button>
<el-divider
direction="vertical"
v-else-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 1 || scope.row.GoodsStatus == 2 && scope.row.DeliverNo"
></el-divider>
<el-button
size="mini"
type="text"
icon="el-icon-info"
@click="handleUpdate(scope.row)"
>详情
</el-button>
......@@ -166,7 +173,7 @@
@pagination="getList"
/>
<!-- 详情 -->
<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body class="order-details">
<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body class="order-details" :close-on-click-modal="false">
<el-col :span="24" class="card-box" v-loading="loading">
<el-card>
<div slot="header">
......@@ -279,6 +286,7 @@
</div>
</el-card>
</el-col>
<!--物流信息-->
<el-col :span="24" class="card-box" v-loading="loading">
<el-card>
<div slot="header">
......@@ -341,7 +349,9 @@
<div class="cell" v-if="form.DeliverNo">
<el-button size="big" type="text" @click="handleWl(form)">点击查看</el-button>
</div>
<div class="cell" v-else @click="fahuo(form)">去发货</div>
<div class="cell" v-else>
<el-button size="big" type="text" @click="fahuo(form)">去发货</el-button>
</div>
</td>
</tr>
</tbody>
......@@ -400,7 +410,7 @@
<el-form :model="sendGoods" ref="sendGoods" label-width="100px;">
<el-row>
<el-col :span="16" :offset="3">
<el-form-item label="快递公司" >
<el-form-item label="快递公司" prop="deliverName">
<el-select v-model="sendGoods.deliverName" filterable clearable placeholder="请选择快递公司" @change="selectValue" style="width:70%">
<el-option v-for="item in expressList" :key="item.value" :label="item.label" size="small"
:value="item.value"></el-option>
......@@ -411,7 +421,7 @@
<el-row>
<el-col :span="16" :offset="3">
<el-form-item label="快递单号" prop="Tel">
<el-form-item label="快递单号" prop="deliverNo">
<el-input
v-model="sendGoods.deliverNo"
placeholder="请输快递单号"
......@@ -445,10 +455,76 @@
</el-timeline>
</el-dialog>
</el-card>
<!-- 批量发货 -->
<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>
<!-- <i slot="tip" class="el-upload__tip el-icon-info">请选取文本文件</i>-->
</el-upload>
<!-- <el-upload-->
<!-- class="upload-demo"-->
<!-- action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler"-->
<!-- :on-preview="handlePreview"-->
<!-- :on-remove="handleRemove"-->
<!-- :before-remove="beforeRemove"-->
<!-- multiple-->
<!-- :limit="1"-->
<!-- :on-exceed="handleExceed"-->
<!-- :file-list="fileList">-->
<!-- <el-button size="small" type="primary" >上传批量发货Excel表单</el-button>-->
<!--&lt;!&ndash; <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>&ndash;&gt;-->
<!-- </el-upload>-->
<!-- <div class="submit-dev-form">-->
<!-- <el-button type="primary">上传批量发货Excel表单</el-button>-->
<!-- </div>-->
<!-- <div class="submit-dev-excel"></div>-->
</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="cancelDelivery">取 消</el-button>
<el-button type="primary" @click="subDelivery">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {listOrder, getOrder, sendOrder, getExpressInfo, updateOrder, getExpressList} from '@/api/module/order'
import XLSX from "xlsx";
import {listOrder, getOrder, sendOrder, getExpressInfo, updateOrder, getExpressList,exportOrder,deliveryOrder} from '@/api/module/order'
import {dateFormat} from '@/utils'
export default {
......@@ -512,6 +588,7 @@
open2: false,
// 是否显示弹出层
open3: false,
isDeliveryOpen: false, // 批量发货对话框
// 弹出层标题2
title3: "",
//快递公司
......@@ -569,7 +646,8 @@
expressInfo: [],
// 表单参数
form: {},
jsonData: [],
excelList: []
};
},
......@@ -624,19 +702,128 @@
this.title3 = "物流信息";
this.expressInfo = res.data.data;
}else {
let msg = res.data.reason || res.msg || '数据出错了';
let msg = res.msg || '数据出错了';
this.$message({type: 'error',message: msg});
}
});
},
//发货
fahuo: function (row) {
this.reset();
const order_sn = row.order_sn
this.sendGoods.orderSn = order_sn
this.open2 = true;
this.title2 = "去发货";
},
// 批量发货
handleDelivery(){
this.isDeliveryOpen = true;
},
// 上传批量发货Excel表单前
importExcel(file, fileList) {
//this.excelList = 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 //把数据塞到表格预览
console.log(743,item[0].sheet);
this.excelList = item[0].sheet
}
}
})
.catch(error => {
loading.close();
})
},
/**
* 解析文件
* @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 = [];
//console.log(781,this.excelList);
},
// ---------
// tableToExcel(list){
// // 列标题,逗号隔开,每一个逗号就是隔开一个单元格
// let title = `订单编号,第三方订单号,goodsFee,goodsStatus,orderStatus,goodsId,name,price,skuName\n`;
// //增加\t为了不让表格显示科学计数法或者其他格式
// for(let i = 0 ; i < list.length ; i++ ){
// for(let item in list[i]){
// title += `${list[i][item] + '\t'},`;
// }
// title += '\n';
// }
// //encodeURIComponent解决中文乱码
// let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title);
// //通过创建a标签实现
// var link = document.createElement("a");
// link.href = uri;
// //对下载的文件命名
// link.download = "json数据表.csv";
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// } ,
// --------------
// 订单导出
handleExport(row) {
const rowIds = this.ids;
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);
}
});
// return
// this.$confirm('是否确认导出所选择的订单的数据?','警告',{
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(async()=> {
// this.loading = true;
// let delResult = await exportOrder(ids);
// this.loading = false;
// if(delResult.code === 1) {
// this.$message({type: 'success',message: delResult.msg});
// }
// if(delResult.code === 0) {
// this.$message({type: 'error',message: delResult.msg});
// }
// }).catch(()=> {});
},
dateIfAddZero: function (time) {
return time < 10 ? '0' + time : time
},
......@@ -650,6 +837,7 @@
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
......@@ -729,11 +917,39 @@
}).catch(function () {
});
},
// 取消批量发货
cancelDelivery() {
this.isDeliveryOpen = false;
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 && this.excelList[0].express_code) {
deliveryOrder(this.excelList).then(res=> {
//console.log(954,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:'导入表格数据有误'});
}
}
} //methods结束
};
</script>
<style scoped lang="scss" type="text/stylus">
.order-details{
/deep/.el-dialog {
height: 80%;
......@@ -747,8 +963,32 @@
}
/deep/.queryFormInline {
.el-form-item {
margin-bottom: 5px ;
.el-form-item:nth-child(1) {
margin-bottom: 10px ;
}
}
.delivery-tips-con,.delivery-data-con {
width: 80%;
margin: 5px auto;
}
.delivery-data-con {
height: 100px;
margin: 40px auto;
}
.upload-demo {
text-align : center;
}
//.submit-dev-form {
// text-align : center;
//}
//.submit-dev-excel {
// overflow-x:hidden;
// overflow-y:scroll;
//}
.delivery-tips-con {
font-size: 12px;
}
/deep/.el-step__title.is-finish {
color: #333
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论