pms-app/components/materials/add.vue

<template>
	<uni-popup class="materials-popup" ref="materialAddPopRef" type="bottom" :is-mask-click="false"
		borderRadius="10px 10px 0 0 " background-color="#fff">
		<uni-row class="head-row align-center">
			<uni-col :span="6" class="head-cancel align-center justify-start" @click="oncancel">
				{{$t('operation.cancel')}}
			</uni-col>
			<uni-col :span="12" class="head-title justify-center">
				{{$t('workOrder.addMaterial')}}
			</uni-col>
			<uni-col :span="6" class="head-add align-center justify-end" @click="onConfirm(materialAddFormRef)">
				{{$t('operation.confirm')}}
			</uni-col>
		</uni-row>
		<view class="material-add-section">
			<uni-forms ref="materialAddFormRef" labelWidth="140px" :modelValue="addInfo" :rules="formRules">
				<!-- 物料主数据 -->
				<uni-forms-item class="form-item" :label="$t('workOrder.masterData')" name="name" :required="true">
					<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="false"
						:styles="{disableColor:'#fff'}" :placeholder="$t('operation.PleaseSelect')"
						v-model="addInfo.name" @focus="onMasterDataShow" />
				</uni-forms-item>
				<!-- 物料编码 -->
				<uni-forms-item class="form-item" :label="$t('workOrder.materialCode')" name="code" :required="true">
					<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="false" :disabled="true"
						:styles="{disableColor:'#fff'}" v-model="addInfo.code"
						:placeholder="''" />
				</uni-forms-item>
				<!-- 物料名称 -->
				<uni-forms-item class="form-item" :label="$t('workOrder.materialName')" name="name" :required="true">
					<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="false" :disabled="true"
						:styles="{disableColor:'#fff'}" v-model="addInfo.name"
						:placeholder="''" />
				</uni-forms-item>
				<!-- 单位 -->
				<uni-forms-item class="form-item" :label="$t('workOrder.unit')" name="unit" :required="false">
					<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="false" :disabled="true"
						:styles="{disableColor:'#fff'}" v-model="addInfo.unit"
						:placeholder="''" />
				</uni-forms-item>
				<!-- 消耗数量 -->
				<uni-forms-item class="form-item" :label="$t('workOrder.consumptionQuantity')" name="quantity"
					:required="true">
					<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="false"
						:styles="{disableColor:'#fff'}" type="digit" v-model="addInfo.quantity"
						:placeholder="$t('operation.PleaseFillIn')" />
				</uni-forms-item>
				<!-- 单价（元） -->
				<uni-forms-item class="form-item" :label="$t('workOrder.unitPrice')" name="unitPrice" :required="true">
					<uni-easyinput style="text-align: right" :inputBorder="false" :clearable="false" type="digit"
						:styles="{disableColor:'#fff'}" v-model="addInfo.unitPrice"
						:placeholder="$t('operation.PleaseFillIn')" />
				</uni-forms-item>

				<!-- 备注 -->
				<uni-forms-item class="form-item" :label="$t('operation.remark')" :required="false" name="remark">
					<uni-easyinput style="text-align: right" type="textarea" :autoHeight="true" :inputBorder="false"
						:clearable="false" :styles="{disableColor:'#fff'}" v-model="addInfo.remark"
						:placeholder="$t('operation.PleaseFillIn')" />
				</uni-forms-item>
			</uni-forms>
		</view>

	</uni-popup>
	<master-data ref="masterDataRef" @master-data-submit="onMasterDataSet"></master-data>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		computed,
		ref,
		reactive,
		watch,
		onMounted,
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		getDeptId,
	} from "@/utils/auth"
	import {
		getMaterialListData
	} from '@/api/material'
	import {
		devicePage,
	} from '@/api/device';
	import masterData from './master-data'

	const {
		t,
		locale
	} = useI18n({
		useScope: 'global'
	})

	// 接收父组件传递的参数
	const props = defineProps({})


	const addInfo = ref({
		// code: '',
		// name: '',
		// unit: '',
		// quantity: '',
		// unitPrice: '',
		// remark: '',

	})
	const materialAddFormRef = ref(null)
	const formRules = ref({
		name: {
			rules: [{
				required: true,
				errorMessage: t('operation.PleaseFillIn'),
			}, ]
		},
		quantity: {
			rules: [{
				required: true,
				errorMessage: t('operation.PleaseFillIn'),
			}, ]
		},
		unitPrice: {
			rules: [{
				required: true,
				errorMessage: t('operation.PleaseFillIn'),
			}, ]
		},

	})
	const oncancel = () => {
		addInfo.value = {}
		close()
	}
	const onConfirm = async (formEl) => {
		if (!formEl) return
		await formEl.validate().then(res => {
			console.log('onConfirm res-', res)
			addInfo.value.chooseKey = `${addInfo.value.id}_${addInfo.value.code}_${addInfo.value.unitPrice}` // 手动拼接chooseKey
			emit('add-set', addInfo.value)
			oncancel()
		}).catch(err => {
			console.error('onConfirm err-', err)
		})


	}
	const masterDataRef = ref(null)
	const onMasterDataShow = () => {
		masterDataRef.value.open()
	}
	const onMasterDataSet = (item) => {
		console.log('onMasterDataSet-', item)
		addInfo.value = {
			...addInfo.value,
			...item,
			
		}
	}



	onMounted(() => {})

	const materialAddPopRef = ref(null)

	// 打开弹窗
	const open = () => {
		materialAddPopRef.value.open()
	}

	// 关闭弹窗
	const close = () => {
		materialAddPopRef.value.close()
	}

	const emit = defineEmits(['add-set'])
	// 提供外部方法
	const expose = {
		open,
	}
	defineExpose(expose)
</script>

<style lang="scss" scoped>
	@import "@/style/work-order-detail.scss";

	.materials-popup {
		width: 100%;
		height: 100%;
		min-height: 411px;
		background-color: #fff;
		padding: 20px;
	}

	:deep(.uni-popup__wrapper) {
		padding: 20px;
	}

	.head-row {
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 21px;
		color: #A3A3A3;
		height: 40px;
		border-bottom: 1px dashed #CACCCF;
	}

	.head-title {
		color: #333333;
		font-weight: bold;
	}

	.head-add {
		color: #004098;
	}
</style>