pms-app/components/materials/count.vue

<template>
	<uni-popup class="count-popup" ref="countPopRef" type="center" :is-mask-click="false"
		borderRadius="10px 10px 10px 10px" background-color="#fff">
		<view class="popup-container">
			<view class="pop-title flex-row align-center justify-center">
				{{$t('operation.PleaseSet')}}{{$t('workOrder.materialCount')}}
				<uni-icons type="closeempty" color="#666" class="pop-close" @click="onclose"></uni-icons>
			</view>
			<view class="pop-content">
				<view class="content-cell flex-row align-center justify-between">
					<view class="cell-title">
						{{$t('workOrder.materialName')}}:
					</view>
					<view>
						{{materialItem.materialName}}
					</view>
				</view>
				<view class="content-cell flex-row align-center justify-between">
					<view class="cell-title">
						{{$t('workOrder.remainingInventory')}}:
					</view>
					<view>
						{{materialItem.totalInventoryQuantity}}
					</view>
				</view>
				<view class="content-cell flex-row align-center justify-between">
					<view class="cell-title">
						{{$t('workOrder.materialCount')}}:
					</view>
					<view>
						<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="true" type="digit"
							:styles="{ disableColor: '#fff' }" v-model="materialItem.quantity"
							:placeholder="$t('operation.PleaseFillIn')" @change="changeQuantity" />
					</view>
				</view>
			</view>
			<button type="primary" class="pop-btn" @click="onsubmit">
				{{$t('operation.confirm')}}
			</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	// 引用全局变量$t
	const {
		appContext
	} = getCurrentInstance();
	const t = appContext.config.globalProperties.$t;


	const quantityMin = ref(0)
	const materialItem = ref({})
	const countPopRef = ref(null)
	const showCountPop = (iten) => {
		materialItem.value = iten
		materialItem.value.quantity = 1
		countPopRef.value.open()
	}
	const hideCountPop = () => {
		countPopRef.value.close()
	}
	const onclose = () => {
		materialItem.quantity = null
		hideCountPop()
	}
	const changeQuantity = (e) => {
		console.log('changeQuantity', e)
		if (validateQuantity(e)) {
			materialItem.value.quantity = e
		}

	}
	const emit = defineEmits(['count-set', ])
	const validateQuantity = (quantity) => {
		if (!quantity) {
			uni.showToast({
				title: t("workOrder.materialCountEmpty"),
				icon: 'none'
			})
			return false
		}
		if (quantity <= 0) {
			uni.showToast({
				title: t("workOrder.materialCountMustGreaterThan0"),
				icon: 'none'
			})
			return false
		}
		return true
	}
	const onsubmit = () => {
		console.log('materialItem.value', materialItem.value)
		if (validateQuantity(materialItem.value.quantity)) {
			// 提交设置的数量
			emit('count-set', Object.assign({}, materialItem.value))
			materialItem.value.quantity = null
			// hideCountPop()
		}
	}

	defineExpose({
		showCountPop,
		hideCountPop
	})
</script>


<style lang="scss" scoped>
	.popup-container {
		width: 308px;
		min-height: 217px;
		background: #FFFFFF;
		box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		box-sizing: border-box;
		padding: 20px 30px;
		position: relative;
	}

	.pop-title {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
	}

	.pop-close {
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.content-cell {
		font-size: 14px;
		color: #333333;
		font-weight: 500;
		min-height: 30px;
		border-bottom: 1px dashed #CACCCF;
		text-align: right;

		&:last-child {
			// border-bottom: none;
		}

		&:first-child {
			margin-top: 20px;
		}
	}

	.cell-title {
		min-width: max-content;
	}

	.pop-btn {
		margin-top: 20px;
		width: 120px;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
	}
</style>