heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/pgmaster/PgMasterForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" :style="{width: '2000px', height: '900px'}" >
	  <el-card>
	  	<el-form
	  	  ref="formRef"
	  	  :model="formData"
	  	  :rules="formRules"
	  	  label-width="160px"
	  	  v-loading="formLoading"
	  	>
		<el-row>
			<el-col :span="6">
				<el-form-item label="派工单号" prop="pgNumber" >
				  <el-input class="!w-265px" v-model="formData.pgNumber" placeholder="系统自动生成" disabled/>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="生产计划单号" prop="taskNo"> 
					<el-input class="!w-265px" placeholder="请选择而计划单号" v-model="formData.taskNo" @click.prevent="handleClick" :readonly="!isEditing" >
					  <template #append><el-button  @click="openprojectPlanDialog" :icon="Search" /></template>
					</el-input>
				  <!-- <el-input class="!w-265px" v-model="formData.taskNo" placeholder="请选择而计划单号" /> -->
				</el-form-item>
			</el-col>
			
			<el-col :span="6">
				<el-form-item label="项目编号" prop="projectNo" >
				  <el-input class="!w-265px" v-model="formData.projectNo" placeholder="自动带出" disabled />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="项目名称" prop="projectName" >
				  <el-input class="!w-265px" v-model="formData.projectName" placeholder="自动带出" disabled />
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row>
			
			<el-col :span="6">
				<el-form-item label="任务负责人" prop="pgUser">
					<UserSelect v-model="formData.pgUser"  @update:newValue="handleSelectedUser1" class="!w-265px"/>
				  <!-- <el-input class="!w-265px" v-model="formData.pgUser" placeholder="请输入任务负责人" /> -->
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="要求完工时间" prop="pgDatetime">
				  <el-date-picker class="!w-265px"
				    v-model="formData.pgDatetime"
				    type="date"
				    value-format="x"
				    placeholder="选择要求完工时间"
				  />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="生产计划id" prop="taskId" v-if="false">
				  <el-input class="!w-265px" v-model="formData.taskId" placeholder="请输入生产计划id" disabled/>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="项目id" prop="projectId" v-if="false">
				  <el-input class="!w-265px" v-model="formData.projectId" placeholder="请输入项目id" disabled/>
				</el-form-item>
			</el-col>
		</el-row>
	  	  
	  	</el-form>
	  </el-card>
    
    <!-- 子表的表单 -->
    <el-tabs v-model="subTabsName">
      <el-tab-pane label="质量派工单过程检验行" name="pgMasterLine">
        <PgMasterLineForm ref="pgMasterLineFormRef" :zl-pg-id="formData.id" :pgMasterLine="pgMasterLine"  />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
	<ProjectPlanDialog ref="projectPlanDialog" @success="handleSelectedProjectPlan" />
  </Dialog>
  
</template>
<script setup lang="ts">
import * as PgMasterApi from '@/api/heli/pgmaster'
import PgMasterLineForm from './components/PgMasterLineForm.vue'
import { defineProps } from 'vue';
import { Search, Plus } from '@element-plus/icons-vue'
import ProjectPlanDialog from '@/views/heli/materialplan/ProjectPlanDialog.vue'
import UserSelect from '@/views/heli/hlvuestyle/userSelect.vue'

const projectPlanDialog = ref()
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 handleClick = (event) => {
  openprojectPlanDialog()
}
const openprojectPlanDialog = () => {
  projectPlanDialog.value?.open()
}
const pgMasterLine = ref({
	pgMasterLines:[],
})
const formData = ref({
  id: undefined,
  pgNumber: undefined,
  taskNo: undefined,
  taskId: undefined,
  projectId: undefined,
  projectNo: undefined,
  projectName: undefined,
  pgUser: undefined,
  pgDatetime: undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

//项目负责人
const handleSelectedUser1 = (newValue: any) => {
  formData.value.pgUser = newValue?.id
}
const getBommx = async (taskid: number,projectId: number) => {
	 //选中后调用后台接口查询出BOM明细
	 pgMasterLine.value.pgMasterLines  = await PgMasterApi.getSearchBomMx(taskid,projectId)
	 
	 console.log("打印获取到的数据");
	 console.log(pgMasterLine.value.pgMasterLines);
}

/* 生产计划弹窗 */
const handleSelectedProjectPlan = (arr) => {
  if (arr) {
	  console.log("返回的信息");
	  console.log(arr);
	  formData.value.taskNo = arr.planNo
	  formData.value.taskId = arr.id
	  formData.value.projectId = arr.projectId
	  formData.value.projectNo = arr.projectCode
	  formData.value.projectName = arr.projectName
	  getBommx(arr.id,arr.projectId)
	 
	  
    /* formData.value.projectPlanId = arr.id
    formData.value.projectId = arr.projectId
    formData.value.projectCode = arr.projectCode
    formData.value.projectName = arr.projectName
    formData.value.planNo = arr.planNo  */
  }
}

/** 子表的表单 */
const subTabsName = ref('pgMasterLine')
const pgMasterLineFormRef = ref()

/** 打开弹窗 */
const open = async (type: 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.getPgMaster(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 校验子表单
  try {
    await pgMasterLineFormRef.value.validate()
  } catch (e) {
    subTabsName.value = 'pgMasterLine'
    return
  }
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PgMasterApi.PgMasterVO
    // 拼接子表的数据
    data.pgMasterLines = pgMasterLineFormRef.value.getData()
    if (formType.value === 'create') {
      await PgMasterApi.createPgMaster(data)
      message.success(t('common.createSuccess'))
    } else {
      await PgMasterApi.updatePgMaster(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = true
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    pgNumber: undefined,
    taskNo: undefined,
    taskId: undefined,
    projectId: undefined,
    projectNo: undefined,
    projectName: undefined,
    pgUser: undefined,
    pgDatetime: undefined,
  }
  formRef.value?.resetFields()
}
</script>