fix: 修改打包

spring

昨天 b4e559be27b15cef3388cca703d916d591d05bbd

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1864 @@
<template>
  <div class="app-container">
    <PageHeader content="工艺路线项目" />
    <!-- å·¥è‰ºè·¯çº¿ä¿¡æ¯å±•ç¤º -->
    <el-card v-if="routeInfo.processRouteCode"
             class="route-info-card"
             shadow="hover">
      <div class="route-info">
        <div class="info-item">
          <div class="info-label-wrapper">
            <span class="info-label">工艺路线编号</span>
          </div>
          <div class="info-value-wrapper">
            <span class="info-value">{{ routeInfo.processRouteCode }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label-wrapper">
            <span class="info-label">产品名称</span>
          </div>
          <div class="info-value-wrapper">
            <span class="info-value">{{ routeInfo.productName || '-' }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label-wrapper">
            <span class="info-label">规格名称</span>
          </div>
          <div class="info-value-wrapper">
            <span class="info-value">{{ routeInfo.model || '-' }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label-wrapper">
            <span class="info-label">BOM编号</span>
          </div>
          <div class="info-value-wrapper">
            <span class="info-value">{{ routeInfo.bomNo || '-' }}</span>
          </div>
        </div>
        <div class="info-item"
             v-if="routeInfo.quantity && routeInfo.quantity !== 0">
          <div class="info-label-wrapper">
            <span class="info-label">需求数量</span>
          </div>
          <div class="info-value-wrapper">
            <span class="info-value">{{ routeInfo.quantity || '-' }}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label-wrapper">
            <span class="info-label">备注</span>
          </div>
          <div class="info-value-wrapper">
            <span class="info-value">{{ routeInfo.description }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <!-- é™„件模块 -->
    <div v-if="pageType === 'order'"
         class="section-header">
      <div class="section-title">附件</div>
    </div>
    <el-card v-if="pageType === 'order'"
             class="attachment-card"
             shadow="hover"
             style="margin-top: 10px; margin-bottom: 20px;">
      <el-table :data="attachmentTableData"
                border
                class="attachment-table">
        <el-table-column label="附件名称"
                         prop="originalFilename"
                         show-overflow-tooltip />
        <el-table-column fixed="right"
                         label="操作"
                         width="200"
                         align="center">
          <template #default="scope">
            <el-button link
                       type="primary"
                       size="small"
                       @click="downloadAttachmentFile(scope.row.downloadURL)">
              ä¸‹è½½
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- è¡¨æ ¼è§†å›¾ -->
    <div v-if="viewMode === 'table'"
         class="section-header">
      <div class="section-title">工艺路线项目列表</div>
      <div class="section-actions">
        <el-button icon="Grid"
                   @click="toggleView"
                   style="margin-right: 10px;">
          å¡ç‰‡è§†å›¾
        </el-button>
        <el-button v-if="editable"
                   type="primary"
                   @click="handleAdd">新增</el-button>
      </div>
    </div>
    <el-table v-if="viewMode === 'table'"
              ref="tableRef"
              v-loading="tableLoading"
              border
              :data="tableData"
              :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
              row-key="id"
              tooltip-effect="dark"
              class="lims-table">
      <el-table-column align="center"
                       label="序号"
                       width="60"
                       type="index" />
      <el-table-column label="工序名称"
                       prop="technologyOperationId"
                       width="200">
        <template #default="scope">
          {{ scope.row.technologyOperationName || scope.row.operationName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="参数列表"
                       min-width="160">
        <template #default="scope">
          <el-button type="primary"
                     link
                     size="small"
                     @click="handleViewParams(scope.row)">参数列表</el-button>
        </template>
      </el-table-column>
      <el-table-column label="产品名称"
                       prop="productName"
                       min-width="160" />
      <el-table-column label="规格名称"
                       prop="model"
                       min-width="140" />
      <el-table-column label="单位"
                       prop="unit"
                       width="100" />
      <el-table-column label="计费类型"
                       prop="type"
                       width="100">
        <template #default="scope">
          {{scope.row.type==0 ? "计时" : "计件"}}
        </template>
      </el-table-column>
      <el-table-column label="是否质检"
                       prop="isQuality"
                       width="100">
        <template #default="scope">
          {{scope.row.isQuality ? "是" : "否"}}
        </template>
      </el-table-column>
      <el-table-column label="是否生产"
                       prop="isProduction"
                       width="100">
        <template #default="scope">
          {{scope.row.isProduction ? "是" : "否"}}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       fixed="right"
                       width="150">
        <template #default="scope">
          <el-button type="primary"
                     link
                     size="small"
                     @click="handleEdit(scope.row)"
                     :disabled="scope.row.isComplete || !editable">编辑</el-button>
          <el-button type="danger"
                     link
                     size="small"
                     @click="handleDelete(scope.row)"
                     :disabled="scope.row.isComplete || !editable">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- å¡ç‰‡è§†å›¾ -->
    <template v-else>
      <div class="section-header">
        <div class="section-title">工艺路线项目列表</div>
        <div class="section-actions">
          <el-button icon="Menu"
                     @click="toggleView"
                     style="margin-right: 10px;">
            è¡¨æ ¼è§†å›¾
          </el-button>
          <el-button v-if="editable"
                     type="primary"
                     @click="handleAdd">新增</el-button>
        </div>
      </div>
      <div v-loading="tableLoading"
           class="card-container">
        <div ref="cardsContainer"
             class="cards-wrapper">
          <div v-for="(item, index) in tableData"
               :key="item.id || index"
               class="process-card"
               :data-index="index">
            <!-- åºå·åœ†åœˆ -->
            <div class="card-header">
              <div class="card-number">{{ index + 1 }}</div>
              <div class="card-process-name">{{ item.technologyOperationName || item.operationName || '-' }}</div>
            </div>
            <!-- äº§å“ä¿¡æ¯ -->
            <div class="card-content">
              <div v-if="item.productName"
                   class="product-info">
                <div class="product-name">{{ item.productName }}</div>
                <div v-if="item.model"
                     class="product-model">
                  {{ item.model }}
                  <!-- <span v-if="item.unit" class="product-unit">{{ item.unit }}</span> -->
                </div>
                <el-tag class="product-tag"
                        :type="item.type == 1 ? 'primary' : 'success'"
                        style="margin-left: 8px;">{{ item.type==0?'计时':'计件' }}</el-tag>
                <el-tag type="primary"
                        class="product-tag"
                        style="margin-left: 8px;"
                        v-if="item.isQuality">质检</el-tag>
                <el-tag type="primary"
                        class="product-tag"
                        style="margin-left: 8px;"
                        v-if="item.isProduction">生产</el-tag>
              </div>
              <div v-else
                   class="product-info empty">暂无产品信息</div>
            </div>
            <!-- æ“ä½œæŒ‰é’® -->
            <div class="card-footer">
              <el-button type="primary"
                         link
                         size="small"
                         @click="handleEdit(item)"
                         :disabled="item.isComplete || !editable">编辑</el-button>
              <el-button type="info"
                         link
                         size="small"
                         @click="handleViewParams(item)">参数列表</el-button>
              <el-button type="danger"
                         link
                         size="small"
                         @click="handleDelete(item)"
                         :disabled="item.isComplete || !editable">删除</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- bom模块 -->
    <div class="section-header"
         style="margin-top: 20px;">
      <div class="section-title">BOM ç»“æž„</div>
      <div class="section-actions"
           v-if="pageType === 'order' && editable">
        <el-button v-if="!bomDataValue.isEdit"
                   type="primary"
                   @click="bomDataValue.isEdit = true">
          ç¼–辑
        </el-button>
        <el-button v-if="bomDataValue.isEdit"
                   @click="cancelEditBom">
          å–消
        </el-button>
        <el-button v-if="bomDataValue.isEdit"
                   type="primary"
                   @click="handleSaveBom"
                   :loading="bomDataValue.loading">
          ä¿å­˜BOM
        </el-button>
      </div>
    </div>
    <el-table :data="bomTableData"
              border
              :preserve-expanded-content="false"
              :default-expand-all="true"
              style="width: 100%">
      <el-table-column type="expand">
        <template #default>
          <el-form ref="bomFormRef"
                   :model="bomDataValue">
            <el-table :data="bomDataValue.dataList"
                      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="pageType === 'order' && bomDataValue.isEdit"
                                :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-select v-model="row.model"
                               placeholder="请选择规格"
                               clearable
                               :disabled="!bomDataValue.isEdit || bomDataValue.dataList.some(item => (item).tempId === row.tempId)"
                               style="width: 100%"
                               @visible-change="(v) => { if (v) openBomDialog(row.tempId) }">
                      <el-option v-if="row.model"
                                 :label="row.model"
                                 :value="row.model" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="processName"
                               label="消耗工序">
                <template #default="{ row }">
                  <el-form-item v-if="pageType === 'order' && bomDataValue.isEdit"
                                :rules="bomDataValue.dataList.some(item => (item).tempId === row.tempId) ? [] : [{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
                                style="margin: 0">
                    <el-select v-model="row.processId"
                               placeholder="请选择"
                               filterable
                               clearable
                               style="width: 100%"
                               @change="value => handleBomProcessChange(row, value)"
                               :disabled="!bomDataValue.isEdit || bomDataValue.dataList.some(item => (item).tempId === row.tempId)">
                      <el-option v-for="item in bomDataValue.processOptions"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="unitQuantity"
                               label="单位产出所需数量">
                <template #default="{ row }">
                  <el-form-item v-if="pageType === 'order' && bomDataValue.isEdit"
                                :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-input-number v-model="row.unitQuantity"
                                     :min="0"
                                     :precision="2"
                                     :step="1"
                                     controls-position="right"
                                     style="width: 100%"
                                     @change="handleUnitQuantityChange"
                                     :disabled="!bomDataValue.isEdit || bomDataValue.dataList.some(item => (item).tempId === row.tempId)" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column v-if="pageType === 'order'"
                               prop="demandedQuantity"
                               label="需求总量">
                <template #default="{ row }">
                  <el-form-item v-if="pageType === 'order' && bomDataValue.isEdit"
                                :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-input-number v-model="row.demandedQuantity"
                                     :min="0"
                                     :precision="2"
                                     :step="1"
                                     controls-position="right"
                                     style="width: 100%"
                                     :disabled="true" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="unit"
                               label="单位">
                <template #default="{ row }">
                  <el-form-item v-if="pageType === 'order' && bomDataValue.isEdit"
                                :rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-input v-model="row.unit"
                              placeholder="请输入单位"
                              clearable
                              :disabled="!bomDataValue.isEdit || bomDataValue.dataList.some(item => (item).tempId === row.tempId)" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作"
                               fixed="right"
                               width="200"
                               v-if="pageType === 'order' && bomDataValue.isEdit">
                <template #default="{ row }">
                  <el-button v-if="bomDataValue.isEdit && !bomDataValue.dataList.some(item => (item).tempId === row.tempId)"
                             type="danger"
                             text
                             @click="removeBomItem(row.tempId)">删除
                  </el-button>
                  <el-button v-if="bomDataValue.isEdit"
                             type="primary"
                             text
                             @click="addBomItem(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="productName" />
      <el-table-column label="规格型号"
                       prop="model" />
    </el-table>
    <ProductSelectDialog v-if="bomDataValue.showProductDialog"
                         v-model="bomDataValue.showProductDialog"
                         :single="true"
                         @confirm="handleBomProduct" />
    <!-- ä¸Šä¼ ç»„件弹窗 -->
    <el-dialog v-model="uploadDialogVisible"
               title="上传附件"
               width="50%"
               @close="closeAttachmentUpload">
      <AttachmentUpload v-model:file-list="newFileList" />
      <template #footer>
        <el-button @click="saveAttachmentUpload"
                   type="primary">保存</el-button>
        <el-button @click="closeAttachmentUpload">关闭</el-button>
      </template>
    </el-dialog>
    <!-- æ–°å¢ž/编辑弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="operationType === 'add' ? '新增工艺路线项目' : '编辑工艺路线项目'"
               width="500px"
               @close="closeDialog">
      <el-form ref="formRef"
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-form-item label="工序"
                      v-if="operationType === 'add' || pageType === 'route'"
                      prop="technologyOperationId">
          <el-select v-model="form.technologyOperationId"
                     placeholder="请选择工序"
                     clearable
                     @change="processChange"
                     style="width: 100%">
            <el-option v-for="process in processOptions"
                       :key="process.id"
                       :label="process.name"
                       :value="process.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="工序"
                      v-else>
          <span>{{ getProcessName(form.technologyOperationId) }}</span>
        </el-form-item>
        <el-form-item label="产品名称"
                      v-if="operationType === 'add' || pageType === 'route'"
                      prop="productModelId">
          <el-button type="primary"
                     @click="showProductSelectDialog = true">
            {{ form.productName
              ? (form.model ? `${form.productName} - ${form.model}` : form.productName)
              : '选择产品' }}
          </el-button>
        </el-form-item>
        <el-form-item label="产品名称"
                      v-else>
          <span>{{ form.productName }}{{ form.model ? ' - ' + form.model : '' }}</span>
        </el-form-item>
        <el-form-item label="单位"
                      v-if="operationType === 'add' || pageType === 'route'"
                      prop="unit">
          <el-input v-model="form.unit"
                    :placeholder="form.productModelId ? '根据选择的产品自动带出' : '请先选择产品'"
                    clearable
                    :disabled="true" />
        </el-form-item>
        <el-form-item label="单位"
                      v-else>
          <span>{{ form.unit }}</span>
        </el-form-item>
        <el-form-item label="计费类型"
                      prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">计时</el-radio>
            <el-radio :label="1">计件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否质检"
                      prop="isQuality">
          <el-switch v-model="form.isQuality"
                     :active-value="true"
                     :inactive-value="false" />
        </el-form-item>
        <el-form-item label="是否生产"
                      prop="isProduction">
          <el-switch v-model="form.isProduction"
                     :active-value="true"
                     :inactive-value="false" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary"
                   @click="handleSubmit"
                   :loading="submitLoading">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>
    <!-- äº§å“é€‰æ‹©å¯¹è¯æ¡† -->
    <ProductSelectDialog v-model="showProductSelectDialog"
                         @confirm="handleProductSelect"
                         single />
    <!-- å‚数列表对话框 -->
    <ProcessParamListDialog v-model="showParamListDialog"
                            :title="`${currentProcess ? (currentProcess.processName || currentProcess.technologyOperationName || currentProcess.operationName) : ''} - å‚数列表`"
                            :route-id="routeId"
                            :order-id="orderId"
                            :process="currentProcess"
                            :page-type="pageType"
                            :param-list="paramList"
                            :editable="editable"
                            @getsyncProcessParamItem="getsyncProcessParamItem"
                            @refresh="refreshParamList" />
  </div>
</template>

<script setup>
  import {
    ref,
    computed,
    getCurrentInstance,
    onMounted,
    onUnmounted,
    nextTick,
  } from "vue";
  import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
  import ProcessParamListDialog from "@/components/ProcessParamListDialog.vue";
  import {
    findProcessRouteItemList,
    addOrUpdateProcessRouteItem,
    addOrUpdateProcessRouteItem1,
    sortProcessRouteItem,
    batchDeleteProcessRouteItem,
    getProcessParamList,
  } from "@/api/productionManagement/processRouteItem.js";
  import {
    syncProcessParamItem,
    syncProcessParamItemOrder,
  } from "@/api/productionManagement/processRouteItem.js";
  import {
    findProductProcessRouteItemList,
    deleteRouteItem,
    addRouteItem,
    findProcessParamListOrder,
    addOrUpdateProductProcessRouteItem,
    sortRouteItem,
  } from "@/api/productionManagement/productProcessRoute.js";
  import { processList } from "@/api/productionManagement/productionProcess.js";
  import { listProcessBom } from "@/api/productionManagement/productionOrder.js";
  import {
    queryList,
    queryList2,
    add2,
  } from "@/api/productionManagement/productStructure.js";
  import AttachmentUpload from "@/components/AttachmentUpload/file/index.vue";
  import {
    attachmentList,
    deleteAttachment,
    createAttachment,
  } from "@/api/basicData/storageAttachment.js";

  import { useRoute } from "vue-router";
  import { ElMessageBox, ElMessage } from "element-plus";
  import Sortable from "sortablejs";

  const route = useRoute();
  const { proxy } = getCurrentInstance() || {};

  const routeId = computed(() => route.query.id);
  const orderId = computed(() => route.query.orderId);
  const pageType = computed(() => route.query.type);
  const editable = computed(() => route.query.editable !== "false");
  const technologyRoutingId = computed(() => route.query.technologyRoutingId);

  const tableLoading = ref(false);
  const tableData = ref([]);
  const dialogVisible = ref(false);
  const operationType = ref("add"); // add | edit
  const formRef = ref(null);
  const bomFormRef = ref(null);
  const submitLoading = ref(false);
  const cardsContainer = ref(null);
  const tableRef = ref(null);
  const viewMode = ref("card"); // table | card
  const routeInfo = ref({
    processRouteCode: "",
    productName: "",
    model: "",
    bomNo: "",
    description: "",
    quantity: 0,
    technologyRoutingId: "",
  });

  // é™„件相关
  const attachmentTableData = ref([]);
  const uploadDialogVisible = ref(false);
  const newFileList = ref([]);

  const getAttachmentList = () => {
    if (!technologyRoutingId.value) return;
    attachmentList({
      recordType: "technology_routing",
      recordId: technologyRoutingId.value,
    }).then(res => {
      attachmentTableData.value = (res && res.data) || [];
    });
  };

  const handleUploadAttachment = () => {
    uploadDialogVisible.value = true;
  };

  const saveAttachmentUpload = async () => {
    if (newFileList.value.length > 0) {
      createAttachment({
        application: "file",
        recordType: "technology_routing",
        recordId: technologyRoutingId.value,
        storageBlobDTOs: [...newFileList.value, ...attachmentTableData.value],
      })
        .then(res => {
          if (res && res.code === 200) {
            proxy?.$modal?.msgSuccess("上传成功");
            newFileList.value = [];
            getAttachmentList();
          }
        })
        .finally(() => {
          uploadDialogVisible.value = false;
        });
    }
  };

  const closeAttachmentUpload = () => {
    newFileList.value = [];
    uploadDialogVisible.value = false;
  };

  const handleDeleteAttachment = async row => {
    deleteAttachment([row.storageAttachmentId]).then(res => {
      if (res && res.code === 200) {
        proxy?.$modal?.msgSuccess("删除成功");
        getAttachmentList();
      }
    });
  };

  const downloadAttachmentFile = url => {
    window.open(url, "_blank");
  };

  const processOptions = ref([]);
  const showProductSelectDialog = ref(false);
  const showParamListDialog = ref(false);
  const currentProcess = ref(null);
  const paramList = ref([]);
  let tableSortable = null;
  let cardSortable = null;

  // åˆ‡æ¢è§†å›¾
  const toggleView = () => {
    viewMode.value = viewMode.value === "table" ? "card" : "table";
    // åˆ‡æ¢è§†å›¾åŽé‡æ–°åˆå§‹åŒ–拖拽排序
    nextTick(() => {
      initSortable();
    });
  };

  const form = ref({
    id: undefined,
    routeId: routeId.value,
    technologyOperationId: undefined,
    productModelId: undefined,
    productName: "",
    model: "",
    unit: "",
    isQuality: false,
    type: 0,
    isProduction: false,
  });

  const rules = {
    technologyOperationId: [
      { required: true, message: "请选择工序", trigger: "change" },
    ],
    productModelId: [
      { required: true, message: "请选择产品", trigger: "change" },
    ],
  };

  const getsyncProcessParamItem = () => {
    ElMessageBox.confirm("是否覆盖当前工序已存在参数？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        if (pageType.value === "order") {
          syncProcessParamItemOrder({
            replaceExisting: true,
            technologyRoutingOperationId: currentProcess.value.id,
          }).then(res => {
            if (res.code === 200) {
              ElMessage.success("同步成功");
              refreshParamList();
            } else {
              ElMessage.error(res.msg || "同步失败");
            }
          });
        } else {
          syncProcessParamItem({
            replaceExisting: true,
            technologyRoutingOperationId: currentProcess.value.id,
          }).then(res => {
            if (res.code === 200) {
              ElMessage.success("同步成功");
              refreshParamList();
            } else {
              ElMessage.error(res.msg || "同步失败");
            }
          });
        }
      })
      .catch(() => {});
  };

  // æ ¹æ®å·¥åºID获取工序名称
  const getProcessName = technologyOperationId => {
    if (!technologyOperationId) return "";
    const process = processOptions.value.find(
      p => p.id === technologyOperationId
    );
    return process ? process.name : "";
  };

  // èŽ·å–列表
  const getList = () => {
    tableLoading.value = true;
    const listPromise =
      pageType.value === "order"
        ? findProductProcessRouteItemList({ orderId: orderId.value })
        : findProcessRouteItemList({ routeId: routeId.value });

    listPromise
      .then(res => {
        tableData.value = res.data || [];
        tableLoading.value = false;
        // åˆ—表加载完成后初始化拖拽排序
        nextTick(() => {
          initSortable();
        });
      })
      .catch(err => {
        tableLoading.value = false;
        console.error("获取列表失败：", err);
        proxy?.$modal?.msgError("获取列表失败");
      });
  };

  // èŽ·å–工序列表
  const getProcessList = () => {
    processList({ size: -1, current: -1 })
      .then(res => {
        processOptions.value = res.data.records || [];
        bomDataValue.value.processOptions = processOptions.value;
      })
      .catch(err => {
        console.error("获取工序失败：", err);
      });
  };

  // èŽ·å–工艺路线详情（从路由参数获取）
  const getRouteInfo = () => {
    routeInfo.value = {
      processRouteCode: route.query.processRouteCode || "",
      productName: route.query.productName || "",
      model: route.query.model || "",
      bomNo: route.query.bomNo || "",
      bomId: route.query.bomId || "",
      description: route.query.description || "",
      quantity: route.query.quantity || 0,
      technologyRoutingId: route.query.technologyRoutingId || "",
      status: !(route.query.status == 1 || route.query.status === "false"),
    };
    bomTableData.value[0].productName = routeInfo.value.productName;
    bomTableData.value[0].model = routeInfo.value.model;
    bomTableData.value[0].bomNo = routeInfo.value.bomNo;
  };

  // æ–°å¢ž
  const handleAdd = () => {
    operationType.value = "add";
    resetForm();
    dialogVisible.value = true;
  };

  // ç¼–辑
  const handleEdit = row => {
    operationType.value = "edit";
    form.value = {
      id: row.id,
      routeId: routeId.value,
      technologyOperationId: row.technologyOperationId,
      productModelId: row.productModelId,
      productName: row.productName || "",
      model: row.model || "",
      unit: row.unit || "",
      isQuality: row.isQuality,
      type: row.type || 0,
      isProduction: row.isProduction,
    };
    dialogVisible.value = true;
  };

  // åˆ é™¤
  const handleDelete = row => {
    ElMessageBox.confirm("确认删除该工艺路线项目？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // ç”Ÿäº§è®¢å•ä¸‹ä½¿ç”¨ productProcessRoute çš„删除接口（路由后拼接 id），其它情况使用工艺路线项目批量删除接口
        const deletePromise =
          pageType.value === "order"
            ? deleteRouteItem(row.id)
            : batchDeleteProcessRouteItem([row.id]);

        deletePromise
          .then(() => {
            proxy?.$modal?.msgSuccess("删除成功");
            getList();
          })
          .catch(() => {
            proxy?.$modal?.msgError("删除失败");
          });
      })
      .catch(() => {});
  };

  // äº§å“é€‰æ‹©
  const handleProductSelect = products => {
    console.log(products, "===products===");
    if (products && products.length > 0) {
      const product = products[0];
      console.log(product, "product");
      form.value = {
        ...form.value,
        productModelId: product.id,
        productName: product.productName,
        model: product.model,
        unit: product.unit || "",
      };
      showProductSelectDialog.value = false;
      // è§¦å‘表单验证
      // formRef.value?.validateField("productModelId");
    }
  };

  // æäº¤
  const handleSubmit = () => {
    formRef.value.validate(valid => {
      if (valid) {
        submitLoading.value = true;

        if (operationType.value === "add") {
          // æ–°å¢žï¼šä¼ å•ä¸ªå¯¹è±¡ï¼ŒåŒ…含dragSort字段
          // dragSort = å½“前列表长度 + 1，表示新增记录排在最后
          const dragSort = tableData.value.length + 1;
          const isOrderPage = pageType.value === "order";

          const addPromise = isOrderPage
            ? addRouteItem({
                productionOrderId: Number(orderId.value),
                orderRoutingId: Number(routeId.value),
                technologyOperationId: form.value.technologyOperationId,
                technologyRoutingId: Number(routeId.value),
                operationName: getProcessName(form.value.technologyOperationId),
                productModelId: form.value.productModelId,
                isQuality: form.value.isQuality,
                type: form.value.type,
                isProduction: form.value.isProduction,
                dragSort,
              })
            : addOrUpdateProcessRouteItem({
                technologyRoutingId: Number(routeId.value),
                technologyOperationId: form.value.technologyOperationId,
                productModelId: form.value.productModelId,
                isQuality: form.value.isQuality,
                type: form.value.type,
                isProduction: form.value.isProduction,
                dragSort,
              });

          addPromise
            .then(() => {
              proxy?.$modal?.msgSuccess("新增成功");
              closeDialog();
              getList();
            })
            .catch(() => {
              proxy?.$modal?.msgError("新增失败");
            })
            .finally(() => {
              submitLoading.value = false;
            });
        } else {
          // ç¼–辑：生产订单下使用 productProcessRoute/updateRouteItem，其它情况使用工艺路线项目更新接口
          const isOrderPage = pageType.value === "order";

          const updatePromise = isOrderPage
            ? addOrUpdateProductProcessRouteItem({
                id: form.value.id,
                technologyOperationId: form.value.technologyOperationId,
                operationName: getProcessName(form.value.technologyOperationId),
                productModelId: form.value.productModelId,
                isQuality: form.value.isQuality,
                type: form.value.type,
                isProduction: form.value.isProduction,
              })
            : addOrUpdateProcessRouteItem1({
                technologyRoutingId: Number(routeId.value),
                technologyOperationId: form.value.technologyOperationId,
                productModelId: form.value.productModelId,
                id: form.value.id,
                isQuality: form.value.isQuality,
                type: form.value.type,
                isProduction: form.value.isProduction,
              });

          updatePromise
            .then(() => {
              proxy?.$modal?.msgSuccess("修改成功");
              closeDialog();
              getList();
            })
            .catch(() => {
              proxy?.$modal?.msgError("修改失败");
            })
            .finally(() => {
              submitLoading.value = false;
            });
        }
      }
    });
  };

  // é‡ç½®è¡¨å•
  const resetForm = () => {
    form.value = {
      id: undefined,
      routeId: routeId.value,
      technologyOperationId: undefined,
      productModelId: undefined,
      productName: "",
      model: "",
      unit: "",
      isQuality: false,
      type: 0,
      isProduction: false,
    };
    formRef.value?.resetFields();
  };

  // å…³é—­å¼¹çª—
  const closeDialog = () => {
    dialogVisible.value = false;
    resetForm();
  };

  // æŸ¥çœ‹å‚数列表
  const handleViewParams = row => {
    currentProcess.value = row;
    const param = {
      productionOrderRoutingOperationId: row.id,
      productionOrderId: orderId.value,
    };
    const param1 = {
      technologyRoutingOperationId: row.id,
      productionOrderId: orderId.value,
    };

    const apiPromise =
      pageType.value === "order"
        ? findProcessParamListOrder(param)
        : getProcessParamList(param1);

    apiPromise
      .then(res => {
        paramList.value = res.data || [];
        showParamListDialog.value = true;
      })
      .catch(err => {
        console.error("获取参数列表失败：", err);
        proxy?.$modal?.msgError("获取参数列表失败");
      });
  };

  // åˆ·æ–°å‚数列表
  const refreshParamList = () => {
    if (currentProcess.value) {
      handleViewParams(currentProcess.value);
    }
  };

  // åˆå§‹åŒ–拖拽排序
  const initSortable = () => {
    destroySortable();
    if (!editable.value) return;

    if (viewMode.value === "table") {
      // è¡¨æ ¼è§†å›¾çš„拖拽排序
      if (!tableRef.value) return;

      const tbody =
        tableRef.value.$el.querySelector(".el-table__body tbody") ||
        tableRef.value.$el.querySelector(
          ".el-table__body-wrapper > table > tbody"
        );

      if (!tbody) return;

      tableSortable = new Sortable(tbody, {
        animation: 150,
        ghostClass: "sortable-ghost",
        handle: ".el-table__row",
        filter: ".el-button, .el-select",
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex || !tableData.value[evt.oldIndex])
            return;

          // é‡æ–°æŽ’序数组
          const moveItem = tableData.value.splice(evt.oldIndex, 1)[0];
          tableData.value.splice(evt.newIndex, 0, moveItem);

          // è®¡ç®—新的序号（dragSort从1开始）
          const newIndex = evt.newIndex;
          const dragSort = newIndex + 1;

          // è°ƒç”¨æŽ’序接口
          if (moveItem.id) {
            const isOrderPage = pageType.value === "order";
            const sortPromise = isOrderPage
              ? sortRouteItem({
                  id: moveItem.id,
                  dragSort: dragSort,
                })
              : sortProcessRouteItem({
                  id: moveItem.id,
                  dragSort: dragSort,
                });

            sortPromise
              .then(() => {
                // æ›´æ–°æ‰€æœ‰è¡Œçš„dragSort
                tableData.value.forEach((item, index) => {
                  if (item.id) {
                    item.dragSort = index + 1;
                  }
                });
                proxy?.$modal?.msgSuccess("排序成功");
              })
              .catch(err => {
                // æŽ’序失败，恢复原数组
                tableData.value.splice(newIndex, 1);
                tableData.value.splice(evt.oldIndex, 0, moveItem);
                proxy?.$modal?.msgError("排序失败");
                console.error("排序失败：", err);
              });
          }
        },
      });
    } else {
      // å¡ç‰‡è§†å›¾çš„拖拽排序
      if (!cardsContainer.value) return;

      cardSortable = new Sortable(cardsContainer.value, {
        animation: 150,
        ghostClass: "sortable-ghost",
        handle: ".process-card",
        filter: ".el-button",
        onEnd: evt => {
          if (evt.oldIndex === evt.newIndex || !tableData.value[evt.oldIndex])
            return;

          // é‡æ–°æŽ’序数组
          const moveItem = tableData.value.splice(evt.oldIndex, 1)[0];
          tableData.value.splice(evt.newIndex, 0, moveItem);

          // è®¡ç®—新的序号（dragSort从1开始）
          const newIndex = evt.newIndex;
          const dragSort = newIndex + 1;

          // è°ƒç”¨æŽ’序接口
          if (moveItem.id) {
            const isOrderPage = pageType.value === "order";
            const sortPromise = isOrderPage
              ? sortRouteItem({
                  id: moveItem.id,
                  dragSort: dragSort,
                })
              : sortProcessRouteItem({
                  id: moveItem.id,
                  dragSort: dragSort,
                });

            sortPromise
              .then(() => {
                // æ›´æ–°æ‰€æœ‰è¡Œçš„dragSort
                tableData.value.forEach((item, index) => {
                  if (item.id) {
                    item.dragSort = index + 1;
                  }
                });
                proxy?.$modal?.msgSuccess("排序成功");
              })
              .catch(err => {
                // æŽ’序失败，恢复原数组
                tableData.value.splice(newIndex, 1);
                tableData.value.splice(evt.oldIndex, 0, moveItem);
                proxy?.$modal?.msgError("排序失败");
                console.error("排序失败：", err);
              });
          }
        },
      });
    }
  };

  // é”€æ¯æ‹–拽排序
  const destroySortable = () => {
    if (tableSortable) {
      tableSortable.destroy();
      tableSortable = null;
    }
    if (cardSortable) {
      cardSortable.destroy();
      cardSortable = null;
    }
  };

  // BOM相关状态和方法
  const bomTableData = ref([
    {
      productName: "",
      model: "",
      bomNo: "",
    },
  ]);

  const bomDataValue = ref({
    dataList: [],
    processOptions: [],
    showProductDialog: false,
    currentRowName: null,
    loading: false,
    isEdit: false,
  });

  const syncProcessOperationFields = item => {
    const processId =
      item.processId ?? item.operationId ?? item.technologyOperationId ?? "";
    if (!processId) {
      item.processId = "";
      return;
    }
    const option = bomDataValue.value.processOptions.find(
      p => p.id === processId
    );
    const processName =
      option?.name || item.processName || item.operationName || "";

    item.processId = processId;
    if (pageType.value === "order") {
      item.technologyOperationId = processId;
    } else {
      item.operationId = processId;
    }
    item.processName = processName;
    item.operationName = processName;
  };

  const normalizeTreeData = items => {
    items.forEach(item => {
      item.tempId = item.tempId || item.id || `${Date.now()}_${Math.random()}`;
      syncProcessOperationFields(item);
      if (Array.isArray(item.children) && item.children.length > 0) {
        normalizeTreeData(item.children);
      }
    });
  };

  const toQuantityNumber = value => {
    const numberValue = Number(value);
    if (!Number.isFinite(numberValue)) {
      return 0;
    }
    return Number(numberValue.toFixed(2));
  };

  const syncDemandedQuantityTree = (items, parentDemandedQuantity = null) => {
    items.forEach(item => {
      if (parentDemandedQuantity !== null) {
        item.demandedQuantity = toQuantityNumber(
          parentDemandedQuantity * toQuantityNumber(item.unitQuantity)
        );
      }

      if (Array.isArray(item.children) && item.children.length > 0) {
        syncDemandedQuantityTree(
          item.children,
          toQuantityNumber(item.demandedQuantity)
        );
      }
    });
  };

  const recalculateDemandedQuantities = () => {
    if (pageType.value !== "order") {
      return;
    }

    const rootDemandedQuantity = routeInfo.value.quantity;
    if (
      rootDemandedQuantity === undefined ||
      rootDemandedQuantity === null ||
      rootDemandedQuantity === ""
    ) {
      syncDemandedQuantityTree(bomDataValue.value.dataList);
      return;
    }

    syncDemandedQuantityTree(
      bomDataValue.value.dataList,
      toQuantityNumber(rootDemandedQuantity)
    );
  };

  const processChange = value => {
    processOptions.value.forEach(item => {
      if (item.id == value) {
        form.value.isQuality = item.isQuality;
        form.value.type = item.type || 0;
        form.value.isProduction = item.isProduction;
      }
    });
  };

  const findSiblings = (items, tempId) => {
    if (!items || items.length === 0) return null;
    // æ£€æŸ¥å½“前层级
    if (items.some(item => item.tempId === tempId)) {
      return items;
    }
    // é€’归查找子级
    for (const item of items) {
      if (item.children && item.children.length > 0) {
        const result = findSiblings(item.children, tempId);
        if (result) return result;
      }
    }
    return null;
  };

  const handleBomProcessChange = (row, value) => {
    row.processId = value || "";
    syncProcessOperationFields(row);

    // æ£€æŸ¥åŒä¸€å±‚级是否已经有其他不同的工序被选中
    const siblings = findSiblings(bomDataValue.value.dataList, row.tempId);
    if (siblings && value) {
      const hasDifferentProcess = siblings.some(sibling => {
        return (
          sibling.tempId !== row.tempId &&
          sibling.processId &&
          sibling.processId !== value
        );
      });
      if (hasDifferentProcess) {
        ElMessage.warning("同一层级已存在不同的工序，请先统一工序后再进行修改");
      }
    }
  };

  const openBomDialog = tempId => {
    bomDataValue.value.currentRowName = tempId;
    bomDataValue.value.showProductDialog = true;
  };

  const fetchBomData = async () => {
    try {
      const isOrderPage = pageType.value === "order";
      const { data } = await (isOrderPage ? queryList2 : queryList)(
        routeInfo.value.bomId
      );
      bomDataValue.value.dataList = data || [];
      normalizeTreeData(bomDataValue.value.dataList);
      recalculateDemandedQuantities();
    } catch (err) {
      console.error("获取BOM数据失败：", err);
    }
  };

  const childItem = (item, tempId, productData) => {
    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) {
      for (let child of item.children) {
        if (childItem(child, tempId, productData)) {
          return true;
        }
      }
    }
    return false;
  };

  const handleBomProduct = row => {
    if (!Array.isArray(row) || row.length === 0) {
      ElMessage.warning("请选择一个产品");
      return;
    }
    const productData = row[row.length - 1];

    const isTopLevel = bomDataValue.value.dataList.some(
      item => item.tempId === bomDataValue.value.currentRowName
    );
    if (isTopLevel) {
      if (
        productData.productName === bomTableData.value[0].productName &&
        productData.model === bomTableData.value[0].model
      ) {
        const hasOther = bomDataValue.value.dataList.some(
          item =>
            item.tempId !== bomDataValue.value.currentRowName &&
            item.productName === bomTableData.value[0].productName &&
            item.model === bomTableData.value[0].model
        );
        if (hasOther) {
          ElMessage.warning("最外层和当前产品一样的一级只能有一个");
          return;
        }
      }
    }
    bomDataValue.value.dataList.forEach(item => {
      if (item.tempId === bomDataValue.value.currentRowName) {
        item.productName = productData.productName;
        item.model = productData.model;
        item.productModelId = productData.id;
        item.unit = productData.unit || "";
        return;
      }
      childItem(item, bomDataValue.value.currentRowName, productData);
    });
    bomDataValue.value.showProductDialog = false;
  };

  const removeBomItem = tempId => {
    const topIndex = bomDataValue.value.dataList.findIndex(
      item => item.tempId === tempId
    );
    if (topIndex !== -1) {
      bomDataValue.value.dataList.splice(topIndex, 1);
      return;
    }

    const delchildItem = (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 (delchildItem(item.children, tempId)) {
            return true;
          }
        }
      }
      return false;
    };

    bomDataValue.value.dataList.forEach(item => {
      if (item.children && item.children.length > 0) {
        delchildItem(item.children, tempId);
      }
    });
  };

  const handleUnitQuantityChange = () => {
    recalculateDemandedQuantities();
  };

  const addchildItem = (item, tempId) => {
    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: "",
        [pageType.value === "order" ? "technologyOperationId" : "operationId"]:
          "",
        operationName: "",
        unitQuantity: 1,
        demandedQuantity: 0,
        children: [],
        unit: "",
        tempId: new Date().getTime(),
      });
      recalculateDemandedQuantities();
      return true;
    }
    if (item.children && item.children.length > 0) {
      for (let child of item.children) {
        if (addchildItem(child, tempId)) {
          return true;
        }
      }
    }
    return false;
  };

  const addBomItem = tempId => {
    bomDataValue.value.dataList.forEach(item => {
      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: "",
          [pageType.value === "order" ? "technologyOperationId" : "operationId"]:
            "",
          operationName: "",
          unitQuantity: 1,
          demandedQuantity: 0,
          unit: "",
          children: [],
          tempId: new Date().getTime(),
        });
        recalculateDemandedQuantities();
        return;
      }
      addchildItem(item, tempId);
    });
  };

  const validateAllBom = () => {
    let isValid = true;
    const isOrderPage = pageType.value === "order";

    const validateItem = (item, isTopLevel = false) => {
      if (!item.model) {
        ElMessage.error("请选择规格");
        isValid = false;
        return;
      }
      if (!isTopLevel && !item.processId) {
        ElMessage.error("请选择消耗工序");
        isValid = false;
        return;
      }
      if (!item.unitQuantity) {
        ElMessage.error("请输入单位产出所需数量");
        isValid = false;
        return;
      }
      if (isOrderPage && !item.demandedQuantity) {
        ElMessage.error("请输入需求总量");
        isValid = false;
        return;
      }

      if (item.children && item.children.length > 0) {
        item.children.forEach(child => {
          validateItem(child, false);
        });
      }
    };

    // æ ¡éªŒåŒä¸€å±‚级的工序是否一致
    const validateProcessConsistency = items => {
      if (!items || items.length === 0) return;

      // æ£€æŸ¥å½“前层级
      const processes = items
        .filter(item => item.processId)
        .map(item => item.processId);
      if (processes.length > 1) {
        const uniqueProcesses = [...new Set(processes)];
        if (uniqueProcesses.length > 1) {
          ElMessage.error("同一层级的工序必须一致");
          isValid = false;
          return;
        }
      }

      // é€’归检查子级
      items.forEach(item => {
        if (item.children && item.children.length > 0) {
          validateProcessConsistency(item.children);
        }
      });
    };

    bomDataValue.value.dataList.forEach(item => {
      validateItem(item, true);
    });

    validateProcessConsistency(bomDataValue.value.dataList);

    return isValid;
  };

  const buildSubmitTree = items => {
    return items.map(item => {
      const current = { ...item };
      syncProcessOperationFields(current);
      current.children = Array.isArray(current.children)
        ? buildSubmitTree(current.children)
        : [];
      return current;
    });
  };

  const cancelEditBom = () => {
    bomDataValue.value.isEdit = false;
    fetchBomData();
  };

  const handleSaveBom = () => {
    bomDataValue.value.loading = true;
    console.log(bomDataValue.value.dataList, "bomDataValue.value.dataList");

    normalizeTreeData(bomDataValue.value.dataList);
    recalculateDemandedQuantities();

    const valid = validateAllBom();
    if (valid) {
      add2({
        // bomId: Number(routeInfo.value.bomId),
        productionOrderBomId: Number(routeInfo.value.bomId) || null,
        children: buildSubmitTree(bomDataValue.value.dataList || []),
      })
        .then(() => {
          ElMessage.success("BOM保存成功");
          bomDataValue.value.isEdit = false;
          refreshCurrentPage();
        })
        .catch(() => {
          ElMessage.error("BOM保存失败");
        })
        .finally(() => {
          bomDataValue.value.loading = false;
        });
    } else {
      bomDataValue.value.loading = false;
    }
  };

  const refreshCurrentPage = () => {
    getRouteInfo();
    getList();
    getProcessList();
    fetchBomData();
    if (pageType.value === "order") {
      getAttachmentList();
    }
  };

  onMounted(() => {
    refreshCurrentPage();
  });

  onUnmounted(() => {
    destroySortable();
  });
</script>

<style scoped>
  .card-container {
    padding: 20px 0;
  }

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

  .cards-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  .cards-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .cards-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }

  .cards-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  .process-card {
    flex-shrink: 0;
    width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    cursor: move;
    transition: all 0.3s;
  }

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

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

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

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

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

  .product-info {
    font-size: 13px;
    color: #666;
    text-align: center;
    width: 100%;
  }

  .product-info.empty {
    color: #999;
    text-align: center;
    padding: 20px 0;
  }

  .product-name {
    margin-bottom: 6px;
    word-break: break-all;
    line-height: 1.5;
    text-align: center;
  }

  .product-model {
    color: #909399;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.5;
    text-align: center;
  }

  .product-unit {
    margin-left: 4px;
    color: #409eff;
  }

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

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

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

  :deep(.sortable-ghost) {
    opacity: 0.5;
    background-color: #f5f7fa !important;
  }

  :deep(.sortable-drag) {
    opacity: 0.8;
  }

  /* è¡¨æ ¼è§†å›¾æ ·å¼ */
  :deep(.el-table__row) {
    transition: background-color 0.2s;
    cursor: move;
  }

  :deep(.el-table__row:hover) {
    background-color: #f9fafc !important;
  }

  /* åŒºåŸŸæ ‡é¢˜æ ·å¼ */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    padding-left: 12px;
    position: relative;
    margin-bottom: 0;
  }

  .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: #409eff;
    border-radius: 2px;
  }

  .section-actions {
    display: flex;
    align-items: center;
  }

  /* å·¥è‰ºè·¯çº¿ä¿¡æ¯å¡ç‰‡æ ·å¼ */
  .route-info-card {
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    overflow: hidden;
  }

  .route-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 4px;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 6px;
    padding: 14px 16px;
    border: 1px solid #f0f2f5;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .info-item:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
    transform: translateY(-1px);
  }

  .info-item.full-width {
    grid-column: 1 / -1;
  }

  .info-label-wrapper {
    margin-bottom: 8px;
  }

  .info-label {
    display: inline-block;
    color: #909399;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 0;
    position: relative;
  }

  .info-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #409eff, transparent);
    border-radius: 1px;
  }

  .info-value-wrapper {
    flex: 1;
  }

  .info-value {
    display: block;
    color: #303133;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-all;
  }
</style>