fix: 添加规格型号搜索

spring

2 天以前 6ce0d7be73f491fcda424ac815006a82e0d871c4

 src/views/basicData/product/index.vue

@@ -30,11 +30,8 @@
          :props="{ children: 'children', label: 'label' }"
          highlight-current
          node-key="id"
          style="
            height: calc(100vh - 190px);
            overflow-y: scroll;
            scrollbar-width: none;
          "
          class="product-tree-scroll"
          style="height: calc(100vh - 190px); overflow-y: auto"
        >
          <template #default="{ node, data }">
            <div class="custom-tree-node">
@@ -43,7 +40,7 @@
                  <component :is="data.children && data.children.length > 0
                  ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
                </el-icon>
                {{ data.label }}
                <span class="tree-node-label">{{ data.label }}</span>
              </span>
              <div>
                <el-button
@@ -76,7 +73,7 @@
        <el-button type="primary" @click="openModelDia('add')">
          新增规格型号
        </el-button>
        <ImportExcel @uploadSuccess="getModelList" />
        <ImportExcel :product-id="currentId" @uploadSuccess="getModelList" />
        <el-button
          type="danger"
          @click="handleDelete"
@@ -111,6 +108,8 @@
              <el-input
                v-model="form.productName"
                placeholder="请输入产品名称"
                maxlength="20"
                show-word-limit
                clearable
                @keydown.enter.prevent
              />
@@ -154,12 +153,22 @@
        <el-row>
          <el-col :span="24">
            <el-form-item label="单位：" prop="unit">
              <el-input
              <el-select
                v-model="modelForm.unit"
                placeholder="请输入单位"
                placeholder="请选择单位"
                clearable
                @keydown.enter.prevent
              />
                style="width: 100%"
                :filterable="isConsumablesBranch"
                :allow-create="isConsumablesBranch"
                :default-first-option="isConsumablesBranch"
              >
                <el-option
                  v-for="u in unitSelectOptions"
                  :key="u"
                  :label="u"
                  :value="u"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
@@ -175,7 +184,7 @@
</template>

<script setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { ElMessageBox } from "element-plus";
import {
  addOrEditProduct,
@@ -239,7 +248,10 @@
    productName: "",
  },
  rules: {
    productName: [{ required: true, message: "请输入", trigger: "blur" }],
    productName: [
      { required: true, message: "请输入", trigger: "blur" },
      { max: 20, message: "产品名称不能超过20个字符", trigger: "blur" },
    ],
  },
  modelForm: {
    model: "",
@@ -251,6 +263,28 @@
  },
});
const { form, rules, modelForm, modelRules } = toRefs(data);

/** 当前选中产品是否属于「耗材」大类下（沿父链查找 label 为「耗材」的节点） */
const isConsumablesBranch = computed(() => {
  if (!tree.value || !currentId.value) return false;
  const n = tree.value.getNode(currentId.value);
  if (!n) return false;
  let p = n.parent;
  while (p && p.data) {
    if (p.data.label === "耗材") return true;
    p = p.parent;
  }
  return false;
});

/** 单位下拉：耗材分支含件、个数且可手动新增；其他分支仅吨、公斤 */
const unitSelectOptions = computed(() => {
  if (isConsumablesBranch.value) {
    return ["吨", "公斤", "件", "个数",'桶'];
  }
  return ["吨", "公斤"];
});

// 查询产品树
const getProductTreeList = () => {
  treeLoad.value = true;
@@ -467,18 +501,21 @@
  display: flex;
}
.left {
  width: 380px;
  width: 450px;
  min-width: 450px;
  padding: 16px;
  background: #ffffff;
}
.right {
  width: calc(100% - 380px);
  flex: 1;
  min-width: 0;
  padding: 16px;
  margin-left: 20px;
  background: #ffffff;
}
.custom-tree-node {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -486,13 +523,42 @@
  padding-right: 8px;
}
.tree-node-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.tree-node-content .orange-icon {
  flex-shrink: 0;
}
.tree-node-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orange-icon {
  color: orange;
  font-size: 18px;
  margin-right: 8px; /* 图标与文字之间加点间距 */
}
.product-tree-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f5f7fa;
}
.product-tree-scroll::-webkit-scrollbar {
  width: 8px;
}
.product-tree-scroll::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 4px;
}
.product-tree-scroll::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}
.product-tree-scroll::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>