From 50be43d9e2dc463152cb9c39593a5adf61284161 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 18 Feb 2026 16:08:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E9=87=8D=E6=9E=84=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=E5=B7=A5=E5=BA=8F=E6=A8=A1=E5=9D=97=E5=8C=85=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E6=8B=86=E5=88=86=20process-content=20?=
 =?UTF-8?q?=E4=B8=BA=E7=8B=AC=E7=AB=8B=E5=AD=90=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

前端：
- api/mes/pro/process/index.ts：移除 contents 字段
- 新建 api/mes/pro/process/content/index.ts，删除旧 process-content/index.ts
- views/mes/pro/process/index.vue：移除 expand 行交互和工艺要求列，
  对齐 ktg-mes 风格
- ProProcessForm.vue：工序编码增加生成按钮，标签改为工序说明，
  编辑时弹窗内嵌操作步骤列表（el-divider + ProProcessContentList）
- 新建 ProProcessContentList.vue（列表）和 ProProcessContentForm.vue
  （表单弹窗），拆分自原内联实现，对齐 CalTeamMemberList/Form 风格
---
 .../mes/pro/process/ProProcessContentForm.vue | 129 +++++++++++++
 .../mes/pro/process/ProProcessContentList.vue |  84 +++++++++
 .../pro/process/ProProcessContentTable.vue    | 176 ------------------
 src/views/mes/pro/process/ProProcessForm.vue  |  37 ++--
 src/views/mes/pro/process/index.vue           |  13 --
 5 files changed, 238 insertions(+), 201 deletions(-)
 create mode 100644 src/views/mes/pro/process/ProProcessContentForm.vue
 create mode 100644 src/views/mes/pro/process/ProProcessContentList.vue
 delete mode 100644 src/views/mes/pro/process/ProProcessContentTable.vue

diff --git a/src/views/mes/pro/process/ProProcessContentForm.vue b/src/views/mes/pro/process/ProProcessContentForm.vue
new file mode 100644
index 000000000..86a33c6d1
--- /dev/null
+++ b/src/views/mes/pro/process/ProProcessContentForm.vue
@@ -0,0 +1,129 @@
+<!-- MES 操作步骤表单弹窗 -->
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="序号" prop="sort">
+        <el-input-number
+          v-model="formData.sort"
+          :min="1"
+          :max="999"
+          controls-position="right"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item label="步骤说明" prop="content">
+        <el-input
+          v-model="formData.content"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入步骤说明"
+        />
+      </el-form-item>
+      <el-form-item label="辅助设备" prop="device">
+        <el-input v-model="formData.device" placeholder="请输入辅助设备" />
+      </el-form-item>
+      <el-form-item label="辅助材料" prop="material">
+        <el-input v-model="formData.material" placeholder="请输入辅助材料" />
+      </el-form-item>
+      <el-form-item label="材料文档 URL" prop="docUrl">
+        <el-input v-model="formData.docUrl" placeholder="请输入材料文档 URL" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ProProcessContentApi, ProProcessContentVO } from '@/api/mes/pro/process/content'
+
+defineOptions({ name: 'ProProcessContentForm' })
+
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref<Partial<ProProcessContentVO>>({
+  id: undefined,
+  processId: undefined,
+  sort: 1,
+  content: '',
+  device: '',
+  material: '',
+  docUrl: '',
+  remark: ''
+})
+const formRules = reactive({
+  sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = (type: string, processId: number, maxSort: number, row?: ProProcessContentVO) => {
+  dialogVisible.value = true
+  dialogTitle.value = type === 'create' ? '添加操作步骤' : '编辑操作步骤'
+  formType.value = type
+  resetForm(processId, maxSort)
+  // 修改时，设置数据
+  if (row) {
+    formData.value = { ...row }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as ProProcessContentVO
+    if (formType.value === 'create') {
+      await ProProcessContentApi.createProcessContent(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProProcessContentApi.updateProcessContent(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = (processId: number, maxSort: number) => {
+  formData.value = {
+    id: undefined,
+    processId,
+    sort: maxSort + 1,
+    content: '',
+    device: '',
+    material: '',
+    docUrl: '',
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mes/pro/process/ProProcessContentList.vue b/src/views/mes/pro/process/ProProcessContentList.vue
new file mode 100644
index 000000000..d3cee4e64
--- /dev/null
+++ b/src/views/mes/pro/process/ProProcessContentList.vue
@@ -0,0 +1,84 @@
+<!-- MES 生产工序内容（操作步骤）列表 -->
+<template>
+  <div>
+    <!-- 操作栏 -->
+    <el-row class="mb-10px">
+      <el-button type="primary" plain @click="openForm('create')">
+        <Icon icon="ep:plus" class="mr-5px" /> 添加步骤
+      </el-button>
+    </el-row>
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="序号" align="center" prop="sort" width="80" />
+      <el-table-column label="步骤说明" align="center" prop="content" min-width="200" />
+      <el-table-column label="辅助设备" align="center" prop="device" width="150" />
+      <el-table-column label="辅助材料" align="center" prop="material" width="150" />
+      <el-table-column label="材料文档" align="center" prop="docUrl" width="150" />
+      <el-table-column label="备注" align="center" prop="remark" min-width="120" />
+      <el-table-column label="操作" align="center" width="130" fixed="right">
+        <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>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <ProProcessContentForm ref="formRef" @success="getList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ProProcessContentApi, ProProcessContentVO } from '@/api/mes/pro/process/content'
+import ProProcessContentForm from './ProProcessContentForm.vue'
+
+defineOptions({ name: 'ProProcessContentList' })
+
+const props = defineProps<{
+  processId: number // 工序编号
+}>()
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(false) // 列表的加载中
+const list = ref<ProProcessContentVO[]>([]) // 列表的数据
+const formRef = ref<InstanceType<typeof ProProcessContentForm>>() // 表单 Ref
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await ProProcessContentApi.getProcessContentListByProcessId(props.processId)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 添加/修改操作 */
+const openForm = (type: string, row?: ProProcessContentVO) => {
+  const maxSort = list.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  formRef.value!.open(type, props.processId, maxSort, row)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await ProProcessContentApi.deleteProcessContent(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+/** 监听工序编号变化，自动刷新列表 */
+watch(
+  () => props.processId,
+  (val) => {
+    if (val) {
+      getList()
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/mes/pro/process/ProProcessContentTable.vue b/src/views/mes/pro/process/ProProcessContentTable.vue
deleted file mode 100644
index a55fbdfb2..000000000
--- a/src/views/mes/pro/process/ProProcessContentTable.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<!-- MES 生产工序内容（操作步骤）子组件 -->
-<template>
-  <div>
-    <!-- 操作栏 -->
-    <el-row class="mb-10px">
-      <el-button type="primary" plain @click="openContentForm('create')">
-        <Icon icon="ep:plus" class="mr-5px" /> 添加步骤
-      </el-button>
-    </el-row>
-    <!-- 步骤列表 -->
-    <el-table v-loading="loading" :data="contentList" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="序号" align="center" prop="sort" width="80" />
-      <el-table-column label="步骤说明" align="center" prop="content" min-width="200" />
-      <el-table-column label="辅助设备" align="center" prop="device" width="150" />
-      <el-table-column label="辅助材料" align="center" prop="material" width="150" />
-      <el-table-column label="材料文档" align="center" prop="docUrl" width="150" />
-      <el-table-column label="备注" align="center" prop="remark" min-width="120" />
-      <el-table-column label="操作" align="center" width="130">
-        <template #default="scope">
-          <el-button link type="primary" @click="openContentForm('update', scope.row)">编辑</el-button>
-          <el-button link type="danger" @click="handleDeleteContent(scope.row.id)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 步骤表单弹窗 -->
-    <Dialog :title="contentDialogTitle" v-model="contentDialogVisible" width="600px">
-      <el-form
-        ref="contentFormRef"
-        :model="contentFormData"
-        :rules="contentFormRules"
-        label-width="100px"
-        v-loading="contentFormLoading"
-      >
-        <el-form-item label="序号" prop="sort">
-          <el-input-number
-            v-model="contentFormData.sort"
-            :min="1"
-            :max="999"
-            controls-position="right"
-            class="!w-1/1"
-          />
-        </el-form-item>
-        <el-form-item label="步骤说明" prop="content">
-          <el-input
-            v-model="contentFormData.content"
-            type="textarea"
-            :rows="3"
-            placeholder="请输入步骤说明"
-          />
-        </el-form-item>
-        <el-form-item label="辅助设备" prop="device">
-          <el-input v-model="contentFormData.device" placeholder="请输入辅助设备" />
-        </el-form-item>
-        <el-form-item label="辅助材料" prop="material">
-          <el-input v-model="contentFormData.material" placeholder="请输入辅助材料" />
-        </el-form-item>
-        <el-form-item label="材料文档 URL" prop="docUrl">
-          <el-input v-model="contentFormData.docUrl" placeholder="请输入材料文档 URL" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="contentFormData.remark" type="textarea" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="submitContentForm" type="primary" :loading="contentFormLoading">确 定</el-button>
-        <el-button @click="contentDialogVisible = false">取 消</el-button>
-      </template>
-    </Dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ProProcessContentApi, ProProcessContentVO } from '@/api/mes/pro/process/content'
-
-defineOptions({ name: 'ProProcessContentTable' })
-
-const props = defineProps<{
-  processId: number
-}>()
-
-const message = useMessage()
-const { t } = useI18n()
-
-// ==================== 步骤列表 ====================
-const loading = ref(false)
-const contentList = ref<ProProcessContentVO[]>([])
-
-/** 查询步骤列表 */
-const getContentList = async () => {
-  loading.value = true
-  try {
-    contentList.value = await ProProcessContentApi.getProcessContentListByProcessId(props.processId)
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 删除步骤 */
-const handleDeleteContent = async (id: number) => {
-  try {
-    await message.delConfirm()
-    await ProProcessContentApi.deleteProcessContent(id)
-    message.success(t('common.delSuccess'))
-    await getContentList()
-  } catch {}
-}
-
-// ==================== 步骤表单 ====================
-const contentDialogVisible = ref(false)
-const contentDialogTitle = ref('')
-const contentFormLoading = ref(false)
-const contentFormType = ref('')
-const contentFormData = ref<Partial<ProProcessContentVO>>({
-  id: undefined,
-  processId: undefined,
-  sort: 1,
-  content: '',
-  device: '',
-  material: '',
-  docUrl: '',
-  remark: ''
-})
-const contentFormRules = reactive({
-  sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }]
-})
-const contentFormRef = ref()
-
-/** 打开步骤表单弹窗 */
-const openContentForm = async (type: string, row?: ProProcessContentVO) => {
-  contentDialogVisible.value = true
-  contentDialogTitle.value = type === 'create' ? '添加操作步骤' : '编辑操作步骤'
-  contentFormType.value = type
-  // 重置表单
-  const maxSort = contentList.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
-  contentFormData.value = {
-    id: undefined,
-    processId: props.processId,
-    sort: maxSort + 1,
-    content: '',
-    device: '',
-    material: '',
-    docUrl: '',
-    remark: ''
-  }
-  // 编辑时设置数据
-  if (row) {
-    contentFormData.value = { ...row }
-  }
-}
-
-/** 提交步骤表单 */
-const submitContentForm = async () => {
-  await contentFormRef.value.validate()
-  contentFormLoading.value = true
-  try {
-    const data = contentFormData.value as ProProcessContentVO
-    if (contentFormType.value === 'create') {
-      await ProProcessContentApi.createProcessContent(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await ProProcessContentApi.updateProcessContent(data)
-      message.success(t('common.updateSuccess'))
-    }
-    contentDialogVisible.value = false
-    await getContentList()
-  } finally {
-    contentFormLoading.value = false
-  }
-}
-
-// ==================== 初始化 ====================
-onMounted(async () => {
-  await getContentList()
-})
-</script>
diff --git a/src/views/mes/pro/process/ProProcessForm.vue b/src/views/mes/pro/process/ProProcessForm.vue
index 19f6b1e92..041a64042 100644
--- a/src/views/mes/pro/process/ProProcessForm.vue
+++ b/src/views/mes/pro/process/ProProcessForm.vue
@@ -1,6 +1,6 @@
 <!-- MES 生产工序表单 -->
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="700px">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
     <el-form
       ref="formRef"
       :model="formData"
@@ -9,20 +9,23 @@
       v-loading="formLoading"
     >
       <el-row :gutter="20">
-        <el-col :span="12">
-          <!-- TODO @AI：生成 -->
+        <el-col :span="8">
           <el-form-item label="工序编码" prop="code">
-            <el-input v-model="formData.code" placeholder="请输入工序编码" />
+            <el-input v-model="formData.code" placeholder="请输入工序编码">
+              <template #append>
+                <el-button @click="generateCode" :disabled="formType === 'update'">
+                  生成
+                </el-button>
+              </template>
+            </el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="工序名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入工序名称" />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="状态" prop="status">
             <el-radio-group v-model="formData.status">
               <el-radio
@@ -36,19 +39,22 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- TODO @AI：工序说明，应该是这个文字； -->
-      <el-form-item label="工艺要求" prop="attention">
+      <el-form-item label="工序说明" prop="attention">
         <el-input
           v-model="formData.attention"
           type="textarea"
           :rows="3"
-          placeholder="请输入工艺要求"
+          placeholder="请输入工序说明"
         />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
       </el-form-item>
-      <!-- 标记时，支持添加“操作步骤”，对齐 ktg，也类似别的模块，有 ContentList + ContentForm -->
+      <!-- 编辑时展示操作步骤 -->
+      <template v-if="formData.id">
+        <el-divider content-position="left">操作步骤</el-divider>
+        <ProProcessContentList :processId="formData.id" />
+      </template>
     </el-form>
     <template #footer>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -59,7 +65,9 @@
 
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { generateRandomStr } from '@/utils'
 import { ProProcessApi, ProProcessVO } from '@/api/mes/pro/process'
+import ProProcessContentList from './ProProcessContentList.vue'
 
 defineOptions({ name: 'ProProcessForm' })
 
@@ -85,6 +93,11 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 
+/** 生成工序编码 */
+const generateCode = () => {
+  formData.value.code = 'PROC' + generateRandomStr(8)
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
diff --git a/src/views/mes/pro/process/index.vue b/src/views/mes/pro/process/index.vue
index f6063f886..4136186b9 100644
--- a/src/views/mes/pro/process/index.vue
+++ b/src/views/mes/pro/process/index.vue
@@ -79,20 +79,8 @@
       :show-overflow-tooltip="true"
       row-key="id"
     >
-      <!-- 展开行：操作步骤 -->
-      <!-- TODO @AI：不需要这个交互，和 ktg 对齐！ -->
-      <el-table-column type="expand">
-        <template #default="scope">
-          <div class="px-40px py-10px">
-            <div class="mb-10px font-bold text-gray-600">操作步骤</div>
-            <ProProcessContentTable :processId="scope.row.id" />
-          </div>
-        </template>
-      </el-table-column>
       <el-table-column label="工序编码" align="center" prop="code" width="150" />
       <el-table-column label="工序名称" align="center" prop="name" width="200" />
-      <!-- TODO @AI：去掉要求； -->
-      <el-table-column label="工艺要求" align="center" prop="attention" show-overflow-tooltip />
       <el-table-column label="状态" align="center" prop="status" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
@@ -146,7 +134,6 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ProProcessApi, ProProcessVO } from '@/api/mes/pro/process'
 import ProProcessForm from './ProProcessForm.vue'
-import ProProcessContentTable from './ProProcessContentTable.vue'
 
 defineOptions({ name: 'MesProProcess' })