386 lines
10 KiB
Vue
386 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<!-- 拆单订单 -->
|
|||
|
|
<view v-if="splitGoods.length">
|
|||
|
|
<view class="all" v-if="select_all">
|
|||
|
|
<checkbox-group @change="checkboxAllChange">
|
|||
|
|
<checkbox value="all" :checked="isAllSelect" />
|
|||
|
|
<text class='checkAll'>全选</text>
|
|||
|
|
</checkbox-group>
|
|||
|
|
</view>
|
|||
|
|
<checkbox-group @change="checkboxChange">
|
|||
|
|
<block v-for="(item,index) in splitGoods" :key="index">
|
|||
|
|
<view class="splitOrder borRadius14">
|
|||
|
|
<view class='items acea-row row-between-wrapper' v-if="item.surplus_num>0">
|
|||
|
|
<checkbox v-show="isShowIpt(item)" :value="item.id.toString()" :checked="item.checked" :disabled="(type!=1&&item.surplus_num<1)?true:false" />
|
|||
|
|
<view class='picTxt acea-row row-between-wrapper'>
|
|||
|
|
<view class='pictrue'>
|
|||
|
|
<image :src='item.image'></image>
|
|||
|
|
</view>
|
|||
|
|
<view class='text'>
|
|||
|
|
<view class="acea-row row-between-wrapper">
|
|||
|
|
<view class='name line1'>{{item.productName}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='infor line1'>
|
|||
|
|
{{item.sku || '默认'}}</view>
|
|||
|
|
<view class="acea-row row-middle money-section">
|
|||
|
|
<text class="infor-num mr-8">购买 x{{item.payNum}}</text>
|
|||
|
|
<text class="infor-text" v-if="type==1">{{`(${item.refundNum}件已退 ${item.payNum-item.refundNum}件可退）`}}</text>
|
|||
|
|
<text class="infor-text" v-if="type==0">{{ `(${item.deliveryNum}件已发 ${item.refundNum}件已退）`}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-show="isShowIpt(item)" class='carnum acea-row row-center-wrapper'>
|
|||
|
|
<view class="reduce iconfont icon-ic_Reduce mr-8" :class="item.surplus_num == 1 ? 'on' : ''" @click.stop='subCart(item)'></view>
|
|||
|
|
<view class='num rd-12rpx'>{{item.surplus_num}}</view>
|
|||
|
|
<view class="plus iconfont icon-ic_increase ml-8" :class="item.surplus_num == item.numShow ? 'on' : ''" @click.stop='addCart(item)'></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="item.workOrderList && item.workOrderList.length">
|
|||
|
|
<view v-for="(itm, idx) in getSplitOrderTableList(item.workOrderList[0])" :key="itm.id">
|
|||
|
|
<OrderTable :list="itm.list"></OrderTable>
|
|||
|
|
</view>
|
|||
|
|
<view class="bg--w111-fff borRadius14" v-for="(items,indexs) in item.workOrderList" :key="items.id">
|
|||
|
|
<view class='item flex-y-center mt20'>
|
|||
|
|
<checkbox :value="(items.id).toString()" :checked="items.checked"/>
|
|||
|
|
<view class="ml-12">工单号：{{ items.workOrderNo }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</checkbox-group>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import OrderTable from "../OrderDetail/OrderTable";
|
|||
|
|
import {getSplitOrderTableList} from "../../order";
|
|||
|
|
import {ProductTypeEnum} from "@/enums/productEnums";
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
splitGoods: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
select_all: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
//0-分单发货 1-分单付款
|
|||
|
|
type:{
|
|||
|
|
default:'0'
|
|||
|
|
},
|
|||
|
|
// 订单二级分类
|
|||
|
|
secondType: {
|
|||
|
|
type: Number,
|
|||
|
|
default: () => 0
|
|||
|
|
},
|
|||
|
|
// 父组件的全选状态
|
|||
|
|
parentAllSelected: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
OrderTable,
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听父组件的全选状态变化
|
|||
|
|
parentAllSelected: {
|
|||
|
|
|
|||
|
|
handler(newVal) {
|
|||
|
|
if (newVal) {
|
|||
|
|
this.selectAllWorkOrders();
|
|||
|
|
} else {
|
|||
|
|
// 父组件 isAll 变为 false 可能是单个勾选变化导致，不在此处做全不选操作
|
|||
|
|
// 如需全不选，请由父组件显式调用 unselectAllWorkOrders()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isAllSelect: false,
|
|||
|
|
ProductTypeEnum
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getSplitOrderTableList,
|
|||
|
|
// 针对工单与普通订单的判断
|
|||
|
|
isShowIpt(item){
|
|||
|
|
return !item.workOrderList
|
|||
|
|
},
|
|||
|
|
// 全选所有工单
|
|||
|
|
selectAllWorkOrders() {
|
|||
|
|
this.splitGoods.forEach((item) => {
|
|||
|
|
if (item.workOrderList && item.workOrderList.length) {
|
|||
|
|
item.workOrderList.forEach((workOrder) => {
|
|||
|
|
this.$set(workOrder,'checked',true)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
item.checked = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.isAllSelect = true;
|
|||
|
|
// 通知父组件更新
|
|||
|
|
this.emitSelectedWorkOrders();
|
|||
|
|
},
|
|||
|
|
// 取消全选所有工单
|
|||
|
|
unselectAllWorkOrders() {
|
|||
|
|
this.splitGoods.forEach((item) => {
|
|||
|
|
if (item.workOrderList && item.workOrderList.length) {
|
|||
|
|
item.workOrderList.forEach((workOrder) => {
|
|||
|
|
this.$set(workOrder,'checked',false)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
item.checked = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.isAllSelect = false;
|
|||
|
|
// 通知父组件更新
|
|||
|
|
this.emitSelectedWorkOrders();
|
|||
|
|
},
|
|||
|
|
// 发送选中的工单ID列表给父组件
|
|||
|
|
emitSelectedWorkOrders() {
|
|||
|
|
if ( this.splitGoods[0].workOrderList) {
|
|||
|
|
const selectedWorkOrderIds = [];
|
|||
|
|
this.splitGoods.forEach((item) => {
|
|||
|
|
if (item.workOrderList && item.workOrderList.length) {
|
|||
|
|
item.workOrderList.forEach((workOrder) => {
|
|||
|
|
if (workOrder.checked) {
|
|||
|
|
selectedWorkOrderIds.push(workOrder.id.toString());
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.$emit('getList', selectedWorkOrderIds);
|
|||
|
|
} else {
|
|||
|
|
this.$emit('getList', this.splitGoods);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
subCart(item) {
|
|||
|
|
item.surplus_num = item.surplus_num - 1;
|
|||
|
|
if (item.surplus_num <= 1) {
|
|||
|
|
item.surplus_num = 1
|
|||
|
|
}
|
|||
|
|
this.$emit('getList', this.splitGoods);
|
|||
|
|
},
|
|||
|
|
addCart(item) {
|
|||
|
|
item.surplus_num = item.surplus_num + 1;
|
|||
|
|
if (item.surplus_num >= item.numShow) {
|
|||
|
|
item.surplus_num = item.numShow
|
|||
|
|
}
|
|||
|
|
this.$emit('getList', this.splitGoods);
|
|||
|
|
},
|
|||
|
|
inArray: function(search, array) {
|
|||
|
|
for (let i in array) {
|
|||
|
|
if (array[i] == search) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
checkboxChange(event) {
|
|||
|
|
let idList = event.detail.value;
|
|||
|
|
this.splitGoods.forEach((item) => {
|
|||
|
|
if(item.workOrderList && item.workOrderList.length){
|
|||
|
|
item.workOrderList.forEach((itm) => {
|
|||
|
|
if (this.inArray(itm.id, idList)) {
|
|||
|
|
this.$set(itm,'checked',true)
|
|||
|
|
} else {
|
|||
|
|
this.$set(itm,'checked',false)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.getAllSelect(idList, item.workOrderList)
|
|||
|
|
}else{
|
|||
|
|
if (this.inArray(item.id, idList)) {
|
|||
|
|
this.$set(item,'checked',true)
|
|||
|
|
} else {
|
|||
|
|
this.$set(item,'checked',false)
|
|||
|
|
}
|
|||
|
|
this.getAllSelect(idList, this.splitGoods)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if(this.splitGoods[0].workOrderList && this.splitGoods[0].workOrderList.length){
|
|||
|
|
this.$emit('getList', idList);
|
|||
|
|
}else{
|
|||
|
|
this.$emit('getList', this.splitGoods);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 全选
|
|||
|
|
getAllSelect(idList, list){
|
|||
|
|
if (idList.length === list.length) {
|
|||
|
|
this.isAllSelect = true;
|
|||
|
|
} else {
|
|||
|
|
this.isAllSelect = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
forGoods(val) {
|
|||
|
|
let that = this;
|
|||
|
|
if (!that.splitGoods.length) return
|
|||
|
|
that.splitGoods.forEach((item) => {
|
|||
|
|
if (val) {
|
|||
|
|
item.checked = true;
|
|||
|
|
} else {
|
|||
|
|
item.checked = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
that.$emit('getList', that.splitGoods);
|
|||
|
|
},
|
|||
|
|
checkboxAllChange(event) {
|
|||
|
|
let value = event.detail.value;
|
|||
|
|
if (value.length) {
|
|||
|
|
this.forGoods(1)
|
|||
|
|
} else {
|
|||
|
|
this.forGoods(0)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
|||
|
|
border: 1px solid #007aff !important;
|
|||
|
|
background-color: #007aff !important;
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
.splitOrder {
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin: 20rpx auto 0 auto;
|
|||
|
|
padding: 32rpx 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .all {
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .all .checkAll {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
.item{
|
|||
|
|
padding: 32rpx 24rpx;
|
|||
|
|
}
|
|||
|
|
.splitOrder .items~.items {
|
|||
|
|
margin-top: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt {
|
|||
|
|
width: 604rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .name {
|
|||
|
|
width: 444rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .pictrue {
|
|||
|
|
width: 136rpx;
|
|||
|
|
height: 136rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .pictrue image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text {
|
|||
|
|
width: 450rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .reColor {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .reElection {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .reElection .title {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .reElection .reBnt {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 46rpx;
|
|||
|
|
border-radius: 23rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .infor {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
width: 284rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .money-section {
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .text .money {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-family: 'Regular';
|
|||
|
|
color: #FF7D00;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum {
|
|||
|
|
height: 36rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: -16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum view {
|
|||
|
|
text-align: center;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum .reduce {
|
|||
|
|
border-right: 0;
|
|||
|
|
border-radius: 3rpx 0 0 3rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum .reduce.on {
|
|||
|
|
border-color: #e3e3e3;
|
|||
|
|
color: #dedede;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum .plus {
|
|||
|
|
border-left: 0;
|
|||
|
|
border-radius: 0 3rpx 3rpx 0;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum .plus.on {
|
|||
|
|
border-color: #e3e3e3;
|
|||
|
|
color: #dedede;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitOrder .items .picTxt .carnum .num {
|
|||
|
|
color: #282828;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
width: 72rpx;
|
|||
|
|
}
|
|||
|
|
.infor-num{
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.infor-text{
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #2A7EFB;
|
|||
|
|
}
|
|||
|
|
</style>
|