✨ feat(mes): 新增工艺路线启用功能及相关逻辑

实现工艺路线的启用功能，允许用户在确认工序和产品 BOM 配置完整后启用工艺路线。同时，优化了表单的状态管理，增强了用户体验。

src/views/mes/pro/route/RouteForm.vue

@@ -7,11 +7,12 @@
       :rules="formRules"
       label-width="100px"
       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="请输入编码">
+            <el-input v-model="formData.code" placeholder="请输入编码" :disabled="isHeaderReadonly">
               <template #append>
                 <el-button @click="generateCode"> 生成 </el-button>
               </template>
@@ -20,12 +21,16 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入名称" />
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入名称"
+              :disabled="isHeaderReadonly"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="状态" prop="status">
-            <el-radio-group v-model="formData.status">
+            <el-radio-group v-model="formData.status" :disabled="isHeaderReadonly">
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                 :key="dict.value"
@@ -43,27 +48,48 @@
           type="textarea"
           :rows="3"
           placeholder="请输入工艺路线说明"
+          :disabled="isHeaderReadonly"
         />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          placeholder="请输入备注"
+          :disabled="isHeaderReadonly"
+        />
       </el-form-item>
-      <!-- 编辑时展示 Tab -->
+      <!-- 编辑/启用/详情时展示 Tab -->
       <template v-if="formData.id">
         <el-divider content-position="left">详细信息</el-divider>
         <el-tabs v-model="activeTab">
           <el-tab-pane label="组成工序" name="process">
-            <RouteProcessList :routeId="formData.id" />
+            <RouteProcessList :routeId="formData.id" :form-type="formType" />
           </el-tab-pane>
           <el-tab-pane label="关联产品" name="product">
-            <RouteProductList :routeId="formData.id" />
+            <RouteProductList :routeId="formData.id" :form-type="formType" />
           </el-tab-pane>
         </el-tabs>
       </template>
     </el-form>
     <template #footer>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button
-      <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
+        v-if="isEditable"
+        type="primary"
+        @click="submitForm"
+        :disabled="formLoading"
+      >
+        保 存
+      </el-button>
+      <el-button
+        v-if="isEnable"
+        type="success"
+        @click="handleEnable"
+        :disabled="formLoading"
+      >
+        确认启用
+      </el-button>
+      <el-button @click="dialogVisible = false">关 闭</el-button>
     </template>
   </Dialog>
 </template>
@@ -77,14 +103,25 @@ import RouteProcessList from './RouteProcessList.vue'
 import RouteProductList from './RouteProductList.vue'
 
 defineOptions({ name: 'RouteForm' })
+const emit = defineEmits(['success'])
 
-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref<string>('create') // 表单的类型：create / update / enable / detail
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
+const isEnable = computed(() => formType.value === 'enable') // 是否为启用模式
+const isDetail = computed(() => ['detail', 'enable'].includes(formType.value)) // 是否为详情模式（只读）
+const isHeaderReadonly = computed(() => ['enable', 'detail'].includes(formType.value)) // 是否只读
+const dialogTitle = computed(() => {
+  const titles: Record<string, string> = {
+    create: '新增工艺路线',
+    update: '编辑工艺路线',
+    enable: '启用工艺路线',
+    detail: '工艺路线详情'
+  }
+  return titles[formType.value] || formType.value
+})
 const activeTab = ref('process') // 子表当前激活的 Tab
 const formData = ref<ProRouteVO>({
   id: undefined,
@@ -109,10 +146,10 @@ const generateCode = () => {
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
-  dialogTitle.value = type === 'create' ? '新增工艺路线' : '编辑工艺路线'
   formType.value = type
   activeTab.value = 'process'
   resetForm()
+  // 修改/启用/详情时，加载数据
   if (id) {
     formLoading.value = true
     try {
@@ -122,26 +159,40 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open })
 
-/** 提交表单 */
+/** 提交表单（create/update 模式） */
-const emit = defineEmits(['success'])
 const submitForm = async () => {
-  if (!formRef) return
+  await formRef.value.validate()
-  const valid = await formRef.value.validate()
-  if (!valid) return
   formLoading.value = true
   try {
     const data = { ...formData.value }
     if (formType.value === 'create') {
-      await ProRouteApi.createRoute(data)
+      const res = await ProRouteApi.createRoute(data)
-      message.success(t('common.createSuccess'))
+      message.success('新增成功')
+      // 创建成功后，更新表单数据和状态为编辑模式
+      formData.value.id = res
+      formData.value.status = CommonStatusEnum.DISABLE
+      formType.value = 'update'
     } else {
       await ProRouteApi.updateRoute(data)
-      message.success(t('common.updateSuccess'))
+      message.success('修改成功')
     }
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 确认启用 */
+const handleEnable = async () => {
+  try {
+    await message.confirm('确认启用"' + formData.value.name + '"工艺路线吗？启用前请确认工序和产品 BOM 配置完整。')
+    formLoading.value = true
+    await ProRouteApi.updateRouteStatus(formData.value.id!, CommonStatusEnum.ENABLE)
+    message.success('启用成功')
     dialogVisible.value = false
     emit('success')
+  } catch {
   } finally {
     formLoading.value = false
   }
@@ -159,4 +210,6 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+defineExpose({ open })
 </script>

src/views/mes/pro/route/RouteProcessList.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <!-- 操作栏 -->
-    <el-row class="mb-10px">
+    <el-row v-if="isEditable" class="mb-10px">
       <el-button type="primary" plain @click="openForm('create')">
         <Icon icon="ep:plus" class="mr-5px" /> 添加工序
       </el-button>
@@ -68,7 +68,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="130" fixed="right">
+      <el-table-column v-if="isEditable" 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>
@@ -151,8 +151,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
         <el-button @click="formVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
       </template>
     </Dialog>
   </div>
@@ -167,28 +167,19 @@ defineOptions({ name: 'RouteProcessList' })
 
 const props = defineProps<{
   routeId: number
+  formType: string
 }>()
 
-const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 
+const isEditable = computed(() => ['create', 'update'].includes(props.formType)) // 是否为编辑模式
+
+// ==================== 列表 ====================
 const loading = ref(false) // 列表的加载中
 const list = ref<ProRouteProcessVO[]>([]) // 列表的数据
 const processList = ref<any[]>([]) // 工序下拉列表
 
-// 表单相关
-const formVisible = ref(false) // 表单弹窗的是否展示
-const formTitle = ref('') // 表单弹窗的标题
-const formLoading = ref(false) // 表单的加载中
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formRef = ref() // 表单 Ref
-const formData = ref<any>({}) // 表单数据
-const formRules = reactive({
-  sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
-  processId: [{ required: true, message: '工序不能为空', trigger: 'change' }],
-  linkType: [{ required: true, message: '工序关系不能为空', trigger: 'change' }]
-})
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -199,6 +190,19 @@ const getList = async () => {
   }
 }
 
+// ==================== 添加/编辑表单 ====================
+const formVisible = ref(false) // 表单弹窗的是否展示
+const formTitle = ref('') // 表单弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType2 = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref<any>({}) // 表单数据
+const formRules = reactive({
+  sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
+  processId: [{ required: true, message: '工序不能为空', trigger: 'change' }],
+  linkType: [{ required: true, message: '工序关系不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+
 /** 加载工序列表 */
 const loadProcessList = async () => {
   processList.value = await ProProcessApi.getProcessSimpleList()
@@ -208,7 +212,7 @@ const loadProcessList = async () => {
 const openForm = (type: string, row?: ProRouteProcessVO) => {
   formVisible.value = true
   formTitle.value = type === 'create' ? '添加工序' : '编辑工序'
-  formType.value = type
+  formType2.value = type
   if (type === 'create') {
     const maxSort = list.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
     formData.value = {
@@ -233,7 +237,7 @@ const submitForm = async () => {
   if (!valid) return
   formLoading.value = true
   try {
-    if (formType.value === 'create') {
+    if (formType2.value === 'create') {
       await ProRouteProcessApi.createRouteProcess(formData.value)
       message.success(t('common.createSuccess'))
     } else {

src/views/mes/pro/route/RouteProductBomList.vue

@@ -50,8 +50,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
         <el-button @click="formVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
       </template>
     </Dialog>
   </div>
@@ -70,26 +70,15 @@ const props = defineProps<{
   productName?: string
 }>()
 
-const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 
+// ==================== 列表 ====================
 const loading = ref(false) // 列表的加载中
 const bomList = ref<ProRouteProductBomVO[]>([]) // BOM 列表的数据
 const processList = ref<any[]>([]) // 工序列表（用于 Tab）
 const activeProcessId = ref('') // 当前选中的工序 Tab
 
-// 表单相关
-const formVisible = ref(false) // 表单弹窗的是否展示
-const formTitle = ref('') // 表单弹窗的标题
-const formLoading = ref(false) // 表单的加载中
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formRef = ref() // 表单 Ref
-const formData = ref<any>({}) // 表单数据
-const formRules = reactive({
-  itemId: [{ required: true, message: 'BOM 物料不能为空', trigger: 'change' }],
-  quantity: [{ required: true, message: '用料比例不能为空', trigger: 'blur' }]
-})
-
 /** 查询工序列表 */
 const loadProcessList = async () => {
   const list = await ProRouteProcessApi.getRouteProcessListByRoute(props.routeId)
@@ -120,6 +109,18 @@ const handleTabChange = () => {
   getBomList()
 }
 
+// ==================== 添加/编辑表单 ====================
+const formVisible = ref(false) // 表单弹窗的是否展示
+const formTitle = ref('') // 表单弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref<any>({}) // 表单数据
+const formRules = reactive({
+  itemId: [{ required: true, message: 'BOM 物料不能为空', trigger: 'change' }],
+  quantity: [{ required: true, message: '用料比例不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
 /** 添加/修改操作 */
 const openForm = (type: string, row?: ProRouteProductBomVO) => {
   formVisible.value = true

src/views/mes/pro/route/RouteProductList.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <!-- 操作栏 -->
-    <el-row class="mb-10px">
+    <el-row v-if="isEditable" class="mb-10px">
       <el-button type="primary" plain @click="openForm('create')">
         <Icon icon="ep:plus" class="mr-5px" /> 关联产品
       </el-button>
@@ -23,7 +23,7 @@
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" min-width="120" />
-      <el-table-column label="操作" align="center" width="130" fixed="right">
+      <el-table-column v-if="isEditable" 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>
@@ -69,7 +69,7 @@
         </el-form-item>
       </el-form>
       <!-- 编辑时展示产品 BOM 配置 -->
-      <template v-if="formType === 'update' && formData.id">
+      <template v-if="formType2 === 'update' && formData.id">
         <el-divider content-position="left">产品 BOM 配置</el-divider>
         <RouteProductBomList
           :routeId="routeId"
@@ -78,8 +78,8 @@
         />
       </template>
       <template #footer>
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
         <el-button @click="formVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
       </template>
     </Dialog>
   </div>
@@ -95,25 +95,18 @@ defineOptions({ name: 'RouteProductList' })
 
 const props = defineProps<{
   routeId: number
+  formType: string
 }>()
 
-const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 
+const isEditable = computed(() => ['create', 'update'].includes(props.formType)) // 是否为编辑模式
+
+// ==================== 列表 ====================
 const loading = ref(false) // 列表的加载中
 const list = ref<ProRouteProductVO[]>([]) // 列表的数据
 
-// 表单相关
-const formVisible = ref(false) // 表单弹窗的是否展示
-const formTitle = ref('') // 表单弹窗的标题
-const formLoading = ref(false) // 表单的加载中
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formRef = ref() // 表单 Ref
-const formData = ref<any>({}) // 表单数据
-const formRules = reactive({
-  itemId: [{ required: true, message: '产品不能为空', trigger: 'change' }]
-})
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -124,11 +117,22 @@ const getList = async () => {
   }
 }
 
+// ==================== 添加/编辑表单 ====================
+const formVisible = ref(false) // 表单弹窗的是否展示
+const formTitle = ref('') // 表单弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType2 = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref<any>({}) // 表单数据
+const formRules = reactive({
+  itemId: [{ required: true, message: '产品不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+
 /** 添加/修改操作 */
 const openForm = (type: string, row?: ProRouteProductVO) => {
   formVisible.value = true
   formTitle.value = type === 'create' ? '关联产品' : '编辑产品'
-  formType.value = type
+  formType2.value = type
   if (type === 'create') {
     formData.value = {
       routeId: props.routeId,
@@ -148,7 +152,7 @@ const submitForm = async () => {
   if (!valid) return
   formLoading.value = true
   try {
-    if (formType.value === 'create') {
+    if (formType2.value === 'create') {
       await ProRouteProductApi.createRouteProduct(formData.value)
       message.success(t('common.createSuccess'))
     } else {

src/views/mes/pro/route/index.vue

@@ -38,8 +38,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
         <el-button
           type="primary"
           plain
@@ -64,10 +64,16 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="路线编码" align="center" prop="code" width="180" />
+      <el-table-column label="路线编码" align="center" prop="code" min-width="180">
-      <el-table-column label="路线名称" align="center" prop="name" width="200" />
+        <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" min-width="200" />
       <el-table-column label="路线说明" align="center" prop="description" min-width="200" />
-      <el-table-column label="状态" align="center" prop="status" width="100">
+      <el-table-column label="状态" align="center" prop="status" min-width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
@@ -80,33 +86,46 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="220">
+      <el-table-column label="操作" align="center" width="220" fixed="right">
         <template #default="scope">
+          <!-- 停用状态：编辑、启用、删除 -->
           <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
             v-hasPermi="['mes:pro-route:update']"
+            v-if="scope.row.status === CommonStatusEnum.DISABLE"
           >
             编辑
           </el-button>
           <el-button
             link
-            :type="scope.row.status === CommonStatusEnum.ENABLE ? 'warning' : 'success'"
+            type="success"
-            @click="handleStatusChange(scope.row)"
+            @click="openForm('enable', scope.row.id)"
             v-hasPermi="['mes:pro-route:update']"
+            v-if="scope.row.status === CommonStatusEnum.DISABLE"
           >
-            {{ scope.row.status === CommonStatusEnum.ENABLE ? '禁用' : '启用' }}
+            启用
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['mes:pro-route:delete']"
-            :disabled="scope.row.status === CommonStatusEnum.ENABLE"
+            v-if="scope.row.status === CommonStatusEnum.DISABLE"
           >
             删除
           </el-button>
+          <!-- 启用状态：禁用 -->
+          <el-button
+            link
+            type="warning"
+            @click="handleDisable(scope.row)"
+            v-hasPermi="['mes:pro-route:update']"
+            v-if="scope.row.status === CommonStatusEnum.ENABLE"
+          >
+            禁用
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -119,7 +138,7 @@
     />
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
+  <!-- 表单弹窗：添加/修改/启用/详情 -->
   <RouteForm ref="formRef" @success="getList" />
 </template>
 
@@ -139,6 +158,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<ProRouteVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const exportLoading = ref(false) // 导出的加载中
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -147,7 +167,7 @@ const queryParams = reactive({
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+const formRef = ref() // 表单弹窗
 
 /** 查询列表 */
 const getList = async () => {
@@ -174,24 +194,16 @@ const resetQuery = () => {
 }
 
 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 修改工艺路线状态 */
+/** 禁用按钮操作 */
-const handleStatusChange = async (row: ProRouteVO) => {
+const handleDisable = async (row: ProRouteVO) => {
   try {
-    // 目标状态：当前禁用 → 启用
+    await message.confirm('确认要停用"' + row.name + '"工艺路线吗?')
-    const newStatus =
+    await ProRouteApi.updateRouteStatus(row.id!, CommonStatusEnum.DISABLE)
-      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+    message.success('停用成功')
-    const text = newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用'
-    // 修改状态的二次确认
-    await message.confirm('确认要"' + text + '""' + row.name + '"工艺路线吗?')
-    // 发起修改状态
-    await ProRouteApi.updateRouteStatus(row.id!, newStatus)
-    message.success(text + '成功')
-    // 刷新列表
     await getList()
   } catch {}
 }
@@ -199,11 +211,8 @@ const handleStatusChange = async (row: ProRouteVO) => {
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await ProRouteApi.deleteRoute(id)
-    // 删除成功的提示
     message.success(t('common.delSuccess'))
     await getList()
   } catch {}
@@ -216,13 +225,14 @@ const handleExport = async () => {
     exportLoading.value = true
     const data = await ProRouteApi.exportRoute(queryParams)
     download.excel(data, '工艺路线.xls')
+  } catch {
   } finally {
     exportLoading.value = false
   }
 }
 
-/** 初始化 **/
+/** 初始化 */
-onMounted(async () => {
+onMounted(() => {
-  await getList()
+  getList()
 })
 </script>