logpm/pagesHome/pages/orderInquiry/orderInquiry.vue

<template>
	<!-- 顶部导航栏 -->
	<u-navbar title="订单查询" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
		titleStyle='color:#ffffff'></u-navbar>

	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="header-search">
			<view class="search">
				<input class="searchInput" v-model="scancode" type="text">

				<!-- 搜索结果列表 -->
				<view class="searchResultList" v-if="isShowOrderList">
					<view v-for="item in distributionOrderList" :key="item" @click="handleSearchOrder(item)">
						{{item}}
					</view>
				</view>
			</view>

			<view class="search">
				<view class="searchType" @click="showTypeList">
					{{searchForm.searchTypeList.find((item)=> item.type === searchForm.type).label}}
				</view>

				<!-- 搜索类型列表 -->
				<view class="searchResultList" v-if="isShowTypeList">
					<view>
						<view v-for="value in searchForm.searchTypeList" :key="value.label"
							@click="handleSearchFormType(value.type)">{{value.label}}</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 数据详情 -->
		<view class="dataInfo">
			<view class="dataInfo__item">
				<text class="label">订单状态:</text>{{orderStateDictionaries[dataInfo.orderCode] || ''}}
			</view>
			<view class="dataInfo__item">
				<text class="label">品牌:</text>
				<text>
					{{dataInfo.brand || ''}}
				</text>
			</view>
			<view class="dataInfo__item">
				<text class="label">商场名称:</text>
				<text>
					{{dataInfo.mallName || ''}}
				</text>
			</view>
			<view class="dataInfo__item">
				<text class="label">商场电话:</text>
				<text>
					{{dataInfo.consigneeMobile || ''}}
				</text>
			</view>
			<view class="dataInfo__item">
				<text class="label">客户名称:</text>
				<text>
					{{dataInfo.consigneePerson || ''}}
				</text>
			</view>
			<view class="dataInfo__item">
				<text class="label">客户电话:</text>
				<text>
					{{dataInfo.customerTelephone || ''}}
				</text>
			</view>
			<view class="dataInfo__item">
				<text class="label">发货日期:</text>
				<text>{{''}}</text>
			</view>
			<view class="dataInfo__item">
				<text class="label">齐套状态:</text>
				<text>
					{{dataInfo.completeSet === 1 ? '齐套' : '未齐套'}}
				</text>
			</view>
			<view>
				<view class="label">收货地址:</view>
				<view>{{dataInfo.customerAddress || ''}}</view>
			</view>

		</view>

		<view class="orderInfo">
			<view class="title">
				<view @click="showArticleMadeToOrderModule" :class="{'active': showArticleMadeToOrder}">
					订制品(<text class="title__number">{{packageList.length}}</text>件)
				</view>
				<view @click="showArticleMadeToOrder = false" :class="{'active': !showArticleMadeToOrder}">
					库存品(<text class="title__number">{{stockList.length}}</text>件)
				</view>
			</view>

			<!-- 订制品 -->
			<view class="packagesList" v-if="packageList.length !== 0 && showArticleMadeToOrder">
				<view v-if="!isBatchOperation">
					<view class="batchOperationBtn" @click="batchOperationBtn">批量操作</view>
				</view>
				<view v-else style="display: flex;">
					<view class="batchOperationBtn" @click="handleCheckAll">全选</view>
					<view class="batchOperationBtn" @click="handleInvertSelection">反选</view>
					<view class="batchOperationBtn" @click="batchPrint">打印</view>
				</view>
				<u-checkbox-group v-model="checkboxValue" placement="column">
					<view class="packagesList__item" v-for="item in packageList" :key="item.orderPackageCode">
						<view>
							<u-checkbox :name="item.id" :checked="item.isChecked" @change="checkboxChange(item)" size="18px" />
						</view>
						<text>{{item.orderPackageCode}}</text>
						<text>{{item.warehouse}}</text>
						<text>{{item.thirdProduct}}</text>
						<text>{{item.pallet}}</text>
						<text>{{item.materialName}}</text>
						<text>{{item.orderPackageStatus === '70' ? '已签' : '未签'}}</text>
					</view>
				</u-checkbox-group>
			</view>

			<!-- 库存品 -->
			<view class="packagesList" v-else-if="stockList.length !== 0 && !showArticleMadeToOrder">
				<view class="packagesList__item" v-for="item in stockList" :key="item">
					<text>{{item.cargoNumber}}</text>
					<text>{{item.descriptionGoods}}</text>
					<text>{{item.marketName}}</text>
					<text>{{item.serviceNumber}}</text>
					<text>{{item.orderPackageStatus === '70' ? '已签' : '未签'}}</text>
				</view>
			</view>
		</view>
	</view>
	<tiplist ref="tiplists"></tiplist>
	<saomiao2></saomiao2>

</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef, watch } from 'vue';
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import utils from '@/utils/utils.js';
	import {
		distributionOrderInFuzzyQuery,
		distributionOrderInfoInQuery,
		BatchPrintPackages
	} from '@/api/user.js'

	// type列表是否显示
	const isShowTypeList = ref<Boolean>(false)

	// 订单列表是否显示
	const isShowOrderList = ref<Boolean>(false)

	// 查询订单列表
	const distributionOrderList = shallowRef<string[]>([])

	// 订单详情
	const dataInfo = shallowRef<any>({})

	// 包件列表
	const packageList = ref([])

	// 被选中包件列表
	let checkboxValue = reactive([])

	// 是否开启批量操作
	const isBatchOperation = ref<Boolean>(false)

	// 是否显示订制品
	const showArticleMadeToOrder = ref<Boolean>(true)

	// 扫码码值
	const scancode = ref<string>('')

	// 库存品列表
	const stockList = shallowRef([])

	// 订单状态字典
	const orderStateDictionaries = reactive({
		'10': '部分入库',
		'20': '已入库',
		'30': '部分出库',
		'40': '已出库',
		'70': '部分签收',
		'80': '已签收',
	})

	// 顶部搜素表单
	const searchForm = reactive({
		condition: '',
		searchTypeList: [
			{
				label: '包件查询',
				type: 1
			},
			{
				label: '订单查询',
				type: 2
			},
		],
		type: 1,
	})

	const tiplists = ref(null)

	onLoad(() => {
		// #ifdef APP
		utils.ttsspke('订单查询, 请扫描或输入包条码')
		// #endif
	})

	// 开启监听扫描
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				scancode.value = code

				scandata()
			}
		})
	})

	// 关闭扫描监听
	onHide(() => {
		uni.$off('scancodedate')
	})

	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			dataInfo.value = {}
			scancode.value = ''
			packageList.value = []

			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	function scandata() { }

	// 改变搜索表单内type
	function handleSearchFormType(type : number) {
		searchForm.type = type
		// 关闭type列表
		isShowTypeList.value = !isShowTypeList.value
	}

	// 是否显示type列表
	function showTypeList() {
		isShowTypeList.value = !isShowTypeList.value
	}

	// 选择订单
	async function handleSearchOrder(order : string) {
		scancode.value = order
		// 关闭搜索下拉框
		isShowOrderList.value = false
		// 清空订单列表数组
		distributionOrderList.value = []
		// 发送获取订单详情的请求
		const res = await distributionOrderInfoInQuery(searchForm)
		const { code, data } = res
		if (code === 200) {
			dataInfo.value = data
			packageList.value = data.list.map(item => {
				item.isChecked = false
				return item
			})
			stockList.value = data.stockList
		}
	}

	// 显示订制品模块
	function showArticleMadeToOrderModule() {
		showArticleMadeToOrder.value = true
		isBatchOperation.value = false
	}

	// 复选框
	const checkboxChange = (item) => {
		packageList.value.forEach(val => {
			if (val.id === item.id) val.isChecked = !val.isChecked
		})
		console.log(packageList.value)
	};

	// 开启批量操作
	function batchOperationBtn() {
		isBatchOperation.value = true
	}

	// 全选
	function handleCheckAll() {
		packageList.value.forEach(item => item.isChecked = true)
	}

	// 反选
	function handleInvertSelection() {
		packageList.value.forEach(item => item.isChecked = !item.isChecked)
	}

	// 批量打印
	async function batchPrint() {
		const idsArr = []
		packageList.value.forEach(item => {
			if (item.isChecked) idsArr.push(item.id)
		})
		const ids = idsArr.join(',')
		if (!ids) return uni.showToast({
			title: '最少选择一条数据',
			icon: 'none'
		})
		const res = await BatchPrintPackages(ids)
		const { code, data } = res
		if (code !== 200) return
		console.log('res :>> ', res);
		tiplists.value.setdetails({
			title: '请选择需要打印的包条码',
			isshow: true,
			tipstate: 2,
			list: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: () => {
				// if (deta.checklist.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择包条码',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				console.log('data :>> ', data);
				// #ifdef APP
				data.map(item => {
					let text = '! 0 200 200 330 1\r\n'
					text += 'SETBOLD 1\r\n'
					text += `T 56 0 0 0 ${item.orderCode}\r\n`
					text += 'LINE 0 50 420 50 3\r\n'
					text += `T 55 0 0 60 客户\r\n`
					text += 'LINE 40 50 40 110 3\r\n'
					text += `T 55 0 50 60 ${item.customerName}\r\n`
					text += 'LINE 40 80 420 80 3\r\n'
					text += `T 55 0 50 90 ${item.customerAddress}\r\n`
					text += 'LINE 0 110 420 110 3\r\n'
					text += `T 55 0 0 120 物料\r\n`
					text += 'LINE 40 110 40 140 3\r\n'
					text += `T 55 0 50 120 ${item.materialName || item.category}\r\n`
					text += 'LINE 0 140 420 140 3\r\n'
					text += 'B QR 150 150 M 2 U 4\r\n'
					text += `MA,${item.qrCode}\r\n`
					text += 'ENDQR\r\n'
					text += `T 55 0 140 260 ${item.qrCode}\r\n`
					text += 'FORM\r\n'
					text += 'PRINT\r\n'
					let sylist = utils.initbl()
					console.log(sylist);
					sylist.map(item => {
						console.log(item);
						if (item.uuids) {
							utils.getbl(item, text)
						}
					})
				})
				// #endif
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	// 储存定时器
	let timer : any

	watch([scancode], (newVal, oldVal) => {
		console.log('newVal :>> ', newVal);
		if (newVal[0] === oldVal[0]) return
		// 监听值变化并发送请求
		// 节流
		if (timer) clearTimeout(timer)
		timer = setTimeout(async () => {
			searchForm.condition = scancode.value
			// 发送请求
			let res = await distributionOrderInFuzzyQuery(searchForm)
			isShowOrderList.value = true
			const { code, data } = res
			console.log('res :>> ', res);
			if (code === 200) {
				distributionOrderList.value = data
			}
			clearTimeout(timer)
		}, 1000)
	})
</script>

<style lang="scss" scoped>
	// 主题颜色
	$themeColors: #d3832a;

	// 最外层容器
	.container {
		padding: 20upx;
		font-size: 28upx; // 本页字体大小
	}

	// 顶部搜索栏
	.header-search {
		height: 60upx;
		padding: 30upx 0 30upx;
		border-bottom: 1upx solid #aaa;
		display: flex;
		justify-content: space-between;

	}

	.search {
		position: relative;

		// 查询结果的列表
		.searchResultList {
			position: absolute;
			top: 120%;
			width: 100%;
			background: #fff;
			z-index: 80;
			text-align: center;
			line-height: 60upx;
			max-height: 300upx;
			overflow-y: scroll;
		}
	}

	// 搜索输入框
	.searchInput {
		width: 500upx;
		height: 100%;
		padding-left: 20upx;
		border: 1upx solid $themeColors;
		border-radius: 30upx;
	}

	// 搜索类型
	.searchType {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 20upx;
		background: #fff;
		border: 1upx solid $themeColors;
		border-radius: 10upx;
		color: $themeColors;
	}

	// 数据详情
	.dataInfo {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1upx solid #aaa;
	}

	.dataInfo__item {
		flex: none;
		min-width: 50%;
		line-height: 80upx;
		display: inline-flex;

		.label {
			display: inline-block;
			width: 120upx;
			text-align: right;
			margin-right: 20rpx;
		}
	}

	// 订单列表信息
	.orderInfo {
		margin-top: 10upx;

		// 头部统计
		.title {
			display: flex;
			justify-content: space-around;
			font-size: 40upx;
			font-weight: bold;
			margin-bottom: 20upx;

			&>view {
				flex: 1;
				text-align: center;
				position: relative;

				&::after {
					content: '';
					display: block;
					position: absolute;
					height: 4upx;
					width: 0;
					background: $themeColors;
					top: 110%;
					left: 50%;
					transition: all 0.5s;
				}

				&.active::after {
					width: 100%;
					left: 0;
				}
			}
		}

		.title__number {
			color: #f00;
		}

		// 批量操作按钮
		.batchOperationBtn {
			border: 1upx solid $themeColors;
			text-align: center;
			padding: 10upx 0;
			color: $themeColors;
			border-radius: 10upx;
			width: 200upx;
			font-size: 28upx;
			margin: 0;
			margin-right: 10upx;
		}

		.packagesList__item {
			display: grid;
			grid-template-columns: 1fr 3fr 1fr 1fr 3fr 1fr 1fr;
			// display: flex;
			margin: 10upx 0;
		}
	}
</style>