ebike-ui/ebike-maintenance/pages/warehouse/component/outlist.vue

<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :default-page-no="Number('1')"
		:default-page-size="Number('10')" :auto-show-back-to-top="Boolean(true)">
		<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
		<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
		<template #top>
			<view class="flex">
				<view class="search">
					<uni-search-bar radius="5" placeholder="输入部件类型查询" v-model="componentType" @blur="searchInfo"
						@confirm="searchInfo" />
				</view>
				<view class="searchmore" @click="showDrawer('showRight')">
					<image :src="`${imgPath}/static/image/更多.png`" alt="" />
				</view>
			</view>
		</template>
		<view class="container">
			<view class="list-panel">
				<view class="list-item" v-for="(item,index) in dataList" :key="index">
					<uni-row>
						<view class="list-title-row">
							<uni-col :span="18">
								<view class="list-title" @click="opendetail(item)">
									{{item.typeName}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="list-tag-right">
									<view v-if="item.state=='1'">
										<uni-tag :inverted="true" text="已出库"
											custom-style="background-color: #ecca7733; border-color: #fff; color: #d97340;" />
									</view>
									<view v-else-if="item.state=='2'">
										<uni-tag :inverted="true" text="已归还"
											custom-style="background-color: #78f18c1a; border-color: #fff; color: #4cd964;" />
									</view>
									<view v-else-if="item.state=='-1'">
										<uni-tag :inverted="true" text="已取消"
											custom-style="background-color: #dedede4d; border-color: #fff; color: #c0c0c0;" />
									</view>
									<view v-else-if="item.state=='-2'">
										<uni-tag :inverted="true" text="已作废"
											custom-style="background-color: #e6434033; border-color: #fff; color: #e64340;" />
									</view>
									<view v-else>
										<uni-tag :inverted="true" text="待出库"
											custom-style="background-color: #31d3f31a; border-color: #fff; color: #007aff;" />
									</view>
								</view>
							</uni-col>
						</view>
					</uni-row>
					<uni-row>
						<uni-col :span="5">
							<view class="list-image-panel" @click="opendetail(item)">
								<view v-if="item.typeCover == null || item.typeCover == ''" class="list-image-box">
									<uni-icons type="image" size="50" color="#e1e1e1" />
								</view>
								<image v-if="item.typeCover != null && item.typeCover != ''" class="list-image-box"
									mode="scaleToFill" :src="item.typeCover"></image>
							</view>
						</uni-col>
						<uni-col :span="19">
							<uni-row>
								<uni-col :span="20">
									<view class="list-item-row" @click="opendetail(item)">
										原部件处理方案：{{item.oldComponentHandleOption}}
									</view>
								</uni-col>
								<uni-col :span="20">
									<view class="list-item-row font-weight-6" @click="opendetail(item)">
										出库数量：{{item.outQuantity}}
									</view>
								</uni-col>
							</uni-row>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="24">
							<view class="list-botton-box">
								<button class="mini-btn" type="primary" size="mini" plain="true" v-if="item.state=='0'"
									@click="opendetail(item)">出库</button>
								<button class="mini-btn" type="default"
									style="color:#1AAD19;backgroundColor:#ffffff;borderColor:#1AAD19" size="mini"
									plain="true" v-if="item.state=='1'" @click="opendetail(item)">归还</button>
								<button class="mini-btn" type="warn" size="mini" plain="true" v-if="item.state=='1'"
									@click="dealstate(item.componentOutRecordId,'invalidateOutDevicePart','作废')">作废</button>
								<button class="mini-btn" type="default" size="mini" plain="true" v-if="item.state=='0'"
									@click="dealstate(item.componentOutRecordId,'cancelOutDevicePart','取消')">取消</button>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<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-data-checkbox mode="tag" v-model="statevalue" :localdata="rkstatelist" />
					</uni-section>
				</view>
			</uni-drawer>
		</view>
		<template #bottom>
			<view class="nav-panel">
				<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
			</view>
		</template>
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onBackPress
	} from "@dcloudio/uni-app";
	import {
		showModelMessage,
		dataFormat
	} from '@/utils/tools.js';
	import * as api from '@/utils/api.js';
	import config from '@/utils/config';
	const imgPath = config.imgPath;
	const userInfo = ref(null);

	const paging = ref(null);
	const dataList = ref([]);
	const navButtonGroup = [{
		text: '新增出库',
		backgroundColor: '#0078D4',
		color: '#fff'
	}];
	// 查询条件定义
	const componentType = ref("");
	const statevalue = ref(''); //状态
	const rkstate = ref('0'); //状态
	const rkstatelist = ref([{
		text: '全部',
		value: ''
	}, {
		text: '待出库',
		value: '0'
	}, {
		text: '已出库',
		value: '1'
	}, {
		text: '已归还',
		value: '2'
	}, {
		text: '已取消',
		value: '-1'
	}, {
		text: '已作废',
		value: '-2'
	}])

	onShow(() => {
		if (paging && paging.value) paging.value.refresh();
	});

	onLoad((options) => {
		userInfo.value = uni.getStorageSync('userInfo');
	});

	const queryList = (pageNo, pageSize) => {
		// 组装参数
		const params = {
			"componentType": componentType.value,
			"state": statevalue.value,
			"sortBy": 'created_at',
			"sortMethod": 'desc',
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		}

		api.callOperateApi("ebikeComponentOutRecords/list", params).then((res) => {
			if (res.code === 200) {
				paging.value.complete(res.data.records);
			} else {
				paging.value.complete(false);
			}
		});
	};

	// 创建 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 navButtonClick = (e) => {
		const index = e.index;
		if (index == 0) {
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/warehouse/component/outdetails`, //
				});
			}, 200); // 延迟100毫秒后执行 
		}
	}

	const dealstate = (componentOutRecordId, url, mes) => {
		api.callOperateApi("ebikeComponent/" + url + "?componentOutRecordId=" + componentOutRecordId, {}, "get")
			.then((res) => {
				if (res.code == '200') {
					uni.showToast({
						title: mes + "成功",
						icon: 'success',
						duration: 5000
					});
					queryList(1, 10)
				} else {
					uni.showToast({
						title: mes + "失败",
						icon: 'error',
						duration: 5000
					});
				};
			});
	}

	const savestate = (componentOutRecordId, state) => {
		// 组装参数
		const params = {
			"componentOutRecordId": componentOutRecordId,
			"state": state,
			"updateUser": userInfo.value.username,
			"updateAt": dataFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
		}
		api.callOperateApi("ebikeComponentOutRecords/update", params).then((res) => {
			if (res.code != 200) {
				showModelMessage(res.message)
				return
			}
			paging.value.refresh();
		});
	}

	const opendetail = (record) => {
		setTimeout(() => {
			uni.navigateTo({
				url: `/pages/warehouse/component/outdetails?componentOutRecordId=${record.componentOutRecordId}&state=${record.state}`, //
			});
		}, 200); // 延迟100毫秒后执行 
	}
</script>

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

	.list-panel {
		padding: 10px 5px 0px 0px;
	}

	.close {
		padding: 10px;
	}

	.search {
		width: 90%;
	}

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

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

	.searchlist {
		padding: 15px;
	}

	.nav-panel {
		padding-bottom: 20px;
		background-color: #fff;
	}

	.list-item {
		padding: 10px;
		margin: 10px;
		/* border: 1px solid #d6d4d4; */
		border-radius: 5px;
		background-color: #fff;
		/* box-shadow: 2px 2px 4px 2px rgba(212, 212, 212, 0.6); */
	}

	.list-title-row {
		line-height: 25px;
	}

	.list-title {
		font-weight: 600;
		font-size: 15px;
	}

	.list-tag-right {
		width: 100%;
		text-align: right;
		font-size: 12px;
	}

	.list-image-panel {
		width: 100%;
		text-align: left;
	}

	.list-image-box {
		width: 50px;
		height: 50px;
		background-color: #fafafa;
	}

	.list-item-row {
		font-size: 12px;
		padding: 4px 0px;
	}

	.font-weight-6 {
		font-weight: 600;
	}

	.list-botton-box {
		border-top: 1px solid #d6d4d4;
		padding: 10px 0px 0px 0px;
		text-align: right;
	}

	button {
		margin-left: 5px;
		border-radius: 5px;
	}
</style>