zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20230303

Browse Source
This commit is contained in:
悠悠小鹿
2023-03-03 11:36:00 +08:00
parent d8b675fbe6
commit d41d5d1015
49 changed files with 7568 additions and 24897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/modules/order/anyDialog.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div>
<el-dialog class="anyDialog" :title="`${title}`" :close-on-click-modal="false" :visible.sync="visible" width='500px'
:before-close="beforeCloseDialog">
<div class="textBody" v-html="content"></div>
<div slot="footer" class="dialog-footer" style="text-align: center;">
<el-button type="primary" @click="beforeCloseDialog">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'printOrderDialog',
props: {
visible: {
type: Boolean,
value: true
},
title:{
type:String,
value:''
},
content: {
type: String,
value: ''
}
},
data() {
return {
}
},
methods: {
beforeCloseDialog() {
this.$emit('closeDialog', false)
},
}
}
</script>
<style>
.content {
text-align: center;
margin-top: 15px;
}
.el-step {
font-size: 20px;
vertical-align: middle;
line-height: 0;
}
</style>

1099
src/views/modules/order/buyorder copy-订单列表样式备份02-09.vue Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/views/modules/order/buyorder-add-or-update.vue
View File

@@ -151,7 +151,7 @@
}
},
methods: {
init (id) {
init (id) {
this.dataForm.orderId = id || 0
this.visible = true
this.$nextTick(() => {

562
src/views/modules/order/buyorder-mergeorder.vue Normal file
View File

@@ -0,0 +1,562 @@
<template>
<div>
<div v-if="ruleForm.list.length == 0"
style="display: flex; height:300px; width: 100%; align-items: center; justify-content: center;">
<div class="empty" style="text-align: center;">
<icon-svg style="font-size: 130px;" name="kongbai"></icon-svg>
<div style="color: #999;">当前暂无可合并发货的订单哦</div>
</div>
</div>
<el-form v-else ref="ruleForm" :model="ruleForm" label-width="80px" :rules="rules">
<div class="order_list_ui">
<div style="">
<el-radio-group class="group3" v-model="radio3" size="mini" @change="radioChange">
<el-radio-button label="allYse">全合并</el-radio-button>
<el-radio-button label="allNo">全不合并</el-radio-button>
<el-button type="primary" size="mini" @click="submit" :disabled="buttonDisable">批量合并发货</el-button>
</el-radio-group>
</div>
<ul style="height: 500px; overflow-y:scroll;">
<li class="flexbox " v-for="(de, index) in ruleForm.list" :key="index"
style="border:1px solid #CFF3ED; margin-bottom: 5px;">
<div class="flexbox" style="align-items: center; padding: 0 10px; width: 34px; border-right: 1px solid #CFF3ED;">
<el-form-item label-width="0" :prop="`list.${index}.isMerge`" :rules="[
{ required: true, message: '此项为必填项', trigger: 'blur' }]">
<el-radio-group v-model="de.isMerge" size="mini">
<div>
<el-radio label="true"><br/></el-radio>
</div>
<!-- <div>
<el-radio label="false">不合并</el-radio>
</div> -->
</el-radio-group>
</el-form-item>
</div>
<div class="buierInfo flexbox">
<div style="width:180px; ">
<div style="padding: 10px;" class="">
<div><span class="infoTitle">用户名：</span><span>{{ de.userName }}</span></div>
<div><span class="infoTitle">电话：</span><span>{{ de.tel }}</span></div>
<div><span class="infoTitle">收货地址：</span><span>{{ de.address }}</span></div>
</div>
</div>
</div>
<div class="productInfo" style="width:80%;">
<div class="item" v-for="(item, orderindex) in de.orderList" :key="orderindex">
<div class="item_head">
<el-row>
<el-col :span="24" style="display: flex; justify-content: space-between;">
<span>订单编号: {{ item.orderSn }}</span>
<el-button style="margin: 0; padding: 0;" type="text"
@click="removeOrder(orderindex, index)">移除</el-button>
</el-col>
</el-row>
</div>
<div class="item_body">
<div class="flexbox" style="justify-content: space-between;">
<div class="td1 flexbox" style="width:100%; ">
<div class="flexbox orderProducts" style="width:25%;"
:class="{ nobottomBorder: item.products.length <= 4 }"
v-for="(productitem, productindex) in item.products"
:key="productindex">
<div class="flexbox productItem" style="width:100%;">
<!-- <el-checkbox :label="4545454545"></el-checkbox> -->
<img :src="productitem.image" width="30px" height="30px">
<div class="">
<div class="bookName tabContent">{{ productitem.productName }}
</div>
</div>
</div>
<div class="num xcenter"><span>× {{ productitem.quantity }}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style=" padding: 10px;" class="buttonBox flexbox">
<div>
<!-- <div style="margin-bottom: 10px;"><span style="color: #f56c6c;">*</span> 是否合并当前可合并项？
</div> -->
<el-button type="warning" size="mini" plain
@click="mergeOne(de.orderList, index)">合并发货</el-button>
</div>
</div>
</li>
</ul>
</div>
<div class="buttons">
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
:current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-form>
<setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="merOneList"
@closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
</div>
</template>
<script>
import setDeliverDialog from './set-deliver-dialog'
export default {
data() {
return {
merOneList: [],
buttonDisable:true,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
// form: {
// deliverLcd: ''
// },
setDeliverVisible: false,
radio3: '',
expressList: [],
// dataRule: {
// deliverLcd: [
// { required: true, message: '请先选择物流公司', trigger: 'blur' }
// ]
// },
ruleForm: {
list: []
},
// 批量合并发货
multMergeIdList:[],
rules: {
ruleForm: [
{ required: true, message: '必填项', trigger: 'blur' },
]
}
}
},
created() {
this.getExpressList()
this.getMergeOrders()
},
methods: {
// 获取快递公司列表
getExpressList() {
this.$http({
url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
method: 'get',
}).then(({ data }) => {
// console.log(data, '快递列表')
this.expressList = data.dataList
})
},
// 获取可合并订单
getMergeOrders() {
let loading = this.$loading({
lock: true,
text: '正在查询，请稍后',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$http({
url: this.$http.adornUrl(`/book/buyorder/checkOrder`),
method: 'post',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
})
}).then(({ data }) => {
if (data && data.code === 0) {
// console.log('订单发货前的检查')
// this.dataList = data.page.list
this.totalPage = data.page.totalCount
loading.close()
this.ruleForm.list = data.page.records
console.log(this.ruleForm.list)
//this.mergeDliverVisible = true
} else {
this.ruleForm.list = []
this.totalPage = 0
loading.close()
this.$message.error('请求失败')
}
})
},
// 移除订单
removeOrder(orderindex, listindex) {
// order: 订单信息
// orderindex: 订单下标
// listindex:上级下标
//addr.splice(i, 1)
// 判断是否剩余订单数小于2 小于2 就整条都删除
if (this.ruleForm.list[listindex].orderList.length <= 2) {
console.log(this.ruleForm.list)
this.ruleForm.list.splice(listindex, 1)
} else {
console.log(this.ruleForm.list)
this.ruleForm.list[listindex].orderList.splice(orderindex, 1)
console.log()
}
},
closeDeliverDialog(val) {
this.setDeliverVisible = false
this.getMergeOrders()
},
// 单个合并订单发货
mergeOne(list, index) {
// console.log(list)
this.merOneList = list.map(item => {
return item.orderId
})
console.log(this.merOneList)
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$confirm('正在进行合并发货, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.setDeliverVisible = true
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
} else {
return this.$message.error('请核对必填项')
}
})
},
radioChange(val){
// console.log(this.ruleForm.list)
if(val == 'allNo'){
this.ruleForm.list.forEach(element => {
element.isMerge = 'false'
});
this.buttonDisable = true
console.log(this.ruleForm.list)
}
if(val == 'allYse'){
// console.log('全选')
this.buttonDisable = false
this.ruleForm.list.forEach(element => {
element.isMerge = 'true'
});
console.log(this.ruleForm.list)
}
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getMergeOrders()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getMergeOrders()
},
submit() {
// 表单验证
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
// console.log(4545)
this.ruleForm.list.forEach((item, index) => {
let list = []
list = item.orderList.map((element) => {
return element.orderId
})
this.multMergeIdList = this.multMergeIdList.concat(list)
})
console.log(this.multMergeIdList)
this.merOneList = this.multMergeIdList
this.setDeliverVisible = true
// console.log(this.merOneList)
} else {
return this.$message.error('请核对必填项')
}
})
}
},
components:{
setDeliverDialog
}
}
</script>
<style lang="less" scoped>
.infoTitle {
color: #777;
display: inline-block;
width: 62px;
text-align: right;
}
.dialog-footer {
text-align: center;
}
.el-radio-button {
margin-left: -3px;
}
/deep/ .el-dialog__footer {
text-align: center;
}
.flexbox {
display: flex;
}
.order_list_ui {
margin-top: 15px;
* {
font-size: 12px;
//color: #777;
}
ul {
color: #515a6e;
padding: 0;
li {
list-style: none;
width: 100%;
// margin-bottom: 10px;
.item_head {
width: 100%;
padding: 10px;
// border-right: none !important;
background-color: #edf9f8;
.el-checkbox__label {
display: none !important;
}
.tip {
text-align: right;
.el-button {
padding: 0;
}
}
.el-checkbox {
margin-right: 10px;
}
}
.item_body {
// border: 1px solid #ddf6f3;
border-top: none;
}
}
}
}
.productInfo {
border-left: 1px solid #CFF3ED;
border-right: 1px solid #CFF3ED;
width: 100%;
}
.orderProducts {
padding: 4px;
border-right: 1px solid #CFF3ED;
border-bottom: 1px solid #CFF3ED;
.price {
width: 40px;
line-height: 54px;
}
.num {
width: 40px;
line-height: 20px;
}
.productItem {
overflow: hidden;
.flexbox {
align-items: center;
}
.el-checkbox {
line-height: 54px;
}
.el-checkbox__label {
display: none !important;
}
}
}
.xcenter {
text-align: center;
}
.borderright {
padding-left: 10px;
border-right: 1px solid #f1f1f1;
}
.normal {
display: none;
}
.hasDeliver {
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-image: url(../../../../static/img/hasDeliver_icon.png);
}
.td1 {
// width: 400px;
.orderProducts {
overflow: hidden;
position: relative;
.el-checkbox {
margin-right: 10px;
}
img {
margin-right: 10px;
padding: 2px;
border: 1px solid #f1f1f1;
}
.bookName {
//margin-right: 10px;
font-size: 12px;
line-height: 22px;
margin-left: -6px;
-webkit-transform: scale(0.9);
}
.author {
color: #999;
}
}
}
.td2 {
width: 150px;
line-height: 26px;
padding: 5px;
em {
font-size: 18px;
font-style: normal;
color: #48C9B0;
}
}
.tabName {
color: #999;
margin-bottom: -3px;
}
.tabContent {
line-height: 26px;
-webkit-transform: scale(0.9);
}
.td3 {
padding: 5px;
line-height: 24px;
width: 200px;
.buier_tip {
color: #666;
}
}
.td4 {
padding: 5px;
width: 200px;
line-height: 24px;
.time {
color: #999
}
.orderStatus {
color: #ec6565;
}
.el-button {
margin-top: 15px;
}
}
.td5 {
padding: 5px;
line-height: 24px;
}
.orderProducts:last-child {
border-bottom: none;
}
.hasSplit {
background-color: #fffae8;
border: 1px solid #ffedd6;
.el-button {
margin-top: 0;
}
}
.buttonGroup {
.el-checkbox {
margin-right: 10px;
}
}
.deliverName {
margin-bottom: px;
}
.paper_list_ui {
margin-top: 15px;
}
.buttonBox {
align-items: center;
}
.fengbi {
margin-left: 0 !important;
}
.buierInfo {
justify-content: center;
align-items: center;
line-height: 20px;
}
.nobottomBorder {
border-bottom: 0;
}
/deep/ .el-pagination {
float: right;
margin-top: 0;
}
</style>
<style>
.el-radio-button:last-child .el-radio-button__inner{border-radius: 0 4px 4px 0 !important;}
</style>

289
src/views/modules/order/buyorder-print.vue Normal file
View File

@@ -0,0 +1,289 @@
<template>
<div class="mod-config">
<!-- 订单详细更新 -->
<div>
<ul>
<li class="line"></li>
<div class="liName">订单信息</div>
<li><span class="infoTitle">订单ID：</span><span>{{orderDetails.orderSn}}</span></li>
<li class="line"></li>
<br>
<div class="liName">面单信息</div>
<!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
</el-alert> -->
<li class="flexbox deliverBox" style="width: 100%; padding-bottom: 50px;">
<el-row :gutter="20" >
<el-col :md="8" :lg="8" class="item" v-for="(item, index) in orderDetails.products">
<div class="deliver_heade">
<div><span class="infoTitle">物流公司：</span><span>{{item.shipperName}}</span></div>
<div><span class="infoTitle">运单号：</span><span>{{item.shippingSn}}</span></div>
<div class="deliver_info">
<div v-html="item.fmsHtml" style="zoom: 70%;"></div>
<div class="buttonceng flexbox" style="height:40px ;">
<el-button size="mini" plain type="primary" @click="printHandle(item)">打印面单</el-button>
</div>
</div>
</div>
</el-col>
</el-row>
</li>
</ul>
</div>
<div class="box" style="display: none;">
<div>
<ul id="">
<li v-for="(item,index) of printArr" :key="index" v-html="item"
:id="'printDiv' + index" style="page-break-after:always;">
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
query: {
orderId: 0
},
orderDetails:{},
printArr:[]
}
},
created(){
this.getData()
},
activated() {
this.query.orderId = this.$route.query.orderId;
console.log(this.$route.query.orderId)
this.getData()
},
methods: {
// 获取订单详情
getData() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/book/buyorder/appGetOrderInfo'),
method: 'get',
params: this.$http.adornParams({
'orderId': this.query.orderId,
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.orderDetails = data.buyOrder
} else {
// this.dataList = []
// this.totalPage = 0
}
this.dataListLoading = false
})
},
// 打印面单
printHandle(item) {
//console.log(item)
//this.printDialogVisible = true
this.$confirm(`是否确定打印所选面单?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//console.log(item)
this.printArr.push(item.fmsHtml)
console.log(this.printArr)
setTimeout(() => {
this.handlePrint()
}, 1000);
setTimeout(() => {
this.printArr = []
}, 1000);
// 修改运单状态
this.setPrint(item.shippingSn)
}).catch()
},
setPrint(shippingCode){
var shippingIds = [shippingCode]
this.$http({
url: this.$http.adornUrl('/book/buyorderdetail/batchUpdateByShippingSns'),
method: 'post',
data: shippingIds
}).then(({ data }) => {
if (data && data.code === 0) {
// console.log(data)
return this.$message.success('已打印')
} else {
return this.$message.success('打印失败')
}
})
},
handlePrint() {
var newWin = window.open(""); //新打开一个空窗口
for (var i = 0; i < this.printArr.length; i++) {
var imageToPrint = document.getElementById("printDiv0"); //获取需要打印的内容
newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
}
const styleSheet = `<style>li{list-style:none;}</style>`;
newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
newWin.document.close(); //在IE浏览器中使用必须添加这一句
newWin.focus(); //在IE浏览器中使用必须添加这一句
setTimeout(function () {
newWin.print(); //打印
newWin.close(); //关闭窗口
}, 100);
},
}
}
</script>
<style>
.deliver_info:hover::before{
display:block !important;
}
</style>
<style lang="less" scoped>
.noinfo {
color: #ddd;
text-align: center;
padding: 20px;
}
.scroll{margin-top: 15px; height: auto;}
.deliverBox{
flex-wrap: wrap; justify-content: space-between;
.item{padding-right: 15px; min-width: 300px;
.deliver_heade{margin-top: 15px;}
}
}
.el-timeline{
li{
float: none;
}
}
.flexbox {
display: flex;
}
.deliver_info{position: relative; overflow: hidden; padding-top: 10px;}
.deliver_info:hover{
:before{display:block !important;}
.buttonceng{visibility: visible;}
}
.buttonceng{position: absolute; z-index: 3; top: calc(50% - 30px); left: calc(50% - 50px); visibility: hidden;}
.deliver_info::before{display:none; position:absolute; left: 0; top: 0; width: 100%; height: 100%; content: '';
background-color: rgba(255 , 255, 255, 0.9);z-index: 2;}
.infoTitle {
display: inline;
}
ul {
overflow: hidden;
color: #515a6e;
li {
list-style: none;
width: 50%;
line-height: 26px;
float: left;
font-size: 12px;
}
.hightLight {
color: #f56c6c;
}
.line {
width: 100%;
border-bottom: 1px solid #eee;
margin: 10px 0;
}
}
.liName {
font-size: 12px;
margin-bottom: 10px;
font-weight: bold;
}
.text_button {
padding: 0;
}
.el-icon-truck:before {
content: "\e740";
}
.el-timeline-item:first-child {
.el-timeline-item__node {
background-color: rgb(11, 189, 135);
}
}
.el-timeline-item {
position: relative;
padding-bottom: 20px;
}
.el-timeline-item__node--large {
left: -2px;
width: 14px;
height: 14px;
}
.el-timeline-item__node {
position: absolute;
background-color: #e4e7ed;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.el-timeline-item__node--normal {
left: -1px;
width: 12px;
height: 12px;
}
.el-timeline-item__wrapper {
position: relative;
padding-left: 28px;
top: -3px;
}
.el-timeline li {
list-style: none;
}
.el-timeline-item__tail {
position: absolute;
left: 4px;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
display: none;
}
.el-timeline-item__timestamp {
color: #c3c3c3;
font-size: 14px;
;
}
</style>

986
src/views/modules/order/buyorder.vue
View File

File diff suppressed because it is too large Load Diff

517
src/views/modules/order/buyorderdetail.vue
View File

@@ -1,217 +1,334 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('book:buyorderdetail:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('book:buyorderdetail:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<!-- 订单详细更新 -->
<div>
<ul>
<div class="liName">用户信息</div>
<li><span class="infoTitle">用户名：</span><span>{{orderDetails.userName}}</span></li>
<li><span class="infoTitle">用户ID：</span><span>{{orderDetails.userId}}</span></li>
<li><span class="infoTitle">联系电话：</span><span>{{orderDetails.userPhone}}</span></li>
<li><span class="infoTitle">收货地址：</span><span>{{orderDetails.province}}-{{orderDetails.city}}-{{orderDetails.district}}-{{orderDetails.address}}</span></li>
<!-- <li><span class="infoTitle">电 话：</span><span>187898544875</span></li> -->
<!-- <li><span class="infoTitle">地 址：</span><span>天津市天津市天津市天津市天津市天津市</span></li> -->
<li class="line"></li>
<div class="liName">订单信息</div>
<li><span class="infoTitle">订单ID：</span><span>{{orderDetails.orderSn}}</span></li>
<li><span class="infoTitle">订单状态：</span>
<span v-if="orderDetails.orderStatus == 0" class="hightLight">待付款</span>
<span v-if="orderDetails.orderStatus == 1" class="hightLight">待发货</span>
<span v-if="orderDetails.orderStatus == 2" class="hightLight">已发货</span>
<span v-if="orderDetails.orderStatus == 3" class="hightLight">已完成</span>
<el-button v-if="orderDetails.orderStatus == 1" @click="godeliver" class="text_button" size="mini" type="text">去发货</el-button>
</li>
<!-- <li><span class="infoTitle">商品总数：</span><span>{{orderDetails.}}</span></li> -->
<li><span class="infoTitle">订单总金额：</span><span>{{orderDetails.realMoney}}</span></li>
<li><span class="infoTitle">交付邮费：</span><span>￥{{orderDetails.shippingMoney}}</span></li>
<li><span class="infoTitle">优惠金额：</span><span>￥0.00</span></li>
<li><span class="infoTitle">会员商品优惠：</span><span>￥0.00</span></li>
<li><span class="infoTitle">积分抵扣：</span><span>￥0.00</span></li>
<li><span class="infoTitle">实际支付金额：</span><span>￥112</span></li>
<li><span class="infoTitle">创建时间：</span><span>{{orderDetails.createTime}}</span></li>
<li><span class="infoTitle">支付时间：</span><span>{{orderDetails.paymentDate}}</span></li>
<li style="width: 100%;"><span class="infoTitle">支付方式：</span>
<span v-if="orderDetails.paymentMethod == 1"><icon-svg name="zhifubao"></icon-svg> <span>支付宝支付</span></span>
<span v-if="orderDetails.paymentMethod == 2"><icon-svg name="weixin"></icon-svg> <span>微信支付</span></span>
<span v-if="orderDetails.paymentMethod == 3">
<!-- <icon-svg name="zhifubao"></icon-svg> -->
<span>IOS内购</span>
</span>
</li>
<li class="line"></li>
<br>
<div class="liName">物流信息</div>
<!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
</el-alert> -->
<li class="flexbox deliverBox" style="width: 100%;">
<el-row :gutter="20" style="100%">
<el-col v-if="activities != []" :md="12" :lg="8" class="item" v-for="(item, index) in activities" :key="index">
<div class="deliver_heade">
<div><span class="infoTitle">物流公司：</span><span>{{item.ShipperName}}</span></div>
<div><span class="infoTitle">运单号：</span><span>{{item.LogisticCode}}</span></div>
<div class="deliver_info">
<div class="scroll" style="padding: 10px;" v-if="item.Traces != []">
<el-timeline>
<el-timeline-item :reverse="reverse" v-for="(activity, index2) in item.Traces" :key="index2" :icon="activity.icon"
:type="activity.Action" :color="activity.color" :size="activity.size"
:timestamp="activity.AcceptTime">
{{ activity.AcceptStation }}
</el-timeline-item>
</el-timeline>
</div>
<div v-else class="noinfo">-暂无物流信息-</div>
</div>
</div>
</el-col>
</el-row>
</li>
<li class="line" style="margin:10px 0;"></li>
<!-- 订单商品 -->
<div class="liName">商品信息</div>
<el-table :data="orderDetails.products"
style="width: 100%">
<el-table-column
label="商品名"
width="280">
<template slot-scope="scope">
<div class="flexbox">
<img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="scope.row.image" width="30px" height="30px">
<div class="proname">{{ scope.row.productName}}</div>
</div>
</template>
</el-table-column>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="allOrderId"
header-align="center"
align="center"
label="订单详情id">
</el-table-column>
<el-table-column
prop="orderId"
header-align="center"
align="center"
label="订单表id">
</el-table-column>
<el-table-column
prop="userId"
header-align="center"
align="center"
label="用户id">
</el-table-column>
<el-table-column
prop="productId"
header-align="center"
align="center"
label="商品id">
</el-table-column>
<el-table-column
prop="productName"
header-align="center"
align="center"
label="商品名称">
prop="productPrice"
label="价格"
width="180">
</el-table-column>
<el-table-column
prop="quantity"
header-align="center"
align="center"
label="商品数量">
</el-table-column>
<el-table-column
prop="productPrice"
header-align="center"
align="center"
label="商品单价">
</el-table-column>
<el-table-column
prop="weight"
header-align="center"
align="center"
label="商品重量">
</el-table-column>
<el-table-column
prop="productType"
header-align="center"
align="center"
label="商品类型">
</el-table-column>
<el-table-column
prop="creatTime"
header-align="center"
align="center"
label="下单时间">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.allOrderId)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.allOrderId)">删除</el-button>
</template>
label="数量" width="80">
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</ul>
</div>
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
<setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="orderList"
@closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
</div>
</template>
<script>
import AddOrUpdate from './buyorderdetail-add-or-update'
export default {
data () {
return {
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
query:{
orderId:0
}
}
},
components: {
AddOrUpdate
},
activated () {
this.query.orderId = this.$route.query.orderId;
console.log(this.$route.query.orderId)
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/book/buyorderdetail/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'orderId': this.query.orderId,
'key': this.dataForm.key
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
import AddOrUpdate from './buyorderdetail-add-or-update'
import setDeliverDialog from './set-deliver-dialog'
export default {
data() {
return {
orderList:[],
dataForm: {
key: ''
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
reverse: false,
activities: [ ],
deliverData: [], // 物流信息
setDeliverVisible: false,
dataListLoading: false,
dataListSelections: [],
// addOrUpdateVisible: false,
query: {
orderId: 0,
ordertype:null
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.allOrderId
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/book/buyorderdetail/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
orderDetails:{}
}
},
components: {
AddOrUpdate
},
activated() {
this.query.orderId = this.$route.query.orderId;
this.query.ordertype = this.$route.query.ordertype;
console.log(this.$route.query.orderId)
this.getData()
},
methods: {
// 获取 物流
getdeliverDetails(){
let loading = this.$loading({
lock: true,
text: '正在获取物流信息...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$http({
url: this.$http.adornUrl('/book/buyorder/queryFMS'),
method: 'post',
params: this.$http.adornParams({
'orderId': this.query.orderId
})
}).then(({ data }) => {
if(data && data.code === 0){
if(data.rntStr != []){
this.activities = data.rntStr
// console.log(this.activities)
}else{
this.activities = []
}
loading.close()
}else{
loading.close()
return this.$message.error('物流获取失败，请重试')
}
})
},
// 获取数据列表
getData() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl(`/book/buyorder/appGetOrderInfo/${this.query.ordertype}`),
method: 'get',
params: this.$http.adornParams({
'orderId': this.query.orderId,
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.orderDetails = data.buyOrder
if(this.query.ordertype != 0){ // 不是待付款订单时
this.getdeliverDetails()
}
} else {
this.orderDetails = {}
return this.$message.error('商品详情获取失败，请重试')
}
this.dataListLoading = false
})
},
closeDeliverDialog(val) {
this.setDeliverVisible = false
this.getData()
},
// 去发货
godeliver() {
this.orderList[0] = this.query.orderId
this.setDeliverVisible = true
}
},
components: {
setDeliverDialog
}
}
</script>
<style lang="less" scoped>
.noinfo {
color: #ddd;
text-align: center;
padding: 20px;
}
.scroll{margin-top: 15px; height: 300px;}
.deliverBox{
flex-wrap: wrap; justify-content: space-between;
.item{padding-right: 15px; min-width: 300px;
.deliver_heade{margin-top: 15px;}
}
}
.el-timeline{
li{
float: none;
}
}
.flexbox {
display: flex;
}
.deliver_info{border-radius: 10px;}
.infoTitle {
display: inline;
}
ul {
overflow: hidden;
color: #515a6e;
li {
list-style: none;
width: 50%;
line-height: 26px;
float: left;
font-size: 12px;
}
.hightLight {
color: #f56c6c;
}
.line {
width: 100%;
border-bottom: 1px solid #eee;
margin: 10px 0;
}
}
.liName {
font-size: 12px;
margin-bottom: 10px;
font-weight: bold;
}
.text_button {
padding: 0;
}
.el-icon-truck:before {
content: "\e740";
}
.el-timeline-item:first-child {
.el-timeline-item__node {
background-color: rgb(11, 189, 135);
}
}
.el-timeline-item {
width: 100%;
position: relative;
padding-bottom: 20px;
}
.el-timeline-item__node--large {
left: -2px;
width: 14px;
height: 14px;
}
.el-timeline-item__node {
position: absolute;
background-color: #e4e7ed;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.el-timeline-item__node--normal {
left: -1px;
width: 12px;
height: 12px;
}
.el-timeline-item__wrapper {
position: relative;
padding-left: 28px;
top: -3px;
}
.el-timeline li {
list-style: none;
}
.el-timeline-item__tail {
position: absolute;
left: 4px;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
display: none;
}
.el-timeline-item__timestamp {
color: #c3c3c3;
font-size: 14px;
;
}
</style>

132
src/views/modules/order/deliver-detail.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<el-dialog v-if="deliverOrder" title="物流详情" :close-on-click-modal="false" :visible.sync="visible"
:before-close="beforeCloseDialog" width="80%">
<!-- <div class="content" >
<el-button type="primary" size="small" onclick="">确定</el-button>
</div> -->
<div class="deliverInfo" style="width: 300px; margin: 10px auto;" v-if="activities != []">
<!-- <div style="margin-bottom: 5px;"><i class="el-icon-location-outline"></i><span
style=" margin-left:10px;">收货地址</span>：天津市河东区天津站</div> -->
<div style=""><icon-svg name="ren"></icon-svg><span
style=" margin-left:10px;">收货人</span>：{{ deliverOrder.userName }}</div>
<div style="margin-bottom: 5px;"><icon-svg name="dianhua"></icon-svg><span style=" margin-left:10px;">电
话</span>：{{ deliverOrder.userPhone }}</div>
</div>
<el-row :gutter="10" class="flexbox">
<div v-if="activities.length === 0" class="noinfo">-暂无物流信息-</div>
<el-col v-else :lg="8" :md="12" :xs="24" v-for="(item, index) in activities"
:class="item.length == 1 ? 'onlyOne' : 'notOone'">
<div class="scroll">
<div style="margin-bottom: 5px;"><icon-svg name="truck"></icon-svg><span
style=" margin-left: 10px;">快递</span>:
{{ activities[0].ShipperName }}{{ activities[0].LogisticCode }}</div>
<el-timeline v-if="item.Traces != []">
<el-timeline-item :reverse="reverse" v-for="(activity, index2) in item.Traces" :key="index2"
:icon="activity.icon" :type="activity.Action" :color="activity.color" :size="activity.size"
:timestamp="activity.AcceptTime">
{{ activity.AcceptStation }}
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
export default {
name: 'printOrderDialog',
props: {
visible: {
type: Boolean,
value: false
},
deliverOrder: {
type: Object,
value: {}
}
},
data() {
return {
reverse: true,
DeliverList: [],
activities: [
]
}
},
created() {
},
methods: {
// 根据订单ID查询物流信息
getDeliverList() {
// this.DeliverList = data.list
// console.log('根据订单ID查询物流信息')
// console.log(this.deliverOrder)
let loading = this.$loading({
lock: true,
text: '正在获取物流信息，请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
console.log(this.deliverOrder)
this.$http({
url: this.$http.adornUrl('/book/buyorder/queryFMS'),
method: 'post',
params: this.$http.adornParams({
'orderId': this.deliverOrder.orderId
})
}).then(({ data }) => {
if (data && data.code === 0) {
console.log(data)
if (data.rntStr != []) {
this.activities = data.rntStr
} else {
this.activities = []
}
loading.close()
this.visible = true
console.log(this.activities,4545)
} else {
loading.close()
return this.$message.error('获取失败，请重新尝试')
}
}).catch(() => {
})
},
beforeCloseDialog() {
this.$emit('closeDeliverDetailDialog', false)
}
}
}
</script>
<style scoped>
/* @import '../../../assets/css/time-line.css'; */
</style>
<style lang="less" scoped>
.noinfo {
color: #ddd;
text-align: center;
padding: 20px;
}
.flexbox {
display: flex;
justify-content: center;
}
.content {
text-align: center;
margin-top: 15px;
}</style>

116
src/views/modules/order/orderSheet-see.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<el-dialog v-if="orderinfo ? mountSheetNum : false" lock-scroll title="电子面单预览" :visible.sync="visible" width="500px"
:before-close="beforeCloseDialog" center>
<div>
<el-alert :title="`当前订单下共有 ${sheetLength} 个电子面单`" type="success"> </el-alert>
<ul class="sheet_list_ui">
<li v-for="(item, index) in orderinfo.products" style="border:1px solid #f1f1f1 ; overflow: hidden; padding: 10px 0;">
<div v-html="item.fmsHtml"></div>
</li>
</ul>
</div>
<span slot="footer" class="dialog-footer" style="text-align: center;">
<el-button type="primary" @click="submit" plain>确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
value: true
},
orderitem: {
type: Object,
value: {}
},
radio3: 'null',
orderinfo: {
type: Object,
value: {}
}
},
data() {
return {
sheetLength: 0,
sheetList: [
],
checkedList: [],
orderDetails: {}
}
},
created() {
// this.mountSheetNum()
this.visible = false
},
methods: {
// 关闭前
beforeCloseDialog() {
this.$emit('closeDialog', false)
},
submit() {
this.beforeCloseDialog()
},
//
// 获取面单
// getSheetList(){
// this.$http({
// url: this.$http.adornUrl(`/book/buyorderdetail/info/${this.orderId}`),
// method: 'get'
// // params: this.$http.adornParams({
// // 'orderId': this.orderId,
// // })
// }).then(({ data }) => {
// if (data && data.code === 0) {
// console.log(data,'电子面单')
// } else {
// }
// })
// }
// 计算面单数量
mountSheetNum() {
this.orderinfo.products.forEach(element => {
if (element.fmsHtml != '') {
this.sheetLength += 1
}
});
}
},
watch: {
orderinfo: {
handler(val, oldVal) {
//console.log(val)
this.mountSheetNum()
this.visible = true
},
deep: true
},
}
}
</script>
<style>
.ohh div{height: auto !important;}
</style>
<style lang="less" scoped>
.sheet_list_ui {
padding: 0;
height: 400px;
overflow-y: scroll;
overflow: hidden-y;
li {
margin-bottom: 10px;
list-style: none;
padding: 5px;
}
}
</style>

88
src/views/modules/order/orderbeizhu-add-or-update.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<el-dialog title="订单备注" :visible.sync="visible" width="30%" :before-close="beforeCloseDialog">
<el-form :model="dataForm">
<el-form-item label="备注内容">
<el-input type="textarea" v-model="dataForm.remark"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="updateBeizhu">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import internal from 'events'
export default {
props: {
visible: {
type: Boolean,
value: true
},
orderId:{
type: Number,
value: null
},
},
data() {
return {
dataForm:{
remark: ''
}
}
},
methods:{
// 关闭前
beforeCloseDialog() {
this.$emit('closeDialog', false)
},
init (id) {
this.orderId = id || 0
this.visible = true
this.$nextTick(() => {
if (this.orderId) {
this.$http({
url: this.$http.adornUrl(`/book/buyorder/info/${this.orderId}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
console.log(data.buyOrder)
this.dataForm.remark = data.buyOrder.remark
// console.log(this.dataForm.remark)
}
})
}
})
},
updateBeizhu(){
// console.log(this.orderId)
// console.log('执行更新备注操作')
this.$http({
url: this.$http.adornUrl(`/book/buyorder/update`),
method: 'post',
data: this.$http.adornData({
'orderId': this.orderId,
'remark': this.dataForm.remark
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
this.beforeCloseDialog()
}
}
}
</script>

428
src/views/modules/order/orderdeliver-merge.vue Normal file
View File

@@ -0,0 +1,428 @@
<template>
<el-dialog title="可合并订单" :visible.sync="visible" width="800px" :before-close="beforeCloseDialog" center>
<el-form ref="ruleForm" :model="ruleForm" label-width="80px" :rules="rules">
<div class="order_list_ui">
<div style="text-align: right;">
<el-radio-group v-model="radio3" size="mini">
<el-radio-button label="allYse">全合并</el-radio-button>
<el-radio-button label="allNo">全不合并</el-radio-button>
</el-radio-group>
</div>
<ul style="height: 500px; overflow-y:scroll;">
<li class="flexbox " v-for="(de, index) in ruleForm.list" :key="index"
style="border:1px solid #f1f1f1; margin-bottom: 5px;">
<div class="buierInfo flexbox">
<div style="width:180px; ">
<div style="padding: 10px;" class="">
<div><span class="infoTitle">用户名：</span><span>{{de.userName}}</span></div>
<div><span class="infoTitle">电话：</span><span>{{de.tel}}</span></div>
<div><span class="infoTitle">收货地址：</span><span>{{de.address}}</span></div>
</div>
</div>
</div>
<div class="productInfo" style="width:430px;" >
<div class="item" v-for="(item, orderindex) in de.orderList" :key="orderindex">
<div class="item_head">
<el-row>
<el-col :span="24" style="display: flex; justify-content: space-between;">
<span>订单编号: {{item.orderSn}}</span>
<el-button style="margin: 0; padding: 0;" type="text" @click="removeOrder(item,orderindex, index)">移除</el-button>
</el-col>
</el-row>
</div>
<div class="item_body">
<div class="flexbox" style="justify-content: space-between;">
<div class="td1" style="width:100%;">
<div class="flexbox orderProducts" style="width:100%;" v-for="(productitem, productindex) in item.products" :key="productindex">
<div class="flexbox productItem" style="width:100%;">
<!-- <el-checkbox :label="4545454545"></el-checkbox> -->
<img src="../../../../static/img/flower.png" width="50px"
height="50px">
<div class="">
<div class="bookName tabContent">{{productitem.productName}}</div>
</div>
</div>
<div class="num xcenter"><span>× {{productitem.quantity}}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style=" padding: 10px;" class="buttonBox flexbox">
<div>
<div>是否合并当前可合并项？</div>
<el-form-item label-width="0" :prop="`list.${index}.isMerge`" :rules=" [
{ required: true, message: '必填项', trigger: 'blur' }]">
<el-radio-group v-model="de.isMerge" size="mini">
<div>
<el-radio :label="'true'">合并</el-radio>
</div>
<div>
<el-radio :label="'false'">不合并</el-radio>
</div>
</el-radio-group>
</el-form-item>
</div>
</div>
</li>
</ul>
</div>
</el-form>
<span slot="footer" class="dialog-footer" style="text-align: center;">
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
value: true
},
orderitem: {
type: Object,
value: {}
},
radio3: 'null',
mergeList: { // 可合并订单操作数组
type: Array,
value: []
}
},
data() {
return {
checkedList: [],
form: {
deliverLcd: ''
},
expressList: [],
dataRule: {
deliverLcd: [
{ required: true, message: '请先选择物流公司', trigger: 'blur' }
]
},
ruleForm: {
list: []
},
rules:{
ruleForm: [
{ required: true, message: '必填项', trigger: 'blur' },
]
}
}
},
created() {
this.getExpressList()
},
updated() {
this.ruleForm.list = this.mergeList
},
methods: {
// 获取快递公司列表
getExpressList() {
this.$http({
url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
method: 'get',
}).then(({ data }) => {
// console.log(data, '快递列表')
this.expressList = data.dataList
})
},
handleCheckedCitiesChange(val) {
console.log(val)
},
// 关闭前
beforeCloseDialog() {
this.$emit('closeDialog', {
show: false,
data: this.mergeList
})
},
submit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
// console.log(this.allOrder)
console.log('完成订单检查操作，去选择物流')
// this.beforeCloseDialog()
}
})
},
// 移除订单
},
watch:{
mergeList: {
handler(val, oldVal) {
//console.log(val)
this.ruleForm.list = val
},
deep: true
},
}
}
</script>
<style lang="less" scoped>
.infoTitle {
color: #777;
display: inline-block;
width: 62px;
text-align: right;
}
.dialog-footer {
text-align: center;
}
.el-radio-button {
margin-left: -3px;
}
/deep/ .el-dialog__footer {
text-align: center;
}
.flexbox {
display: flex;
}
.order_list_ui {
* {
font-size: 12px;
//color: #777;
}
ul {
color: #515a6e;
padding: 0;
li {
list-style: none;
width: 100%;
// margin-bottom: 10px;
.item_head {
width: 100%;
padding: 10px;
// border-right: none !important;
background-color: #edf9f8;
.el-checkbox__label {
display: none !important;
}
.tip {
text-align: right;
.el-button {
padding: 0;
}
}
.el-checkbox {
margin-right: 10px;
}
}
.item_body {
// border: 1px solid #ddf6f3;
border-top: none;
}
}
}
}
.productInfo {
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
width: 100%;
}
.orderProducts {
padding: 10px;
border-bottom: 1px solid #f1f1f1;
.price {
width: 40px;
line-height: 54px;
}
.num {
width: 40px;
line-height: 54px;
}
.productItem {
overflow: hidden;
.flexbox {
align-items: center;
}
.el-checkbox {
line-height: 54px;
}
.el-checkbox__label {
display: none !important;
}
}
}
.xcenter {
text-align: center;
}
.borderright {
padding-left: 10px;
border-right: 1px solid #f1f1f1;
}
.normal {
display: none;
}
.hasDeliver {
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-image: url(../../../../static/img/hasDeliver_icon.png);
}
.td1 {
// width: 400px;
.orderProducts {
overflow: hidden;
position: relative;
.el-checkbox {
margin-right: 10px;
}
img {
margin-right: 10px;
padding: 2px;
border: 1px solid #f1f1f1;
}
.bookName {
//margin-right: 10px;
font-size: 12px;
line-height: 22px;
margin-left: -6px;
-webkit-transform: scale(0.9);
}
.author {
color: #999;
}
}
}
.td2 {
width: 150px;
line-height: 26px;
padding: 5px;
em {
font-size: 18px;
font-style: normal;
color: #48C9B0;
}
}
.tabName {
color: #999;
margin-bottom: -3px;
}
.tabContent {
line-height: 26px;
-webkit-transform: scale(0.9);
}
.td3 {
padding: 5px;
line-height: 24px;
width: 200px;
.buier_tip {
color: #666;
}
}
.td4 {
padding: 5px;
width: 200px;
line-height: 24px;
.time {
color: #999
}
.orderStatus {
color: #ec6565;
}
.el-button {
margin-top: 15px;
}
}
.td5 {
padding: 5px;
line-height: 24px;
}
.orderProducts:last-child {
border-bottom: none;
}
.hasSplit {
background-color: #fffae8;
border: 1px solid #ffedd6;
.el-button {
margin-top: 0;
}
}
.buttonGroup {
.el-checkbox {
margin-right: 10px;
}
}
.deliverName {
margin-bottom: px;
}
.paper_list_ui {
margin-top: 15px;
}
.buttonBox {
align-items: center;
}
.fengbi {
margin-left: 0 !important;
}
.buierInfo {
justify-content: center;
align-items: center;
}
</style>

599
src/views/modules/order/orderdeliver-split.vue Normal file
View File

@@ -0,0 +1,599 @@
<template>
<el-dialog title="订单发货" center :visible.sync="visible" width="700px" :before-close="beforeCloseDialog">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="物流公司" prop="deliverLcd">
<el-select size="mini" v-model="ruleForm.deliverLcd" placeholder="请选择物流公司" @change="selectChanged">
<el-option v-for="(item, index) in expressList" :label="item.dictValue"
:value="item.dictType"></el-option>
</el-select>
<el-radio-group v-model="radio3" size="mini" style="float: right;">
<!-- 三种发货形态-general：普通发货,merge:合并发货,mix:混合发货 -->
<el-radio-button label="general">普通发货</el-radio-button>
<!-- <el-radio-button label="merge">合并发货</el-radio-button> -->
<el-radio-button label="mix">混合发货</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
<div class="order_list_ui">
<ul v-if="orderitem">
<div v-if="radio3 == 'general'">
<li>
<div class="item_head">
<el-row>
<el-col :md="12" :lg="12">
<span><span class="infoTitle">订单编号：</span>{{ orderitem.orderSn }} </span></el-col>
</el-row>
</div>
<div class="item_body">
<div class="flexbox" style="justify-content: space-between;">
<div class="td1 flexbox" style="align-items: flex-start;">
<div class="flexbox orderProducts" v-for="products in productsCodeList">
<div class="flexbox productItem" style="">
<!-- <el-checkbox :label="products.allOrderId"></el-checkbox> -->
<img :src="products.image" width="30px" height="30px">
<div class="flexbox" style="align-items: center;">
<div class="bookName">{{ products.productName }}</div>
</div>
</div>
<div class="flexbox">
<div class="price xcenter">
<!-- <div>{{ products.productPrice }}</div> -->
<div>× {{ products.quantity }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</div>
<div v-if="radio3 == 'mix'">
<div v-if="mixOrderList.length == 0"
style="display: flex; height:300px; width: 100%; align-items: center; justify-content: center;">
<div class="empty" style="text-align: center;">
<icon-svg style="font-size: 130px;" name="kongbai"></icon-svg>
<div style="color: #999;">暂无数据</div>
</div>
</div>
<div v-else>
<el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
<li class="flexbox mergeList" style="border:1px solid #ddf6f3" v-for="(item, index) in mixOrderList">
<div class="buierInfo flexbox">
<div style="display: flex;width:180px; align-items: center;">
<div style="padding: 10px;" class="">
<div><span class="infoTitle">用户名：</span><span>{{item.userName}}</span></div>
<div><span class="infoTitle">电话：</span><span>{{item.tel}}</span></div>
<div><span class="infoTitle">收货地址：</span><span>{{item.address}}</span></div>
</div>
</div>
</div>
<div class="productInfo" style="width:100%;">
<div class="item" v-for="(item2, index) in item.orderList">
<div class="item_head no_right_border">
<el-row>
<el-col :span="24"
style="display: flex; justify-content: space-between;">
<span><span class="infoTitle">订单编号：</span>{{item2.orderSn}} </span>
<!-- <el-button style="margin: 0; padding: 0;" type="text">移除</el-button> -->
</el-col>
</el-row>
</div>
<div class="item_body no_right_border no_bottom_border">
<div class="flexbox" style="justify-content: space-between;">
<div class="td1 flexbox" style="width:100%; ">
<div class="flexbox orderProducts" style="width:100%;" v-for="(item3, index) in item2.products">
<div class="flexbox productItem" style="width:100%;">
<el-checkbox :label="item3.allOrderId" :disabled="item3.orderStatus == '1'"><br></el-checkbox>
<img :src="item3.image" width="30px" style="margin-left: -15px;"
height="30px">
<div class="flexbox" style="align-items: center;">
<div class="bookName">{{item3.productName}}</div>
</div>
</div>
<div class="num xcenter"><span>× {{item3.quantity}}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</el-checkbox-group>
</div>
</div>
</ul>
</div>
<span slot="footer" class="dialog-footer">
<el-button v-if="radio3 === 'mix' && mixOrderList.length != 0" type="primary" @click="submit">发 货</el-button>
<el-button v-if="radio3 == 'general'" type="primary" @click="submit1">发 货</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
value: true
},
orderitem: {
type: Object,
value: {}
}
},
data() {
return {
// 普通发货list
productsCodeList:[],
productsIdsList:[],
radio3: 'general',
checkedList: [],
ruleForm: {
deliverLcd: '',
dictValue:''
},
expressList: [],
rules: {
deliverLcd: [
{ required: true, message: '请先选择物流公司', trigger: 'change' }
]
},
orderIds: [],
// 混合发货数组
mixOrderList: []
}
},
created() {
// this.visible = false
this.getExpressList()
},
methods: {
// 获取快递公司列表
getExpressList() {
this.$http({
url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
method: 'get',
}).then(({ data }) => {
// console.log(data, '快递列表')
this.expressList = data.dataList
})
},
selectChanged(val){
console.log(val.dictValue)
if(this.expressList && this.expressList.length > 0){
this.expressList.forEach(element => {
if(element.dictType == val){
return this.ruleForm.dictValue = element.dictValue
}
});
}
// this.ruleForm.dictValue = val.dictValue
//this.ruleForm.deliverLcd = val.dictType
},
handleCheckedCitiesChange(val) {
console.log(val)
},
// 获取可合并订单
getMixDeliverOrderList() {
this.orderIds[0] = this.orderitem.orderId
this.$http({
url: this.$http.adornUrl(`/book/buyorder/checkMerge`),
method: 'post',
data: this.orderIds
}).then(({ data }) => {
this.mixOrderList = data.list
})
},
// 关闭前
beforeCloseDialog() {
this.$emit('closeDialog', false)
this.$refs['ruleForm'].resetFields()
this.$refs['ruleForm'].clearValidate()
this.checkedList = []
},
getNewProducts(){
this.productsCodeList.forEach((item, index) => {
if(item.orderStatus == '1'){
this.productsCodeList.splice(index, 1)
console.log(index)
}
this.productsIdsList = this.productsCodeList.map( item => item.allOrderId)
})
},
//
// getProductsCodeList
// 普通发货
submit1(){
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/book/buyorder/blendSendFMS/${this.ruleForm.deliverLcd}`),
method: 'post',
params: this.$http.adornParams({
"shipperName" : this.ruleForm.dictValue
}),
data: this.productsIdsList // 是个数组
// 传orderid
}).then(({ data }) => {
if(data && data.code === 0 ){
console.log(data)
this.beforeCloseDialog()
return this.$message.success('发货成功')
}
})
}})
},
// 获取数据列表
getData() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/book/buyorder/appGetOrderInfo'),
method: 'get',
params: this.$http.adornParams({
'orderId': this.orderId,
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.productsCodeList = data.buyOrder
console.log(888)
} else {
// this.dataList = []
// this.totalPage = 0
}
this.dataListLoading = false
})
},
//混合发货
submit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
// console.log(this.allOrder)
if (this.checkedList.length == 0 && this.radio3 == 'mix') {
return this.$message.error('请至少选择一条商品')
}
console.log('执行更新发货操作')
this.$confirm(`正在执行${this.deliverType} , 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let loading = this.$loading({
lock: true,
text: '执行操作，请稍后',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$http({
url: this.$http.adornUrl(`/book/buyorder/blendSendFMS/${this.ruleForm.deliverLcd}`),
method: 'post',
params: this.$http.adornParams({
"shipperName" : this.ruleForm.dictValue
}),
data: this.checkedList,
// 传orderid
}).then(({ data }) => {
if(data && data.code === 0){
// console.log(data)
loading.close()
return this.$message.success('发货成功')
this.beforeCloseDialog()
}
})
// this.$message({
// type: 'success',
// message: '发货成功!'
// });
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
//this.beforeCloseDialog()
}
})
}
},
computed: {
deliverType() {
let type = ''
if (this.radio3 == 'mix') {
type = `[混合发货]，当前操作${this.checkedList.length}个商品打包发货`
} else if (this.radio3 == 'merge') {
type = `[合并发货]`
} else {
// 混合发货
type = '[普通发货]'
}
return type
}
},
watch: {
orderitem: {
handler(val, oldVal) {
this.productsCodeList = val.products
this.getNewProducts()
this.getMixDeliverOrderList()
// this.getData()
// this.visible = true
},
deep: true
}
}
}
</script>
<style lang="less" scoped>
.no_right_border {
border-right: 0 !important;
}
.no_bottom_border {
border-bottom: none !important;
}
.mergeList {
.item_head:first-child {
border-top: none;
}
}
// .infoTitle {
// color: #777;
// display: inline-block;
// width: 62px;
// text-align: right;
// }
/deep/ .el-dialog__footer {
text-align: center;
}
.flexbox {
display: flex;
}
/deep/ .el-checkbox__label {
display: none !important;
}
.order_list_ui {
* {
font-size: 12px;
//color: #777;
}
ul {
color: #515a6e;
padding: 0;
li {
list-style: none;
margin-bottom: 10px;
.item_head {
width: 100%;
padding: 6px;
border: 1px solid #ddf6f3;
// border-right: none;
background-color: #edf9f8;
// .el-checkbox__label {
// display: none !important;
// }
.tip {
text-align: right;
.el-button {
padding: 0;
}
}
.el-checkbox {
margin-right: 10px;
}
}
.item_body {
border: 1px solid #ddf6f3;
// border-bottom: none;
// border-right: none;
border-top: none;
}
}
}
}
.orderProducts {
padding: 10px;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1;
.price {
width: 40px;
line-height:28px;
}
.num {
width: 40px;
line-height: 20px;
}
.productItem {
overflow: hidden;
.flexbox {
align-items: center;
}
.el-checkbox {
line-height: 24px;
}
.el-checkbox__label {
display: none !important;
}
}
}
.xcenter {
text-align: center;
}
.borderright {
padding-left: 10px;
border-right: 1px solid #f1f1f1;
}
.normal {
display: none;
}
.hasDeliver {
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-image: url(../../../../static/img/hasDeliver_icon.png);
}
.td1 {
width: 100%;
.orderProducts {
overflow: hidden;
position: relative;
.el-checkbox {
margin-right: 10px;
}
img {
margin-right: 10px;
padding: 2px;
border: 1px solid #f1f1f1;
}
.bookName {
//margin-right: 10px;
font-size: 12px;
line-height: 16px;
margin-left: -6px;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 控制多行的行数
-webkit-box-orient: vertical;
-webkit-transform: scale(0.8);
}
.author {
color: #999;
}
}
}
.td2 {
width: 150px;
line-height: 26px;
padding: 5px;
em {
font-size: 18px;
font-style: normal;
color: #48C9B0;
}
}
.tabName {
color: #999;
margin-bottom: -3px;
}
.tabContent {
line-height: 26px;
-webkit-transform: scale(0.9);
}
.td3 {
padding: 5px;
line-height: 24px;
width: 200px;
.buier_tip {
color: #666;
}
}
.td4 {
padding: 5px;
width: 200px;
line-height: 24px;
.time {
color: #999
}
.orderStatus {
color: #ec6565;
}
.el-button {
margin-top: 15px;
}
}
.td5 {
padding: 5px;
line-height: 24px;
}
.orderProducts:last-child {
border-bottom: none;
}
.hasSplit {
background-color: #fffae8;
border: 1px solid #ffedd6;
.el-button {
margin-top: 0;
}
}
.buttonGroup {
.el-checkbox {
margin-right: 10px;
}
}
.deliverName {
margin-bottom: px;
}
.paper_list_ui {
margin-top: 15px;
}
.fengbi {
margin-left: 0 !important;
}
</style>

154
src/views/modules/order/set-deliver-dialog.vue Normal file
View File

@@ -0,0 +1,154 @@
<template>
<div>
<el-dialog title="发货配置" :close-on-click-modal="false" :visible.sync="visible" width='500px'
:before-close="beforeCloseDialog">
<!-- <el-steps :active="stepsActive" simple style="margin-bottom: 20px;;">
<el-step title="获取电子面单" icon="el-icon-tickets"></el-step>
<el-step title="打印电子面单" icon="el-icon-printer"></el-step>
</el-steps> -->
<!-- <el-alert style="margin-bottom: 15px;" v-if="selectData.length > 0"
:title="`您正在对 ${selectData.length} 条数据进行发货操作。`" :closable="false" type="success">
</el-alert> -->
<el-form v-if="ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
class="demo-ruleForm">
<el-form-item label="选择物流" prop="deliverLcd">
<el-select size="mini" v-model="ruleForm.deliverLcd" placeholder="请选择物流" @change="selectChanged">
<el-option v-for="(item, index) in expressList" :label="item.dictValue"
:value="item.dictType"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;">
<el-button type="primary" @click="setDevliverHandle">立即发货</el-button>
</div>
</el-dialog>
<!-- <ul class="print-ul" style="display: block;">
<li v-for="(item, index) in printArr" :key="index" :id="'printDiv' + index"
style="page-break-after:always;">
<div v-html="item"></div>
</li>
</ul> -->
</div>
</template>
<script>
export default {
name: 'printOrderDialog',
props: {
visible: {
type: Boolean,
value: true
},
selectData: {
type: Array,
value: []
}
},
data() {
return {
// 快递列表
expressList: [],
fullscreenLoading: false,
// 后台返回的面单的打印数组：
printArr: [],
stepsActive: 1, // 当前step激活索引值
ruleForm: {
deliverLcd: '',
dictValue: ''
},
orderDetailIdList: [],
rules: {
deliverLcd: [
{ required: true, message: '请先选择物流公司', trigger: 'change' }
]
}
}
},
created() {
// 获取物流列表
this.getExpressList()
},
methods: {
// 获取快递公司列表
getExpressList() {
this.$http({
url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
method: 'get',
}).then(({ data }) => {
console.log(data, '快递列表')
this.expressList = data.dataList
})
},
selectChanged(val) {
console.log(val.dictValue)
if (this.expressList && this.expressList.length > 0) {
this.expressList.forEach(element => {
if (element.dictType == val) {
return this.ruleForm.dictValue = element.dictValue
}
});
}
},
// 关闭页面
beforeCloseDialog() {
this.$emit('closeDeliverDialog', false)
this.$refs['ruleForm'].resetFields()
this.$refs['ruleForm'].clearValidate()
this.selectData = []
},
// 发货操作
setDevliverHandle() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '正在处理，请稍后...',
spinner: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 发送后台请求
this.$http({
url: this.$http.adornUrl(`/book/buyorder/delivery/${this.ruleForm.deliverLcd}`),
method: 'post',
params: this.$http.adornParams({
"shipperName": this.ruleForm.dictValue
}),
data: this.selectData,
// 传orderid
}).then(({ data }) => {
// console.log(data)
loading.close();
if (data && data.code === 0) {
console.log(data)
this.beforeCloseDialog() // 关闭弹窗
return this.$message.success('发货成功')
} else {
this.beforeCloseDialog() // 关闭弹窗
return this.$message.error('发货失败')
}
}).catch((err) => {
console.log(err)
})
}
})
}
},
}
</script>
<style>
.content {
text-align: center;
margin-top: 15px;
}
.el-step {
font-size: 20px;
vertical-align: middle;
line-height: 0;
}
</style>