heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/materialplan/add.vue

<template>
  <el-card class="hl-card" style="position: relative">
    <template #header>
      <span>新增页</span>
    </template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px" v-loading="formLoading">
      <el-card class="hl-card-info">
        <template #header>
          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
        </template>

        <el-row>
          <el-col :span="24">
            <el-row>

              <el-col :span="6">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="物料需求计划编号" prop="materialPlanNo">
                      <el-input class="!w-265px" placeholder="系统自动生成" v-model="formData.materialPlanNo" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="80">
                    <el-form-item label="备注" prop="description" >
                      <el-input class="!w-713px" type="textarea" v-model="formData.description" show-word-limit maxlength="200"  />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="6">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="单据日期" prop="createTime">
                      <el-date-picker class="!w-265px" v-model="formData.createTime"  value-format="x" placeholder="单据日期" disabled/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="6">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="生产计划单号"  prop="planNo">
                      <el-input class="!w-265px" placeholder="生产计划单号" v-model="formData.planNo" @click.prevent="handleClick" :readonly="!isEditing" >
                        <template #append><el-button  @click="openprojectPlanDialog" :icon="Search" /></template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="项目名称" prop="projectName">
                      <el-input class="!w-265px" placeholder="项目名称" v-model="formData.projectName" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="6">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="项目编号" prop="projectCode">
                      <el-input class="!w-265px"  v-model="formData.projectCode" placeholder="项目编号" disabled/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="单据状态" prop="status" >
                      <el-input class="!w-265px"  v-model="formData.status" disabled value="已保存" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>

            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div class="text-center hl-footer">
      <el-button @click="() => router.back()" size="large">取 消</el-button>
      <el-button @click="submitForm" type="success" size="large">保 存</el-button>
    </div>
  </el-card>
  <ProjectPlanDialog ref="projectPlanDialog" @success="handleSelectedProjectPlan" />
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as MaterialPlanApi from '@/api/heli/materialplan'
import { Search, Plus } from '@element-plus/icons-vue'
import { useTagsViewStore } from "@/store/modules/tagsView"
import ProjectPlanDialog from '@/views/heli/materialplan/ProjectPlanDialog.vue'


const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const router = useRouter()
const tagsViewStore = useTagsViewStore();

const currentTag = router.currentRoute.value;

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  projectMaterialPlanNo: undefined,
  projectId: undefined,
  projectPlanId: undefined,
  projectPlanNo: undefined,
  projectCode: undefined,
  auditor: undefined,
  createTime: new Date(),
  status: 1,
  description: undefined,
})
const formRules = reactive({
  planNo: [{ required: true, message: '生产计划单号不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref


defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const projectPlanDialog = ref()
const openprojectPlanDialog = () => {
  projectPlanDialog.value?.open()
}
const isEditing = ref(false)
const handleClick = (event) => {
  openprojectPlanDialog()
}
const handleSelectedProjectPlan = (arr) => {
  if (arr) {
    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 submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as MaterialPlanApi.MaterialPlanVO
    var materialPlanId = await MaterialPlanApi.createMaterialPlan(data)
      //message.success(t('common.createSuccess'))
    dialogVisible.value = false
  } finally {
    formLoading.value = false
    router.push({ path: '/purchase/materialplanedit' ,query:{id:materialPlanId}})
    tagsViewStore.delVisitedView(currentTag);
  }
}

onMounted(async () => {

})
</script>