dingdong-master/pages/order-manage/dispatch-order.vue

158 lines
4.8 KiB
Vue

<template>
<view>
<view>
<view class="solid-bottom padding-bottom-sm">
<view v-if="columnTitleArr.length" class="flex justify-between margin-tb-sm">
<view class="basis-df">{{columnTitleArr[0]}}</view>
<view class="flex justify-end text-center basis-df">
<view v-for="(title, index) in columnTitleArr" v-if="index >= 1" class="basis-df">{{title}}</view>
</view>
</view>
<view class="flex justify-between margin-tb-xs align-center" v-for="(item,index) in pickedList" :key="index">
<view class='cu-tag padding basis-lg'>{{item.goodsName}}</view>
<view class="flex justify-end basis-df text-center align-center">
<view class="basis-df">{{item.goodsNum}}</view>
<view class="basis-df">
<uni-number-box :min="0" :max="item.goodsNum" v-model="item.toAssignNum" @change="changePiecesNum($event, item)">
</uni-number-box>
</view>
</view>
</view>
</view>
<view class="padding-tb-sm solid-bottom flex justify-between align-center">
<text class="margin-right-sm" style="width: 150rpx;">派单价格</text>
<input type="digit" class="line-input radius-input" v-model="dispatchTotalPrice" placeholder="请输入派出总额"></input>
</view>
</view>
<!-- 可指派成员 -->
<view class="bg-white padding" v-for="(member, index) in members">
<view class="flex justify-between align-center">
<view class="flex justify-start align-center">
<view class="cu-avatar round"
:style="'background-image:url(' + member.workerLogoUrl + ');min-width: 80rpx;min-height: 80rpx'"></view>
<view class="text-lg margin-left-sm">{{member.workerName}}</view>
</view>
<view>
<button class="cu-btn bg-main-color shadow-blur" @click="assignWork(member)">指派</button>
<text v-if="singleServ" class="padding-left text-lg text-gray text-bold" data-modal="showDispatchPriceModal" @click="showModal"><text class="cuIcon-right"></text></text>
</view>
</view>
</view>
<!-- 派单金额模态框 -->
<view class="cu-modal" :class="showDispatchPriceModal?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end solid-bottom">
<view class="content">按金额派出</view>
<view class="action" data-modal="showDispatchPriceModal" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl bg-white">
<view>请输入派单金额:</view>
<view class="flex justify-center align-center margin-top-sm">
<input class="radius-input" type="digit"></input>
<text>元</text>
</view>
</view>
<view class="cu-bar bg-white solid-top">
<view class="action margin-0 flex-sub text-black" data-modal="showDispatchPriceModal" @tap="hideModal">取消</view>
<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showDispatchPriceModal" @tap="hideModal"
@click="">确认派单</view>
</view>
</view>
</view>
</view>
</template>
<script>
import productPicked from '@/components/goods-card/product-picked.vue';
export default {
name: 'dispatch-order',
components: {
productPicked
},
props: {
singleServ: {
type: Boolean,
default: false
},
product: {
type: Object,
default: {}
},
members: {
type: Array,
default: {}
},
orderNow: {
type: Boolean,
default: false
}
},
data() {
return {
dispatchTotalPrice: null,
showDispatchPriceModal: false,
columnTitleArr: ['购买机型', '待派单', '派单量'],
curOrder: {},
pickedList: []
}
},
methods: {
showModal(e) {
this[e.currentTarget.dataset.modal] = true;
},
hideModal(e) {
this[e.currentTarget.dataset.modal] = false;
},
changePiecesNum(curNum, curItem) {
curItem.toAssignNum = curNum;
},
resetData() {
this.dispatchTotalPrice = null;
},
loadData(order) {
this.resetData();
this.getCanAssignList(order);
},
async getCanAssignList(order) {
let res = await this.$request.getCanAssignList({
orderMasterId: order.orderMasterId
});
let pickedList = res.data;
this.curOrder = order;
this.pickedList = pickedList;
},
assignWork(member) {
let goodsToAssign = [];
this.pickedList.forEach((item) => {
if (item.toAssignNum) {
goodsToAssign.push({
goodsStandardId: item.goodsStandardId,
num: item.toAssignNum
})
}
});
if (goodsToAssign.length > 0) {
let params = {
goodsList: goodsToAssign,
workerId: member.workerId,
totalPay: this.dispatchTotalPrice,
orderMasterId: this.curOrder.orderMasterId
}
this.$emit('assignWork', params);
} else {
uni.showToast({
title: '请至少选择一种规格',
icon: 'none'
})
}
}
},
}
</script>
<style scoped>
</style>