heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/pgmasterline/PgMasterLineForm.vue

<template>
	<Dialog :title="dialogTitle" v-model="dialogVisible" width="1700px">
		<el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px" v-loading="formLoading">
			<!-- <el-form-item label="bomID" prop="bomId">
        <el-input v-model="formData.bomId" placeholder="请输入bomID" />
      </el-form-item> -->






			<el-row>
				<el-col :span="6">
					<el-form-item label="生产计划单号" prop="taskNo">
						<el-input v-model="formData.taskNo" placeholder="" />
					</el-form-item>

				</el-col>
				<el-col :span="6">
					<el-form-item label="项目名称" prop="projectName">
						<el-input v-model="formData.projectName" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="子项目编号" prop="projectSubNumber">
						<el-input v-model="formData.projectSubNumber" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="子项目名称" prop="projectSubName">
						<el-input v-model="formData.projectSubName" placeholder="" />
					</el-form-item>
				</el-col>
				
				


			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="BOM名称" prop="bomName">
						<el-input v-model="formData.bomName" placeholder="" />
					</el-form-item>

				</el-col>
				<el-col :span="6">
					<el-form-item label="BOM版本号" prop="bomNo">
						<el-input v-model="formData.bomNo" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="派工单号" prop="pgNumber">
						<el-input v-model="formData.pgNumber" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="物料编码" prop="materialCode">
						<el-input v-model="formData.materialCode" placeholder="" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>

				<el-col :span="6">
					<el-form-item label="物料名称" prop="materialName">
						<el-input v-model="formData.materialName" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="材质" prop="compositionId">
						<!-- <el-input v-model="formData.compositionId" placeholder="" /> -->
						<CompositionSelect v-model="formData.compositionId" disabled @update:new-value="(val) => { formData.compositionId = val.id; }" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="规格" prop="spec">
						<el-input v-model="formData.spec" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单位" prop="unit">
						<dict-tag :type="DICT_TYPE.HELI_MATERIAL_UNIT" :value="formData.unit"/>
						 <!-- <el-input v-model="formData.unit" placeholder="请输入单位" />  -->
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>

				<el-col :span="6">
					<el-form-item label="图号" prop="blueprintNo">
						<el-input v-model="formData.blueprintNo" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="数量" prop="amount">
						<el-input v-model="formData.amount" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="检验人" prop="detilUser">
						<el-input disabled v-model="formData.nickName" placeholder="" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单据状态" prop="pgType">
						<el-select v-model="formData.pgType" placeholder="">
							<el-option
							 v-for="dict in getIntDictOptions(DICT_TYPE.HELI_PGTYPE)"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value" />
							   
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>

				<el-col :span="6">
					<el-form-item label="开始日期" prop="startTime">
						<el-input v-model="formData.finalStartTime" disabled="true"/>
						<!-- <el-date-picker v-model="formData.startTime" type="date" value-format="x" placeholder="" /> -->
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="结束日期" prop="entTime">
						<el-input v-model="formData.finalEndTime" disabled="true"/>
						<!-- <el-date-picker v-model="formData.entTime" type="date" value-format="x" placeholder="选择结束日期" /> -->
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="派工状态" prop="dispatchStatus">
						<el-select v-model="formData.dispatchStatus" placeholder="">
							<el-option
							 v-for="dict in getIntDictOptions(DICT_TYPE.HELI_DISPATCH_STATUS)"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value" />
							   
						</el-select>
					</el-form-item>
				</el-col>

			</el-row>







		</el-form>
		<template #footer>
			<!-- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> -->
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
	import * as PgMasterApi from '@/api/heli/pgmaster'
import { getIntDictOptions, getStrDictOptions, DICT_TYPE, getDictLabel } from '@/utils/dict'
import CompositionSelect from '../hlvuestyle/compositionSelect.vue'
	const {
		t
	} = useI18n() // 国际化
	const message = useMessage() // 消息弹窗

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	const formData = ref({
		id: undefined,
		bomId: undefined,
		bomNumber: undefined,
		bomName: undefined,
		bomNo: undefined,
		projectSubId: undefined,
		projectSubName: undefined,
		projectSubNumber: undefined,
		type: undefined,
		materialId: undefined,
		materialCode: undefined,
		materialName: undefined,
		compositionId: undefined,
		spec: undefined,
		unit: undefined,
		blueprintNo: undefined,
		amount: undefined,
		detilUser: undefined,
		gongShi: undefined,
		zlPgId: undefined,
		pgType: undefined,
		startTime: undefined,
		entTime: undefined,
		dispatchStatus: undefined,
		taskNo: undefined,
		taskId: undefined,
		projectId: undefined,
		projectName: undefined,
		pgNumber: undefined,
		active: undefined,
		finalStartTime:'',
		finalEndTime:'',
		nickName:'',
	})
	const formRules = reactive({})
	const formRef = ref() // 表单 Ref
	const formatDate  = (date) => {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hours = d.getHours().toString().padStart(2, '0');
      const minutes = d.getMinutes().toString().padStart(2, '0');
      const seconds = d.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day}${hours}:${minutes}:${seconds}`;
  }
	/** 打开弹窗 */
	const open = async (type: string, nickName :string,id ? : number) => {
		dialogVisible.value = true
		dialogTitle.value = t('action.' + type)
		formType.value = type
		resetForm()
		// 修改时，设置数据
		if (id) {
			formLoading.value = true
			try {
				formData.value = await PgMasterApi.getPgMasterLineListByZlPgIdLine(id)
				formData.value.finalStartTime = formatDate(formData.value.startTime);
				formData.value.finalEndTime = formatDate(formData.value.entTime);
			} finally {
				formLoading.value = false
			}
			formData.value.nickName = nickName;
		}
	}
	defineExpose({
		open
	}) // 提供 open 方法，用于打开弹窗

	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		await formRef.value.validate()
		// 提交请求
		formLoading.value = true
		try {
			const data = formData.value as unknown as PgMasterLineApi.PgMasterLineVO
			if (formType.value === 'create') {
				await PgMasterLineApi.createPgMasterLine(data)
				message.success(t('common.createSuccess'))
			} else {
				await PgMasterLineApi.updatePgMasterLine(data)
				message.success(t('common.updateSuccess'))
			}
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}

	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			id: undefined,
			bomId: undefined,
			bomNumber: undefined,
			bomName: undefined,
			bomNo: undefined,
			projectSubId: undefined,
			projectSubName: undefined,
			projectSubNumber: undefined,
			type: undefined,
			materialId: undefined,
			materialCode: undefined,
			materialName: undefined,
			compositionId: undefined,
			spec: undefined,
			unit: undefined,
			blueprintNo: undefined,
			amount: undefined,
			detilUser: undefined,
			gongShi: undefined,
			zlPgId: undefined,
			pgType: undefined,
			startTime: undefined,
			entTime: undefined,
			dispatchStatus: undefined,
			taskNo: undefined,
			taskId: undefined,
			projectId: undefined,
			projectName: undefined,
			pgNumber: undefined,
			active: undefined,
			finalStartTime:'',
		finalEndTime:'',
		nickName:'',
		}
		formRef.value?.resetFields()
	}
</script>