diff --git a/src/views/mes/pro/process/ProProcessForm.vue b/src/views/mes/pro/process/ProProcessForm.vue
index ce872f410..a2c7cb8d0 100644
--- a/src/views/mes/pro/process/ProProcessForm.vue
+++ b/src/views/mes/pro/process/ProProcessForm.vue
@@ -7,6 +7,7 @@
       :rules="formRules"
       label-width="100px"
       v-loading="formLoading"
+      :disabled="isDetail"
     >
       <el-row :gutter="20">
         <el-col :span="8">
@@ -55,16 +56,19 @@
       </template>
     </el-form>
     <template #footer>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
+      <el-button v-if="!isDetail" type="primary" @click="submitForm" :loading="formLoading">
+        确 定
+      </el-button>
+      <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { generateRandomStr } from '@/utils'
 import { ProProcessApi, ProProcessVO } from '@/api/mes/pro/process'
+import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
+import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
 import ProProcessContentList from './ProProcessContentList.vue'
 
 defineOptions({ name: 'ProProcessForm' })
@@ -76,7 +80,8 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
+const isDetail = computed(() => formType.value === 'detail') // 是否为详情模式
 const formData = ref<ProProcessVO>({
   id: undefined,
   code: '',
@@ -93,14 +98,21 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 生成工序编码 */
-const generateCode = () => {
-  formData.value.code = 'PROC' + generateRandomStr(8)
+const generateCode = async () => {
+  formData.value.code = await AutoCodeRecordApi.generateAutoCode(
+    MesAutoCodeRuleCode.PRO_PROCESS_CODE
+  )
 }
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
-  dialogTitle.value = type === 'create' ? '新增生产工序' : '编辑生产工序'
+  const titles: Record<string, string> = {
+    create: '新增生产工序',
+    update: '编辑生产工序',
+    detail: '生产工序详情'
+  }
+  dialogTitle.value = titles[type] || type
   formType.value = type
   resetForm()
   // 修改时，设置数据
diff --git a/src/views/mes/pro/process/index.vue b/src/views/mes/pro/process/index.vue
index 550ae2849..f15045305 100644
--- a/src/views/mes/pro/process/index.vue
+++ b/src/views/mes/pro/process/index.vue
@@ -70,8 +70,13 @@
       :show-overflow-tooltip="true"
       row-key="id"
     >
-      <!-- TODO @AI：增加【详情】操作；点击下；工序编码； -->
-      <el-table-column label="工序编码" align="center" prop="code" width="150" />
+      <el-table-column label="工序编码" align="center" prop="code" width="150">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('detail', scope.row.id)">
+            {{ scope.row.code }}
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="工序名称" align="center" prop="name" width="200" />
       <el-table-column label="状态" align="center" prop="status" width="100">
         <template #default="scope">
diff --git a/src/views/mes/utils/constants.ts b/src/views/mes/utils/constants.ts
index 24d332687..f6fa4b79d 100644
--- a/src/views/mes/utils/constants.ts
+++ b/src/views/mes/utils/constants.ts
@@ -454,6 +454,7 @@ export const MesAutoCodeRuleCode = {
   DV_CHECK_PLAN_CODE: 'DV_CHECK_PLAN_CODE', // 点检保养方案编码
   DV_SUBJECT_CODE: 'DV_SUBJECT_CODE', // 点检保养项目编码
   DV_REPAIR_CODE: 'DV_REPAIR_CODE', // 维修单编码
+  PRO_PROCESS_CODE: 'PRO_PROCESS_CODE', // 工序编码
   PRO_WORK_ORDER_CODE: 'PRO_WORK_ORDER_CODE' // 生产工单编码
 } as const