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="searchForm.condition" type="text" @input='distributionOrder'>

				<!-- 搜索结果列表 -->
				<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">
					订制品(<text class="title__number">29</text>件)
				</view>
				<view @click="showArticleMadeToOrder = false">
					成品(<text class="title__number">50</text>件)
				</view>
			</view>

			<!-- 订制品 -->
			<view class="packagesList" v-if="!!packageList && showArticleMadeToOrder">
				<view v-if="!isBatchOperation">
					<button class="batchOperationBtn" @click="batchOperationBtn">批量操作</button>
				</view>
				<view v-else style="display: flex;">
					<button class="batchOperationBtn" @click="handleCheckAll">全选</button>
					<button class="batchOperationBtn" @click="handleInvertSelection">反选</button>
					<button class="batchOperationBtn" @click="batchPrint">打印</button>
				</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.materialName}}</text>
						<text>{{item.orderPackageStatus === '70' ? '已签' : '未签'}}</text>
					</view>
				</u-checkbox-group>
			</view>

			<!-- 成品 -->
			<view class="packagesList" v-else-if="!!packageList && !showArticleMadeToOrder">
				<view class="packagesList__item" v-for="item in packageList" :key="item">
					<text>{{item.orderPackageCode}}</text>
					<text>{{item.warehouse}}</text>
					<text>{{item.thirdProduct}}</text>
					<text>{{item.materialName}}</text>
					<text>{{item.orderPackageStatus === '70' ? '已签' : '未签'}}</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 弹出层 -->
	<u-popup :show="showPopup">
		<view v-html="templateHtml">

		</view>
	</u-popup>

</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef } from 'vue';
	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 showPopup = ref<Boolean>(false)

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

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

	// 打印模版
	const templateHtml = ref<string>('')

	// 储存定时器
	let timer : any
	// 搜索订单
	function distributionOrder() : void {
		// 节流
		if (timer) clearTimeout(timer)
		timer = setTimeout(async () => {
			// 发送请求
			let res = await distributionOrderInFuzzyQuery(searchForm)
			isShowOrderList.value = true
			const { code, data } = res
			if (code === 200) {
				distributionOrderList.value = data
			}
		}, 1000)
	}

	// 改变搜索表单内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) {
		searchForm.condition = 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
			})
		}
	}

	// 显示订制品模块
	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 ids = []
		packageList.value.forEach(item => {
			if (item.isChecked) ids.push(item.id)
		})
		const res = await BatchPrintPackages({ ids: ids.join(',') })
		const { code, data } = res
		if (code === 200) {
			templateHtml.value = data.templateHtml
			showPopup.value = true
			console.log(templateHtml)
		}
	}
</script>

<style lang="scss" scoped>
	// 最外层容器
	.container {
		padding: 20upx;
		font-size: 28upx; // 本页字体大小
	}

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

	}

	.search {
		position: relative;

		// 查询结果的列表
		.searchResultList {
			position: absolute;
			top: 110%;
			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;
		border-radius: 15upx;
	}

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

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

	.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-between;
			font-size: 40upx;
			font-weight: bold;
		}

		.title__number {
			color: #f00;
		}

		// 批量操作按钮
		.batchOperationBtn {
			width: 200upx;
			font-size: 28upx;
			margin: 0;
		}

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