heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/pgmasterline/PgMasterLineForm.vue
2025-01-19 14:25:50 +08:00

309 lines
9.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" 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>