From dcb5f9525e02044750a974c58f0cdca3e157ec60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Mon, 11 May 2026 15:20:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(wms/processSpec):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E8=A7=84=E7=A8=8B=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E4=B8=BA?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构了整个流程规格页面，将原来的单页面管理改为分离的规程列表和版本管理模式，拆分了新增/编辑弹窗，移除了冗余的产线和类型筛选Tab，优化了页面布局和样式。
---
 klp-ui/src/views/wms/processSpec/index.vue    | 821 +++++++-----------
 klp-ui/src/views/wms/processSpec/planSpec.vue |   2 +-
 2 files changed, 307 insertions(+), 516 deletions(-)

diff --git a/klp-ui/src/views/wms/processSpec/index.vue b/klp-ui/src/views/wms/processSpec/index.vue
index b41201fa..e284d4b0 100644
--- a/klp-ui/src/views/wms/processSpec/index.vue
+++ b/klp-ui/src/views/wms/processSpec/index.vue
@@ -1,601 +1,392 @@
 <template>
-  <div class="spec-page">
-    <!-- 规程类型 -->
-    <div class="dict-toolbar-row">
-      <div class="type-tab-bar">
-        <span
-          v-for="t in specTypeTab"
-          :key="'stype-' + (t.value === '' ? 'all' : t.value)"
-          :class="['type-tab', { active: activeSpecType === t.value }]"
-          @click="switchSpecType(t.value)"
-        >{{ t.label }}</span>
-      </div>
-      <dict-select
-        toolbar-only
-        :kisv="false"
-        :editable="true"
-        :refresh="false"
-        :dict-type="DICT_SPEC_TYPE"
-        panel-title="规程工艺类型字典"
-        @dict-updated="loadSpecTypeDict"
-      />
+  <div class="spec-version-page" v-loading="pageLoading">
+    <!-- 头部 -->
+    <div class="page-header">
+      <span class="page-title">规程版本管理</span>
+      <el-button
+        type="primary"
+        size="small"
+        icon="el-icon-plus"
+        style="margin-left:auto"
+        @click="openSpecDialog()"
+      >新建规程</el-button>
     </div>
 
-    <!-- 产线 -->
-    <div class="dict-toolbar-row line-row">
-      <div class="line-tab-bar">
-        <span
-          :class="['line-tab', { active: activeLineId === '' }]"
-          @click="switchLine('')"
-        >全部</span>
-        <span
-          v-for="line in lineOptions"
-          :key="'ln-' + line.lineId"
-          :class="['line-tab', { active: lineTabActive(line) }]"
-          @click="switchLine(line.lineId)"
-        >{{ line.lineName }}</span>
-      </div>
-      <dict-select
-        toolbar-only
-        :kisv="false"
-        :editable="true"
-        :refresh="false"
-        :dict-type="DICT_LINE"
-        panel-title="规程产线筛选项（字典值为产线 line_id）"
-        @dict-updated="loadLineOptions"
-      />
+    <!-- 规程列表 -->
+    <div class="section-wrapper">
+      <div class="section-title">规程列表</div>
+      <el-table
+        :data="specList"
+        size="small"
+        highlight-current-row
+        @row-click="onSpecRowClick"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column label="规程编码" prop="specCode" width="150" />
+        <el-table-column label="规程名称" prop="specName" />
+        <el-table-column label="创建时间" prop="createTime" width="180" />
+        <el-table-column label="操作" align="right" width="180">
+          <template slot-scope="{ row }">
+            <el-button type="text" size="mini" @click.stop="openSpecDialog(row)">编辑</el-button>
+            <el-button type="text" size="mini" class="btn-danger" @click.stop="removeSpec(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
 
-    <!-- 工具栏 -->
-    <div class="toolbar">
-      <div class="toolbar-left">
-        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
-        <el-button size="mini" icon="el-icon-edit" :disabled="single" @click="handleUpdate()">修改</el-button>
-        <el-button size="mini" icon="el-icon-delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
-      </div>
-      <div class="toolbar-right">
-        <el-input
-          v-model="queryParams.specName"
-          size="small"
-          placeholder="规程名称"
-          clearable
-          style="width:180px; margin-right:8px"
-          @keyup.enter.native="handleQuery"
-        />
-        <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
-        <el-button size="mini" @click="resetQuery">重置</el-button>
+    <!-- 版本列表 -->
+    <div class="section-wrapper" v-if="currentSpec">
+      <div class="section-title">
+        版本列表 - {{ currentSpec.specName }}
+        <el-button
+          type="primary"
+          size="mini"
+          icon="el-icon-plus"
+          @click="openVersionDialog()"
+        >新建版本</el-button>
       </div>
+      <el-table
+        :data="versionList"
+        size="small"
+        highlight-current-row
+        @row-click="onVersionRowClick"
+      >
+        <el-table-column label="版本号" prop="versionCode" />
+        <el-table-column label="状态" prop="status" />
+        <el-table-column label="创建时间" prop="createTime" />
+        <el-table-column label="生效" align="center">
+          <template slot-scope="{ row }">
+            <el-switch
+              :value="row.isActive === 1"
+              active-color="#5F7BA0"
+              @click.native.stop
+              @change="handleActiveChange(row, $event)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="right">
+          <template slot-scope="{ row }">
+            <el-button type="text" size="mini" @click.stop="openVersionDialog(row)">编辑</el-button>
+            <el-button type="text" size="mini" class="btn-danger" @click.stop="removeVersion(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-empty v-if="!versionList.length && !versionLoading" description="暂无版本，请新建" style="padding:40px 0" />
     </div>
+    <div v-else class="empty-hint">请选择一个规程查看其版本</div>
 
-    <!-- 列表 -->
-    <el-table
-      v-loading="loading"
-      :data="dataList"
-      size="small"
-      highlight-current-row
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" />
-      <el-table-column label="规程编号" prop="specCode" show-overflow-tooltip />
-      <el-table-column label="规程名称" prop="specName" show-overflow-tooltip />
-      <el-table-column label="产品类型" prop="productType" show-overflow-tooltip />
-      <el-table-column label="创建时间" prop="createTime" />
-      <el-table-column label="启用" align="center">
-        <template slot-scope="{ row }">
-          <el-switch
-            :value="row.isEnabled === 1"
-            active-color="#5F7BA0"
-            @change="toggleEnabled(row, $event)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="right">
-        <template slot-scope="{ row }">
-          <el-button type="text" size="mini" @click="goVersionManage(row)">版本与方案</el-button>
-          <el-button type="text" size="mini" @click="handleUpdate(row)">修改</el-button>
-          <el-button type="text" size="mini" class="btn-danger" @click="handleDelete(row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 新增/修改 -->
-    <el-dialog :title="dialogTitle" :visible.sync="open" width="520px" append-to-body @close="reset">
-      <el-form ref="form" :model="form" :rules="rules" label-width="88px" size="small">
-        <el-form-item label="规程编号" prop="specCode">
-          <el-input v-model="form.specCode" placeholder="唯一编号" maxlength="64" show-word-limit />
+    <!-- 新建/编辑规程 -->
+    <el-dialog :title="specTitle" :visible.sync="specOpen" width="500px" append-to-body @close="specForm = {}">
+      <el-form ref="specFormRef" :model="specForm" :rules="specRules" label-width="88px" size="small">
+        <el-form-item label="规程编码" prop="specCode">
+          <el-input v-model="specForm.specCode" placeholder="请输入规程编码" maxlength="64" />
         </el-form-item>
         <el-form-item label="规程名称" prop="specName">
-          <el-input v-model="form.specName" maxlength="200" show-word-limit />
+          <el-input v-model="specForm.specName" placeholder="请输入规程名称" maxlength="200" />
         </el-form-item>
-        <el-form-item label="规程类型" prop="specType">
-          <el-select v-model="form.specType" style="width:100%">
-            <el-option
-              v-for="t in specTypeOptionsForForm"
-              :key="t.dictValue"
-              :label="t.dictLabel"
-              :value="t.dictValue"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="产线" prop="lineId">
-          <el-select v-model="form.lineId" filterable placeholder="请选择" style="width:100%">
-            <el-option
-              v-for="line in lineOptionsForForm"
-              :key="line.lineId"
-              :label="lineOptLabel(line)"
-              :value="line.lineId"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="产品类型" prop="productType">
-          <el-input v-model="form.productType" maxlength="100" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnabled">
-          <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
+        <el-form-item label="备注">
+          <el-input v-model="specForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button size="small" @click="open = false">取消</el-button>
-        <el-button size="small" type="primary" :loading="btnLoading" @click="submitForm">确定</el-button>
+        <el-button size="small" @click="specOpen = false">取消</el-button>
+        <el-button size="small" type="primary" :loading="specSubmitLoading" @click="submitSpec">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 新建/编辑版本 -->
+    <el-dialog :title="versionTitle" :visible.sync="versionOpen" width="500px" append-to-body @close="versionForm = {}">
+      <el-form ref="versionFormRef" :model="versionForm" :rules="versionRules" label-width="88px" size="small">
+        <el-form-item label="版本号" prop="versionCode">
+          <el-input v-model="versionForm.versionCode" placeholder="如 V1.0" maxlength="64" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="versionForm.status" style="width:100%">
+            <el-option v-for="s in statusOptions" :key="s" :label="s" :value="s" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="保存后生效">
+          <el-switch v-model="versionForm.isActive" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="versionForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button size="small" @click="versionOpen = false">取消</el-button>
+        <el-button size="small" type="primary" :loading="versionSubmitLoading" @click="submitVersion">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getDicts } from '@/api/system/dict/data'
-import { listProcessSpec, getProcessSpec, delProcessSpec, updateProcessSpec, addProcessSpec } from '@/api/wms/processSpec'
-import { listProductionLine } from '@/api/wms/productionLine'
-
-const DICT_SPEC_TYPE = 'wms_process_spec_type'
-const DICT_LINE = 'wms_process_spec_line'
-
-const DEFAULT_SPEC_TYPES = [
-]
+import { listProcessSpec, getProcessSpec, addProcessSpec, updateProcessSpec, delProcessSpec } from '@/api/wms/processSpec'
+import {
+  listProcessSpecVersion,
+  addProcessSpecVersion,
+  updateProcessSpecVersion,
+  delProcessSpecVersion,
+  activateProcessSpecVersion
+} from '@/api/wms/processSpecVersion'
 
 export default {
-  name: 'ProcessSpec',
+  name: 'SpecVersionManage',
   data() {
     return {
-      DICT_SPEC_TYPE,
-      DICT_LINE,
-      loading: false,
-      btnLoading: false,
-      total: 0,
-      dataList: [],
-      ids: [],
-      single: true,
-      multiple: true,
-      open: false,
-      dialogTitle: '',
-      specTypeRows: [],
-      lineOptions: [],
-      activeSpecType: '',
-      activeLineId: '',
-      queryParams: {
-        pageNum: 1,
-        pageSize: 20,
-        specName: undefined,
-        specType: undefined,
-        lineId: undefined
+      pageLoading: false,
+      specList: [],
+      currentSpec: null,
+      currentSpecId: null,
+      versionList: [],
+      versionLoading: false,
+      statusOptions: ['DRAFT', 'PUBLISHED', 'OBSOLETE'],
+      
+      // 规程相关
+      specOpen: false,
+      specTitle: '',
+      specSubmitLoading: false,
+      specForm: {},
+      specRules: {
+        specCode: [{ required: true, message: '规程编码不能为空', trigger: 'blur' }],
+        specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }]
       },
-      form: {},
-      rules: {
-        specCode: [{ required: true, message: '规程编号不能为空', trigger: 'blur' }],
-        specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }],
-        specType: [{ required: true, message: '请选择规程类型', trigger: 'change' }],
-        lineId: [{ required: true, message: '请选择产线', trigger: 'change' }]
+      
+      // 版本相关
+      versionOpen: false,
+      versionTitle: '',
+      versionSubmitLoading: false,
+      versionForm: {},
+      versionRules: {
+        versionCode: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
       }
     }
   },
-  computed: {
-    specTypeTab() {
-      const rows = this.mergeSpecTypeRowsWithDefaults()
-      const sorted = [...rows].sort((a, b) => (Number(a.dictSort) || 0) - (Number(b.dictSort) || 0))
-      return [{ label: '全部', value: '' }, ...sorted.map(r => ({ label: r.dictLabel, value: r.dictValue }))]
-    },
-    specTypeOptionsForForm() {
-      const rows = this.mergeSpecTypeRowsWithDefaults()
-      return [...rows].sort((a, b) => (Number(a.dictSort) || 0) - (Number(b.dictSort) || 0))
-    },
-    lineOptionsForForm() {
-      return this.lineOptions
-    }
-  },
   created() {
-    Promise.all([this.loadSpecTypeDict(), this.loadLineOptions()]).finally(() => {
-      this.getList()
-    })
+    this.loadSpecs()
   },
   methods: {
-    /**
-     * 工艺类型：默认 PROCESS/STANDARD 与字典合并。若仅有字典中存在的新项，仍可保留两行基础兜底；同 dict_value 以字典为准（可改名、调 sort）。
-     */
-    mergeSpecTypeRowsWithDefaults() {
-      const byVal = new Map()
-      DEFAULT_SPEC_TYPES.forEach(row => {
-        byVal.set(row.dictValue, { ...row })
-      })
-      for (const row of this.specTypeRows || []) {
-        if (!row || row.dictValue === undefined || row.dictValue === null || row.dictValue === '') continue
-        const v = String(row.dictValue)
-        const prev = byVal.get(v)
-        const sort = row.dictSort != null && row.dictSort !== ''
-          ? Number(row.dictSort)
-          : (prev && prev.dictSort != null ? prev.dictSort : 999)
-        const label = (row.dictLabel != null && String(row.dictLabel).trim() !== '')
-          ? row.dictLabel
-          : (prev && prev.dictLabel)
-        byVal.set(v, {
-          dictLabel: label,
-          dictValue: v,
-          dictSort: sort
-        })
-      }
-      return Array.from(byVal.values())
+    // 表格行样式
+    tableRowClassName({ row }) {
+      return row.specId === this.currentSpecId ? 'current-row' : ''
     },
-    /**
-     * 产线 ID 与字典值：用数字字符串，避免超过 Number.MAX_SAFE_INTEGER 时精度丢失（雪花 id）。
-     */
-    normalizeLineIdString(value) {
-      if (value === undefined || value === null || value === '') return ''
-      const s = String(value).trim()
-      return /^\d+$/.test(s) ? s : ''
-    },
-    /** Tab 高亮：雪花 id 一律按字符串比较 */
-    lineTabActive(line) {
-      if (this.activeLineId === '' || this.activeLineId === undefined) return false
-      return String(this.activeLineId) === String(line.lineId)
-    },
-    parseDictRows(res) {
-      const rows = (res.data || []).filter(d => d.status === '0' || d.status === undefined)
-      rows.sort((a, b) => (Number(a.dictSort) || 0) - (Number(b.dictSort) || 0))
-      return rows
-    },
-    async loadSpecTypeDict() {
-      try {
-        const res = await getDicts(DICT_SPEC_TYPE)
-        this.specTypeRows = this.parseDictRows(res)
-      } catch (err) {
-        console.error('规程工艺类型字典加载失败', err)
-        this.specTypeRows = []
-      }
-    },
-    /**
-     * 产线 Tab：产线主表 ∪ 字典中合法数字 line_id（字典独有也会显示 Tab）。
-     * line_id 全程用数字字符串，避免超过 Number.MAX_SAFE_INTEGER 时精度丢失；字典值须为数字 line_id。
-     */
-    async loadLineOptions() {
-      const previousOptions = Array.isArray(this.lineOptions) && this.lineOptions.length
-        ? this.lineOptions.map(o => ({ ...o }))
-        : []
-
-      let dictRows = []
-      try {
-        const res = await getDicts(DICT_LINE)
-        dictRows = this.parseDictRows(res)
-      } catch (err) {
-        console.error('规程产线字典加载失败', err)
-      }
-
-      const dictMeta = new Map()
-      for (const d of dictRows) {
-        const idStr = this.normalizeLineIdString(d.dictValue)
-        if (!idStr) continue
-        const sort = Number(d.dictSort) || 0
-        const label = (d.dictLabel != null && String(d.dictLabel).trim() !== '')
-          ? String(d.dictLabel).trim()
-          : idStr
-        dictMeta.set(idStr, { label, sort })
-      }
-
-      let tableLines = []
-      // try {
-      //   const res = await listProductionLine({ pageNum: 1, pageSize: 500 })
-      //   tableLines = (res.rows || []).map(p => {
-      //     const idStr = this.normalizeLineIdString(p.lineId) || (p.lineId != null ? String(p.lineId).trim() : '')
-      //     return {
-      //       lineId: idStr,
-      //       lineName: p.lineName,
-      //       lineCode: p.lineCode
-      //     }
-      //   }).filter(p => p.lineId)
-      // } catch (e2) {
-      //   console.error('产线列表加载失败', e2)
-      // }
-
-      const tableIdSet = new Set(tableLines.map(l => String(l.lineId)))
-      const next = []
-
-      for (const line of tableLines) {
-        const idStr = String(line.lineId)
-        const dm = dictMeta.get(idStr)
-        next.push({
-          lineId: idStr,
-          lineName: dm ? dm.label : line.lineName,
-          lineCode: line.lineCode
-        })
-      }
-
-      const dictOnly = []
-      for (const [idStr, meta] of dictMeta) {
-        if (!tableIdSet.has(idStr)) {
-          dictOnly.push({ lineId: idStr, lineName: meta.label, lineCode: undefined, _sort: meta.sort })
+    
+    // 加载规程列表
+    loadSpecs() {
+      this.pageLoading = true
+      listProcessSpec({ pageNum: 1, pageSize: 500 }).then(res => {
+        this.specList = res.rows || []
+        if (this.specList.length > 0 && !this.currentSpec) {
+          this.selectSpec(this.specList[0])
         }
-      }
-      dictOnly.sort((a, b) => a._sort - b._sort)
-      dictOnly.forEach(d => {
-        const { _sort, ...rest } = d
-        next.push(rest)
+      }).catch(e => console.error(e)).finally(() => { this.pageLoading = false })
+    },
+    
+    // 选择规程
+    selectSpec(spec) {
+      this.currentSpec = spec
+      this.currentSpecId = spec.specId
+      this.loadVersions()
+    },
+    
+    // 点击规程行
+    onSpecRowClick(row) {
+      this.selectSpec(row)
+    },
+    
+    // 加载版本列表
+    loadVersions() {
+      if (!this.currentSpecId) return
+      this.versionLoading = true
+      listProcessSpecVersion({ specId: this.currentSpecId, pageNum: 1, pageSize: 200 }).then(res => {
+        this.versionList = res.rows || []
+      }).catch(e => console.error(e)).finally(() => { this.versionLoading = false })
+    },
+    
+    // 点击版本行
+    onVersionRowClick(row) {
+      this.goPlanSpec(row)
+    },
+    
+    // 跳转到方案详情
+    goPlanSpec(row) {
+      const basePath = this.$route.path.replace(/\/[^/]*$/, '')
+      console.log(basePath)
+      this.$router.push({
+        path: `/process/processSpec/planSpec`,
+        query: { specId: this.currentSpecId, versionId: String(row.versionId), versionCode: row.versionCode }
       })
-
-      if (next.length === 0 && previousOptions.length > 0) {
-        console.warn('[规程产线] 本次未解析出有效筛选项（可能字典值非数字或产线接口异常），保留上一版 Tab')
+    },
+    
+    // 生效切换
+    handleActiveChange(row, val) {
+      if (!val) {
+        this.$message.info('请激活其他版本来替换当前生效版本')
         return
       }
-      this.lineOptions = next
-    },
-    lineOptLabel(line) {
-      if (line.lineCode) {
-        return `${line.lineName}（${line.lineCode}）`
-      }
-      return line.lineName
-    },
-    getList() {
-      this.loading = true
-      listProcessSpec(this.queryParams).then(res => {
-        this.dataList = res.rows || []
-        this.total = res.total || 0
-      }).finally(() => { this.loading = false })
-    },
-    switchSpecType(val) {
-      this.activeSpecType = val
-      this.queryParams.specType = val || undefined
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    switchLine(lineId) {
-      if (lineId === '' || lineId === undefined || lineId === null) {
-        this.activeLineId = ''
-      } else {
-        const s = this.normalizeLineIdString(lineId)
-        this.activeLineId = s || String(lineId).trim()
-      }
-      this.queryParams.lineId = this.activeLineId === '' ? undefined : this.activeLineId
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    resetQuery() {
-      this.queryParams.specName = undefined
-      this.handleQuery()
-    },
-    handleSelectionChange(sel) {
-      this.ids = sel.map(r => r.specId)
-      this.single = sel.length !== 1
-      this.multiple = !sel.length
-    },
-    defaultSpecType() {
-      const first = this.specTypeOptionsForForm[0]
-      return first ? first.dictValue : 'PROCESS'
-    },
-    reset() {
-      this.form = {
-        specId: undefined,
-        specCode: undefined,
-        specName: undefined,
-        specType: this.defaultSpecType(),
-        lineId: undefined,
-        productType: undefined,
-        isEnabled: 1,
-        remark: undefined
-      }
-      this.$refs.form && this.$refs.form.clearValidate()
-    },
-    handleAdd() {
-      this.reset()
-      this.dialogTitle = '新增规程'
-      this.open = true
-    },
-    handleUpdate(row) {
-      this.reset()
-      const specId = row ? row.specId : this.ids[0]
-      getProcessSpec(specId).then(res => {
-        this.form = res.data || {}
-        if (this.form.lineId != null && this.form.lineId !== '') {
-          const sid = this.normalizeLineIdString(this.form.lineId)
-          this.form.lineId = sid || String(this.form.lineId).trim()
-        }
-        this.dialogTitle = '修改规程'
-        this.open = true
-      })
-    },
-    submitForm() {
-      this.$refs.form.validate(valid => {
-        if (!valid) return
-        this.btnLoading = true
-        const req = this.form.specId ? updateProcessSpec(this.form) : addProcessSpec(this.form)
-        req.then(() => {
-          this.$modal.msgSuccess('保存成功')
-          this.open = false
-          this.getList()
-        }).finally(() => { this.btnLoading = false })
-      })
-    },
-    handleDelete(row) {
-      const ids = row ? row.specId : this.ids
-      this.$modal.confirm('确认删除所选规程？').then(() => {
-        this.loading = true
-        return delProcessSpec(ids)
+      this.$modal.confirm('确认将版本"' + row.versionCode + '"设为当前生效版本？').then(() => {
+        return activateProcessSpecVersion(row.versionId)
       }).then(() => {
-        this.$modal.msgSuccess('删除成功')
-        this.getList()
-      }).catch(() => {}).finally(() => { this.loading = false })
-    },
-    toggleEnabled(row, val) {
-      const updated = { ...row, isEnabled: val ? 1 : 0 }
-      updateProcessSpec(updated).then(() => {
-        row.isEnabled = updated.isEnabled
+        this.$modal.msgSuccess('已生效')
+        this.loadVersions()
       }).catch(() => {})
     },
-    goVersionManage(row) {
-      const pathCurrent = this.$route.path.replace(/\/$/, '')
-      const m = pathCurrent.match(/^(.*\/processSpec)(?:\/.*)?$/)
-      const base = m ? m[1] : pathCurrent
-      this.$router.push({ path: `${base}/version`, query: { specId: String(row.specId) } })
+    
+    // 规程对话框
+    openSpecDialog(row) {
+      this.specForm = row
+        ? { ...row }
+        : { specCode: undefined, specName: undefined, remark: undefined }
+      this.specTitle = row ? '编辑规程' : '新建规程'
+      this.specOpen = true
+      this.$nextTick(() => this.$refs.specFormRef && this.$refs.specFormRef.clearValidate())
+    },
+    
+    // 提交规程
+    submitSpec() {
+      this.$refs.specFormRef.validate(ok => {
+        if (!ok) return
+        this.specSubmitLoading = true
+        const req = this.specForm.specId ? updateProcessSpec(this.specForm) : addProcessSpec(this.specForm)
+        req.then(() => {
+          this.$modal.msgSuccess('保存成功')
+          this.specOpen = false
+          this.loadSpecs()
+        }).catch(e => console.error(e)).finally(() => { this.specSubmitLoading = false })
+      })
+    },
+    
+    // 删除规程
+    removeSpec(row) {
+      this.$modal.confirm('确认删除规程"' + row.specName + '"？').then(() => {
+        return delProcessSpec(row.specId)
+      }).then(() => {
+        this.$modal.msgSuccess('删除成功')
+        if (this.currentSpecId === row.specId) {
+          this.currentSpec = null
+          this.currentSpecId = null
+          this.versionList = []
+        }
+        this.loadSpecs()
+      }).catch(() => {})
+    },
+    
+    // 版本对话框
+    openVersionDialog(row) {
+      this.versionForm = row
+        ? { ...row }
+        : { specId: this.currentSpecId, versionCode: undefined, status: 'DRAFT', isActive: 0, remark: undefined }
+      this.versionTitle = row ? '编辑版本' : '新建版本'
+      this.versionOpen = true
+      this.$nextTick(() => this.$refs.versionFormRef && this.$refs.versionFormRef.clearValidate())
+    },
+    
+    // 提交版本
+    submitVersion() {
+      this.$refs.versionFormRef.validate(ok => {
+        if (!ok) return
+        this.versionSubmitLoading = true
+        const req = this.versionForm.versionId
+          ? updateProcessSpecVersion({ ...this.versionForm, specId: this.currentSpecId })
+          : addProcessSpecVersion({ ...this.versionForm, specId: this.currentSpecId })
+        req.then(() => {
+          this.$modal.msgSuccess('保存成功')
+          this.versionOpen = false
+          this.loadVersions()
+        }).catch(e => console.error(e)).finally(() => { this.versionSubmitLoading = false })
+      })
+    },
+    
+    // 删除版本
+    removeVersion(row) {
+      this.$modal.confirm('确认删除版本"' + row.versionCode + '"？').then(() => {
+        return delProcessSpecVersion(row.versionId)
+      }).then(() => {
+        this.$modal.msgSuccess('删除成功')
+        this.loadVersions()
+      }).catch(() => {})
     }
   }
 }
 </script>
 
 <style scoped>
-.spec-page {
+.spec-version-page {
   padding: 16px 20px;
-
   min-height: 100%;
 }
 
-/* ── 双色主题：默认=白底灰边，激活/主操作=深藏青 #5F7BA0 ── */
-
-.dict-toolbar-row {
+.page-header {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 8px 10px;
-  margin-bottom: 6px;
+  gap: 10px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #ebeef5;
 }
 
-.dict-toolbar-row.line-row {
+.page-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-wrapper {
+  background: #fff;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 16px;
+  border: 1px solid #ebeef5;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
   margin-bottom: 12px;
-}
-
-.type-tab-bar {
   display: flex;
-  flex: 0 1 auto;
-  flex-wrap: wrap;
-  gap: 0;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid #dcdfe6;
-}
-
-.type-tab {
-  padding: 5px 14px;
-  font-size: 12px;
-  cursor: pointer;
-  color: #606266;
-  background: #fff;
-  border: none;
-  border-right: 1px solid #dcdfe6;
-  transition: color .15s, background .15s;
-  user-select: none;
-  line-height: 1;
-}
-
-.type-tab:last-child { border-right: none; }
-.type-tab:hover { color: #5F7BA0; }
-
-.type-tab.active {
-  color: #fff;
-  background: #5F7BA0;
-}
-
-.line-tab-bar {
-  display: flex;
-  flex-wrap: wrap;
-  flex: 0 1 auto;
   align-items: center;
-  gap: 6px;
-  padding: 10px 0;
-  min-width: 0;
-}
-
-.line-tab {
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: pointer;
-  color: #606266;
-  background: #fff;
-  border: 1px solid #dcdfe6;
-  transition: color .15s, background .15s, border-color .15s;
-  user-select: none;
-  line-height: 1;
-}
-
-.line-tab:hover { color: #5F7BA0; border-color: #5F7BA0; }
-
-.line-tab.active {
-  color: #fff;
-  background: #5F7BA0;
-  border-color: #5F7BA0;
-}
-
-.toolbar {
-  display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
 }
 
-.toolbar-left,
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.empty-hint {
+  text-align: center;
+  padding: 60px 0;
+  color: #909399;
+  font-size: 14px;
 }
 
 .el-table {
-  border-radius: 4px;
-  overflow: hidden;
+  border-radius: 0;
+}
+
+::v-deep .el-table .current-row {
+  background: #f0f7ff !important;
 }
 
-/* el-button：主操作类 → 深藏青；默认类 → 白底灰边 */
 ::v-deep .el-button--primary {
   color: #fff !important;
   background: #5F7BA0 !important;
   border-color: #5F7BA0 !important;
 }
 ::v-deep .el-button--primary:hover,
-::v-deep .el-button--primary:focus {
-  background: #4d6a8e !important;
-  border-color: #4d6a8e !important;
-}
+::v-deep .el-button--primary:focus { background: #4d6a8e !important; border-color: #4d6a8e !important; }
 ::v-deep .el-button--primary:active { background: #4a6585 !important; border-color: #4a6585 !important; }
 ::v-deep .el-button--primary.is-disabled { opacity: .5; }
 
-::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):not(.el-button--info) {
+::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger) {
   color: #606266 !important;
   background: #fff !important;
   border-color: #dcdfe6 !important;
 }
-::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):not(.el-button--info):hover {
+::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):hover {
   color: #5F7BA0 !important;
   border-color: #5F7BA0 !important;
 }
-::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):not(.el-button--info).is-disabled { opacity: .5; }
 
 ::v-deep .el-button--text { background: transparent !important; border-color: transparent !important; }
 ::v-deep .el-button--text.btn-danger { color: #f56c6c !important; }
 
 .btn-danger { color: #f56c6c; }
-
-/* 与 Tab 同一行时，将齿轮框配色贴近规程主题 */
-::v-deep .dict-toolbar-row .el-icon-setting {
-  color: #5F7BA0;
-}
 </style>
diff --git a/klp-ui/src/views/wms/processSpec/planSpec.vue b/klp-ui/src/views/wms/processSpec/planSpec.vue
index 28dbc5c3..33729ea8 100644
--- a/klp-ui/src/views/wms/processSpec/planSpec.vue
+++ b/klp-ui/src/views/wms/processSpec/planSpec.vue
@@ -211,7 +211,7 @@
     </el-dialog>
 
     <!-- 模板导入 dialog -->
-    <el-dialog title="模板导入" :visible.sync="importOpen" width="800px" append-to-body @close="resetImport">
+    <el-dialog title="模板导入" :visible.sync="importOpen" width="800px" append-to-body>
       <div class="import-container">
         <!-- 文件上传区域 -->
         <div class="file-upload-area" :class="{ disabled: importStatus === 'processing' }">