count-pass-app/subpages/order/materMultipleSelect.vue

<template>
	<view class="mater-select">
		<!-- <u-sticky>
      <view class="search-wrap">
        <u-search placeholder="关键词搜索" :showAction="false" v-model="keyword"></u-search>
      </view>
    </u-sticky> -->
		<u-cell-group>
			<div v-for="(material,index) in materialList" :key="index">
				<p class="type-title">
					{{ material.type }}
				</p>

				<view v-for="(item,iindex) in option.filter((item) =>item.type==material.type)" :key="iindex">
					<u-cell :title="item.text" @click="onSelect(item)">
						<u-switch slot="right-icon" disabled activeColor="#5ac725" v-model="item.isSelect"></u-switch>
					</u-cell>

				</view>
			</div>

		</u-cell-group>
		<view class="bind-btn-wrap">
			<button class="bind-btn" @click="onSubmitClick()">{{ $t('base.common.submit') }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				option: [],
				materialList: [],
				index: null,
				isMultiple: "0",
				selectMaterList: [],
			};
		},
		onLoad(options) {
			this.handleOption(options);
		},
		methods: {
			onSubmitClick() {
				if (this.selectMaterList && this.selectMaterList.length > 0) {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2].$vm.materialList = this.selectMaterList; //重点$vm

					uni.navigateBack();
				}
			},
			onSelect(mater) {
				console.log(mater, "========");
				let index = this.option.findIndex(function(item) {
					return mater.value === item.value;
				});
				let selectedIndex = this.selectMaterList.findIndex(function(item) {
					return mater.value === item.value;
				});
				let isSelect = false
				if (mater.isSelect != 1) {
					isSelect = true
				}
				if (index > -1) {
					if (selectedIndex > -1) {
						this.selectMaterList.splice(selectedIndex, 1)
					} else {
						this.selectMaterList.push({
							...mater
						})
					}
					this.option[index].isSelect = isSelect
				}
				this.$forceUpdate()
			},
			handleOption(options) {
				this.option = JSON.parse(options.option) || [];
				this.materialList = this.repeatList(this.option);
				var selectedOption = JSON.parse(options.selectedOption) || [];
				console.log("系统物料信息，已选择物料，", this.option, selectedOption);
				if (selectedOption) {
					selectedOption.forEach(mater => {
						this.selectMaterList.push({
							...mater
						})
						let selectedIndex = this.option.findIndex(function(p) {
							return p.value === mater.value;
						});
						if (selectedIndex > -1) {
							this.$set(this.option[selectedIndex], "isSelect", true);
						}
					})
				}
			},
			repeatList(arr) {
				const map = new Map();
				return arr.filter((item) => !map.has(item.type) && map.set(item.type, 1));
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mater-select {
		padding-bottom: 154rpx;
		.search-wrap {
			padding: 20rpx 30rpx;
			background-color: #fff;
		}

		.type-title {
			line-height: 84rpx;
			background-color: #f2f2f2;
			padding: 0 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.bind-btn-wrap{
			width: calc(100% - 48rpx);
			padding: 32rpx 24rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
		}
	}
</style>