586 lines
18 KiB
Vue
586 lines
18 KiB
Vue
<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="">
|
||
<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" @input="MergeRadioListChanged($event,index)">
|
||
<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.productUrl" 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,
|
||
flag:false,
|
||
submitMrgeIdList:[],
|
||
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: {
|
||
// 选择批量合并发货
|
||
MergeRadioListChanged(val,index) {
|
||
console.log(this.ruleForm.list,'this.ruleForm.list')
|
||
this.ruleForm.list[index].isMerge = 'true'
|
||
this.buttonDisable = false
|
||
this.radio3 = ''
|
||
},
|
||
// 获取快递公司列表
|
||
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')
|
||
})
|
||
},
|
||
// 获取可合并订单
|
||
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
|
||
this.ruleForm.list.map(item => {
|
||
return item.isMerge = 'false'
|
||
})
|
||
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()
|
||
this.merOneList = []
|
||
},
|
||
// 单个合并订单发货
|
||
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) {
|
||
this.multMergeIdList = []
|
||
this.submitMrgeIdList = JSON.parse(JSON.stringify(this.ruleForm.list)) // 深度拷贝选中的订单
|
||
this.submitMrgeIdList.map((item, index) => {
|
||
if (item.isMerge == 'false') {
|
||
this.submitMrgeIdList.splice(index, 1) // 去掉未选中的合并项
|
||
}
|
||
|
||
})
|
||
this.submitMrgeIdList.map(element => {
|
||
let list = []
|
||
list = element.orderList.map(ele => { // 转换成id格式
|
||
return ele.orderId
|
||
})
|
||
this.multMergeIdList = this.multMergeIdList.concat(list)
|
||
})
|
||
// console.log(this.submitMrgeIdList,'submitMrgeIdList')
|
||
// console.log(this.multMergeIdList,'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> |