661 lines
22 KiB
Vue
661 lines
22 KiB
Vue
<template>
|
||
<el-dialog title="订单发货" center :visible.sync="visible" width="900px" :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.expressName" :key="index"
|
||
:value="item.expressCode"></el-option>
|
||
</el-select>
|
||
<el-radio-group v-model="radio3" size="mini" style="float: right;" @change="tabChange">
|
||
<!-- 三种发货形态-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" :key="products.product.productId">
|
||
<div class="flexbox productItem" style="">
|
||
<!-- <el-checkbox :label="products.allOrderId"></el-checkbox> -->
|
||
<img :src="products.product.productImages" width="30px" height="30px" :class="products.expressOrderId>0 && products.expressOrder != null ? 'gray' : ''" >
|
||
<div class="" style="align-items: center;">
|
||
<div class="bookName" style="margin-left:0">{{ products.product.productName }}</div>
|
||
<div style="width:100%; color:#17B3A3; font-size:12px" v-if="products.expressOrderId>0 && products.expressOrder != null">快递信息：{{products.expressOrder.expressOrderSn}}</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>
|
||
<div style="">
|
||
<div style="padding-bottom: 10px;" class="">
|
||
<div><span class="infoTitle">用户名：</span><span>{{mixOrderList[0].consignee.consigneeName}}</span>
|
||
<span class="infoTitle">电话：</span><span>{{mixOrderList[0].consignee.consigneeMobile}}</span>
|
||
<span class="infoTitle">收货地址：</span><span>{{mixOrderList[0].consignee.province}}-{{mixOrderList[0].consignee.city}}-{{mixOrderList[0].consignee.county}}-{{mixOrderList[0].consignee.address}}</span>
|
||
</div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
|
||
|
||
<li class="flexbox mergeList" style="border:1px solid #ddf6f3" v-for="(item, index) in mixOrderList" :key="index">
|
||
<!-- <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" >
|
||
<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>{{item.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" style="width:100%; ">
|
||
<div class="flexbox orderProducts" style="width:50%; float: left;" v-for="(item2, index) in item.goodsList" :key="index">
|
||
<div class="flexbox productItem" style="width:100%;">
|
||
<el-checkbox :label="item2.buyOrderProductId" :disabled="item2.expressInfo && item2.expressInfo.expressOrderSn ? true : false"><br></el-checkbox>
|
||
<img :src="item2.productImage" width="30px" style="margin-left: -15px;"
|
||
height="30px">
|
||
<div class="" style="align-items: center;">
|
||
<div class="bookName">{{item2.productName}}</div>
|
||
<div style="width:100%; color:#17B3A3; font-size:12px" v-if="item2.expressInfo && item2.expressInfo.expressOrderSn">快递信息：{{item2.expressInfo.expressCompany}}-{{item2.expressInfo.expressOrderSn}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="num xcenter"><span>× {{item2.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: 'SF',
|
||
dictValue:'顺丰快递'
|
||
},
|
||
expressList: [],
|
||
rules: {
|
||
deliverLcd: [
|
||
{ required: true, message: '请先选择物流公司', trigger: 'change' }
|
||
]
|
||
},
|
||
orderIds: [],
|
||
// 混合发货数组
|
||
mixOrderList: []
|
||
}
|
||
},
|
||
created() {
|
||
// this.visible = false
|
||
this.getExpressList()
|
||
},
|
||
methods: {
|
||
tabChange(e){
|
||
// console.log('变化了')
|
||
this.$refs['ruleForm'].clearValidate()
|
||
this.ruleForm.deliverLcd="SF"
|
||
this.ruleForm.dictValue="顺丰快递"
|
||
},
|
||
// 获取快递公司列表
|
||
getExpressList() {
|
||
this.$http({
|
||
// url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
|
||
url: this.$http.adornUrl('/express/getExpressCompanyList'),
|
||
method: 'get',
|
||
}).then(({ data }) => {
|
||
// console.log(data, '快递列表')
|
||
this.expressList = data.result
|
||
|
||
}).catch(({ e }) => {
|
||
console.log(e,'e')
|
||
})
|
||
},
|
||
selectChanged(val){
|
||
// console.log(this.ruleForm)
|
||
if(this.expressList && this.expressList.length > 0){
|
||
this.expressList.forEach(element => {
|
||
if(element.expressCode == val){
|
||
return this.ruleForm.dictValue = element.expressName
|
||
}
|
||
});
|
||
}
|
||
// 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`),
|
||
url: this.$http.adornUrl(`/book/buyOrder/decomposeShipment`),
|
||
method: 'post',
|
||
data: this.$http.adornData({
|
||
'orderId': this.orderitem.orderId,
|
||
'pageIndex':1,
|
||
'pageSize':20
|
||
})
|
||
}).then(({ data }) => {
|
||
// console.log(data,'data')
|
||
this.mixOrderList = data.result.data
|
||
})
|
||
},
|
||
|
||
// 关闭前
|
||
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.id)
|
||
})
|
||
},
|
||
//
|
||
// getProductsCodeList
|
||
// 普通发货
|
||
submit1() {
|
||
this.getNewProducts()
|
||
// console.log(this.productsIdsList)
|
||
this.$refs['ruleForm'].validate((valid) => {
|
||
if (valid) {
|
||
const 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}`),
|
||
url: this.$http.adornUrl(`/book/buyOrder/delivery`),
|
||
method: 'post',
|
||
params: this.$http.adornParams({
|
||
// "shipperName" : this.ruleForm.dictValue
|
||
'expressCompanyCode': this.ruleForm.deliverLcd
|
||
}),
|
||
data: this.productsIdsList // 是个数组
|
||
// 传orderid
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
loading.close();
|
||
// console.log(data)
|
||
this.beforeCloseDialog()
|
||
return this.$message.success('发货成功')
|
||
}
|
||
}).catch((e) => {
|
||
loading.close();
|
||
console.log('e',e)
|
||
this.$message.error('发货失败')
|
||
})
|
||
}else{
|
||
this.$message.error('请先选择物流公司')
|
||
|
||
}})
|
||
},
|
||
// 获取数据列表
|
||
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}`),
|
||
url: this.$http.adornUrl(`/book/buyOrder/delivery`),
|
||
method: 'post',
|
||
params: this.$http.adornParams({
|
||
// "shipperName" : this.ruleForm.dictValue
|
||
'expressCompanyCode': this.ruleForm.deliverLcd
|
||
}),
|
||
data: this.checkedList,
|
||
// 传orderid
|
||
}).then(({ data }) => {
|
||
if(data && data.code === 0){
|
||
// console.log(data)
|
||
loading.close()
|
||
this.beforeCloseDialog()
|
||
return this.$message.success('发货成功')
|
||
|
||
}
|
||
}).catch(({e}) => {
|
||
loading.close();
|
||
console.log('e',e)
|
||
})
|
||
// 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) {
|
||
// console.log('变化',val)
|
||
this.productsCodeList = val.productList
|
||
this.getNewProducts()
|
||
// console.log('productsIdsList',this.productsIdsList)
|
||
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;
|
||
}
|
||
|
||
.gray{
|
||
-webkit-filter: grayscale(100%);
|
||
-moz-filter: grayscale(100%);
|
||
-ms-filter: grayscale(100%);
|
||
-o-filter: grayscale(100%);
|
||
filter: grayscale(100%);
|
||
filter: gray;
|
||
}
|
||
.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>
|