heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/pgmaster/PgMasterForm.vue
2025-01-09 18:29:48 +08:00

228 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>