dingdong-master/pages/order-manage/dispatch-order.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>
		<!-- 可指派成员 -->
		<scroll-view class="certern-height-with-scroll" :scroll-y="true" :scroll-with-animation="true">
			<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>
		</scroll-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 = [];
				// 标识是否派完所有goods，1为派完，0为未派完
				let isAll = 1;
				this.pickedList.forEach((item) => {
					if (item.goodsNum !== item.toAssignNum) {
						isAll = 0;
					}
					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,
						isAll: isAll
					}
					console.log(params)
					this.$emit('assignWork', params);
				} else {
					uni.showToast({
						title: '请至少选择一种规格',
						icon: 'none'
					})
				}
			}
		},
	}
</script>

<style scoped>
	.certern-height-with-scroll {
		height: 280rpx;
		margin-bottom: calc(100rpx + constant(safe-area-inset-bottom) / 2);
		margin-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
	}
</style>