cashier-ipad/pagesOrder/index/index.vue

<template>
	<view class="min-page bg-gray u-font-28">
		<up-sticky offset-top="0">
			<view class="top">
				<view class="search bg-fff u-p-t-32 u-p-l-28 u-p-r-28 u-p-b-32">
					<up-search v-bind="search" v-model="search.val" @search="searchConfirm" @clear="searchConfirm"
						@custom="searchConfirm"></up-search>
				</view>
				<filter-vue @clearUser="clearQueryUser" @updateStatus="updateQuery('status',$event)"
					v-model:time="order.data.query.createdAt" :user="user" :type="option.type"></filter-vue>
			</view>
		</up-sticky>

		<order-list @printOrder="onPrintOrder" :hasAjax="order.data.hasAjax" :list="order.data.list"></order-list>
		<template v-if="order.data.list.length>0">
			<my-pagination @change="pageChange" :totalElements="order.data.total"></my-pagination>
		</template>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import * as Api from '@/http/yskApi/order.js'
	import {
		queryAllShopUser
	} from '@/http/yskApi/shop-user.js'


	import LIST from '@/commons/class/list.js'
	import {
		$printOrder
	} from '@/http/yskApi/Instead.js'
	import filterVue from './compoents/filter.vue';
	import orderList from './compoents/order-list.vue';
	import infoBox from '@/commons/utils/infoBox.js'
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		getTodayTimestamps
	} from '@/commons/utils/dayjs-time.js';
	const search = reactive({
		val: '',
		placeholder: '搜索单号/商品名称',
		shape: 'square',
		inputStyle: {
			borderRadius: '12rpx'
		},
		actionStyle: {
			textAlign: 'right'
		}
	})

	const today = getTodayTimestamps();
	const order = new LIST({
		list: [],
		query: {
			createdAt: [today.start, today.end],
			id: "",
			orderNo: "",
			orderType: "0",
			page: 0,
			pageSize: 10,
			payType: "",
			productName: "",
			status: "",
			userId: ''
		}
	})
	console.log(order.data);

	function clearQueryUser() {
		order.setQuery('userId', '')
	}

	function pageChange(e) {
		const newPage = e - 1
		order.setVal('page', newPage)
		order.setQuery('page', newPage)
		init()
	}

	function updateQuery(key, e) {
		order.setQuery(key, e)
	}
	watch(() => order.data.query.createdAt, (newval) => {
		init()
	})
	watch(() => order.data.query.status, (newval) => {
		init()
	})
	watch(() => order.data.query.userId, (newval) => {
		init()
	})

	function searchConfirm() {
		order.setQuery('page', 0)
		init()
	}
	async function init() {
		console.log(order.data.query);
		const {
			data
		} = await Api.tbOrderInfoData({
			...order.data.query,
			page: order.data.query.page,
			keyword: search.val
		})
		uni.stopPullDownRefresh()
		order.setVal('list', data.records)
		order.setVal('total', data.totalRow)
		order.setVal('hasAjax', true)
	}
	onPullDownRefresh(() => {
		order.setQuery('page', 0)
		init()
	})

	let user = ref({
		userId: ''
	})
	const option = reactive({
		type: ''
	})
	onLoad((opt) => {
		Object.assign(option, opt)
		if (opt && JSON.stringify(opt) != '{}') {
			order.setQuery('userId', opt.userId ? opt.userId : '')
			if (opt.userId) {
				queryAllShopUser({
					id: opt.userId
				}).then(res => {
					user.value = res.content[0] || opt
				})
			}
		}
	})

	onShow(init)
	async function printOrder(item) {
		try {
			console.log(item);
			const res = await $printOrder({
				tableId: item.tableId
			})
			infoBox.showToast('已发送打印请求')
		} catch (e) {
			console.log(e);
			infoBox.showToast('发送打印请求失败')
			//TODO handle the exception
		}

	}

	function onPrintOrder(e) {
		console.log(e);
		uni.showModal({
			title: '提示',
			content: '是否打印该订单',
			success(res) {
				if (res.confirm) {
					printOrder(e)
				}
			}
		})
	}
</script>

<style>
	.top {
		background-color: #E5E5E5;
	}
</style>