change

zhangwencui

10 小时以前 ed36047f6ce0b91dad25efc10c8a0e83dd533a68

 src/views/productionManagement/processRoute/processRouteItem/index.vue

@@ -47,6 +47,7 @@
         class="section-header">
      <div class="section-title">工艺路线项目列表</div>
      <div class="section-actions">
        <div class="sort-tip">拖拽表格排序</div>
        <el-button icon="Grid"
                   @click="toggleView"
                   style="margin-right: 10px;">
@@ -90,8 +91,8 @@
      <el-table-column label="是否质检"
                       prop="isQuality">
        <template #default="scope">
          <el-tag :type="scope.row.isQuality ? 'success' : 'danger'">
            {{scope.row.isQuality ? '是' : '否' }}
          <el-tag :type="scope.row.isQuality == 1 ? 'success' : 'danger'">
            {{scope.row.isQuality == 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
@@ -118,6 +119,7 @@
      <div class="section-header">
        <div class="section-title">工艺路线项目列表</div>
        <div class="section-actions">
          <div class="sort-tip">长按拖拽卡片排序</div>
          <el-button icon="Menu"
                     @click="toggleView"
                     style="margin-right: 10px;">
@@ -141,8 +143,8 @@
              <div class="card-process-name">{{ getProcessName(item.processId) || '-' }}</div>
            </div>
            <!-- 产品信息 -->
            <div class="card-content">
            </div>
            <!-- <div class="card-content">
            </div> -->
            <!-- 操作按钮 -->
            <div class="card-footer">
              <el-button type="primary"
@@ -167,6 +169,16 @@
    <div class="section-BOM">
      <div class="section-header">
        <div class="section-title">BOM</div>
        <div class="section-actions"
             v-if="pageType === 'order'">
          <el-button type="primary"
                     @click="toggleBomEdit">
            {{ bomDataValue.isEdit ? '取消' : '编辑' }}
          </el-button>
          <el-button v-if=" bomDataValue.isEdit"
                     type="success"
                     @click="saveBomChanges">保存</el-button>
        </div>
      </div>
      <div>
        <!-- BOM表格 -->
@@ -177,28 +189,110 @@
                  style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <el-table :data="props.row.bomList"
                        row-key="id"
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                        style="width: 100%">
                <el-table-column prop="productName"
                                 label="产品" />
                <el-table-column prop="model"
                                 label="规格" />
                <el-table-column prop="processName"
                                 label="消耗工序" />
                <el-table-column prop="unitQuantity"
                                 label="单位产出所需数量" />
                <el-table-column prop="unit"
                                 label="单位" />
              </el-table>
              <el-form ref="bomFormRef"
                       :model="bomDataValue">
                <el-table :data="props.row.bomList"
                          row-key="tempId"
                          default-expand-all
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                          style="width: 100%">
                  <el-table-column prop="productName"
                                   label="产品" />
                  <el-table-column prop="model"
                                   label="规格">
                    <template #default="{ row }">
                      <el-form-item v-if="bomDataValue.isEdit"
                                    style="margin: 0">
                        <el-select v-model="row.model"
                                   placeholder="请选择规格"
                                   :disabled="!bomDataValue.isEdit"
                                   style="width: 100%"
                                   @visible-change="(v) => { if (v) openBomProductDialog(row.tempId) }">
                          <el-option v-if="row.model"
                                     :label="row.model"
                                     :value="row.model" />
                        </el-select>
                      </el-form-item>
                      <span v-else>{{ row.model }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="processName"
                                   label="消耗工序">
                    <template #default="{ row }">
                      <el-form-item v-if="bomDataValue.isEdit"
                                    style="margin: 0">
                        <el-select v-model="row.processId"
                                   placeholder="请选择消耗工序"
                                   :disabled="!bomDataValue.isEdit"
                                   style="width: 100%">
                          <el-option v-for="process in processOptions"
                                     :key="process.id"
                                     :label="process.name"
                                     :value="process.id" />
                        </el-select>
                      </el-form-item>
                      <span v-else>{{ row.processName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unitQuantity"
                                   label="单位产出所需数量">
                    <template #default="{ row }">
                      <el-form-item v-if="bomDataValue.isEdit"
                                    style="margin: 0">
                        <el-input-number v-model="row.unitQuantity"
                                         :min="0"
                                         :step="1"
                                         controls-position="right"
                                         style="width: 100%"
                                         :disabled="!bomDataValue.isEdit" />
                      </el-form-item>
                      <span v-else>{{ row.unitQuantity }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit"
                                   label="单位">
                    <template #default="{ row }">
                      <el-form-item v-if="bomDataValue.isEdit"
                                    style="margin: 0">
                        <el-input v-model="row.unit"
                                  placeholder="请输入单位"
                                  clearable
                                  :disabled="!bomDataValue.isEdit" />
                      </el-form-item>
                      <span v-else>{{ row.unit }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作"
                                   fixed="right"
                                   v-if="pageType === 'order'"
                                   width="180">
                    <template #default="{ row }">
                      <el-button v-if="bomDataValue.isEdit"
                                 type="danger"
                                 text
                                 size="small"
                                 @click="removeBomItem(row.tempId)">删除</el-button>
                      <el-button v-if="bomDataValue.isEdit"
                                 type="primary"
                                 text
                                 size="small"
                                 @click="addBomItem2(row.tempId)">添加子项</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="BOM编号"
                           prop="bomNo" />
          <el-table-column label="产品类型"
                           prop="dictLabel" />
          <!-- <el-table-column label="操作"
                           width="150">
            <template #default="{ row }">
            
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="产品编码"
                           prop="productCode" />
          <el-table-column label="产品名称"
@@ -206,6 +300,18 @@
          <el-table-column label="规格型号"
                           prop="model" /> -->
        </el-table>
        <div v-if="bomDataValue.isEdit"
             style="text-align: center;border: 1px solid #e4e7ed;padding: 10px;transition: all 0.3s ease;cursor: pointer;"
             :class="{'hover-effect': bomDataValue.isEdit}">
          <el-button type="primary"
                     text
                     @click="addBomItem">
            <el-icon style="vertical-align: middle;margin-right: 5px;">
              <Plus />
            </el-icon>
            添加
          </el-button>
        </div>
      </div>
    </div>
    <!-- 新增/编辑弹窗 -->
@@ -232,8 +338,8 @@
        <el-form-item label="是否质检"
                      prop="isQuality">
          <el-switch v-model="form.isQuality"
                     :active-value="true"
                     inactive-value="false" />
                     :active-value="1"
                     :inactive-value="0" />
        </el-form-item>
      </el-form>
      <template #footer>
@@ -247,12 +353,18 @@
    <ProductSelectDialog v-model="showProductSelectDialog"
                         @confirm="handleProductSelect"
                         single />
    <!-- BOM产品选择对话框 -->
    <ProductSelectDialog v-model="bomDataValue.showProductDialog"
                         @confirm="handleBomProductSelect"
                         single />
    <!-- 参数列表对话框 -->
    <ProcessParamListDialog v-model="showParamListDialog"
                            :title="`${currentProcess ? getProcessName(currentProcess.processId) : ''} - 参数列表`"
                            :route-id="routeId"
                            :editable="false"
                            :editable="editable"
                            :order-id="orderId"
                            :process="currentProcess"
                            :page-type="pageType"
                            :param-list="paramList"
                            @refresh="refreshParamList" />
  </div>
@@ -280,11 +392,16 @@
    findProductProcessRouteItemList,
    deleteRouteItem,
    addRouteItem,
    findProcessParamListOrder,
    addOrUpdateProductProcessRouteItem,
    sortRouteItem,
  } from "@/api/productionManagement/productProcessRoute.js";
  import { processList } from "@/api/productionManagement/productionProcess.js";
  import { queryList } from "@/api/productionManagement/productStructure.js";
  import {
    queryList2,
    queryList,
    add2,
  } from "@/api/productionManagement/productStructure.js";
  import { useRoute } from "vue-router";
  import { ElMessageBox, ElMessage } from "element-plus";
  import Sortable from "sortablejs";
@@ -295,6 +412,7 @@
  const routeId = computed(() => route.query.id);
  const orderId = computed(() => route.query.orderId);
  const pageType = computed(() => route.query.type);
  const editable = computed(() => route.query.editable === "true");

  const tableLoading = ref(false);
  const tableData = ref([]);
@@ -321,6 +439,14 @@
  const currentProcess = ref(null);
  const paramList = ref([]);
  const bomTableData = ref([]);
  const bomFormRef = ref(null);
  const bomDataValue = ref({
    dataList: [],
    showProductDialog: false,
    currentRowName: null,
    loading: false,
    isEdit: false,
  });
  let tableSortable = null;
  let cardSortable = null;

@@ -341,7 +467,7 @@
    productName: "",
    model: "",
    unit: "",
    isQuality: false,
    isQuality: 0,
  });

  const rules = {
@@ -401,12 +527,21 @@
      bomId: route.query.bomId || null,
      description: route.query.description || "",
    };

    // 如果有bomId，获取BOM数据
    if (routeInfo.value.bomId) {
      queryList(routeInfo.value.bomId)
    if (pageType.value === "order") {
      queryList2(route.query.orderId)
        .then(res => {
          if (res.data) {
            // 为BOM数据设置tempId
            const setTempIdRecursively = items => {
              items.forEach(item => {
                item.tempId = item.id || new Date().getTime();
                if (item.children && item.children.length > 0) {
                  setTempIdRecursively(item.children);
                }
              });
            };
            setTempIdRecursively(res.data);

            bomTableData.value = [
              {
                bomNo: routeInfo.value.bomNo,
@@ -417,12 +552,49 @@
                bomList: res.data,
              },
            ];

            // 保存原始BOM数据
            bomDataValue.value.dataList = res.data;
          }
        })
        .catch(err => {
          console.error("获取BOM数据失败：", err);
        });
    } else {
      queryList(Number(route.query.bomId))
        .then(res => {
          if (res.data) {
            // 为BOM数据设置tempId
            const setTempIdRecursively = items => {
              items.forEach(item => {
                item.tempId = item.id || new Date().getTime();
                if (item.children && item.children.length > 0) {
                  setTempIdRecursively(item.children);
                }
              });
            };
            setTempIdRecursively(res.data);

            bomTableData.value = [
              {
                bomNo: routeInfo.value.bomNo,
                dictLabel: routeInfo.value.dictLabel,
                productCode: "",
                productName: routeInfo.value.productName,
                model: routeInfo.value.model,
                bomList: res.data,
              },
            ];

            // 保存原始BOM数据
            bomDataValue.value.dataList = res.data;
          }
        })
        .catch(err => {
          console.error("获取BOM数据失败：", err);
        });
    }
    // 获取BOM数据，使用新的接口
  };

  // 新增
@@ -502,12 +674,10 @@

          const addPromise = isOrderPage
            ? addRouteItem({
                productOrderId: orderId.value,
                productRouteId: routeId.value,
                orderId: orderId.value,
                routeId: routeId.value,
                processId: form.value.processId,
                productModelId: form.value.productModelId,
                isQuality: form.value.isQuality,
                dragSort,
              })
            : addOrUpdateProcessRouteItem({
                routeId: routeId.value,
@@ -537,7 +707,6 @@
            ? addOrUpdateProductProcessRouteItem({
                id: form.value.id,
                processId: form.value.processId,
                productModelId: form.value.productModelId,
                isQuality: form.value.isQuality,
              })
            : addOrUpdateProcessRouteItem({
@@ -583,6 +752,241 @@
  const closeDialog = () => {
    dialogVisible.value = false;
    resetForm();
  };

  // BOM相关方法
  // 切换BOM编辑模式
  const toggleBomEdit = () => {
    bomDataValue.value.isEdit = !bomDataValue.value.isEdit;
    if (!bomDataValue.value.isEdit) {
      // 取消编辑时重新加载数据
      getRouteInfo();
    }
  };

  // 添加BOM项
  const addBomItem = () => {
    if (bomTableData.value.length > 0) {
      const newItem = {
        parentId: "",
        parentTempId: "",
        productName: "",
        productId: "",
        model: undefined,
        productModelId: undefined,
        processId: "",
        processName: "",
        unitQuantity: 0,
        unit: "",
        children: [],
        tempId: new Date().getTime(),
      };
      bomTableData.value[0].bomList.push(newItem);
      // 由于bomDataValue.value.dataList和bomTableData.value[0].bomList指向同一个数组，不需要重复添加
    }
  };

  // 添加BOM子项
  const addBomItem2 = tempId => {
    const addChildItem = (items, tempId) => {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.tempId === tempId) {
          if (!item.children) {
            item.children = [];
          }
          item.children.push({
            parentId: item.id || "",
            parentTempId: item.tempId || "",
            productName: "",
            productId: "",
            model: undefined,
            productModelId: undefined,
            processId: "",
            processName: "",
            unitQuantity: 0,
            unit: "",
            children: [],
            tempId: new Date().getTime(),
          });
          return true;
        }
        if (item.children && item.children.length > 0) {
          if (addChildItem(item.children, tempId)) {
            return true;
          }
        }
      }
      return false;
    };

    if (bomTableData.value.length > 0) {
      addChildItem(bomTableData.value[0].bomList, tempId);
      // 由于bomDataValue.value.dataList和bomTableData.value[0].bomList指向同一个数组，不需要重复添加
    }
  };

  // 删除BOM项
  const removeBomItem = tempId => {
    // 从BOM表格数据中删除
    if (bomTableData.value.length > 0) {
      const removeFromList = (items, tempId) => {
        for (let i = 0; i < items.length; i++) {
          const item = items[i];
          if (item.tempId === tempId) {
            items.splice(i, 1);
            return true;
          }
          if (item.children && item.children.length > 0) {
            if (removeFromList(item.children, tempId)) {
              return true;
            }
          }
        }
        return false;
      };
      removeFromList(bomTableData.value[0].bomList, tempId);
      // 由于bomDataValue.value.dataList和bomTableData.value[0].bomList指向同一个数组，不需要重复删除
    }
  };

  // 打开BOM产品选择对话框
  const openBomProductDialog = tempId => {
    bomDataValue.value.currentRowName = tempId;
    bomDataValue.value.showProductDialog = true;
  };

  // 处理BOM产品选择
  const handleBomProductSelect = products => {
    if (products && products.length > 0) {
      const product = products[0];
      const updateProductInfo = (items, tempId, productData) => {
        for (let i = 0; i < items.length; i++) {
          const item = items[i];
          if (item.tempId === tempId) {
            item.productName = productData.productName;
            item.model = productData.model;
            item.productModelId = productData.id;
            item.unit = productData.unit || "";
            return true;
          }
          if (item.children && item.children.length > 0) {
            if (updateProductInfo(item.children, tempId, productData)) {
              return true;
            }
          }
        }
        return false;
      };

      if (bomTableData.value.length > 0) {
        updateProductInfo(
          bomTableData.value[0].bomList,
          bomDataValue.value.currentRowName,
          product
        );
        // 由于bomDataValue.value.dataList和bomTableData.value[0].bomList指向同一个数组，不需要重复更新
      }
      bomDataValue.value.showProductDialog = false;
    }
  };

  // 保存BOM更改
  const saveBomChanges = () => {
    // 校验BOM数据
    const validateBomData = items => {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        // 校验产品是否必填
        if (!item.productModelId) {
          ElMessage.error("请选择产品");
          return false;
        }
        // 校验单位产出所需数量是否必填
        if (
          item.unitQuantity === undefined ||
          item.unitQuantity === null ||
          item.unitQuantity === 0
        ) {
          ElMessage.error("请填写单位产出所需数量");
          return false;
        }
        // 递归校验子项
        if (item.children && item.children.length > 0) {
          if (!validateBomData(item.children)) {
            return false;
          }
        }
      }
      return true;
    };

    // 执行校验
    if (bomTableData.value.length > 0) {
      if (!validateBomData(bomTableData.value[0].bomList)) {
        return;
      }
    }

    // 调用新的保存接口
    // 准备保存数据，确保格式正确
    // 递归处理BOM项及其子项
    const processBomItem = (item, parentId = null, parentTempId = null) => {
      const cleanItem = {
        id: item.id || null,
        orderId: Number(orderId.value) || null,
        parentId: parentId,
        parentTempId: parentTempId || null,
        productModelId: item.productModelId || null,
        processId: item.processId || null,
        unitQuantity: item.unitQuantity || 0,
        demandedQuantity: item.demandedQuantity || null,
        unit: item.unit || "",
        tempId: item.tempId || new Date().getTime(),
        tenantId: item.tenantId || null,
        bomId: Number(route.query.bomId) || null,
        children: [],
      };

      // 递归处理子项
      if (item.children && item.children.length > 0) {
        cleanItem.children = item.children.map(child =>
          processBomItem(child, item.id, item.tempId || null)
        );
      }

      return cleanItem;
    };

    const saveData = bomTableData.value[0].bomList.map(item =>
      processBomItem(item, item.parentId, item.parentTempId || null)
    );
    const formData = {
      orderId: Number(orderId.value) || null,
      children: saveData,
    };

    add2(formData)
      .then(res => {
        if (res.code === 200) {
          ElMessage.success("BOM保存成功");
          bomDataValue.value.isEdit = false;
          // 重新加载数据以获取最新状态
          getRouteInfo();
        } else {
          ElMessage.error("BOM保存失败：" + (res.msg || "未知错误"));
        }
      })
      .catch(err => {
        console.error("保存BOM数据失败：", err);
        ElMessage.error("BOM保存失败：网络错误");
      });
  };

  // 取消BOM编辑
  const cancelBomEdit = () => {
    bomDataValue.value.isEdit = false;
    getRouteInfo();
  };

  // 初始化拖拽排序
@@ -660,6 +1064,7 @@
        ghostClass: "sortable-ghost",
        handle: ".process-card",
        filter: ".el-button",
        delay: 500, // 长按500毫秒后开始拖拽
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex || !tableData.value[evt.oldIndex])
            return;
@@ -730,50 +1135,96 @@
  const handleViewParams = process => {
    currentProcess.value = process;
    // 调用API获取参数列表
    getProcessParamList({
      routeItemId: process.id,
      pageNum: 1,
      pageSize: 1000,
    })
      .then(res => {
        if (res.code === 200) {
          paramList.value = res.data?.records || [];
        } else {
          ElMessage.error(res.msg || "获取参数列表失败");
          paramList.value = [];
        }
        showParamListDialog.value = true;
    if (pageType.value === "order") {
      findProcessParamListOrder({
        orderId: orderId.value,
        routeItemId: process.id,
        pageNum: 1,
        pageSize: 1000,
      })
      .catch(err => {
        console.error("获取参数列表失败：", err);
        ElMessage.error("获取参数列表失败");
        paramList.value = [];
        showParamListDialog.value = true;
      });
        .then(res => {
          if (res.code === 200) {
            paramList.value = res.data || [];
          } else {
            ElMessage.error(res.msg || "获取参数列表失败");
            paramList.value = [];
          }
          showParamListDialog.value = true;
        })
        .catch(err => {
          console.error("获取参数列表失败：", err);
          ElMessage.error("获取参数列表失败");
          paramList.value = [];
          showParamListDialog.value = true;
        });
    } else {
      getProcessParamList({
        routeItemId: process.id,
        pageNum: 1,
        pageSize: 1000,
      })
        .then(res => {
          if (res.code === 200) {
            paramList.value = res.data?.records || [];
          } else {
            ElMessage.error(res.msg || "获取参数列表失败");
            paramList.value = [];
          }
          showParamListDialog.value = true;
        })
        .catch(err => {
          console.error("获取参数列表失败：", err);
          ElMessage.error("获取参数列表失败");
          paramList.value = [];
          showParamListDialog.value = true;
        });
    }
  };

  // 刷新参数列表
  const refreshParamList = () => {
    if (!currentProcess.value) return;
    // 重新调用API获取参数列表
    getProcessParamList({
      routeItemId: currentProcess.value.id,
      pageNum: 1,
      pageSize: 1000,
    })
      .then(res => {
        if (res.code === 200) {
          paramList.value = res.data?.records || [];
        } else {
          ElMessage.error(res.msg || "获取参数列表失败");
          paramList.value = [];
        }
    if (pageType.value === "order") {
      findProcessParamListOrder({
        orderId: orderId.value,
        routeItemId: currentProcess.value.id,
        pageNum: 1,
        pageSize: 1000,
      })
      .catch(err => {
        console.error("获取参数列表失败：", err);
        ElMessage.error("获取参数列表失败");
        paramList.value = [];
      });
        .then(res => {
          if (res.code === 200) {
            paramList.value = res.data || [];
          } else {
            ElMessage.error(res.msg || "获取参数列表失败");
            paramList.value = [];
          }
        })
        .catch(err => {
          console.error("获取参数列表失败：", err);
          ElMessage.error("获取参数列表失败");
          paramList.value = [];
        });
    } else {
      getProcessParamList({
        routeItemId: currentProcess.value.id,
        pageNum: 1,
        pageSize: 1000,
      })
        .then(res => {
          if (res.code === 200) {
            paramList.value = res.data?.records || [];
          } else {
            ElMessage.error(res.msg || "获取参数列表失败");
            paramList.value = [];
          }
        })
        .catch(err => {
          console.error("获取参数列表失败：", err);
          ElMessage.error("获取参数列表失败");
          paramList.value = [];
        });
    }
  };

  onUnmounted(() => {
@@ -790,10 +1241,10 @@

  .cards-wrapper {
    display: flex;
    gap: 16px;
    gap: 24px;
    overflow-x: auto;
    padding: 10px 0;
    min-height: 200px;
    /* min-height: 250px; */
  }

  .cards-wrapper::-webkit-scrollbar {
@@ -816,11 +1267,12 @@

  .process-card {
    flex-shrink: 0;
    width: 220px;
    /* width: 300px; */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* padding: 30px 24px; */
    padding: 25px 50px;
    display: flex;
    flex-direction: column;
    cursor: move;
@@ -828,45 +1280,45 @@
  }

  .process-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
  }

  .card-header {
    text-align: center;
    margin-bottom: 12px;
    margin-bottom: 20px;
  }

  .card-number {
    width: 36px;
    height: 36px;
    line-height: 36px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #409eff;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin: 0 auto 8px;
    font-size: 20px;
    margin: 0 auto 16px;
  }

  .card-process-name {
    font-size: 14px;
    font-size: 18px;
    color: #333;
    font-weight: 500;
    font-weight: 600;
    word-break: break-all;
  }

  .card-content {
    flex: 1;
    margin-bottom: 12px;
    min-height: 60px;
    margin-bottom: 20px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-info {
    font-size: 13px;
    font-size: 14px;
    color: #666;
    text-align: center;
    width: 100%;
@@ -879,7 +1331,7 @@
  }

  .product-name {
    margin-bottom: 6px;
    margin-bottom: 8px;
    word-break: break-all;
    line-height: 1.5;
    text-align: center;
@@ -887,7 +1339,7 @@

  .product-model {
    color: #909399;
    font-size: 12px;
    font-size: 13px;
    word-break: break-all;
    line-height: 1.5;
    text-align: center;
@@ -899,19 +1351,32 @@
  }

  .product-tag {
    margin: 10px 0;
    margin: 12px 0;
  }

  .card-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 12px;
    justify-content: center;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }

  .card-footer .el-button {
    padding: 0;
    font-size: 12px;
    font-size: 14px;
  }

  .card-footer .el-button:nth-child(1) {
    color: #409eff;
  }

  .card-footer .el-button:nth-child(2) {
    color: #67c23a;
  }

  .card-footer .el-button:nth-child(3) {
    color: #f56c6c;
  }

  :deep(.sortable-ghost) {
@@ -965,6 +1430,12 @@
  .section-actions {
    display: flex;
    align-items: center;
  }
  .sort-tip {
    font-size: 12px;
    color: #909399;
    margin-left: 8px;
    margin-right: 20px;
  }

  /* 工艺路线信息卡片样式 */
@@ -1043,3 +1514,11 @@
    word-break: break-all;
  }
</style>
<style scoped>
  .hover-effect:hover {
    border-color: #409eff;
    background-color: #ecf5ff;
    transform: translateY(-2px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
</style>