ezhizao_dms_h5/components/dialog-selectLot/dialog-selectLot.vue

<template>
	<dialog-base class="dialog-body" ref="baseDialog" title="选择批次">
		<uni-section title="请选择批次" type="square">
			<uni-data-select v-model="selectedLot" :localdata="lotList" :clear="false"
			></uni-data-select>
		</uni-section>
		<view class="add-btn-container uni-row">
			<button type="primary" class="btn" @click="handleConfirm">确认</button>
		</view>
	</dialog-base>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	const baseDialog = ref(null)
	const emit = defineEmits(['submit'])
	const lotList = ref([])
	const selectedLot = ref(null)


	const open = (data) => {
		console.log(data)
		baseDialog.value.open();
		for (var i = 0; i < data.length; i++) {
			lotList.value[i] = {
				text: data[i].label,
				value: data[i].value
			}
		}
		console.log(lotList.value)
		selectedLot.value = lotList.value[0].value
}
	const close = () => {
		baseDialog.value.close()
	}

	defineExpose({
		open
	})
	function handleConfirm() {
		let index = lotList.value.findIndex(item =>item.value == selectedLot.value)
      close();
	  emit('submit',lotList.value[index]);
	}

</script>

<style lang="scss">
	.selected {
		border: 3rpx solid #1684fc;
		border-radius: 8rpx;
	}

	.dialog-body {
		overflow: auto;

		.list-title {
			margin: 10rpx 0 20rpx 0;

			.label {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.prompt {
			color: red;
			margin: 8rpx auto 0;
		}

		.list-container {
			width: 94%;
			display: flex;
			align-items: flex-start;
			margin: 10rpx auto;
			padding: 8px 2% 16px 2%;
			border-radius: 8rpx;

			.list-container-item {
				width: 100%;
				border-bottom: 1px solid #e1e1e1;
				border-left: 1px solid #e1e1e1;
				border-right: 1px solid #e1e1e1;
				padding: 12rpx 8rpx;
				box-sizing: border-box;
				.label {
					font-size: 28rpx;
					color: gray;
					width: 140rpx;

					&.value {
						 flex: 1;
					}
				}
			}

		}

		.add-btn-container {
			margin-top: 32rpx;

			.btn {
				flex: 1;
			}
		}
	}

	.selectedProcess {
		width: 88%;
		margin: 20rpx auto 40rpx;
	}
</style>