ebike-ui/ebike-maintenance/pages/warehouse/ebikehouse/ebikehouse.vue

<template>
	<z-paging ref="paging" v-model="listdata" @query="loadMoreData" :default-page-no="1" :default-page-size="4"
		:auto-show-back-to-top="true">
		<template #top>
			<view class="flex">
				<view class="search">
					<uni-search-bar radius="5" placeholder="输入车辆编号查询" v-model="bikeCodeValue" @blur="searchInfo"
						@confirm="search" />
				</view>
				<view class="searchmore" @click="showDrawer('showRight')">
					<image :src="`${imgPath}static/image/更多.png`" alt="" />
				</view>
			</view>
		</template>
		<view class="container">
			<!-- <scroll-view ref="scroView" class="scroll-view" :scroll-y="true" @scrolltolower="loadMoreData"
				:scroll-top="scroTop" @scroll="handleScroll">
				<uni-load-more v-if="isupshow" iconType="circle" status="loading" /> -->
			<checkbox-group @change="checkboxGroupChange">
				<view v-for="(item, index) in listdata" :key="index" class="list-item">
					<view class="flex list-title" @click="opendetail(item.bikeId)">
						<view v-if="item.state==4" class="title-xz">
							<!-- <checkbox disabled="true" :value="item.bikeId" @click.stop></checkbox> -->
						</view>
						<view v-else class="title-xz">
							<checkbox :value="item.bikeCode" @click.stop></checkbox>
						</view>
						<view class="title-wz">
							{{item.bikeCode}}
						</view>
						<view v-if="item.state==0" class="title-zt">
							<view class="cu-tag bg-orange sm ">待出库</view>
						</view>
						<view v-else-if="item.state==4" class="title-zt">
							<view class="cu-tag bg-yellow sm ">待维修</view>
						</view>
					</view>
					<view class="flex row">
						<view class="list-name">
							车辆编号
						</view>
						<view class="list-value">
							{{item.bikeCode}}
						</view>
					</view>
					<view class="flex row">
						<view class="list-name">
							车辆型号
						</view>
						<view class="list-value">
							{{item.bikeModel}}
						</view>
					</view>
					<view class="flex row">
						<view class="list-name">
							入库时间
						</view>
						<view class="list-value">
							{{item.enterTime}}
						</view>
					</view>
				</view>
			</checkbox-group>
			<!-- 	<uni-load-more :status="status" />
			</scroll-view> -->
			<!-- 回到顶部按钮 -->
			<!-- <text class="cuIcon-top lg text-gray back-to-top" @click="scrollToTop"></text> -->
		</view>
		<template #bottom>
			<view class="nav-panel">
				<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
			</view>
		</template>
	</z-paging>

	<uni-drawer ref="showRight" mode="right" :mask-click="false">
		<view>
			<uni-nav-bar left-icon="left" leftText="返回" rightText="X" title="筛选" @clickLeft="closeDrawer('showRight')"
				@clickRight="closeDrawer('showRight')" />
		</view>
		<view class="searchlist">
			<uni-section title="入库时间" type="line">
				<uni-datetime-picker type="date" return-type="timestamp" v-model="enterTime" />
			</uni-section>
			<uni-section title="状态" type="line">
				<uni-data-checkbox mode="tag" v-model="statevalue" :localdata="sjztlist" />
			</uni-section>
		</view>
	</uni-drawer>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="changepopup">
			<view class="popup-content" :class="{ 'popup-height': typepopup === 'left' || typepopup === 'right' }">
				<view class="padding plcrk">
					<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
						<uni-section title="运营区域" type="line">
							<uni-forms-item required name="reginvalue">
								<uni-data-select v-model="customFormData.reginvalue" :localdata="regindata"
									@change="changeZT"></uni-data-select>
							</uni-forms-item>
						</uni-section>
						<uni-section title="请添加设备" type="line">
							<uni-forms-item required name="deviceValues">
								<uni-easyinput type="textarea" v-model="customFormData.deviceValues"
									placeholder="请输入车辆编号，用逗号(，)隔开，一次最多添加1000个" />
							</uni-forms-item>
						</uni-section>
					</uni-forms>
					<view class="button-group"> 
						<button style="width: 100%;" type="primary" @click="submit" size="mini">提交</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {
		forEach
	} from 'lodash';
	import config from '@/utils/config';
	const imgPath = config.imgPath;
	const listdata = ref([]);
	const popup = ref(null);
	const typepopup = ref("center");
	// 获取滚动容器的引用
	const scroTop = ref(0);
	const navButtonGroup = [{
		text: '批量上架',
		backgroundColor: 'rgb(0,120,212)',
		color: '#fff'
	}];
	//下拉刷新
	const isupshow = ref(false);
	const paging = ref(null);

	//运营区域下拉值 和列表 
	const regindata = ref([])

	//提交表单相关信息
	const customForm = ref(null)
	const customFormData = ref({
		reginvalue: "",
		deviceValues: ""
	})
	// 校验规则
	const customRules = ref({
		reginvalue: {
			rules: [{
				required: true,
				message: '请选择运营区域',
				trigger: 'blur'
			}]
		},
		deviceValues: {
			rules: [{
				required: true,
				errorMessage: '车辆编号不能为空！',
				trigger: 'blur'
			}]
		}
	})
	// 查询条件定义 
	const bikeCodeValue = ref(""); //车辆编号
	const enterTime = ref(null); //入库时间
	const statevalue = ref('0,4'); //状态（待维修，待入库
	const statusZT = ref(0);
	const sjztlist = ref([{
		text: '全部',
		value: '0,4'
	}, {
		text: '待维修',
		value: 4
	}, {
		text: '待出库',
		value: 0
	}])
	const status = ref('more'); //,more,loading，noMore
	const selectedItems = ref([]);
	const usableHeight = ref(0);
	onMounted(() => {
		// 获取设备信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度和状态栏高度
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算去掉状态栏后的可用区域高度
		usableHeight.value = screenHeight - statusBarHeight - 170;
		let userOperation = uni.getStorageSync('userOperation');
		userOperation.forEach(res => {
			let quyuemap = {
				"text": res.regionName,
				"value": res.regionId
			};
			regindata.value.push(quyuemap);
		});


	});
	const checkboxGroupChange = (e) => {
		selectedItems.value = e.target.value
	}
	const opendetail = (id) => {
		uni.setStorageSync('ebikeId_zcck', id);
		setTimeout(() => {
			uni.navigateTo({
				url: `/pages/warehouse/ebikehouse/ebikehouse_view?ebikeId_zcck=${id}`, //
			});
		}, 200); // 延迟100毫秒后执行 
	}
	const loadMoreData = (pageNo, pageSize) => {
		// 组装参数
		const params = {
			"bikeCode": bikeCodeValue.value, //车辆编号
			"enterTime": enterTime.value, //入库时间 例：2025-03-21
			"state": statevalue.value,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		}
		api.callEbikeInfo("pageQueryEbikeList", params).then((res) => {
			if (res.code === 200) {
				const records = res.data.records;
				paging.value.complete(res.data.records);
			} else {
				paging.value.complete(false);
			}
		});
	};

	const submit = (ref) => {
		customForm.value.validate().then(res => {
			const params = {
				"bikeCode": customFormData.value.deviceValues, //车辆编号
				"status": statusZT.value, //入库时间 例：2025-03-21
				"reginId":customFormData.value.reginvalue
			}
			api.callEbikeInfo("vehicleLeaveWarehouse", params).then((res) => {
				if (res.code == 200) {
					popup.value.close("center")
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 2000
					});
					searchInfo();
				} else {

					uni.showToast({
						title: '操作失败',
						icon: 'error',
						duration: 2000
					});
				}

			})
		}).catch(err => {
			console.log('err', err);
		})
	}


	const onPullDownRefresh = () => {
		console.log('onPullDownRefresh')
		setTimeout(function() {
			uni.stopPullDownRefresh()
			console.log('stopPullDownRefresh')
		}, 1000)
	}
	// 创建 drawer 的 ref 引用
	const showRight = ref(null);

	// 打开窗口
	const showDrawer = (e) => {
		const drawer = showRight.value
		drawer.open()
	}
	// 关闭窗口
	const closeDrawer = (e) => {
		const drawer = showRight.value
		drawer.close();
		searchInfo();
	}

	//搜索
	const searchInfo = () => {
		paging.value.reload();
	}

	const changeZT = (e) => {
		console.log("e:", e);
	}
	const changepopup = (e) => {

	}
	//批量出库事件按钮
	const navButtonClick = (index, content) => {
		uni.showModal({
			title: '确认上架',
			content: '您确定要进行上架操作吗？',
			success: (res) => {
				if (res.confirm) {
					customFormData.value.deviceValues = selectedItems.value
					popup.value.open("center");
					statusZT.value = 1;
				} else if (res.cancel) {}
			}
		});
	}
</script>

<style scoped>
	.container {
		padding: 0px 0px;
		background-color: #f3f4f6;
	}

	.list-title {
		margin: 5px 0px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-title .title-xz {
		margin: 5px;
	}

	.list-title .title-wz {
		margin-left: 5px;
		font-size: 14px;
		line-height: 35px;
		font-weight: bold;
	}

	.list-title .title-zt {
		margin-left: 8px;
		margin-top: 5px;
	}

	.list-item {
		background: #fff;
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
	}

	button {
		margin-top: 20px;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border-radius: 5px;
	}

	.list-name {
		color: #999999;
		font-size: 12px;
		width: 30%;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.list-value {
		width: 70%;
		color: #4F4F53;
		font-size: 13px;
		font-weight: 400;
	}

	.row {

		margin: 8px 5px;
	}

	.scroll-view {
		height: 100%;
	}

	.example-body {
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}

	.search {
		width: 90%;
	}

	.searchmore {
		width: 10%;
		padding-top: 15px;
	}

	.searchmore image {
		width: 25px;
		height: 25px;
	}

	.searchlist {
		padding: 15px;
	}

	.back-to-top {
		position: fixed;
		bottom: 135px;
		right: 30px;
		border: none;
		font-size: 30px;
		cursor: pointer;
		z-index: 10;
	}

	.nav-panel {
		height: 70px;
		width: 100%;
		padding-bottom: 20px;
		background-color: #fff;
	}

	.plcrk {
		width: 240px;
		height: 360px;
	}
</style>