style：生产计划-详情弹框字段与排产的新增计划弹框字段同步

src/views/mes/plan/components/PlanDetail.vue

@@ -7,59 +7,42 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogTaskLabel')" prop="taskCode">
+      <el-form-item :label="t('ProductionPlan.Plan.dialogTaskLabel')" prop="taskId">
-        <el-input  disabled v-model="formData.taskCode" :placeholder="t('ProductionPlan.Plan.detailDialogTaskPlaceholder')" />
+        <el-input disabled v-model="formData.taskId" :placeholder="t('ProductionPlan.Plan.dialogTaskPlaceholder')" />
       </el-form-item>
-      <!-- <el-form-item label="明细项" prop="taskId">
+      <el-form-item :label="t('ProductionPlan.Plan.dialogTaskDetailLabel')" prop="taskDetailId">
-        <el-select
+        <el-input disabled v-model="formData.taskDetailId" :placeholder="t('ProductionPlan.Plan.dialogTaskDetailPlaceholder')" />
-          disabled
-          v-model="formData.taskDetailId"
-          clearable
-          filterable
-          placeholder="请选择"
-          @change="handleTaskDetailChange"
-        >
-          <el-option
-            v-for="item in taskDetailList"
-            :key="item.id"
-            :label="item.productName+'-未计划:'+(item.number-item.planNumber)"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item> -->
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogProductLabel')" prop="productName">
-        <el-input  disabled v-model="formData.productName" :placeholder="t('ProductionPlan.Plan.detailDialogProductPlaceholder')" />
       </el-form-item>
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogCodeLabel')" prop="code">
+      <el-form-item prop="code">
-        <el-input  disabled v-model="formData.code" :placeholder="t('ProductionPlan.Plan.detailDialogCodePlaceholder')" />
+        <template #label>
+          <span>
+            {{ t('ProductionPlan.Plan.dialogCodeLabel') }}
+            <el-tooltip :content="t('ProductionPlan.Plan.dialogCodeTooltip')" placement="top">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+          </span>
+        </template>
+        <el-row :gutter="10" class="!w-full">
+          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+            <el-input disabled v-model="formData.code" :placeholder="t('ProductionPlan.Plan.dialogCodePlaceholder')" />
+          </el-col>
+          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+            <div>
+              <el-switch disabled v-model="formData.isCode" />
+            </div>
+          </el-col>
+        </el-row>
       </el-form-item>
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogFeedingPipelineLabel')" prop="feedingPipelineName">
+      <el-form-item label="交货日期">
-        <el-input  disabled v-model="formData.feedingPipelineName" :placeholder="t('ProductionPlan.Plan.detailDialogFeedingPipelinePlaceholder')" />
+        <el-input disabled :model-value="deliveryDateText" />
       </el-form-item>
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogWorkerLabel')" prop="worker">
+      <el-form-item label="设备" prop="feedingPipeline">
-        <el-input  disabled v-model="formData.worker" :placeholder="t('ProductionPlan.Plan.detailDialogWorkerPlaceholder')" />
+        <el-input disabled :model-value="deviceDisplayText" placeholder="点击选择设备" readonly />
       </el-form-item>
-<!--      <el-form-item label="产品" prop="productId">-->
+      <el-form-item :label="t('ProductionPlan.Plan.dialogPlanNumberLabel')" prop="planNumber">
-<!--        <el-select-->
+        <el-input disabled v-model="formData.planNumber" />
-<!--          :disabled='editDisable'-->
-<!--          v-model="formData.productId"-->
-<!--          clearable-->
-<!--          filterable-->
-<!--          placeholder="请选择产品"-->
-<!--          class="!w-1/1"-->
-<!--        >-->
-<!--          <el-option-->
-<!--            v-for="item in productList"-->
-<!--            :key="item.id"-->
-<!--            :label="item.name"-->
-<!--            :value="item.id"-->
-<!--          />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPlanNumberLabel')" prop="planNumber">
-        <el-input disabled v-model="formData.planNumber"  />
       </el-form-item>
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPreProductionLabel')" prop="isPreProduction">
+      <el-form-item :label="t('ProductionPlan.Plan.dialogPreProductionLabel')" prop="isPreProduction">
         <el-radio-group disabled v-model="formData.isPreProduction">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRE_PRODUCTION)"
@@ -70,71 +53,61 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <!-- <el-form-item label="热压数量" prop="reyaNumber">
+      <el-form-item :label="t('ProductionPlan.Plan.dialogPlanStartLabel')" prop="planStartTime">
-        <el-input v-model="formData.reyaNumber" />
-      </el-form-item> -->
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPlanStartLabel')" prop="planStartTime">
         <el-date-picker
           disabled
           v-model="formData.planStartTime"
           type="date"
           value-format="x"
-          :placeholder="t('ProductionPlan.Plan.detailDialogPlanStartPlaceholder')"
+          :placeholder="t('ProductionPlan.Plan.dialogPlanStartPlaceholder')"
+          class="!w-full"
         />
       </el-form-item>
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPlanEndLabel')" prop="planEndTime">
+      <el-form-item :label="t('ProductionPlan.Plan.dialogPlanEndLabel')" prop="planEndTime">
         <el-date-picker
           disabled
           v-model="formData.planEndTime"
           type="date"
           value-format="x"
-          :placeholder="t('ProductionPlan.Plan.detailDialogPlanEndPlaceholder')"
+          :placeholder="t('ProductionPlan.Plan.dialogPlanEndPlaceholder')"
+          class="!w-full"
         />
       </el-form-item>
-      <!-- <el-form-item label="班别" prop="groupType">
+      <el-form-item label="最晚开工时间" prop="latestStartTime">
-        <el-radio-group v-model="formData.groupType">
+        <el-date-picker
-          <el-radio
+          disabled
-            v-for="dict in getIntDictOptions(DICT_TYPE.MES_GROUP_TYPE)"
+          v-model="formData.latestStartTime"
-            :key="dict.value"
+          type="date"
-            :label="dict.value"
+          value-format="x"
-          >
+          placeholder="请选择最晚开工时间"
-            {{ dict.label }}
+          class="!w-full"
-          </el-radio>
+        />
-        </el-radio-group>
+      </el-form-item>
-      </el-form-item> -->
+      <el-form-item :label="t('ProductionPlan.Plan.dialogRemarkLabel')" prop="remark">
-      <el-form-item :label="t('ProductionPlan.Plan.detailDialogRemarkLabel')" prop="remark">
+        <el-input disabled type="textarea" v-model="formData.remark" :placeholder="t('ProductionPlan.Plan.dialogRemarkPlaceholder')" />
-        <el-input disabled type="textarea" v-model="formData.remark" :placeholder="t('ProductionPlan.Plan.detailDialogRemarkPlaceholder')" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <!-- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> -->
       <el-button @click="dialogVisible = false">{{ t('ProductionPlan.Plan.detailDialogCloseButtonText') }}</el-button>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
 
-import { PlanApi, PlanVO } from '@/api/mes/plan'
+import { PlanApi } from '@/api/mes/plan'
-
+import dayjs from 'dayjs'
-import { TaskApi, TaskDetailVO, TaskVO} from "@/api/mes/task";
 
 import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
 
 /** 生产计划 表单 */
 defineOptions({ name: 'PlanDetail' })
 
-const taskList = ref<TaskVO[]>([]) // 用户列表
-const taskDetailList = ref<TaskDetailVO[]>([]) // 用户列表
-
-
 const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const editDisable = ref(false) // 编辑状态禁用
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formRules = reactive({})
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -156,10 +129,25 @@ const formData = ref({
   feedingPipeline: undefined,
   feedingPipelineName: undefined,
   workerId: undefined,
-  worker: undefined,
   isPreProduction: undefined,
-  productName: undefined,
+  isCode: undefined,
-  taskCode: undefined
+  latestStartTime: undefined,
+  deliveryDate: undefined,
+  finishDate: undefined
+})
+const deliveryDateText = computed(() => {
+  const sourceValue = formData.value.deliveryDate ?? formData.value.finishDate
+  if (!sourceValue) return ''
+  const value = dayjs(sourceValue)
+  if (!value.isValid()) return String(sourceValue)
+  return value.format('YYYY-MM-DD')
+})
+const deviceDisplayText = computed(() => {
+  if (formData.value.feedingPipelineName) return String(formData.value.feedingPipelineName)
+  if (formData.value.feedingPipeline !== undefined && formData.value.feedingPipeline !== null) {
+    return `设备ID:${formData.value.feedingPipeline}`
+  }
+  return ''
 })
 
 const formRef = ref() // 表单 Ref
@@ -168,11 +156,8 @@ const formRef = ref() // 表单 Ref
 const open = async (id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('ProductionPlan.Plan.detailDialogTitle')
-  // formType.value = type
-  editDisable.value = false
   resetForm()
   formData.value = await PlanApi.getPlan(id)
-  console.log(formData.value)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -196,9 +181,13 @@ const resetForm = () => {
     remark: undefined,
     groupType: undefined,
     isEnable: undefined,
+    feedingPipeline: undefined,
     isPreProduction: 0,
     feedingPipelineName: undefined,
-    worker: undefined,
+    isCode: true,
+    latestStartTime: undefined,
+    deliveryDate: undefined,
+    finishDate: undefined
   }
   formRef.value?.resetFields()
 }