工艺路线替换回去，参数功能添加、dist.js修改字典增加id

zhangwencui

2 天以前 ec5bd9a7abba71e9234fa0d327e8261f89723603

 src/views/productionManagement/processRoute/index.vue

@@ -1,1201 +1,232 @@
<template>
  <div class="app-container">
    <div class="route-header">
      <div class="add-route-btn"
           @click="handleAddRoute">
        <el-icon>
          <Plus />
        </el-icon>
        <span>新增工艺路线</span>
      </div>
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="规格名称:">
          <el-input v-model="searchForm.model"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    style="width: 200px;"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="route-card-list">
      <div v-for="route in routeList"
           :key="route.id"
           class="route-card">
        <div class="card-header">
          <div class="route-info">
            <span class="route-name"><el-icon style="margin-right: 8px;line-height: 30px;">
                <ScaleToOriginal />
              </el-icon>{{route.routeCode }}<el-tag style="margin-left: 8px"
                      :type="!route.status ? 'warning' : 'success'">{{ !route.status ? '草稿' : '批准' }}</el-tag></span>
            <!-- <span class="route-code">{{ route.routeCode }}</span> -->
          </div>
          <div class="route-actions">
            <el-button v-if="!route.status"
                       link
                       type="success"
                       @click="handleApproveRoute(route)">
              <el-icon>
                <Check />
              </el-icon>
              批准
            </el-button>
            <el-button v-if="route.status"
                       link
                       type="warning"
                       @click="handleRevokeApproveRoute(route)">
              <el-icon>
                <Close />
              </el-icon>
              撤销批准
            </el-button>
            <el-button link
                       type="primary"
                       @click="handleEditRoute(route)">
              <el-icon>
                <Edit />
              </el-icon>
              编辑
            </el-button>
            <el-button link
                       type="danger"
                       @click="handleDeleteRoute(route)">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
        <div class="card-body">
          <div class="route-meta">
            <span class="meta-item">
              <el-icon>
                <Box />
              </el-icon>
              <span class="meta-label">产品:</span>
              <span class="meta-value">{{ route.productName }} - {{ route.productModelName }}</span>
            </span>
            <span class="meta-item">
              <el-icon>
                <Document />
              </el-icon>
              <span class="meta-label">BOM:</span>
              <span class="meta-value">{{ route.bomNo || '-' }}</span>
            </span>
            <span class="meta-item">
              <el-icon>
                <Document />
              </el-icon>
              <span class="meta-label">备注:</span>
              <span class="meta-value">{{ route.description || '暂无描述' }}</span>
            </span>
          </div>
          <div class="expand-btn-wrapper">
            <el-button class="expand-btn"
                       :class="{ expanded: route.expanded }"
                       type="primary"
                       text
                       @click="toggleExpand(route)">
              <span class="btn-text">{{ route.expanded ? '收起工序路线' : '展开工序路线' }}</span>
              <el-icon class="expand-icon">
                <component :is="route.expanded ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
            </el-button>
          </div>
        </div>
        <div v-if="route.expanded"
             class="process-route">
          <div class="process-flow">
            <div v-for="(process, index) in route.processList"
                 :key="process.id"
                 class="process-flow-item"
                 draggable="true"
                 @dragstart="handleDragStart($event, index, route.id)"
                 @dragover="handleDragOver($event)"
                 @drop="handleDrop($event, index, route.id)"
                 @dragend="handleDragEnd">
              <div class="process-node"
                   :class="{ expanded: process.expanded }">
                <div class="process-node-header">
                  <div class="process-number">{{ index + 1 }}</div>
                  <div class="process-actions">
                    <el-button link
                               type="primary"
                               @click="handleEditProcessSelect(route, index, process)">
                      <el-icon>
                        <Edit />
                      </el-icon>
                    </el-button>
                    <el-button link
                               type="danger"
                               @click="handleDeleteProcess(route.id, process)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
                <div class="process-node-body">
                  <!-- <div class="process-code">{{ process.processId }}</div> -->
                  <div class="process-name">{{ process.processName }}</div>
                  <!-- <div class="process-desc">{{ process.remark || '暂无描述' }}</div> -->
                </div>
                <div class="process-node-footer">
                  <!-- <el-tag size="small"
                          :type="process.status === '1' ? 'success' : 'info'">
                    {{ process.status === '1' ? '启用' : '停用' }}
                  </el-tag> -->
                  <el-button type="primary"
                             link
                             size="small"
                             @click="toggleProcessParams(process)">
                    {{ process.expanded ? '收起参数' : '展开参数' }}
                    ({{ process.paramCount }})
                  </el-button>
                </div>
                <div v-if="process.expanded"
                     class="process-params-section">
                  <div class="params-header">
                    <span>参数列表</span>
                    <el-button type="primary"
                               link
                               size="small"
                               @click="handleAddParam(route.id, process)">
                      <el-icon>
                        <Plus />
                      </el-icon>新增
                    </el-button>
                  </div>
                  <div class="params-list">
                    <div v-for="param in process.paramList"
                         :key="param.id"
                         class="param-item">
                      <div class="param-info">
                        <span class="param-code">{{ param.paramName }}</span>
                        <!-- <span class="param-name">{{ param.paramName }}</span> -->
                        <!-- <el-tag size="small"
                                style="margin-right: 20px;"
                                :type="getParamTypeTag(param.parameterType)">
                          {{ param.parameterType }}
                        </el-tag> -->
                        <span v-if="param.valueMode==1"
                              class="param-value">标准值：{{ param.standardValue || "-" }} {{ param.unit }}</span>
                        <span v-else
                              class="param-value">标准值：{{ param.minValue || "-" }}-{{ param.maxValue || "-" }} {{ param.unit }}</span>
                      </div>
                      <div class="param-actions">
                        <el-button link
                                   type="primary"
                                   size="small"
                                   @click="handleEditParam(route.id, process, param)">
                          编辑
                        </el-button>
                        <el-button link
                                   type="danger"
                                   size="small"
                                   @click="handleDeleteParam(route.id, process, param)">
                          删除
                        </el-button>
                      </div>
                    </div>
                    <el-empty v-if="!process.paramList || process.paramList.length === 0"
                              description="暂无参数"
                              :image-size="50" />
                  </div>
                </div>
              </div>
              <div v-if="index < route.processList.length - 1"
                   class="flow-arrow">
                <el-icon>
                  <Right />
                </el-icon>
              </div>
            </div>
            <div class="add-process-node"
                 @click="handleSelectProcess(route, index)">
              <el-icon>
                <Plus />
              </el-icon>
              <span>新增工序</span>
            </div>
          </div>
        </div>
    <div class="table_list">
      <div style="text-align: right"
           class="mb10">
        <el-button type="primary"
                   @click="showNewModal">新增工艺路线</el-button>
        <el-button type="danger"
                   @click="handleDelete"
                   :disabled="selectedRows.length === 0"
                   plain>删除工艺路线</el-button>
      </div>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total" />
    </div>
    <!-- 分页控件 -->
    <div class="pagination-container">
      <el-pagination v-model:current-page="routePage.current"
                     v-model:page-size="routePage.size"
                     :page-sizes="[10, 20, 50, 100]"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="routePage.total"
                     @size-change="handleRouteSizeChange"
                     @current-change="handleRouteCurrentChange" />
    </div>
    <!-- 工艺路线新增/编辑对话框 -->
    <el-dialog v-model="routeDialogVisible"
               :title="isRouteEdit ? '编辑工艺路线' : '新增工艺路线'"
               width="500px">
      <el-form :model="routeForm"
               :rules="routeRules"
               ref="routeFormRef"
               label-width="120px">
        <el-form-item label="产品名称"
                      prop="productModelId">
          <el-button type="primary"
                     @click="handleProcessProductSelectClick2">
            {{ routeForm.productName && routeForm.productModelName 
              ? `${routeForm.productName} - ${routeForm.productModelName}` 
              : '选择产品' }}
          </el-button>
        </el-form-item>
        <el-form-item label="BOM"
                      prop="bomId">
          <el-select v-model="routeForm.bomId"
                     placeholder="请选择BOM"
                     clearable
                     :disabled="!routeForm.productModelId || bomOptions.length === 0"
                     style="width: 100%">
            <el-option v-for="item in bomOptions"
                       :key="item.id"
                       :label="item.bomNo || `BOM-${item.id}`"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="路线编码"
                      prop="routeCode">
          <el-input v-model="routeForm.routeCode"
                    disabled
                    placeholder="自动生成" />
        </el-form-item>
        <el-form-item label="备注"
                      prop="description">
          <el-input v-model="routeForm.description"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入路线描述" />
        </el-form-item>
        <!-- <el-form-item label="状态"
                      prop="status">
          <el-radio-group v-model="routeForm.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="routeDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="handleRouteSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 产品选择弹窗 -->
    <ProductSelectDialog v-model="showProductSelectDialog"
                         @confirm="handleProductSelect"
                         single />
    <!-- 工序新增/编辑对话框 -->
    <el-dialog v-model="processDialogVisible"
               :title="isProcessEdit ? '编辑工序' : '新增工序'"
               width="500px">
      <el-form :model="processForm"
               :rules="processRules"
               ref="processFormRef"
               label-width="120px">
        <el-form-item label="工序编码"
                      prop="no">
          <el-input v-model="processForm.no"
                    placeholder="请输入工序编码" />
        </el-form-item>
        <el-form-item label="工序名称"
                      prop="name">
          <el-input v-model="processForm.name"
                    placeholder="请输入工序名称" />
        </el-form-item>
        <el-form-item label="工序描述"
                      prop="remark">
          <el-input v-model="processForm.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入工序描述" />
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-radio-group v-model="processForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="handleProcessSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择工序对话框 -->
    <el-dialog v-model="selectProcessDialogVisible"
               title="选择工序"
               width="1000px">
      <div class="process-select-container">
        <!-- 左侧工序列表 -->
        <div class="process-list-area">
          <div class="area-title">可选工序</div>
          <div class="search-box">
            <el-input v-model="processSearchKeyword"
                      placeholder="请输入工序名称搜索"
                      clearable
                      size="small"
                      @input="handleProcessSearch">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <el-table :data="filteredProcessList"
                    height="360"
                    border
                    highlight-current-row
                    @current-change="handleProcessSelect">
            <el-table-column prop="no"
                             label="工序编号"
                             width="100" />
            <el-table-column prop="name"
                             label="工序名称" />
            <el-table-column prop="remark"
                             label="工序描述" />
            <el-table-column prop="status"
                             label="状态"
                             width="80">
              <template #default="scope">
                <el-tag size="small"
                        :type="scope.row.status ? 'success' : 'info'">
                  {{ scope.row.status ? '启用' : '停用' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 右侧工序详情 -->
        <div class="process-detail-area">
          <div class="area-title">工序详情</div>
          <el-form v-if="selectedProcessItem"
                   :model="processForm"
                   label-width="100px"
                   class="process-detail-form">
            <el-form-item label="工序编号">
              <span class="detail-text">{{ selectedProcessItem.no }}</span>
            </el-form-item>
            <el-form-item label="工序名称">
              <span class="detail-text">{{ selectedProcessItem.name }}</span>
            </el-form-item>
            <el-form-item label="工序描述">
              <span class="detail-text">{{ selectedProcessItem.remark || '-' }}</span>
            </el-form-item>
            <el-form-item label="状态">
              <el-tag size="small"
                      :type="selectedProcessItem.status ? 'success' : 'info'">
                {{ selectedProcessItem.status ? '启用' : '停用' }}
              </el-tag>
            </el-form-item>
            <el-form-item label="是否质检">
              <el-tag size="small"
                      :type="selectedProcessItem.isQuality ? 'success' : 'info'">
                {{ selectedProcessItem.isQuality ? '质检' : '非质检' }}
              </el-tag>
            </el-form-item>
            <el-form-item label="产品名称"
                          prop="productModelId">
              <el-button type="primary"
                         @click="handleProcessProductSelectClick">
                {{ processForm.productName && processForm.model 
                  ? `${processForm.productName} - ${processForm.model}` 
                  : '选择产品' }}
              </el-button>
            </el-form-item>
            <el-form-item label="单位"
                          prop="unit">
              <el-input v-model="processForm.unit"
                        :placeholder="processForm.productModelId ? '根据选择的产品自动带出' : '请先选择产品' "
                        clearable
                        :disabled="true" />
            </el-form-item>
            <el-form-item label="是否质检"
                          prop="isQuality">
              <el-switch v-model="processForm.isQuality"
                         :active-value="true"
                         inactive-value="false" />
            </el-form-item>
          </el-form>
          <el-empty v-else
                    description="请从左侧选择工序" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="selectProcessDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     :disabled="!selectedProcessItem || !processForm.productModelId"
                     @click="handleProcessSelectSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 参数新增/编辑对话框 -->
    <el-dialog v-model="paramDialogVisible"
               :title="isParamEdit ? '编辑参数' : '新增参数'"
               width="500px">
      <el-form :model="paramForm"
               :rules="paramRules"
               ref="paramFormRef"
               label-width="120px">
        <el-form-item label="参数编号"
                      prop="parameterCode">
          <el-input v-model="paramForm.parameterCode"
                    placeholder="请输入参数编号" />
        </el-form-item>
        <el-form-item label="参数名称"
                      prop="parameterName">
          <el-input v-model="paramForm.parameterName"
                    placeholder="请输入参数名称" />
        </el-form-item>
        <el-form-item label="参数模式"
                      prop="parameterType2">
          <el-select v-model="paramForm.parameterType2"
                     placeholder="请选择参数模式">
            <el-option label="单值"
                       value="1" />
            <el-option label="区间"
                       value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="参数类型"
                      prop="parameterType">
          <el-select v-model="paramForm.parameterType"
                     @change="handleParamTypeChange"
                     placeholder="请选择参数类型">
            <el-option label="数值格式"
                       value="数值格式" />
            <el-option label="文本格式"
                       value="文本格式" />
            <el-option label="下拉选项"
                       value="下拉选项" />
            <el-option label="时间格式"
                       value="时间格式" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="paramForm.parameterType === '下拉选项'"
                      label="数据字典"
                      prop="parameterFormat">
          <el-select v-model="paramForm.parameterFormat"
                     placeholder="请选择数据字典">
            <el-option v-for="item in dictTypes"
                       :key="item.dictType"
                       :label="item.dictName"
                       :value="item.dictType" />
          </el-select>
        </el-form-item>
        <el-form-item v-else-if="paramForm.parameterType === '时间格式'"
                      label="时间格式"
                      prop="parameterFormat">
          <el-select v-model="paramForm.parameterFormat"
                     placeholder="请选择时间格式">
            <el-option label="YYYY-MM-DD HH:mm:ss"
                       value="YYYY-MM-DD HH:mm:ss" />
            <el-option label="YYYY-MM-DD"
                       value="YYYY-MM-DD" />
          </el-select>
        </el-form-item>
        <el-form-item v-else
                      label="参数格式"
                      prop="parameterFormat">
          <el-input v-model="paramForm.parameterFormat"
                    placeholder="请输入参数格式" />
        </el-form-item>
        <el-form-item label="标准值"
                      prop="standardValue">
          <el-input v-model="paramForm.standardValue"
                    placeholder="请输入标准值" />
        </el-form-item>
        <el-form-item label="单位"
                      prop="unit">
          <el-input v-model="paramForm.unit"
                    placeholder="请输入单位" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paramDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="handleParamSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择参数对话框 -->
    <el-dialog v-model="selectParamDialogVisible"
               title="选择参数"
               width="1000px">
      <div class="param-select-container">
        <!-- 左侧参数列表 -->
        <div class="param-list-area">
          <div class="area-title">可选参数</div>
          <div class="search-box">
            <el-input v-model="paramSearchKeyword"
                      placeholder="请输入参数名称搜索"
                      clearable
                      size="small"
                      @input="handleParamSearch">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <el-table :data="filteredParamList"
                    height="300"
                    border
                    highlight-current-row
                    @current-change="handleParamSelect">
            <el-table-column prop="paramName"
                             label="参数名称" />
            <el-table-column prop="paramType"
                             label="参数类型">
              <template #default="scope">
                <el-tag size="small"
                        :type="getParamTypeTag(scope.row.paramType)">
                  {{ getParamTypeText(scope.row.paramType) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页控件 -->
          <div class="pagination-container"
               style="margin-top: 10px;">
            <el-pagination v-model:current-page="paramPage.current"
                           v-model:page-size="paramPage.size"
                           :page-sizes="[10, 20, 50, 100]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="paramPage.total"
                           @size-change="handleParamSizeChange"
                           @current-change="handleParamCurrentChange"
                           size="small" />
          </div>
        </div>
        <!-- 右侧参数详情 -->
        <div class="param-detail-area">
          <div class="area-title">参数详情</div>
          <el-form v-if="selectedParam"
                   :model="selectedParam"
                   label-width="100px"
                   class="param-detail-form">
            <el-form-item label="参数名称">
              <span class="detail-text">{{ selectedParam.paramName }}</span>
            </el-form-item>
            <el-form-item label="参数模式">
              <el-tag size="small"
                      :type="selectedParam.valueMode == '1' ? 'success' : 'warning'">
                {{ selectedParam.valueMode == '1' ? '单值' : '区间' }}
              </el-tag>
            </el-form-item>
            <el-form-item label="参数类型">
              <el-tag size="small"
                      :type="getParamTypeTag(selectedParam.paramType)">
                {{ getParamTypeText(selectedParam.paramType) }}
              </el-tag>
            </el-form-item>
            <el-form-item label="参数格式">
              <span class="detail-text">{{ selectedParam.paramFormat || '-' }}</span>
            </el-form-item>
            <el-form-item label="单位">
              <span class="detail-text">{{ selectedParam.unit || '-' }}</span>
            </el-form-item>
            <el-form-item label="标准值"
                          v-if="selectedParam.valueMode == '1' && selectedParam.paramType == '1'">
              <el-input v-model="selectedParam.standardValue"
                        type="number"
                        placeholder="请输入默认值" />
            </el-form-item>
            <el-form-item label="最小值"
                          v-if="selectedParam.valueMode == '2' && selectedParam.paramType == '1'">
              <el-input v-model="selectedParam.minValue"
                        type="number"
                        placeholder="请输入最小值" />
            </el-form-item>
            <el-form-item label="最大值"
                          v-if="selectedParam.valueMode == '2' && selectedParam.paramType == '1'">
              <el-input v-model="selectedParam.maxValue"
                        type="number"
                        placeholder="请输入最大值" />
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="selectedParam.sort"
                        type="number"
                        placeholder="请输入排序" />
            </el-form-item>
            <el-form-item label="是否必填">
              <el-switch v-model="selectedParam.isRequired"
                         :active-value="1"
                         :inactive-value="0" />
            </el-form-item>
          </el-form>
          <el-empty v-else
                    description="请从左侧选择参数" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="selectParamDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     :disabled="!selectedParam"
                     @click="handleParamSelectSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑参数对话框 -->
    <el-dialog v-model="editParamDialogVisible"
               title="编辑参数"
               width="600px">
      <el-form :model="editParamForm"
               :rules="editParamRules"
               ref="editParamFormRef"
               label-width="120px">
        <el-form-item label="参数名称">
          <span class="detail-text">{{ editParamForm.paramName }}</span>
        </el-form-item>
        <el-form-item label="参数模式">
          <el-tag size="small"
                  :type="editParamForm.valueMode == '1' ? 'success' : 'warning'">
            {{ editParamForm.valueMode == '1' ? '单值' : '区间' }}
          </el-tag>
        </el-form-item>
        <el-form-item label="参数类型">
          <el-tag size="small"
                  :type="getParamTypeTag(editParamForm.paramType)">
            {{ getParamTypeText(editParamForm.paramType) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="参数格式">
          <span class="detail-text">{{ editParamForm.paramFormat || '-' }}</span>
        </el-form-item>
        <el-form-item label="单位">
          <span class="detail-text">{{ editParamForm.unit || '-' }}</span>
        </el-form-item>
        <el-form-item label="标准值"
                      v-if="editParamForm.valueMode == '1' && editParamForm.paramType == '1'"
                      prop="standardValue">
          <el-input v-model="editParamForm.standardValue"
                    type="number"
                    placeholder="请输入标准值" />
        </el-form-item>
        <el-form-item label="最小值"
                      v-if="editParamForm.valueMode == '2' && editParamForm.paramType == '1'"
                      prop="minValue">
          <el-input v-model="editParamForm.minValue"
                    type="number"
                    placeholder="请输入最小值" />
        </el-form-item>
        <el-form-item label="最大值"
                      v-if="editParamForm.valueMode == '2' && editParamForm.paramType == '1'"
                      prop="maxValue">
          <el-input v-model="editParamForm.maxValue"
                    type="number"
                    placeholder="请输入最大值" />
        </el-form-item>
        <el-form-item label="排序"
                      prop="sort">
          <el-input v-model="editParamForm.sort"
                    type="number"
                    placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="是否必填"
                      prop="isRequired">
          <el-switch v-model="editParamForm.isRequired"
                     :active-value="1"
                     :inactive-value="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editParamDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="handleEditParamSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <new-process v-if="isShowNewModal"
                 v-model:visible="isShowNewModal"
                 @completed="getList" />
    <edit-process v-if="isShowEditModal"
                  v-model:visible="isShowEditModal"
                  :record="record"
                  @completed="getList" />
    <route-item-form v-if="isShowItemModal"
                     v-model:visible="isShowItemModal"
                     :record="record"
                     @completed="getList" />
  </div>
</template>

<script setup>
  import { ref, reactive, getCurrentInstance, onMounted } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
  import NewProcess from "@/views/productionManagement/processRoute/New.vue";
  import EditProcess from "@/views/productionManagement/processRoute/Edit.vue";
  import RouteItemForm from "@/views/productionManagement/processRoute/ItemsForm.vue";
  import {
    Plus,
    Edit,
    Delete,
    ArrowUp,
    ArrowDown,
    Right,
    Search,
    Check,
    Close,
    Box,
    Document,
  } from "@element-plus/icons-vue";
  import { listType } from "@/api/system/dict/type";
  import { getByModel } from "@/api/productionManagement/productBom.js";
  import { add, update, del } from "@/api/productionManagement/processRoute.js";
  import {
    addOrUpdateProcessRouteItem,
    batchDeleteProcessRouteItem,
    sortProcessRouteItem,
    findProcessRouteItemList,
    getProcessParamList,
    addProcessRouteItemParam,
    editProcessRouteItemParam,
    delProcessRouteItemParam,
  } from "@/api/productionManagement/processRouteItem.js";
  import { list as getProcessListApi } from "@/api/productionManagement/productionProcess.js";
  import { getBaseParamList } from "@/api/basicData/parameterMaintenance.js";
  import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
    listPage,
    del,
    update,
  } from "@/api/productionManagement/processRoute.js";
  import { useRouter } from "vue-router";
  import { ElMessageBox, ElMessage } from "element-plus";

  // 工艺路线列表
  const routeList = ref([]);
  const dictTypes = ref([]);

  // 工艺路线分页
  const routePage = reactive({
  const router = useRouter();
  const data = reactive({
    searchForm: {
      model: "",
    },
  });
  const { searchForm } = toRefs(data);
  const tableColumn = ref([
    {
      label: "工艺路线编号",
      prop: "processRouteCode",
    },
    {
      label: "产品名称",
      prop: "productName",
    },
    {
      label: "规格名称",
      prop: "model",
    },
    {
      label: "BOM编号",
      prop: "bomNo",
    },
    {
      label: "描述",
      prop: "description",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 280,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            showEditModal(row);
          },
        },
        {
          name: "路线项目",
          type: "text",
          clickFun: row => {
            showItemModal(row);
          },
        },
        {
          name: "批准",
          type: "primary",
          text: true,
          showHide: row => {
            return !row.status;
          },
          clickFun: row => {
            handleApproveRoute(row);
          },
        },
        {
          name: "取消批准",
          type: "warning",
          text: true,
          showHide: row => {
            return row.status;
          },
          clickFun: row => {
            handleRevokeApproveRoute(row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const isShowNewModal = ref(false);
  const isShowEditModal = ref(false);
  const isShowItemModal = ref(false);
  const record = ref({});
  const page = reactive({
    current: 1,
    size: 10,
    size: 100,
    total: 0,
  });

  // 获取全局实例
  const { proxy } = getCurrentInstance();

  // 产品选择和BOM相关
  const showProductSelectDialog = ref(false);
  const bomOptions = ref([]);

  // 工艺路线对话框
  const routeDialogVisible = ref(false);
  const isRouteEdit = ref(false);
  const routeFormRef = ref(null);
  const routeForm = reactive({
    id: null,
    productModelId: null,
    productName: "",
    productModelName: "",
    bomId: null,
    routeCode: "",
    description: "",
    status: true,
  });
  const routeRules = {
    productModelId: [
      { required: true, message: "请选择产品", trigger: "change" },
    ],
    bomId: [{ required: true, message: "请选择BOM", trigger: "change" }],
  // 查询列表
  /** 搜索按钮操作 */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  // 工序对话框
  const processDialogVisible = ref(false);
  const isProcessEdit = ref(false);
  const processFormRef = ref(null);
  const currentRouteId = ref(null);
  const processForm = reactive({
    id: null,
    no: "",
    name: "",
    remark: "",
    status: true,
  });
  const processRules = {
    no: [{ required: true, message: "请输入工序编码", trigger: "blur" }],
    name: [{ required: true, message: "请输入工序名称", trigger: "blur" }],
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };

  // 选择工序对话框
  const selectProcessDialogVisible = ref(false);
  const availableProcessList = ref([]);
  const filteredProcessList = ref([]);
  const selectedProcessItem = ref(null);
  const processSearchKeyword = ref("");
  const currentRouteIndex = ref(null);

  // 参数对话框
  const paramDialogVisible = ref(false);
  const isParamEdit = ref(false);
  const paramFormRef = ref(null);
  const currentProcessId = ref(null);
  const paramForm = reactive({
    id: null,
    parameterCode: "",
    parameterName: "",
    parameterType2: "1",
    parameterType: "",
    parameterFormat: "",
    standardValue: "",
    unit: "",
  });
  const paramRules = {
    parameterCode: [
      { required: true, message: "请输入参数编号", trigger: "blur" },
    ],
    parameterName: [
      { required: true, message: "请输入参数名称", trigger: "blur" },
    ],
    parameterType: [
      { required: true, message: "请选择参数类型", trigger: "change" },
    ],
  };

  // 选择参数对话框
  const selectParamDialogVisible = ref(false);
  const availableParamList = ref([]);
  const filteredParamList = ref([]);
  const selectedParam = ref(null);
  const paramSearchKeyword = ref("");

  // 可选参数分页
  const paramPage = reactive({
    current: 1,
    size: 10,
    total: 0,
  });

  // 编辑参数对话框
  const editParamDialogVisible = ref(false);
  const editParamFormRef = ref(null);
  const editParamForm = reactive({
    id: null,
    processId: null,
    paramId: null,
    paramName: "",
    valueMode: "1",
    standardValue: null,
    minValue: null,
    maxValue: null,
    sort: 1,
    isRequired: 0,
  });
  const editParamRules = reactive({
    standardValue: [
      {
        required: true,
        message: "请输入标准值",
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (value === null || value === undefined || value === "") {
            callback(new Error("请输入标准值"));
          } else {
            callback();
          }
        },
      },
    ],
    minValue: [
      {
        required: true,
        message: "请输入最小值",
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (value === null || value === undefined || value === "") {
            callback(new Error("请输入最小值"));
          } else {
            callback();
          }
        },
      },
    ],
    maxValue: [
      {
        required: true,
        message: "请输入最大值",
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (value === null || value === undefined || value === "") {
            callback(new Error("请输入最大值"));
          } else {
            callback();
          }
        },
      },
    ],
    sort: [
      {
        required: true,
        message: "请输入排序",
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (value === null || value === undefined || value === "") {
            callback(new Error("请输入排序"));
          } else if (isNaN(value) || value < 1) {
            callback(new Error("排序必须是大于0的整数"));
          } else {
            callback();
          }
        },
      },
    ],
  });

  // 拖拽相关
  const draggedItem = ref(null);
  const draggedRouteId = ref(null);

  // 获取工艺路线列表
  const getRouteList = () => {
    // 导入 listPage 方法
    import("@/api/productionManagement/processRoute.js").then(({ listPage }) => {
      listPage({ pageNum: routePage.current, pageSize: routePage.size })
        .then(res => {
          // 处理返回的数据，映射到页面需要的格式
          routeList.value = (res.data?.records || []).map(item => ({
            id: item.id,
            productModelId: item.productModelId,
            productName: item.productName,
            productModelName: item.model || item.productModelName,
            bomId: item.bomId,
            bomNo: item.bomNo,
            routeCode: item.processRouteCode || item.routeCode,
            description: item.description || item.description,
            status: item.status,
            expanded: false,
            processList: (item.processList || []).map(process => ({
              ...process,
              processId: process.processId || process.id,
              expanded: false,
            })),
          }));
          // 更新分页总数
          routePage.total = res.data?.total || 0;
        })
        .catch(err => {
          console.error("获取工艺路线列表失败：", err);
          routeList.value = [];
          routePage.total = 0;
        });
    });
  };

  // 展开/收起工艺路线
  const toggleExpand = route => {
    route.expanded = !route.expanded;
    if (route.expanded) {
      // 调用接口获取工序列表
      findProcessRouteItemList({ routeId: route.id })
        .then(res => {
          route.processList = (res.data || []).map(process => ({
            ...process,
            processId: process.processId || process.id,
            expanded: false,
          }));
        })
        .catch(err => {
          console.error("获取工序列表失败：", err);
          route.processList = [];
        });
    }
  };

  // 展开/收起工序参数
  const toggleProcessParams = process => {
    process.expanded = !process.expanded;
    if (process.expanded && process.id) {
      // 调用接口获取参数列表
      getProcessParamList({
        routeItemId: process.id,
        pageNum: 1,
        pageSize: 1000,
  const getList = () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined;
    listPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records.map(item => ({
          ...item,
        }));
        page.total = res.data.total;
      })
        .then(res => {
          if (res.code === 200) {
            process.paramList = res.data?.records || [];
            process.paramCount = process.paramList.length;
          } else {
            ElMessage.error(res.msg || "获取参数列表失败");
            process.paramList = [];
            process.paramCount = 0;
          }
        })
        .catch(err => {
          console.error("获取参数列表失败：", err);
          ElMessage.error("获取参数列表失败");
          process.paramList = [];
          process.paramCount = 0;
        });
    }
      .catch(err => {
        tableLoading.value = false;
      });
  };
  const toggleProcessParams2 = process => {
    if (process.expanded && process.id) {
      // 调用接口获取参数列表
      getProcessParamList({
        routeItemId: process.id,
        pageNum: 1,
        pageSize: 1000,
  // 表格选择数据
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  // 打开新增弹框
  const showNewModal = () => {
    isShowNewModal.value = true;
  };

  const showEditModal = row => {
    isShowEditModal.value = true;
    record.value = row;
  };

  const showItemModal = row => {
    router.push({
      path: "/productionManagement/processRouteItem",
      query: {
        id: row.id,
        processRouteCode: row.processRouteCode || "",
        productName: row.productName || "",
        model: row.model || "",
        bomNo: row.bomNo || "",
        bomId: row.bomId || null,
        description: row.description || "",
        type: "route",
      },
    });
  };

  // 删除
  function handleDelete() {
    const ids = selectedRows.value.map(item => item.id);
    proxy.$modal
      .confirm("是否确认删除已勾选的数据项？")
      .then(function () {
        return del(ids);
      })
        .then(res => {
          if (res.code === 200) {
            process.paramList = res.data?.records || [];
            process.paramCount = process.paramList.length;
          } else {
            ElMessage.error(res.msg || "获取参数列表失败");
            process.paramList = [];
            process.paramCount = 0;
          }
        })
        .catch(err => {
          console.error("获取参数列表失败：", err);
          ElMessage.error("获取参数列表失败");
          process.paramList = [];
          process.paramCount = 0;
        });
    }
  };
  // 工艺路线操作
  const handleAddRoute = () => {
    isRouteEdit.value = false;
    routeForm.id = null;
    routeForm.productModelId = null;
    routeForm.productName = "";
    routeForm.productModelName = "";
    routeForm.bomId = null;
    routeForm.routeCode = "";
    routeForm.description = "";
    routeForm.status = false;
    bomOptions.value = [];
    routeDialogVisible.value = true;
  };
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  }

  const handleEditRoute = route => {
    isRouteEdit.value = true;
    routeForm.id = route.id;
    routeForm.productModelId = route.productModelId;
    routeForm.productName = route.productName;
    routeForm.productModelName = route.productModelName;
    routeForm.bomId = route.bomId;
    routeForm.routeCode = route.routeCode;
    routeForm.description = route.description;
    routeForm.status = route.status;
    routeDialogVisible.value = true;
  };

  const handleDeleteRoute = route => {
    ElMessageBox.confirm("确定要删除该工艺路线吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      del(route.id)
        .then(res => {
          ElMessage.success("删除成功");
          getRouteList();
        })
        .catch(err => {
          ElMessage.error("删除失败");
        });
    });
  };

  const handleRouteSubmit = () => {
    routeFormRef.value.validate(valid => {
      if (valid) {
        // 构建提交数据
        const submitData = {
          ...routeForm,
          // 注意：API 期望的字段名可能与表单字段名不同
          productId: routeForm.productModelId,
          productModelId: routeForm.productModelId,
          description: routeForm.description,
        };

        if (isRouteEdit.value) {
          // 编辑操作
          update(submitData)
            .then(res => {
              ElMessage.success("编辑成功");
              routeDialogVisible.value = false;
              getRouteList();
            })
            .catch(err => {
              ElMessage.error("编辑失败");
            });
        } else {
          // 新增操作
          add(submitData)
            .then(res => {
              ElMessage.success("新增成功");
              routeDialogVisible.value = false;
              getRouteList();
            })
            .catch(err => {
              ElMessage.error("新增失败");
            });
        }
      }
    });
  };
  const isform2 = ref(null);
  const handleProcessProductSelectClick = () => {
    isform2.value = true;
    showProductSelectDialog.value = true;
  };
  const handleProcessProductSelectClick2 = () => {
    isform2.value = false;
    showProductSelectDialog.value = true;
  };

  // 产品选择处理
  const handleProductSelect = async products => {
    if (isform2.value) {
      // 帮我写工序中的选择产品的回调,并且把字段加进processForm
      if (products && products.length > 0) {
        const product = products[0];
        console.log("product:", product);
        // 把product中的字段添加到processForm中
        // Object.assign(processForm, product);
        processForm.productModelId = product.id;
        processForm.productName = product.productName;
        processForm.model = product.model;
        processForm.unit = product.unit || "";
        console.log("processForm:", processForm);

        // 触发表单验证更新
        proxy.$refs["processFormRef"]?.validateField("productModelId");
      }
    } else {
      if (products && products.length > 0) {
        const product = products[0];
        // 先查询BOM列表（必选）
        try {
          const res = await getByModel(product.id);
          // 处理返回的BOM数据：可能是数组、对象或包含data字段
          let bomList = [];
          if (Array.isArray(res)) {
            bomList = res;
          } else if (res && res.data) {
            bomList = Array.isArray(res.data) ? res.data : [res.data];
          } else if (res && typeof res === "object") {
            bomList = [res];
          }
          console.log("bomList:", bomList);
          if (bomList.length > 0) {
            routeForm.productModelId = product.id;
            routeForm.productName = product.productName;
            routeForm.productModelName = product.model;
            routeForm.bomId = undefined; // 重置BOM选择
            bomOptions.value = bomList;
            showProductSelectDialog.value = false;
            // 触发表单验证更新
            proxy.$refs["routeFormRef"]?.validateField("productModelId");
          } else {
            proxy.$modal.msgError("该产品没有BOM，请先创建BOM");
          }
        } catch (error) {
          // 如果接口返回404或其他错误，说明没有BOM
          proxy.$modal.msgError("该产品没有BOM，请先创建BOM");
        }
      }
    }
  };

  // 批准工艺路线
  const handleApproveRoute = route => {
    ElMessageBox.confirm("确定要批准该工艺路线吗？", "提示", {
      confirmButtonText: "确定",
@@ -1206,7 +237,7 @@
      update({ id: route.id, status: true })
        .then(res => {
          ElMessage.success("批准成功");
          getRouteList();
          getList();
        })
        .catch(err => {
          ElMessage.error("批准失败");
@@ -1214,6 +245,7 @@
    });
  };

  // 取消批准工艺路线
  const handleRevokeApproveRoute = route => {
    ElMessageBox.confirm("确定要撤销批准该工艺路线吗？", "提示", {
      confirmButtonText: "确定",
@@ -1224,1194 +256,17 @@
      update({ id: route.id, status: false })
        .then(res => {
          ElMessage.success("撤销批准成功");
          getRouteList();
          getList();
        })
        .catch(err => {
          ElMessage.error("撤销批准失败");
        });
    });
  };
  // 工序操作
  const handleSelectProcess = (route, index) => {
    console.log("route:", route);
    currentRouteId.value = route.id;
    currentRouteIndex.value = index;
    // 重置搜索和选择状态
    filteredProcessList.value = availableProcessList.value;
    processSearchKeyword.value = "";
    selectedProcessItem.value = null;
    selectProcessDialogVisible.value = true;
  };
  const dragSort = ref(0);
  const currentId = ref(null);
  // 修改工序
  const handleEditProcessSelect = (route, index, process) => {
    console.log("route:", route);
    console.log("process:", process);
    currentId.value = process.id;
    currentRouteId.value = route.id;
    currentRouteIndex.value = index;
    // 重置搜索和选择状态
    filteredProcessList.value = availableProcessList.value;
    processSearchKeyword.value = "";
    // 设置选中的工序
    filteredProcessList.value.map(item => {
      if (item.id === process.processId) {
        selectedProcessItem.value = item;
      }
    });
    dragSort.value = process.dragSort;
    // selectedProcessItem.value = process;
    // 填充产品选择表单
    processForm.productModelId = process.productModelId;
    processForm.productName = process.productName;
    processForm.model = process.model;
    processForm.processId = process.no;
    // processForm.name = process.name;
    processForm.unit = process.unit || "";
    processForm.isQuality = process.isQuality || false;
    selectProcessDialogVisible.value = true;
  };

  const handleEditProcess = (routeId, process) => {
    currentRouteId.value = routeId;
    isProcessEdit.value = true;
    processForm.id = process.id;
    processForm.no = process.no;
    processForm.name = process.name;
    processForm.remark = process.remark;
    processForm.status = process.status;
    processDialogVisible.value = true;
  };

  const handleDeleteProcess = (routeId, process) => {
    ElMessageBox.confirm("确定要删除该工序吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 调用API删除工序
      batchDeleteProcessRouteItem([process.id])
        .then(res => {
          ElMessage.success("删除成功");
          // 调用接口更新工序列表
          findProcessRouteItemList({ routeId: routeId })
            .then(res => {
              const route = routeList.value.find(r => r.id === routeId);
              if (route) {
                route.processList = (res.data || []).map(process => ({
                  ...process,
                  processId: process.processId || process.id,
                  expanded: false,
                }));
              }
            })
            .catch(err => {
              console.error("获取工序列表失败：", err);
            });
        })
        .catch(err => {
          ElMessage.error("删除失败");
          console.error("删除工序失败：", err);
        });
    });
  };

  const handleProcessSubmit = () => {
    processFormRef.value.validate(valid => {
      if (valid) {
        ElMessage.success(isProcessEdit.value ? "编辑成功" : "新增成功");
        processDialogVisible.value = false;
        // 调用接口更新工序列表
        if (currentRouteId.value) {
          findProcessRouteItemList({ routeId: currentRouteId.value })
            .then(res => {
              const route = routeList.value.find(
                r => r.id === currentRouteId.value
              );
              if (route) {
                route.processList = (res.data || []).map(process => ({
                  ...process,
                  processId: process.processId || process.id,
                  expanded: false,
                }));
              }
            })
            .catch(err => {
              console.error("获取工序列表失败：", err);
            });
        }
      }
    });
  };

  // 选择工序相关方法
  const handleProcessSearch = () => {
    const keyword = processSearchKeyword.value.trim().toLowerCase();
    if (!keyword) {
      filteredProcessList.value = availableProcessList.value;
    } else {
      filteredProcessList.value = availableProcessList.value.filter(
        item =>
          (item.name && item.name.toLowerCase().includes(keyword)) ||
          (item.no && item.no.toLowerCase().includes(keyword))
      );
    }
  };

  const handleProcessSelect = row => {
    selectedProcessItem.value = row;
    // 重置产品选择表单
    processForm.productModelId = undefined;
    processForm.productName = "";
    processForm.productModelName = "";
    processForm.unit = "";
    processForm.isQuality = row.isQuality || false;
  };

  // 处理工序选择时的产品选择
  const handleProcessProductSelect = async products => {
    if (products && products.length > 0) {
      const product = products[0];
      processForm.productModelId = product.id;
      processForm.productName = product.productName;
      processForm.productModelName = product.model;
      processForm.unit = product.unit || "";
      showProductSelectDialog.value = false;
    }
  };

  const handleProcessSelectSubmit = () => {
    if (!selectedProcessItem.value) {
      ElMessage.warning("请先选择一个工序");
      return;
    }

    if (!processForm.productModelId) {
      ElMessage.warning("请选择产品");
      return;
    }

    // 构建请求参数
    const params = {
      routeId: currentRouteId.value,
      processId: selectedProcessItem.value.id,
      dragSort: routePage.total + 1,
      ...processForm,
    };

    // 如果是修改操作，添加id参数
    if (selectedProcessItem.value.id) {
      params.id = currentId.value;
      params.dragSort = dragSort.value;
    }

    // 调用API添加工序或修改工序
    addOrUpdateProcessRouteItem(params)
      .then(res => {
        ElMessage.success(
          selectedProcessItem.value.id ? "修改工序成功" : "添加工序成功"
        );
        selectProcessDialogVisible.value = false;
        // 调用接口更新工序列表
        findProcessRouteItemList({ routeId: currentRouteId.value })
          .then(res => {
            const route = routeList.value.find(
              r => r.id === currentRouteId.value
            );
            if (route) {
              route.processList = (res.data || []).map(process => ({
                ...process,
                processId: process.processId || process.id,
                expanded: false,
              }));
            }
          })
          .catch(err => {
            console.error("获取工序列表失败：", err);
          });
      })
      .catch(err => {
        ElMessage.error(
          selectedProcessItem.value.id ? "修改工序失败" : "添加工序失败"
        );
        console.error(
          selectedProcessItem.value.id ? "修改工序失败：" : "添加工序失败：",
          err
        );
      });
  };

  // 参数操作
  const handleAddParam = (routeId, process) => {
    currentRouteId.value = routeId;
    currentProcessId.value = process.id;
    selectedParam.value = null;
    paramSearchKeyword.value = "";
    paramPage.current = 1;
    // 获取可选参数列表
    getBaseParamList({
      paramName: paramSearchKeyword.value,
      current: paramPage.current,
      size: paramPage.size,
    }).then(res => {
      if (res.code === 200) {
        filteredParamList.value = res.data?.records || [];
        paramPage.total = res.data?.total || 0;
      } else {
        ElMessage.error(res.msg || "查询失败");
      }
    });
    selectParamDialogVisible.value = true;
  };

  const handleEditParam = (routeId, process, param) => {
    currentRouteId.value = routeId;
    currentProcessId.value = process.id;
    editParamForm.id = param.id;
    editParamForm.processId = process.id;
    editParamForm.paramId = param.paramId;
    editParamForm.paramName = param.parameterName || param.paramName;
    editParamForm.valueMode = param.parameterType2 || param.valueMode || "1";
    editParamForm.standardValue = param.standardValue;
    editParamForm.minValue = param.minValue;
    editParamForm.maxValue = param.maxValue;
    editParamForm.sort = param.sort || 1;
    editParamForm.isRequired = param.isRequired || 0;
    editParamForm.paramType = param.parameterType || param.paramType;
    editParamForm.paramFormat = param.parameterFormat || param.paramFormat;
    editParamForm.unit = param.unit || param.unit;
    editParamDialogVisible.value = true;
  };

  const handleDeleteParam = (routeId, process, param) => {
    ElMessageBox.confirm("确定要删除该参数吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 调用API删除参数
      delProcessRouteItemParam(param.id)
        .then(res => {
          ElMessage.success("删除成功");
          // 刷新参数列表
          toggleProcessParams2(process);
        })
        .catch(err => {
          ElMessage.error("删除参数失败");
          console.error("删除参数失败：", err);
        });
    });
  };

  const handleParamSubmit = () => {
    paramFormRef.value.validate(valid => {
      if (valid) {
        ElMessage.success(isParamEdit.value ? "编辑成功" : "新增成功");
        paramDialogVisible.value = false;
        getRouteList();
      }
    });
  };

  const handleParamTypeChange = () => {
    if (paramForm.parameterType === "数值格式") {
      paramForm.parameterFormat = "#.0000";
    } else if (paramForm.parameterType === "时间格式") {
      paramForm.parameterFormat = "YYYY-MM-DD HH:mm:ss";
    } else {
      paramForm.parameterFormat = "";
    }
  };

  const getParamTypeTag = type => {
    const typeMap = {
      1: "primary",
      2: "info",
      3: "warning",
      4: "success",
    };
    return typeMap[type] || "default";
  };

  const getParamTypeText = type => {
    const typeMap = {
      1: "数值格式",
      2: "文本格式",
      3: "下拉选项",
      4: "时间格式",
    };
    return typeMap[type] || "未知参数类型";
  };

  // 选择参数相关方法
  const handleParamSearch = () => {
    // 重置分页
    paramPage.current = 1;
    // 重新加载数据
    getBaseParamList({
      paramName: paramSearchKeyword.value,
      current: paramPage.current,
      size: paramPage.size,
    }).then(res => {
      if (res.code === 200) {
        filteredParamList.value = res.data?.records || [];
        paramPage.total = res.data?.total || 0;
      } else {
        ElMessage.error(res.msg || "查询失败");
      }
    });
  };

  const handleParamSelect = row => {
    selectedParam.value = row;
  };

  // 处理分页大小变化
  const handleParamSizeChange = size => {
    paramPage.size = size;
    getBaseParamList({
      paramName: paramSearchKeyword.value,
      current: paramPage.current,
      size: paramPage.size,
    }).then(res => {
      if (res.code === 200) {
        filteredParamList.value = res.data?.records || [];
        paramPage.total = res.data?.total || 0;
      } else {
        ElMessage.error(res.msg || "查询失败");
      }
    });
  };

  // 处理当前页码变化
  const handleParamCurrentChange = current => {
    paramPage.current = current;
    getBaseParamList({
      paramName: paramSearchKeyword.value,
      current: paramPage.current,
      size: paramPage.size,
    }).then(res => {
      if (res.code === 200) {
        filteredParamList.value = res.data?.records || [];
        paramPage.total = res.data?.total || 0;
      } else {
        ElMessage.error(res.msg || "查询失败");
      }
    });
  };

  // 工艺路线分页处理
  const handleRouteSizeChange = size => {
    routePage.size = size;
    getRouteList();
  };

  const handleRouteCurrentChange = current => {
    routePage.current = current;
    getRouteList();
  };

  const handleParamSelectSubmit = () => {
    if (!selectedParam.value) {
      ElMessage.warning("请先选择一个参数");
      return;
    }

    // 找到对应的工艺路线和工序
    const route = routeList.value.find(r => r.id === currentRouteId.value);
    const process = route?.processList.find(p => p.id === currentProcessId.value);

    if (route && process) {
      // 检查参数是否已存在
      // const exists = process.paramList?.some(
      //   p =>
      //     p.paramId === selectedParam.value.id ||
      //     p.parameterCode === selectedParam.value.paramCode
      // );
      // if (exists) {
      //   ElMessage.warning("该参数已存在于工序中");
      //   return;
      // }

      // 判断参数类型，只有数值类型才传标准值、最大值和最小值
      const isNumericMode = selectedParam.value.valueMode === 1;

      // 调用API新增参数
      addProcessRouteItemParam({
        routeItemId: process.id,
        paramId: selectedParam.value.id,
        standardValue: isNumericMode
          ? selectedParam.value.standardValue || ""
          : "",
        minValue: isNumericMode ? selectedParam.value.minValue || 0 : null,
        maxValue: isNumericMode ? selectedParam.value.maxValue || 0 : null,
        isRequired: selectedParam.value.isRequired || 0,
      })
        .then(res => {
          ElMessage.success("添加参数成功");
          selectParamDialogVisible.value = false;
          // 刷新参数列表
          toggleProcessParams2(process);
        })
        .catch(err => {
          ElMessage.error("添加参数失败");
          console.error("添加参数失败：", err);
        });
    }
  };

  const handleEditParamSubmit = () => {
    editParamFormRef.value.validate(valid => {
      if (valid) {
        // 判断参数类型，只有数值类型才传标准值、最大值和最小值
        const isNumericMode = editParamForm.valueMode == 1;

        // 调用API修改参数
        editProcessRouteItemParam({
          id: editParamForm.id,
          routeItemId: currentProcessId.value,
          paramId: editParamForm.paramId,
          standardValue: isNumericMode ? editParamForm.standardValue || "" : "",
          minValue: isNumericMode ? editParamForm.minValue || 0 : null,
          maxValue: isNumericMode ? editParamForm.maxValue || 0 : null,
          isRequired: editParamForm.isRequired || 0,
        })
          .then(res => {
            ElMessage.success("编辑成功");
            editParamDialogVisible.value = false;
            // 找到对应的工艺路线和工序
            const route = routeList.value.find(
              r => r.id === currentRouteId.value
            );
            const process = route?.processList.find(
              p => p.id === currentProcessId.value
            );
            // 刷新参数列表
            if (process) {
              toggleProcessParams2(process);
            }
          })
          .catch(err => {
            ElMessage.error("编辑参数失败");
            console.error("编辑参数失败：", err);
          });
      }
    });
  };

  // 拖拽排序
  const handleDragStart = (event, index, routeId) => {
    draggedItem.value = index;
    draggedRouteId.value = routeId;
    event.dataTransfer.effectAllowed = "move";
  };

  const handleDragOver = event => {
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
  };

  const handleDrop = (event, dropIndex, routeId) => {
    event.preventDefault();
    if (draggedItem.value === null || draggedItem.value === dropIndex) return;

    const route = routeList.value.find(r => r.id === routeId);
    if (route && route.processList) {
      const draggedProcess = route.processList[draggedItem.value];

      // 计算新的排序值
      const newDragSort = dropIndex + 1;

      // 调用API排序工序
      sortProcessRouteItem({
        id: draggedProcess.id,
        dragSort: newDragSort,
      })
        .then(res => {
          // 调用接口获取最新的工序列表
          findProcessRouteItemList({ routeId: routeId })
            .then(res => {
              if (route) {
                route.processList = (res.data || []).map(process => ({
                  ...process,
                  processId: process.processId || process.id,
                  expanded: false,
                }));
              }
              ElMessage.success("排序成功");
            })
            .catch(err => {
              console.error("获取工序列表失败：", err);
              ElMessage.success("排序成功");
            });
        })
        .catch(err => {
          ElMessage.error("排序失败");
          console.error("排序工序失败：", err);
        });
    }
  };

  const handleDragEnd = () => {
    draggedItem.value = null;
    draggedRouteId.value = null;
  };

  // 获取数据字典
  const getDictTypes = () => {
    listType({ pageNum: 1, pageSize: 1000 }).then(res => {
      dictTypes.value = res.rows || [];
    });
  };

  getRouteList();
  getDictTypes();

  // 页面加载时获取工序列表
  onMounted(() => {
    getProcessListApi()
      .then(res => {
        // 处理返回的数据，映射到页面需要的格式
        availableProcessList.value = (res.data || []).map(item => ({
          id: item.id,
          no: item.no || item.no,
          name: item.name || item.name,
          remark: item.remark || item.remark,
          status: item.status,
          isQuality: item.isQuality,
        }));
        filteredProcessList.value = availableProcessList.value;
      })
      .catch(() => {
        ElMessage.error("获取工序列表失败");
      });
    getList();
  });
</script>

<style scoped lang="scss">
  .app-container {
    padding: 20px;
    padding-bottom: 80px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 84px);
    overflow: hidden;
  }

  .route-header {
    margin-bottom: 20px;

    .add-route-btn {
      width: 100%;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 120px;
      height: 100px;
      border: 2px dashed #dcdfe6;
      border-radius: 12px;
      background: #fafafa;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #909399;
      padding: 0 20px;

      .el-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }

      span {
        font-size: 13px;
      }

      &:hover {
        border-color: #409eff;
        background: #ecf5ff;
        color: #409eff;
      }
    }
  }

  .route-card-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 10px;
  }

  /* 自定义滚动条样式 */
  .route-card-list::-webkit-scrollbar {
    width: 8px;
  }

  .route-card-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .route-card-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }

  .route-card-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  .route-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px;
      border-bottom: 1px solid #ebeef5;
      background: #f8f9fa;

      .route-info {
        display: flex;
        // flex-direction: column;
        // justify-content: center;
        // items-align: center;
        gap: 4px;

        .route-code {
          font-size: 12px;
          color: #909399;
          font-family: "Courier New", monospace;
          line-height: 30px;
        }

        .route-name {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          display: flex;
          align-items: center;
        }
      }

      .route-actions {
        display: flex;
        gap: 8px;

        // .el-button {
        //   color: #409eff;
        // }
      }
    }

    .card-body {
      padding: 16px 40px;

      .route-desc {
        font-size: 14px;
        color: #606266;
        margin-bottom: 12px;
      }

      .route-meta {
        display: flex;
        gap: 24px;
        margin-bottom: 12px;
        padding: 10px 14px;
        background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
        border-radius: 8px;
        border-left: 3px solid #409eff;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;
          margin-right: 40px;

          .el-icon {
            font-size: 14px;
            color: #409eff;
          }

          .meta-label {
            color: #909399;
            font-weight: 500;
          }

          .meta-value {
            color: #303133;
            font-weight: 600;
          }
        }
      }

      .expand-btn-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 8px;

        .expand-btn {
          padding: 8px 20px;
          border-radius: 20px;
          background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
          border: 1px solid #b3d8ff;
          transition: all 0.3s ease;

          .btn-text {
            font-size: 13px;
            font-weight: 500;
            color: #409eff;
            margin-right: 6px;
          }

          .expand-icon {
            font-size: 14px;
            color: #409eff;
            transition: transform 0.3s ease;
          }

          &:hover {
            background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
            border-color: #409eff;
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);

            .btn-text,
            .expand-icon {
              color: #fff;
            }
          }

          &.expanded {
            background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%);
            border-color: #a5d69a;

            .btn-text,
            .expand-icon {
              color: #67c23a;
            }

            &:hover {
              background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
              border-color: #67c23a;
              box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);

              .btn-text,
              .expand-icon {
                color: #fff;
              }
            }
          }
        }
      }
    }

    .process-route {
      padding: 0 20px 20px;
      background: #f5f7fa;
      border-top: 1px solid #ebeef5;

      .process-flow {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 0;
        overflow-x: auto;
        overflow-y: hidden;

        .process-flow-item {
          display: flex;
          align-items: center;
          gap: 8px;

          .process-node {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            border: 2px solid #ebeef5;
            cursor: move;
            transition: all 0.3s ease;
            // min-width: 180px;
            // max-width: 220px;
            width: 300px;

            &.expanded {
              width: 400px;
            }

            &:hover {
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
              transform: translateY(-2px);
              border-color: #409eff;
            }

            &:active {
              cursor: grabbing;
            }

            .process-node-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;

              .process-number {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background: #409eff;
                color: #ffffff;
                font-size: 12px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              .process-actions {
                display: flex;
                gap: 4px;
              }
            }

            .process-node-body {
              text-align: center;
              margin-bottom: 12px;

              .process-code {
                font-size: 11px;
                color: #909399;
                font-family: "Courier New", monospace;
                margin-bottom: 4px;
              }

              .process-name {
                font-size: 15px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 6px;
              }

              .process-desc {
                font-size: 12px;
                color: #606266;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }

            .process-node-footer {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              padding-top: 10px;
              border-top: 1px solid #ebeef5;
            }

            .process-params-section {
              margin-top: 12px;
              padding-top: 12px;
              border-top: 1px solid #ebeef5;

              .params-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                font-size: 13px;
                font-weight: 600;
                color: #303133;
              }

              .params-list {
                display: flex;
                flex-direction: column;
                gap: 6px;
                max-height: 200px;
                overflow-y: auto;

                .param-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 6px 8px;
                  background: #fafafa;
                  border-radius: 4px;
                  border-left: 2px solid #409eff;
                  font-size: 12px;

                  .param-info {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 6px;
                    flex: 1;
                    min-width: 0;

                    .param-code {
                      font-size: 11px;
                      color: #e6a23c;
                      font-family: "Courier New", monospace;
                      margin-right: 20px;
                    }

                    .param-name {
                      font-size: 12px;
                      color: #303133;
                      font-weight: 500;
                      margin-right: 20px;
                    }

                    .param-value {
                      font-size: 11px;
                      color: #606266;
                    }
                  }

                  .param-actions {
                    display: flex;
                    gap: 4px;
                    flex-shrink: 0;
                  }
                }
              }
            }
          }

          .flow-arrow {
            display: flex;
            align-items: center;
            color: #c0c4cc;
            font-size: 24px;
            padding: 0 4px;

            .el-icon {
              font-size: 20px;
            }
          }
        }

        .add-process-node {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-width: 100px;
          height: 137px;
          border: 2px dashed #dcdfe6;
          border-radius: 12px;
          background: #fafafa;
          cursor: pointer;
          transition: all 0.3s ease;
          color: #909399;
          // margin-left: 10px;

          .el-icon {
            font-size: 24px;
            margin-bottom: 8px;
          }

          span {
            font-size: 13px;
          }

          &:hover {
            border-color: #409eff;
            background: #ecf5ff;
            color: #409eff;
          }
        }
      }
    }
  }

  // 拖拽时的样式
  .process-flow-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
  }

  // 选择工序对话框样式
  .process-select-container {
    display: flex;
    gap: 20px;
    height: 450px;

    .process-list-area {
      flex: 1;
      display: flex;
      flex-direction: column;

      .area-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .search-box {
        margin-bottom: 12px;

        .el-input {
          width: 100%;
        }
      }
    }

    .process-detail-area {
      width: 380px;
      display: flex;
      flex-direction: column;
      background: #f5f7fa;
      border-radius: 8px;
      padding: 16px;

      .area-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .process-detail-form {
        .el-form-item {
          margin-bottom: 12px;

          .el-form-item__label {
            color: #606266;
            font-weight: 500;
          }
        }

        .detail-text {
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }

  // 选择参数对话框样式
  .param-select-container {
    display: flex;
    gap: 20px;
    height: 450px;

    .param-list-area {
      // flex: 1;
      width: 380px;
      display: flex;
      flex-direction: column;

      .area-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .search-box {
        margin-bottom: 12px;

        .el-input {
          width: 100%;
        }
      }
    }

    .param-detail-area {
      // width: 380px;
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #f5f7fa;
      border-radius: 8px;
      padding: 16px;

      .area-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .param-detail-form {
        .el-form-item {
          margin-bottom: 12px;

          .el-form-item__label {
            color: #606266;
            font-weight: 500;
          }
        }

        .detail-text {
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }

  // 分页控件样式
  .pagination-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    background-color: #fff !important;
    border-top: 1px solid #ebeef5;
    box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 100;

    .el-pagination {
      .el-pagination__sizes {
        margin-right: 16px;
      }

      .el-pagination__jump {
        margin-left: 16px;
      }

      .el-pagination__total {
        color: #606266;
        font-size: 14px;
      }

      .el-pagination__button {
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover:not(:disabled) {
          color: #409eff;
          border-color: #409eff;
        }
      }

      .el-pagination__button--active {
        background-color: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
  }
</style>
<style scoped></style>