hldy_app_mini/pages/procurement/components/classification.vue

<template>
	<view>
		<view class="ifclass" v-if="show">
			<view class="titletop">物料分类</view>
			<view class="toptype">
				<view v-for="v in ['一','二','三']">{{v+'级分类'}}</view>
			</view>
			<view class="scroltype">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
					class="scroll-Y scrl1">
					<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
						<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
						</image>
						<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
						<text>
							{{v.title}}
						</text>
					</view>
				</scroll-view>
			
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
					class="scroll-Y scrl2">
					<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
						@click="typescroll(2,i,v)">
						{{v.title}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
					class="scroll-Y scrl3">
					<view :class="scroll.act3==i?'act':''"
						v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
						@click="typescroll(3,i,v)">
						{{v.title}}
					</view>
				</scroll-view>
				
			</view>
			<view class="btnbotm">
				<view class="bt"  @click="typescroll(1,-1,{})" >重置</view>
				<view class="bt qd" @click="config">确定 <text v-if="num>0">（{{num>99?'99+':num}}件物料）</text></view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	 import { getMaterialTreeData , getTreeDataWlnum} from '../api/lunpan.js'
	 import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	 const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
	 const TreeData = ref([]);
	 const serverUrl = ref('');
	 const emit = defineEmits(['confirm'])
	 const typescroll = (e : number, i : number, v : object) => {
	 	if (e == 1) {
	 		scroll.act2 = -1;
	 		scroll.act3 = -1;
	 		scroll.scrolltop2 = 0;
	 		scroll.scrolltop3 = 0;
	 		if (scroll.act1 == i) {
	 			scroll.act1 = -1;
				getTreelnum()
	 			return
	 		}
	 	}
	 	if (e == 2) {
	 		scroll.act3 = -1;
	 		scroll.scrolltop3 = 0;
	 	}
	 	if (e == 3) {

	 	}
	 	scroll['act' + e] = i;
	 	scroll['scrolltop' + e] = (i - 2) * 50;
		getTreelnum()
	 }
	 onMounted(()=>{
		 serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		 getMaterial();
	 })
	 const num = ref(0)
	 const getTreelnum = ()=>{
		 let obj= {
			 nuId:uni.getStorageSync('nuId'),
			 categoryId:scroll.act1>-1?TreeData.value[scroll.act1].categoryId:'',
			 typeId:scroll.act2>-1?TreeData.value[scroll.act1].children[scroll.act2].typeId:'',
			 medicationId:scroll.act3>-1?TreeData.value[scroll.act1].children[scroll.act2].children[scroll.act3].medicationId:'',
		 }
		 getTreeDataWlnum(obj).then(res=>{
			 num.value = res.result.totalSize;
		 })
	 }
	 const getMaterial = () => {
	 	getMaterialTreeData({'nuId':uni.getStorageSync('nuId')}).then(res => {
	 		TreeData.value = res.result;
			getTreelnum()
	 	})
	 }
	 const config =()=>{
		 let obj= {
			 categoryId:scroll.act1>-1?TreeData.value[scroll.act1].categoryId:'',
			 typeId:scroll.act2>-1?TreeData.value[scroll.act1].children[scroll.act2].typeId:'',
			 medicationId:scroll.act3>-1?TreeData.value[scroll.act1].children[scroll.act2].children[scroll.act3].medicationId:'',
		 }
		 emit('confirm',obj)
	 }
	 const props = defineProps({
		 show: {
		 	type: Boolean,
		 	default:false,
		 	required: true,
		 },
	 })
</script>

<style scoped lang="less">
.ifclass{
	width: 36vw;
	height: 85vh;
	position: fixed;
	z-index: 120;
	background:rgba(255, 255, 255, 0.98);
	box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163,167,182,0.16);
	border-radius: 1.6vw;
	top: 10vh;
	left: 32vw;
	padding: 2.5vw 3vw;
	.btnbotm{
		width: 100%;
		height: 4vw;
		margin-top: 3vw;
		display: flex;
		justify-content: flex-end;
		align-items: end;
		.bt{
			min-width: 8vw;
			height: 3.8vw;
			background: #EDEDEF;
			border-radius: 1.6vw;
			padding: 0 2vw;
			margin-left: 1vw;
			border: 1px solid #EDEDEF;
			font-size: 1.8vw;
			font-weight: 400;
			color: #888888;
			white-space: nowrap;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.qd{
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3,133,250,0.34);
			color: #0385FA;
			text{
				font-size: 1.4vw;
			}
		}
	}
	.scroltype {
		width: 100%;
		height: calc(85vh - 18vw);
		display: flex;
		justify-content: space-around;
		.scrl1{
			width: 9vw;
			view {
				width: 8.8vw;
			}
			
		}
		.scrl2,.scrl3{
			width: 8vw;
			view {
				width: 7.7vw;
			}
		}
		.scroll-Y {
			width: 8.5vw;
			height: calc(85vh - 18vw);
	
			view {
				width: 100%;
				height: 3.8vw;
				background:  #F5F5F8;;
				border-radius: 1.9vw;
				font-weight: 400;
				font-size: 1.3vw;
				color: #212327;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 0.4vw;
				margin-bottom: .8vw;
				text-align: center;
				
				text {
					white-space: nowrap;
				}
	
				>image {
					width: 2vw;
					height: 2vw;
				}
			}
	
			.act {
				background: #EAF5FF !important;
				font-weight: 600;
				color: #0385FA !important;
			}
		}
	}
}
.toptype {
	width: 100%;
	height: 2vw;
	display: flex;
	justify-content: space-around;
	margin: 1.4vw 0 .4vw 0;
	.act {
		background: rgba(255, 255, 255, 1) !important;
		font-weight: 600;
		color: #0385FA !important;
	}
	>view {
		width: 7vw;
		height: 1.9vw;
		border-radius: 1vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, .5);
		border:1px solid rgba(255, 255, 255, .5);
		font-weight: 400;
		font-size: 1.2vw;
		color: #333333;
		padding: 0;
	}
}
.titletop{
	width: 100%;
	height: 2.5vw;
	font-weight: bold;
	font-size: 1.8vw;
	color: #333333;
	line-height: 2.5vw;
}
</style>