cashier_app/components/change-table.vue

<template>
	<view>
		<up-popup :show="show" mode="center" @close="close">

			<view class="bg-fff u-p-30 box">
				<scroll-view direction="vertical" scroll-y style="max-height: 80vh;">
					<view class="u-flex gap-20">
						<view>转桌到</view>
						<view>
							<chooseTable v-model="form.mewTable"></chooseTable>
						</view>
					</view>
					<view class="u-flex gap-20 u-m-t-32 u-col-baseline">
						<view>转入类型</view>
						<up-radio-group v-model="form.type" placement="column">
							<up-radio label="转桌(可将部分商品转入)" :name="1" :key="1"></up-radio>
							<up-radio label="并桌(并台会将全部购物车商品转入)" :name="2" :key="2"></up-radio>
						</up-radio-group>
					</view>
					<template v-if="form.type==1">
						<view class=" u-m-t-32 ">
							<view class="u-m-b-24">购物车商品</view>
							<goodsTable :data="nowCartData" :columns="columnsCheck1" row-key="id"
								@selection-change="handleSelectionChange($event,'now')"></goodsTable>
							<!-- 		<u-table2 :data="nowCartData" :columns="columnsCheck1" row-key="id"
								@selection-change="handleSelectionChange($event,'now')" /> -->

						</view>
						<view class=" u-m-t-50 ">
							<view class="u-m-b-24">历史订单商品</view>
							<view v-for="(order,orderIndex) in goodsList" class="u-m-t-32" :key="index">
								<view>第{{ orderIndex }}次下单</view>
								<goodsTable :data="order" :columns="columnsCheck" row-key="id"
									@selection-change="handleSelectionChange($event,'old')" />
								<!-- <u-table2 :data="order" :columns="columnsCheck" row-key="id"
									@selection-change="handleSelectionChange($event,'old')" /> -->
							</view>


						</view>
					</template>

				</scroll-view>

				<view class="u-flex gap-20   u-p-t-30">
					<view class="u-flex-1">
						<my-button type="default" @click="close">取消</my-button>
					</view>
					<view class="u-flex-1">
						<my-button @click="confirm">确认</my-button>
					</view>

				</view>
			</view>

		</up-popup>

	</view>
</template>

<script setup>
	import goodsTable from './goods-table.vue'
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import chooseTable from './choose-table.vue'
	import {
		mergeOrder
	} from '@/http/api/order/order.js'
	const show = defineModel(false)
	const allChecked = ref(false)

	const props = defineProps({
		goodsList: {},
		order: {
			id: ''
		},
		nowCartData: []
	})
	watch(() => props.nowCartData, (newval) => {
		console.log('props.nowCartData', props.nowCartData)
	}, {
		deep: true
	})

	function close() {
		console.log('close');
		form.mewTable = {id: ''}
		show.value = false
	}
	const form = reactive({
		mewTable: {
			id: ''
		},
		type: 1,
		now: [],
		old: []
	})

	const columnsCheck = ref([
		// 复选框列
		{
			type: 'selection',
			width: '50px'
		},
		// 普通列
		{
			title: '商品',
			key: 'productName'
		},
		{
			title: '数量',
			key: 'num'
		}
	]);

	const columnsCheck1 = ref([
		// 复选框列
		{
			type: 'selection',
			width: '50px'
		},
		// 普通列
		{
			title: '商品',
			key: 'name'
		},
		{
			title: '数量',
			key: 'number'
		}
	]);


	const handleSelectionChange = (selection, key) => {
		console.log('handleSelectionChange', selection);
		if (key === 'old') {
			form.old = selection
		}
		if (key === 'now') {
			form.now = selection
		}
	};

	const emits = defineEmits('update', 'confirm')

	function confirm() {
		if (!form.mewTable.id) {
			return uni.showToast({
				title: '请选择目标台桌',
				icon: 'none'
			})
		}
		if (form.type == 1) {
			if (form.old.length <= 0 && form.now.length <= 0) {
				return uni.showToast({
					title: '请选择转桌商品',
					icon: 'none'
				})
			}
		}
		if (form.type == 2) {
			if (props.nowCartData.length <= 0) {
				mergeOrder({
					allMerge: 1,
					sourceOrderId: props.order ? props.order.id : '',
					targetTableCode: form.mewTable.tableCode,
					detailIds: Object.entries(props.goodsList).reduce((prve, cur) => {
						prve.push(...cur.map(v => v.id))
						return prve
					}, [])
				}).then(res => {
					uni.showToast({
						title: '转桌成功',
						icon: 'none'
					})
					emits('update', 1)
					close()

				})
			} else {
				emits('confirm', {
					targetTableCode: form.mewTable.tableCode,
					old: {
						allMerge: 1,
						sourceOrderId: props.order ? props.order.id : '',
						targetTableCode: form.mewTable.tableCode,
						detailIds: Object.entries(props.goodsList).reduce((prve, cur) => {
							prve.push(...cur.map(v => v.id))
							return prve
						}, [])
					},
					now: {
						allMerge: 1,
						cart_id: props.nowCartData.map(v => v.id)
					}
				})
				close()
			}

			return
		}
		console.log(form);
		let allOldLen = 0;
		for (let key in props.goodsList) {
			allOldLen += props.goodsList[key].length
		}

		const allMerge = form.old.length === allOldLen ? 1 : 0
		if (props.nowCartData.length <= 0) {
			mergeOrder({
				allMerge,
				sourceOrderId: props.order ? props.order.id : '',
				targetTableCode: form.mewTable.tableCode,
				detailIds: form.old.map(v => v.id)
			}).then(res => {
				uni.showToast({
					title: '转桌成功',
					icon: 'none'
				})
				emits('update', allMerge)
				close()
			})
		} else {
			emits('confirm', {
				targetTableCode: form.mewTable.tableCode,
				old: {
					allMerge,
					sourceOrderId: props.order ? props.order.id : '',
					targetTableCode: form.mewTable.tableCode,
					detailIds: form.old.map(v => v.id)
				},
				now: {
					allMerge: props.nowCartData.length == form.now.length,
					cart_id: form.now.map(v => v.id)
				}
			})
			close()
		}

	}
</script>

<style scoped>
	.box {
		width: 690rpx;
		border-radius: 18rpx;

	}
</style>