From b6bc58d104abf63281f05809f66c2597d3e4e7d8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 28 Mar 2026 10:08:17 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=89=A9=E6=96=99=E4=BA=A7=E5=93=81=E7=8A=B6=E6=80=81=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E7=89=A9?=
 =?UTF-8?q?=E6=96=99=E5=88=86=E7=B1=BB=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mes/md/item/MdItemBatchConfigForm.vue     | 17 +++++++-----
 src/views/mes/md/item/MdItemForm.vue          | 26 ++++++++++++-------
 src/views/mes/md/item/MdProductBomForm.vue    | 21 ++++++++++-----
 src/views/mes/md/item/MdProductSipForm.vue    | 21 ++++++++++-----
 src/views/mes/md/item/MdProductSopForm.vue    | 22 +++++++++++-----
 .../mes/md/item/components/MdItemSelect.vue   |  3 +--
 6 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/src/views/mes/md/item/MdItemBatchConfigForm.vue b/src/views/mes/md/item/MdItemBatchConfigForm.vue
index fb91a9c23..2dd097be7 100644
--- a/src/views/mes/md/item/MdItemBatchConfigForm.vue
+++ b/src/views/mes/md/item/MdItemBatchConfigForm.vue
@@ -1,8 +1,10 @@
 <!-- MES 物料批次属性配置 -->
 <template>
-  <el-form ref="formRef" :model="formData" v-loading="loading">
-    <div class="flex justify-end mb-10px">
-      <el-button type="primary" size="small" @click="handleSave" :loading="loading">保存批次属性</el-button>
+  <el-form ref="formRef" :model="formData" v-loading="loading" :disabled="isReadOnly">
+    <div v-if="!isReadOnly" class="flex justify-end mb-10px">
+      <el-button type="primary" size="small" @click="handleSave" :loading="loading">
+        保存批次属性
+      </el-button>
     </div>
     <div class="grid grid-cols-5 gap-x-20px">
       <!-- 通用属性（ITEM 和 PRODUCT 都可见） -->
@@ -39,14 +41,14 @@ import { MesItemOrProductEnum } from '@/views/mes/utils/constants'
 defineOptions({ name: 'MdItemBatchConfigForm' })
 
 const props = defineProps<{
-  itemId: number // 物料编号
-  itemOrProduct: string // 区分原材料/产品：'ITEM' | 'PRODUCT'
+  itemId: number
+  itemOrProduct: string
+  formType?: string
 }>()
 
 const message = useMessage() // 消息弹窗
 const loading = ref(false) // 加载中
 const formRef = ref() // 表单 Ref
-/** 表单数据 */
 const formData = ref<MdItemBatchConfigVO>({
   itemId: props.itemId,
   produceDateFlag: false,
@@ -63,7 +65,8 @@ const formData = ref<MdItemBatchConfigVO>({
   moldFlag: false,
   lotNumberFlag: false,
   qualityStatusFlag: false
-})
+}) // 表单数据
+const isReadOnly = computed(() => props.formType === 'detail') // 是否只读
 
 /** 加载已有配置 */
 const loadData = async () => {
diff --git a/src/views/mes/md/item/MdItemForm.vue b/src/views/mes/md/item/MdItemForm.vue
index a9520d83e..f24572d36 100644
--- a/src/views/mes/md/item/MdItemForm.vue
+++ b/src/views/mes/md/item/MdItemForm.vue
@@ -7,13 +7,14 @@
       :rules="formRules"
       label-width="120px"
       v-loading="formLoading"
+      :disabled="isDetail"
     >
       <el-row :gutter="20">
         <el-col :span="8">
           <el-form-item label="物料编码" prop="code">
             <el-input v-model="formData.code" placeholder="请输入物料编码">
               <template #append>
-                <el-button @click="generateCode" :disabled="formType === 'update'">
+                <el-button @click="generateCode" :disabled="isDetail || formType === 'update'">
                   生成
                 </el-button>
               </template>
@@ -97,27 +98,33 @@
         </el-col>
       </el-row>
     </el-form>
-    <!-- 底部 Tab：仅修改时展示 -->
-    <el-tabs v-model="activeTab" v-if="formType === 'update' && formData.id">
+    <!-- 底部 Tab：修改/详情时展示 -->
+    <el-tabs v-model="activeTab" v-if="formType !== 'create' && formData.id">
       <el-tab-pane label="BOM 组成" name="bom" lazy>
-        <MdProductBomForm :itemId="formData.id!" />
+        <MdProductBomForm :itemId="formData.id!" :formType="formType" />
       </el-tab-pane>
       <el-tab-pane label="批次属性" name="batch" lazy v-if="formData.batchFlag">
-        <MdItemBatchConfigForm :itemId="formData.id!" :itemOrProduct="currentItemOrProduct" />
+        <MdItemBatchConfigForm
+          :itemId="formData.id!"
+          :itemOrProduct="currentItemOrProduct"
+          :formType="formType"
+        />
       </el-tab-pane>
       <!-- TODO @芋艿：【对齐】替代品，目前没这个，可忽略 -->
       <el-tab-pane label="替代品" name="substitute" lazy>
         <el-empty description="替代品（待实现）" />
       </el-tab-pane>
       <el-tab-pane label="SIP" name="sip" lazy>
-        <MdProductSipForm :itemId="formData.id!" />
+        <MdProductSipForm :itemId="formData.id!" :formType="formType" />
       </el-tab-pane>
       <el-tab-pane label="SOP" name="sop" lazy>
-        <MdProductSopForm :itemId="formData.id!" />
+        <MdProductSopForm :itemId="formData.id!" :formType="formType" />
       </el-tab-pane>
     </el-tabs>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -148,7 +155,8 @@ const dialogTitle = computed(() => {
   return '查看物料/产品'
 }) // 弹窗标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
+const isDetail = computed(() => formType.value === 'detail') // 是否详情模式（只读）
 const activeTab = ref('bom') // 当前激活的 Tab
 const formData = ref({
   id: undefined,
diff --git a/src/views/mes/md/item/MdProductBomForm.vue b/src/views/mes/md/item/MdProductBomForm.vue
index 70ba9d1a3..f34ca2e72 100644
--- a/src/views/mes/md/item/MdProductBomForm.vue
+++ b/src/views/mes/md/item/MdProductBomForm.vue
@@ -1,7 +1,14 @@
 <!-- MES 产品BOM 列表 -->
 <template>
   <div>
-    <el-button type="primary" plain size="small" @click="handleAdd" class="mb-10px">
+    <el-button
+      v-if="!isReadOnly"
+      type="primary"
+      plain
+      size="small"
+      @click="handleAdd"
+      class="mb-10px"
+    >
       <Icon icon="ep:plus" class="mr-5px" /> 添加 BOM 物料
     </el-button>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
@@ -16,7 +23,7 @@
       </el-table-column>
       <el-table-column label="用量比例" align="center" prop="quantity" width="100" />
       <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" width="120">
+      <el-table-column v-if="!isReadOnly" label="操作" align="center" width="120">
         <template #default="scope">
           <el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
           <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
@@ -79,13 +86,15 @@ import MdItemSelectDialog from '@/views/mes/md/item/components/MdItemSelectDialo
 defineOptions({ name: 'MdProductBomForm' })
 
 const props = defineProps<{
-  itemId: number // 物料产品编号
+  itemId: number
+  formType?: string
 }>()
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const loading = ref(false) // 列表的加载中
 const list = ref<MdProductBomVO[]>([]) // BOM 列表
+const isReadOnly = computed(() => props.formType === 'detail') // 是否只读
 
 /** 加载 BOM 列表 */
 const getList = async () => {
@@ -124,7 +133,7 @@ const handleItemSelected = async (rows: MdItemVO[]) => {
 // ==================== 添加/编辑 BOM ====================
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogFormType = ref('') // 表单的类型：create - 新增；update - 修改
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formRef = ref() // 表单 Ref
 const formData = ref({
@@ -146,7 +155,7 @@ const formRules = reactive({
 const openForm = (type: string, row?: MdProductBomVO) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
-  formType.value = type
+  dialogFormType.value = type
   resetForm()
   // 修改时，设置数据
   if (type === 'update' && row) {
@@ -190,7 +199,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as MdProductBomVO
-    if (formType.value === 'create') {
+    if (dialogFormType.value === 'create') {
       await MdProductBomApi.createProductBom(data)
       message.success(t('common.createSuccess'))
     } else {
diff --git a/src/views/mes/md/item/MdProductSipForm.vue b/src/views/mes/md/item/MdProductSipForm.vue
index c33bd5165..544210243 100644
--- a/src/views/mes/md/item/MdProductSipForm.vue
+++ b/src/views/mes/md/item/MdProductSipForm.vue
@@ -1,7 +1,14 @@
 <!-- MES 产品SIP 列表 -->
 <template>
   <div>
-    <el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
+    <el-button
+      v-if="!isReadOnly"
+      type="primary"
+      plain
+      size="small"
+      @click="openForm('create')"
+      class="mb-10px"
+    >
       <Icon icon="ep:plus" class="mr-5px" /> 添加 SIP
     </el-button>
     <!-- SIP 卡片列表 -->
@@ -25,7 +32,7 @@
               {{ item.description }}
             </div>
             <!-- 操作按钮 -->
-            <div class="flex justify-end mt-8px">
+            <div v-if="!isReadOnly" class="flex justify-end mt-8px">
               <el-button link type="primary" size="small" @click="openForm('update', item)">
                 编辑
               </el-button>
@@ -97,13 +104,15 @@ import { createImageViewer } from '@/components/ImageViewer'
 defineOptions({ name: 'MdProductSipForm' })
 
 const props = defineProps<{
-  itemId: number // 物料产品编号
+  itemId: number
+  formType?: string
 }>()
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const loading = ref(false) // 列表的加载中
 const list = ref<MdProductSipVO[]>([]) // SIP 列表
+const isReadOnly = computed(() => props.formType === 'detail') // 是否只读
 
 /** 加载 SIP 列表 */
 const getList = async () => {
@@ -128,7 +137,7 @@ const handlePreview = (url?: string) => {
 // ==================== 新增/编辑 ====================
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogFormType = ref('') // 表单的类型：create - 新增；update - 修改
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formRef = ref() // 表单 Ref
 const formData = ref({
@@ -150,7 +159,7 @@ const formRules = reactive({
 const openForm = (type: string, row?: MdProductSipVO) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
-  formType.value = type
+  dialogFormType.value = type
   resetForm()
   // 修改时，设置数据
   if (type === 'update' && row) {
@@ -192,7 +201,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as MdProductSipVO
-    if (formType.value === 'create') {
+    if (dialogFormType.value === 'create') {
       await MdProductSipApi.createProductSip(data)
       message.success(t('common.createSuccess'))
     } else {
diff --git a/src/views/mes/md/item/MdProductSopForm.vue b/src/views/mes/md/item/MdProductSopForm.vue
index cb5884986..0ea745b61 100644
--- a/src/views/mes/md/item/MdProductSopForm.vue
+++ b/src/views/mes/md/item/MdProductSopForm.vue
@@ -1,7 +1,14 @@
 <!-- MES 产品SOP 列表 -->
 <template>
   <div>
-    <el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
+    <el-button
+      v-if="!isReadOnly"
+      type="primary"
+      plain
+      size="small"
+      @click="openForm('create')"
+      class="mb-10px"
+    >
       <Icon icon="ep:plus" class="mr-5px" /> 添加 SOP
     </el-button>
     <!-- SOP 卡片列表 -->
@@ -25,7 +32,7 @@
               {{ item.description }}
             </div>
             <!-- 操作按钮 -->
-            <div class="flex justify-end mt-8px">
+            <div v-if="!isReadOnly" class="flex justify-end mt-8px">
               <el-button link type="primary" size="small" @click="openForm('update', item)">
                 编辑
               </el-button>
@@ -97,9 +104,12 @@ import { createImageViewer } from '@/components/ImageViewer'
 defineOptions({ name: 'MdProductSopForm' })
 
 const props = defineProps<{
-  itemId: number // 物料产品编号
+  itemId: number
+  formType?: string
 }>()
 
+const isReadOnly = computed(() => props.formType === 'detail') // 是否只读
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const loading = ref(false) // 列表的加载中
@@ -126,7 +136,7 @@ const handlePreview = (url?: string) => {
 // ==================== 新增/编辑 ====================
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogFormType = ref('') // 表单的类型：create - 新增；update - 修改
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formRef = ref() // 表单 Ref
 const formData = ref({
@@ -148,7 +158,7 @@ const formRules = reactive({
 const openForm = (type: string, row?: MdProductSopVO) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
-  formType.value = type
+  dialogFormType.value = type
   resetForm()
   // 修改时，设置数据
   if (type === 'update' && row) {
@@ -190,7 +200,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as MdProductSopVO
-    if (formType.value === 'create') {
+    if (dialogFormType.value === 'create') {
       await MdProductSopApi.createProductSop(data)
       message.success(t('common.createSuccess'))
     } else {
diff --git a/src/views/mes/md/item/components/MdItemSelect.vue b/src/views/mes/md/item/components/MdItemSelect.vue
index 289867bdb..154c351a3 100644
--- a/src/views/mes/md/item/components/MdItemSelect.vue
+++ b/src/views/mes/md/item/components/MdItemSelect.vue
@@ -68,8 +68,7 @@ const handleFilter = (query: string) => {
   const keyword = query.toLowerCase()
   filteredList.value = allList.value.filter(
     (item) =>
-      item.name?.toLowerCase().includes(keyword) ||
-      item.code?.toLowerCase().includes(keyword)
+      item.name?.toLowerCase().includes(keyword) || item.code?.toLowerCase().includes(keyword)
   )
 }