ezhizao_dms_h5/pages/sortingOutsource/specialOptions.vue

<template>
	<view class="page-container" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0">
		<view class="option-container uni-column" style="display: flex;">
			<!-- tab-bar -->
			<view class="tab-bars uni-row">
				<!-- 				<view :class="currentTabName === 1 ? 'active' : ''" @click.stop="handleTabBarClick(1)">
							<text>检查指导书</text>
							<view class="line"></view>
						</view> -->
				<view :class="currentTabName === 2 ? 'active' : ''">
					<text>分选标准</text>
					<view class="line"></view>
				</view>
			</view>
			<!-- 搜索框 -->
			<view class="search-container uni-row">
				<input type="text" v-model="keywords" placeholder="请输入关键字" />
				<view class="btn" @click="handleSearch()">搜索</view>
			</view>
		</view>
		<view v-if="categoryList && categoryList.length == 0" style="align-items: center;margin-top: 30px;">暂无分选标准
		</view>
		<!-- 		<view v-else class="uni-row" 
			style="background-color:#ffffff;height: 76%;padding-bottom: 12px;margin-bottom:65px;margin-top: 8px;"> -->
		<view v-else class="uni-row" style="position: absolute;
    background-color: rgb(255, 255, 255);
    height: 68%;
    margin-top: 20px;
    top: 102px;
    left: 12px;
    right: 12px;">
			<view style="width: 30%;height: 95%;overflow: auto;">
				<view v-for="(item, index) in categoryList" :key="index"
					:class="{'category-item':true,'selected':isSelected(item)}" @click="cateClick(item)">
					<view class="uni-row">
						<view class="value">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view style="width: 69%;height: 95%;overflow: auto;">
				<view v-if="dataList&& dataList.length == 0" style="align-items: center;margin-top: 30px">暂无分选标准数据
				</view>
				<view v-else v-for="(item, index) in dataList" :key="index"
					:class="{'option-item':true,'selectedOptions':isSelectedOptions(item)}" @click="itemClick(item)">
					<view class="uni-row">
						<view class="value">{{ item.standard }}</view>
						<uni-icons v-if="selection.includes(item)" class="arrow-right" type="checkmarkempty"
							size="24" />
					</view>
				</view>
			</view>
		</view>
		<view class="bottom uni-row">
			<button class="start-batch-btn" type="primary" :disabled="selection.length ==0"
				@click="handleAdd">添加</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onReady,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getStandardList
	} from '@/api/business/sortDaywork.js'
	import {
		store
	} from '@/store/index.js'

	const currentTabName = ref(2)
	const keywords = ref('')
	const currentData = ref(null)
	const categoryList = ref([])
	const dataList = ref([])
	const originalList = ref([])
	const selectionCategory = ref(null)
	const selection = ref([])

	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();

		eventChannel.on('acceptDataFromOpenerPage', function(data) {
			// console.log('acceptDataFromOpenerPage', data)
			// 传入当前报工信息 通过当前报工的产品和工序获取检查指导书和分选标准
			if (data && data.data) {
				selection.value = []
				getStandard()
			}
		})
	})

	function getStandard() {
		getStandardList({
			tenantId: store.userInfo.tenantId
		}).then(res => {
			categoryList.value = res.data
			if (categoryList.value && categoryList.value.length > 0) {
				selectionCategory.value = categoryList.value[0]
				if (categoryList.value[0].instructionList && categoryList.value[0].instructionList.length > 0) {
					dataList.value = categoryList.value[0].instructionList
					originalList.value = categoryList.value[0].instructionList
				}
			}
		})
	}

	function isSelected(item) {
		return selectionCategory.value == item;
	}

	function isSelectedOptions(item) {
		return selection.value.includes(item);
	}

	function cateClick(item) {
		selectionCategory.value = item
		console.log(item)
		console.log(categoryList.value)
		let index = categoryList.value.findIndex(v => v.id == item.id)
		console.log(index)
		currentData.value = index
		if (categoryList.value[index].instructionList && categoryList.value[index].instructionList.length > 0) {
			dataList.value = categoryList.value[index].instructionList
			originalList.value = categoryList.value[index].instructionList
		} else {
			dataList.value = []
		}

	}

	function itemClick(item) {
		const buttonIndex = selection.value.findIndex(selectedItem => selectedItem === item);
		if (buttonIndex > -1) {
			selection.value.splice(buttonIndex, 1); // 取消选中
		} else {
			selection.value.push(item); // 选中
		}
	}

	function handleSearch() {
		if (keywords.value == "") {
			dataList.value = originalList.value
		} else {
			dataList.value = originalList.value.filter(item => item.standard.includes(keywords.value))
		}


	}
	// 页面生命周期函数
	onLoad(() => {

	})


	// tabbar切换


	function handleAdd() {
		console.log(selection.value)
		uni.$emit('addUnfitInfoEvent',
			selection.value

		)
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.selected {
		border-left: 5px solid #c0c4fc;
		font-weight: 700;
		/* 选中之后样式 */
	}

	.page-container {
		background-color: #ececec;
		font-size: 28rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.option-container {
		// height: 13%;
		// height: 120px;
		// background-color: #ffffff;
		// padding: 24rpx;
		// border-radius: 12rpx;


		position: fixed;
		top: 50px;
		/* height: 13%; */
		background-color: #fff;
		padding: .75rem;
		border-radius: .375rem;
		left: 12px;
		right: 12px;
		height: 80px;
		z-index: 5;
	}

	.tab-bars {
		height: 56rpx;

		>view {
			flex: 1;
			text-align: center;

			.line {
				width: 50%;
				height: 2px;
				margin: 8rpx auto 0 auto;
				background-color: #FFFFFF;
			}

			&.active {
				.line {
					background-color: #1684FC;
				}
			}
		}
	}

	.search-container {
		margin-top: 16rpx;
		align-items: center;

		input {
			flex: 1;
			height: 72rpx;
			border: 1px solid #bbbbbb;
			padding: 0 8rpx;
			box-sizing: border-box;
		}

		.btn {
			display: flex;
			flex-direction: row;
			width: 112rpx;
			height: 72rpx;
			align-items: center;
			justify-content: center;
			background-color: #1684FC;
			color: #ffffff;
		}
	}

	.category-item {
		position: relative;
		margin-top: 24rpx;
		padding-bottom: 8rpx;
		align-items: center;

		.uni-row {
			padding-bottom: 16rpx;

			.label {
				width: 144rpx;
			}

			.value {
				flex: 1;
			}
		}

		.uni-row:first-child {
			font-size: 32rpx;
		}

	}

	.option-item {
		position: relative;
		margin-top: 24rpx;
		padding-bottom: 8rpx;
		border-bottom: 1px solid #BBBBBB;
		margin-left: 84rpx;

		.uni-row {
			padding-bottom: 16rpx;

			.label {
				width: 144rpx;
			}

			.value {
				flex: 1;
			}
		}

		.uni-row:first-child {
			font-size: 32rpx;

		}

		.arrow-right {
			position: absolute;
			right: 24rpx;
		}
	}

	.uniui-checkmarkempty[data-v-d31e1c47]:before {
		color: #1684FC;
	}

	.selectedOptions {
		color: #1684FC;
	}

	.bottom {
		height: 10%;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100rpx;
		border-top: 1px solid #999999;
		padding: 16rpx 32rpx;
		align-items: center;
		background-color: #fff;
		justify-content: space-evenly;

		.start-batch-btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 8rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>