From 2c5bf09053741b1c79563722ac23c280c29623e0 Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Thu, 9 Jul 2026 14:16:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(wms):=20=E9=87=8D=E6=9E=84=E5=B7=A5?=
 =?UTF-8?q?=E8=89=BA=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2=E4=B8=BA=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B1=95=E7=A4=BA=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将左侧工艺列表改为表格展示，新增工序方案功能
- 实现工序步骤拖拽排序和编辑功能
- 添加新建和编辑工序方案弹窗界面
- 集成用户选择和工序步骤管理功能
- 优化页面布局和交互体验
- 更新数据展示格式和空状态处理
---
 .../klp/flow/domain/vo/SchProdProcessVo.java  |  15 +
 klp-ui/src/views/wms/post/aps/processes.vue   | 986 ++++++++++--------
 2 files changed, 545 insertions(+), 456 deletions(-)

diff --git a/klp-flow/src/main/java/com/klp/flow/domain/vo/SchProdProcessVo.java b/klp-flow/src/main/java/com/klp/flow/domain/vo/SchProdProcessVo.java
index a23650fed..04f6d3832 100644
--- a/klp-flow/src/main/java/com/klp/flow/domain/vo/SchProdProcessVo.java
+++ b/klp-flow/src/main/java/com/klp/flow/domain/vo/SchProdProcessVo.java
@@ -7,6 +7,8 @@ import com.klp.common.annotation.ExcelDictFormat;
 import com.klp.common.convert.ExcelDictConvert;
 import lombok.Data;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+import java.util.Date;
 import java.util.List;
 
 
@@ -47,6 +49,19 @@ public class SchProdProcessVo {
     @ExcelProperty(value = "备注")
     private String remark;
 
+    /**
+     * 创建者
+     */
+    @ExcelProperty(value = "创建者")
+    private String createBy;
+
+    /**
+     * 创建时间
+     */
+    @ExcelProperty(value = "创建时间")
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    private Date createTime;
+
     /**
      * 工艺步骤列表
      */
diff --git a/klp-ui/src/views/wms/post/aps/processes.vue b/klp-ui/src/views/wms/post/aps/processes.vue
index fd2e15a8e..05a3dc16a 100644
--- a/klp-ui/src/views/wms/post/aps/processes.vue
+++ b/klp-ui/src/views/wms/post/aps/processes.vue
@@ -1,210 +1,214 @@
 <template>
-  <div class="app-container" style="height: calc(100vh - 84px); display: flex;">
-    <!-- 左侧工艺列表 -->
-    <div class="left-panel" v-loading="processLoading"
-      style="width: 35%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
-      <!-- 筛选区 -->
-      <div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
-        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
-          <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
-            <el-input v-model="queryParams.processName" placeholder="工艺名称" clearable @keyup.enter.native="handleSearch"
-              style="width: 160px;" />
-            <el-button class="aps-btn-red" icon="el-icon-search" size="mini" @click="handleSearch">筛选</el-button>
-            <el-button icon="el-icon-refresh" size="mini" class="aps-btn-silver" @click="resetQuery">重置</el-button>
-          </div>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <el-button class="aps-btn-red" icon="el-icon-plus" size="mini" @click="handleAddProcess">新增工艺</el-button>
-            <span style="font-size: 12px; color: #909399;">
-              共 <span class="aps-total-count">{{ total }}</span> 条
+  <div class="app-container">
+    <!-- 操作栏 -->
+    <div class="aps-toolbar">
+      <div class="aps-toolbar-left">
+        <el-input v-model="queryParams.processName" placeholder="搜索方案名称" clearable
+          @keyup.enter.native="handleSearch" style="width: 260px;" />
+        <el-button class="aps-btn-red" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+        <el-button class="aps-btn-silver" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </div>
+      <div class="aps-toolbar-right">
+        <el-button class="aps-btn-red" icon="el-icon-plus" @click="handleAdd">新建工序方案</el-button>
+      </div>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table :data="processList" v-loading="processLoading" border style="width: 100%;"
+      :header-cell-style="{ background: '#e8e8e8', color: '#595959', fontWeight: 600 }">
+      <el-table-column label="工序ID" width="110" align="center">
+        <template slot-scope="{ $index }">
+          <span class="aps-id-badge">P{{ String(seqIndex($index)).padStart(3, '0') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="方案名称" prop="processName" min-width="180" show-overflow-tooltip />
+      <el-table-column label="涉及工序" min-width="320">
+        <template slot-scope="{ row }">
+          <template v-if="row.stepList && row.stepList.length">
+            <span class="aps-step-flow">
+              <span v-for="(step, idx) in row.stepList" :key="step.stepId" class="aps-step-item">
+                <span class="aps-step-pill">{{ step.stepName }}</span>
+                <span v-if="idx < row.stepList.length - 1" class="aps-step-arrow">→</span>
+              </span>
             </span>
-          </div>
-        </div>
-      </div>
+          </template>
+          <span v-else style="color: #909399;">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建日期" prop="createTime" width="110" align="center" />
+      <el-table-column label="创建人" prop="createBy" width="90" align="center" />
+      <el-table-column label="备注" prop="remark" min-width="150" show-overflow-tooltip />
+      <el-table-column label="操作" width="170" align="center" fixed="right">
+        <template slot-scope="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" style="margin-left: 8px;" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-      <!-- 列表区域 -->
-      <div class="custom-list">
-        <div class="list-body">
-          <div v-for="item in processList" :key="item.processId" class="list-item"
-            :class="{ 'list-item-active': currentProcess && currentProcess.processId === item.processId }"
-            @click="handleProcessClick(item)">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-              <div style="font-weight: bold; font-size: 14px;">{{ item.processName }}</div>
-              <div style="display: flex; gap: 4px;">
-                <el-button type="text" icon="el-icon-edit" size="mini" @click.stop="handleUpdateProcess(item)"></el-button>
-                <el-button type="text" icon="el-icon-delete" size="mini" style="color: #F56C6C;" @click.stop="handleDeleteProcess(item)"></el-button>
-              </div>
-            </div>
-            <div style="font-size: 12px; color: #909399; margin-bottom: 4px;">
-              {{ item.processDesc || '暂无描述' }}
-            </div>
-            <div style="font-size: 12px; color: #909399;">
-              备注: {{ item.remark || '-' }}
-            </div>
-          </div>
-          <div v-if="processList.length === 0 && !processLoading"
-            style="padding: 40px; text-align: center; color: #909399;">
-            暂无工艺数据
-          </div>
-        </div>
-      </div>
-
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getProcessList" style="padding: 10px; margin-bottom: 10px !important;" />
+    <!-- 空状态 -->
+    <div v-if="!processLoading && processList.length === 0" class="aps-empty">
+      <el-empty description="暂无工序方案数据" />
     </div>
 
-    <!-- 右侧工艺步骤区域 -->
-    <div class="right-panel" v-if="currentProcess && currentProcess.processId"
-      style="flex: 1; display: flex; flex-direction: column;" v-loading="stepLoading">
-      <div class="detail-panel">
-        <!-- 工艺基本信息卡片 -->
-        <div class="detail-card">
-          <div class="detail-card-header">
-            <span>工艺基本信息</span>
-          </div>
-          <div class="detail-card-body">
-            <div class="form-grid-2">
-              <div class="form-field"><label>工艺名称</label>
-                <div class="field-value">{{ currentProcess.processName }}</div>
-              </div>
-              <div class="form-field"><label>工艺描述</label>
-                <div class="field-value">{{ currentProcess.processDesc || '-' }}</div>
-              </div>
-              <div class="form-field" style="grid-column:1/3;"><label>备注</label>
-                <div class="field-value">{{ currentProcess.remark || '-' }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
+    <!-- 分页 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize" @pagination="getProcessList" />
 
-        <!-- 工艺步骤卡片 -->
-        <div class="detail-card">
-          <div class="detail-card-header">
-            <span>工艺步骤（{{ stepList.length }} 步）</span>
-            <el-button type="text" icon="el-icon-plus" size="mini" style="color: white;" @click="handleAddStep">新增步骤</el-button>
-          </div>
-          <div class="detail-card-body">
-            <div v-if="stepList.length > 0" class="process-timeline-wrap">
-              <el-timeline>
-                <el-timeline-item
-                  v-for="(step, index) in stepList"
-                  :key="step.stepId"
-                  :timestamp="'步骤 ' + step.stepOrder"
-                  placement="top"
-                  :type="index === stepList.length - 1 ? 'success' : 'primary'"
-                  :hollow="index !== stepList.length - 1"
-                  size="large"
-                >
-                  <div class="timeline-content">
-                    <div class="timeline-header">
-                      <span class="step-name">{{ step.stepName }}</span>
-                      <div class="step-actions">
-                        <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdateStep(step)"></el-button>
-                        <el-button type="text" icon="el-icon-delete" size="mini" style="color: #F56C6C;" @click="handleDeleteStep(step)"></el-button>
-                      </div>
-                    </div>
-                    <div v-if="step.remark" class="step-remark">{{ step.remark }}</div>
-                  </div>
-                </el-timeline-item>
-              </el-timeline>
-            </div>
-            <el-empty v-else description="暂无工艺步骤" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-else style="flex: 1; display: flex; flex-direction: column;">
-      <el-empty description="选择工艺后查看步骤" />
-    </div>
-
-    <!-- 新增/编辑工艺弹窗 -->
-    <el-dialog :title="processTitle" :visible.sync="processOpen" width="500px" append-to-body>
-      <el-form ref="processForm" :model="processForm" :rules="processRules" label-width="80px">
-        <el-form-item label="工艺名称" prop="processName">
-          <el-input v-model="processForm.processName" placeholder="请输入工艺名称" />
-        </el-form-item>
-        <el-form-item label="工艺描述" prop="processDesc">
-          <el-input v-model="processForm.processDesc" type="textarea" :rows="3" placeholder="请输入工艺描述" />
+    <!-- 新建工序方案弹窗 -->
+    <el-dialog title="新建工序方案" :visible.sync="createOpen" width="500px" append-to-body
+      :close-on-click-modal="false" custom-class="aps-create-dialog">
+      <template slot="title">
+        <span class="aps-dialog-title">新建工序方案</span>
+      </template>
+      <el-form ref="createForm" :model="createForm" :rules="processRules" label-width="90px">
+        <el-form-item label="方案名称" prop="processName">
+          <el-input v-model="createForm.processName" placeholder="请输入方案名称" maxlength="50" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="processForm.remark" placeholder="请输入备注" />
+          <el-input v-model="createForm.remark" placeholder="请输入备注" maxlength="200" type="textarea" :rows="3" show-word-limit />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" :loading="submitLoading" @click="submitProcessForm">确 定</el-button>
-        <el-button @click="cancelProcess">取 消</el-button>
+        <el-button type="primary" :loading="submitLoading" class="aps-btn-red" @click="submitCreateForm">确 定</el-button>
+        <el-button @click="createOpen = false">取 消</el-button>
       </div>
     </el-dialog>
 
-    <!-- 新增/编辑工艺步骤弹窗 -->
-    <el-dialog :title="stepTitle" :visible.sync="stepOpen" width="500px" append-to-body>
-      <el-form ref="stepForm" :model="stepForm" :rules="stepRules" label-width="80px">
-        <el-form-item label="步骤顺序" prop="stepOrder">
-          <el-input-number v-model="stepForm.stepOrder" :min="1" :max="99" controls-position="right" />
-        </el-form-item>
-        <el-form-item label="步骤名称" prop="stepName">
-          <el-input v-model="stepForm.stepName" placeholder="请输入步骤名称" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="stepForm.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" :loading="submitLoading" @click="submitStepForm">确 定</el-button>
-        <el-button @click="cancelStep">取 消</el-button>
+    <!-- 编辑工序方案弹窗 -->
+    <el-dialog :visible.sync="editOpen" width="640px"
+      :close-on-click-modal="false" top="5vh" @closed="handleEditClosed" custom-class="aps-edit-dialog">
+      <template slot="title">
+        <span class="aps-dialog-title">编辑工序方案</span>
+      </template>
+
+      <div class="aps-dialog-body">
+        <!-- 基础信息 -->
+        <el-form ref="editForm" :model="editForm" :rules="processRules" label-width="80px">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="方案名称" prop="processName">
+                <el-input v-model="editForm.processName" placeholder="请输入方案名称" maxlength="50" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="创建人">
+                <el-select v-model="editForm.createBy" placeholder="请选择创建人" filterable clearable style="width: 100%;">
+                  <el-option v-for="u in userList" :key="u.userId" :label="u.nickName" :value="u.userName" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <div class="aps-divider"></div>
+
+        <!-- 工序步骤 -->
+        <div class="aps-steps-section">
+          <div class="aps-steps-header">
+            <span class="aps-steps-title">工序步骤</span>
+            <el-button class="aps-btn-red" size="mini" icon="el-icon-plus" @click="handleAddCustomStep">
+              自定义工序
+            </el-button>
+          </div>
+          <p class="aps-steps-hint">拖拽调整顺序，点击下方工序添加到方案中</p>
+
+          <!-- 已选工序（拖拽排序） -->
+          <div v-if="editStepList.length > 0" class="aps-selected-flow">
+            <draggable v-model="editStepList" ghost-class="aps-drag-ghost"
+              @end="handleDragEnd" animation="200" class="aps-flow-inner">
+              <div v-for="(step, idx) in editStepList" :key="step._key" class="aps-flow-item">
+                <span class="aps-flow-pill">{{ step.stepName }}</span>
+                <span v-if="idx < editStepList.length - 1" class="aps-flow-arrow">→</span>
+                <el-button type="text" class="aps-flow-remove" icon="el-icon-close"
+                  @click="handleRemoveStep(idx)"></el-button>
+              </div>
+            </draggable>
+          </div>
+          <div v-else class="aps-flow-empty">
+            <span class="aps-flow-empty-text">暂未设置工序，请从下方选择添加</span>
+          </div>
+
+          <!-- 待选工序 -->
+          <div v-if="availableSteps.length > 0" class="aps-available-steps">
+            <span class="aps-avail-label">待选工序：</span>
+            <span v-for="name in availableSteps" :key="name" class="aps-avail-tag"
+              @click="addAvailableStep(name)">
+              {{ name }}
+            </span>
+          </div>
+          <div v-else-if="editStepList.length > 0" class="aps-available-steps">
+            <span class="aps-avail-label" style="color: #bfbfbf;">已添加所有可用工序</span>
+          </div>
+        </div>
+
+        <!-- 备注 -->
+        <div class="aps-remark-section">
+          <div class="aps-remark-label">备注</div>
+          <el-input v-model="editForm.remark" type="textarea" :rows="3" maxlength="200" show-word-limit
+            placeholder="请输入备注" />
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer" style="padding: 10px 20px 16px;">
+        <el-button class="aps-btn-red" :loading="submitLoading" @click="submitEditForm">保存</el-button>
+        <el-button @click="editOpen = false">取消</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
 import { listProcess, getProcess, addProcess, updateProcess, delProcess } from '@/api/aps/process'
 import { listProcessStep, addProcessStep, updateProcessStep, delProcessStep } from '@/api/aps/processStep'
+import { selectUser } from '@/api/system/user'
 
 export default {
   name: 'ApsProcesses',
+  components: { draggable },
   data() {
     return {
-      // 工艺相关
+      // 列表
       processLoading: false,
       processList: [],
       total: 0,
-      currentProcess: null,
       queryParams: {
         processName: '',
         pageNum: 1,
         pageSize: 10
       },
-      processTitle: '',
-      processOpen: false,
-      processForm: {},
+      // 新建
+      createOpen: false,
+      createForm: {},
+      // 编辑
+      editOpen: false,
+      editForm: {},
+      editStepList: [],
+      deletedStepIds: [],
+      userList: [],
+      suggestedSteps: [],
+      // 通用
+      submitLoading: false,
       processRules: {
         processName: [
-          { required: true, message: '工艺名称不能为空', trigger: 'blur' }
-        ]
-      },
-      // 工艺步骤相关
-      stepLoading: false,
-      submitLoading: false,
-      stepList: [],
-      stepTitle: '',
-      stepOpen: false,
-      stepForm: {},
-      stepRules: {
-        stepOrder: [
-          { required: true, message: '步骤顺序不能为空', trigger: 'blur' }
-        ],
-        stepName: [
-          { required: true, message: '步骤名称不能为空', trigger: 'blur' }
+          { required: true, message: '方案名称不能为空', trigger: 'blur' }
         ]
       }
     }
   },
+  computed: {
+    /** 待选工序（排除已选） */
+    availableSteps() {
+      const selected = new Set(this.editStepList.map(s => s.stepName))
+      return this.suggestedSteps.filter(name => !selected.has(name))
+    }
+  },
   created() {
     this.getProcessList()
   },
   methods: {
-    /** 查询工艺列表 */
+    /** 查询列表 */
     getProcessList() {
       this.processLoading = true
       listProcess(this.queryParams).then(res => {
@@ -217,171 +221,174 @@ export default {
         this.processLoading = false
       })
     },
-    /** 搜索 */
+    seqIndex(index) {
+      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
+    },
     handleSearch() {
       this.queryParams.pageNum = 1
       this.getProcessList()
     },
-    /** 重置 */
     resetQuery() {
       this.queryParams.processName = ''
       this.handleSearch()
     },
-    /** 点击工艺 */
-    handleProcessClick(process) {
-      this.currentProcess = process
-      this.getStepList(process.processId)
+
+    // ========== 新建 ==========
+    handleAdd() {
+      this.createForm = { processName: '', remark: '' }
+      this.createOpen = true
+      this.$nextTick(() => {
+        this.resetForm && this.resetForm('createForm')
+      })
     },
-    /** 查询工艺步骤列表 */
-    getStepList(processId) {
-      this.stepLoading = true
-      listProcessStep({ processId }).then(res => {
-        this.stepList = res.rows || []
+    submitCreateForm() {
+      this.$refs['createForm'].validate(valid => {
+        if (!valid) return
+        this.submitLoading = true
+        addProcess(this.createForm).then(() => {
+          this.$modal.msgSuccess('新增成功')
+          this.createOpen = false
+          this.getProcessList()
+        }).catch(() => {}).finally(() => {
+          this.submitLoading = false
+        })
+      })
+    },
+
+    // ========== 编辑 ==========
+    handleEdit(row) {
+      this.editForm = {}
+      this.editStepList = []
+      this.deletedStepIds = []
+      getProcess(row.processId).then(res => {
+        const data = res.data
+        this.editForm = {
+          processId: data.processId,
+          processName: data.processName,
+          createBy: data.createBy,
+          remark: data.remark
+        }
+        this.editStepList = (data.stepList || []).map((s, i) => ({
+          ...s,
+          _key: s.stepId || '_new_' + i
+        }))
+        this.editOpen = true
+        this.loadUsers()
+        this.loadSuggestedSteps()
+      })
+    },
+    loadUsers() {
+      selectUser({ pageSize: 999 }).then(res => {
+        this.userList = res.rows || []
       }).catch(() => {
-        this.stepList = []
-      }).finally(() => {
-        this.stepLoading = false
+        this.userList = []
       })
     },
-    /** 新增工艺 */
-    handleAddProcess() {
-      this.resetProcessForm()
-      this.processTitle = '新增工艺'
-      this.processOpen = true
-    },
-    /** 修改工艺 */
-    handleUpdateProcess(row) {
-      this.resetProcessForm()
-      const processId = row.processId || this.currentProcess.processId
-      getProcess(processId).then(res => {
-        this.processForm = res.data
-        this.processTitle = '修改工艺'
-        this.processOpen = true
+    loadSuggestedSteps() {
+      listProcessStep({ pageSize: 9999 }).then(res => {
+        const names = [...new Set((res.rows || []).map(s => s.stepName).filter(Boolean))]
+        this.suggestedSteps = names
+      }).catch(() => {
+        this.suggestedSteps = []
       })
     },
-    /** 提交工艺表单 */
-    submitProcessForm() {
-      this.$refs['processForm'].validate(valid => {
-        if (valid) {
-          this.submitLoading = true
-          if (this.processForm.processId != undefined) {
-            updateProcess(this.processForm).then(response => {
-              this.$modal.msgSuccess('修改成功')
-              this.processOpen = false
-              this.getProcessList()
-            }).finally(() => {
-              this.submitLoading = false
-            })
-          } else {
-            addProcess(this.processForm).then(response => {
-              this.$modal.msgSuccess('新增成功')
-              this.processOpen = false
-              this.getProcessList()
-            }).finally(() => {
-              this.submitLoading = false
-            })
+    handleDragEnd() {
+      // 拖拽后自动更新 stepOrder，保存时一并提交
+    },
+    handleRemoveStep(idx) {
+      const step = this.editStepList[idx]
+      if (step.stepId) {
+        this.deletedStepIds.push(step.stepId)
+      }
+      this.editStepList.splice(idx, 1)
+    },
+    async submitEditForm() {
+      this.$refs['editForm'].validate(async valid => {
+        if (!valid) return
+        this.submitLoading = true
+        try {
+          // 1. 保存工序方案
+          await updateProcess(this.editForm)
+          const processId = this.editForm.processId
+
+          // 2. 删除已移除的步骤
+          for (const stepId of this.deletedStepIds) {
+            await delProcessStep(stepId)
           }
+
+          // 3. 保存当前步骤（新增或更新）
+          for (let i = 0; i < this.editStepList.length; i++) {
+            const step = this.editStepList[i]
+            step.stepOrder = i + 1
+            step.processId = processId
+            if (step.stepId != null) {
+              await updateProcessStep({
+                stepId: step.stepId,
+                stepOrder: step.stepOrder,
+                stepName: step.stepName,
+                processId: processId
+              })
+            } else {
+              await addProcessStep({
+                stepOrder: step.stepOrder,
+                stepName: step.stepName,
+                processId: processId
+              })
+            }
+          }
+
+          this.$modal.msgSuccess('保存成功')
+          this.editOpen = false
+          this.getProcessList()
+        } catch (e) {
+          // 由 axios 拦截器处理
+        } finally {
+          this.submitLoading = false
         }
       })
     },
-    /** 删除工艺 */
-    handleDeleteProcess(row) {
-      const processIds = row.processId || this.currentProcess.processId
-      this.$modal.confirm('是否确认删除该工艺？').then(() => {
-        return delProcess(processIds)
+    handleEditClosed() {
+      this.editForm = {}
+      this.editStepList = []
+      this.deletedStepIds = []
+    },
+
+    // ========== 添加工序 ==========
+    /** 点击待选工序标签直接添加 */
+    addAvailableStep(name) {
+      this.editStepList.push({ stepName: name, _key: '_new_' + Date.now() })
+    },
+    /** 自定义工序名称（弹窗输入后加入待选区域） */
+    handleAddCustomStep() {
+      this.$prompt('请输入工序名称', '自定义工序', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /\S+/,
+        inputErrorMessage: '工序名称不能为空'
+      }).then(({ value }) => {
+        const name = value.trim()
+        if (this.suggestedSteps.includes(name)) {
+          this.$modal.msgWarning('该工序已在待选列表中')
+          return
+        }
+        this.suggestedSteps.push(name)
+      }).catch(() => {})
+    },
+
+    // ========== 删除工序方案 ==========
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除工序方案「' + row.processName + '」？').then(() => {
+        return delProcess(row.processId)
       }).then(() => {
+        this.$modal.msgSuccess('删除成功')
         this.getProcessList()
-        this.$modal.msgSuccess('删除成功')
-        this.currentProcess = null
-        this.stepList = []
       }).catch(() => {})
     },
-    /** 取消工艺弹窗 */
-    cancelProcess() {
-      this.processOpen = false
-      this.resetProcessForm()
-    },
-    /** 重置工艺表单 */
-    resetProcessForm() {
-      this.processForm = {
-        processId: undefined,
-        processName: undefined,
-        processDesc: undefined,
-        remark: undefined
+
+    resetForm(formName) {
+      if (this.$refs[formName]) {
+        this.$refs[formName].resetFields()
       }
-      this.resetForm('processForm')
-    },
-    /** 新增步骤 */
-    handleAddStep() {
-      this.resetStepForm()
-      this.stepForm.processId = this.currentProcess.processId
-      // 自动计算下一步骤顺序
-      if (this.stepList.length > 0) {
-        const maxOrder = Math.max(...this.stepList.map(s => s.stepOrder || 0))
-        this.stepForm.stepOrder = maxOrder + 1
-      } else {
-        this.stepForm.stepOrder = 1
-      }
-      this.stepTitle = '新增工艺步骤'
-      this.stepOpen = true
-    },
-    /** 修改步骤 */
-    handleUpdateStep(row) {
-      this.resetStepForm()
-      this.stepForm = { ...row }
-      this.stepTitle = '修改工艺步骤'
-      this.stepOpen = true
-    },
-    /** 提交步骤表单 */
-    submitStepForm() {
-      this.$refs['stepForm'].validate(valid => {
-        if (valid) {
-          this.submitLoading = true
-          if (this.stepForm.stepId != undefined) {
-            updateProcessStep(this.stepForm).then(response => {
-              this.$modal.msgSuccess('修改成功')
-              this.stepOpen = false
-              this.getStepList(this.currentProcess.processId)
-            }).finally(() => {
-              this.submitLoading = false
-            })
-          } else {
-            addProcessStep(this.stepForm).then(response => {
-              this.$modal.msgSuccess('新增成功')
-              this.stepOpen = false
-              this.getStepList(this.currentProcess.processId)
-            }).finally(() => {
-              this.submitLoading = false
-            })
-          }
-        }
-      })
-    },
-    /** 删除步骤 */
-    handleDeleteStep(row) {
-      const stepIds = row.stepId
-      this.$modal.confirm('是否确认删除该工艺步骤？').then(() => {
-        return delProcessStep(stepIds)
-      }).then(() => {
-        this.getStepList(this.currentProcess.processId)
-        this.$modal.msgSuccess('删除成功')
-      }).catch(() => {})
-    },
-    /** 取消步骤弹窗 */
-    cancelStep() {
-      this.stepOpen = false
-      this.resetStepForm()
-    },
-    /** 重置步骤表单 */
-    resetStepForm() {
-      this.stepForm = {
-        stepId: undefined,
-        processId: undefined,
-        stepOrder: undefined,
-        stepName: undefined,
-        remark: undefined
-      }
-      this.resetForm('stepForm')
     }
   }
 }
@@ -391,47 +398,26 @@ export default {
 @import './scss/aps-theme.scss';
 
 .app-container {
-  overflow: hidden;
-  padding: 0;
+  padding: 16px 20px;
 }
 
-.left-panel {
-  height: calc(100vh - 84px);
-  box-sizing: border-box;
-  overflow-y: auto;
+.aps-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
 }
 
-.right-panel {
-  height: calc(100vh - 84px);
-  overflow: hidden;
-  min-height: 0;
+.aps-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.custom-list {
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.list-item {
-  padding: 12px;
-  border-bottom: 2px solid #dddddd;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.list-item:hover {
-  background-color: $aps-silver-1;
-}
-
-.list-item-active {
-  background-color: $aps-red-1;
-  border-left: 3px solid $aps-red-2;
-}
-
-.aps-total-count {
-  color: $aps-red-2;
-  font-weight: bold;
+.aps-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .aps-btn-red {
@@ -442,148 +428,236 @@ export default {
   @include aps-btn-silver;
 }
 
-.detail-panel {
-  flex: 1;
-  overflow-y: scroll;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  background: $aps-bg;
-  min-height: 0;
-}
-
-.detail-card {
-  background: $aps-white;
-  border: 1px solid $aps-border;
-  border-radius: $aps-radius;
-  box-shadow: $aps-shadow-sm;
-}
-
-.detail-card-header {
-  background: linear-gradient(to right, $aps-red-2, $aps-red-3);
-  color: white;
-  padding: 8px 14px;
-  font-size: 13px;
+// 工序ID徽章
+.aps-id-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  background: #f5f5f5;
+  color: #8c8c8c;
   font-weight: 600;
+  font-family: 'Consolas', monospace;
+  font-size: 13px;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+  line-height: 1.4;
+}
+
+// 涉及工序流程
+.aps-step-flow {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+}
+
+.aps-step-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.aps-step-pill {
+  display: inline-block;
+  padding: 2px 12px;
+  background: #fff1f0;
+  color: $aps-red-2;
+  font-size: 12px;
+  border-radius: 10px;
+  border: 1px solid #ffd4d2;
+  line-height: 1.6;
+  white-space: nowrap;
+}
+
+.aps-step-arrow {
+  margin: 0 4px;
+  color: #bfbfbf;
+  font-size: 14px;
+  font-weight: 300;
+  user-select: none;
+}
+
+.aps-empty {
+  padding: 40px 0;
+  display: flex;
+  justify-content: center;
+}
+
+// ========== 编辑弹窗 ==========
+
+// 红色标题栏
+::v-deep .aps-edit-dialog .el-dialog__header,
+::v-deep .aps-create-dialog .el-dialog__header {
+  background: $aps-red-2;
+  padding: 10px 20px;
+  border-radius: 4px 4px 0 0;
+}
+
+::v-deep .aps-edit-dialog .el-dialog__header {
+  padding: 14px 20px;
+}
+
+.aps-dialog-title {
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+// 关闭按钮变白色
+::v-deep .aps-edit-dialog .el-dialog__headerbtn .el-dialog__close,
+::v-deep .aps-create-dialog .el-dialog__headerbtn .el-dialog__close {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 16px;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+.aps-dialog-body {
+  padding: 4px 0;
+}
+
+.aps-divider {
+  height: 1px;
+  background: #e8e8e8;
+  margin: 16px 0;
+}
+
+// 工序步骤区域
+.aps-steps-section {
+  margin-bottom: 16px;
+}
+
+.aps-steps-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 4px;
 }
 
-.detail-card-body {
-  padding: 14px;
+.aps-steps-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $aps-silver-5;
 }
 
-.form-grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px 16px;
+.aps-steps-hint {
+  margin: 0 0 12px 0;
+  font-size: 12px;
+  color: #bfbfbf;
 }
 
-.form-field {
+// ===== 已选工序流（拖拽 + 药丸箭头样式） =====
+.aps-selected-flow {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 8px 12px;
+  background: #fafafa;
+  min-height: 36px;
+  margin-bottom: 12px;
+}
+
+.aps-flow-inner {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
 }
 
-.form-field label {
-  font-size: 11px;
-  color: $aps-text-muted;
-  font-weight: 500;
+.aps-flow-item {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 2px 0;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
 }
 
-.form-field .field-value {
+.aps-flow-pill {
+  display: inline-block;
+  padding: 2px 12px;
+  background: #fff1f0;
+  color: $aps-red-2;
+  font-size: 12px;
+  border-radius: 10px;
+  border: 1px solid #ffd4d2;
+  line-height: 1.6;
+  white-space: nowrap;
+}
+
+.aps-flow-arrow {
+  margin: 0 4px;
+  color: #bfbfbf;
+  font-size: 14px;
+  font-weight: 300;
+  user-select: none;
+}
+
+.aps-flow-remove {
+  color: #d9d9d9 !important;
   font-size: 13px;
-  color: $aps-text;
-  padding: 4px 0;
-  border-bottom: 1px solid $aps-silver-mid;
-}
+  padding: 2px !important;
+  margin-left: 2px;
 
-.aps-product-table {
-  width: 100%;
-
-  ::v-deep th {
-    background: $aps-silver-1 !important;
-    color: $aps-silver-5 !important;
-    font-weight: 600 !important;
+  &:hover {
+    color: $aps-red-2 !important;
   }
 }
 
-// ====== 工艺步骤时间线 ======
-.process-timeline-wrap {
-  padding: 20px 10px;
-
-  ::v-deep .el-timeline {
-    padding-left: 10px;
-  }
-
-  ::v-deep .el-timeline-item__wrapper {
-    padding-left: 20px;
-  }
-
-  ::v-deep .el-timeline-item__timestamp {
-    font-size: 12px;
-    font-weight: 600;
-    color: $aps-text-muted;
-  }
-
-  ::v-deep .el-timeline-item__tail {
-    border-left-color: $aps-silver-3;
-  }
-
-  ::v-deep .el-timeline-item__node--primary {
-    background-color: $aps-red-2;
-    border-color: $aps-red-2;
-  }
-
-  ::v-deep .el-timeline-item__node--success {
-    background-color: #67C23A;
-    border-color: #67C23A;
-  }
+.aps-flow-empty {
+  border: 1px dashed #e8e8e8;
+  border-radius: 4px;
+  padding: 14px 0;
+  text-align: center;
+  margin-bottom: 12px;
 }
 
-.timeline-content {
-  background: $aps-white;
-  border: 1px solid $aps-border;
-  border-radius: $aps-radius;
-  padding: 12px 16px;
-  transition: box-shadow 0.2s, border-color 0.2s;
+.aps-flow-empty-text {
+  font-size: 12px;
+  color: #bfbfbf;
+}
+
+.aps-drag-ghost {
+  opacity: 0.4;
+  background: #fff1f0;
+  border-radius: 10px;
+}
+
+// ===== 待选工序 =====
+.aps-available-steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 0;
+}
+
+.aps-avail-label {
+  font-size: 12px;
+  color: #909399;
+  margin-right: 2px;
+  white-space: nowrap;
+}
+
+.aps-avail-tag {
+  display: inline-block;
+  padding: 3px 14px;
+  font-size: 12px;
+  color: $aps-silver-5;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
 
   &:hover {
     border-color: $aps-red-2;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    color: $aps-red-2;
+    background: #fff1f0;
   }
 }
-
-.timeline-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.step-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: $aps-text;
-}
-
-.step-actions {
-  display: flex;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.2s;
-
-  .timeline-content:hover & {
-    opacity: 1;
-  }
-}
-
-.step-remark {
-  margin-top: 8px;
-  font-size: 12px;
-  color: $aps-text-muted;
-  padding-top: 8px;
-  border-top: 1px dashed $aps-silver-3;
-}
 </style>