feat(search): 基础产品维护子节点模糊查询

yuan

昨天 d1d3ea967d916d798dbb1979130137bdd5b6152c

 src/views/basicData/product/index.vue

@@ -5,7 +5,7 @@
        <el-input v-model="search"
                  style="width: 210px"
                  placeholder="输入关键字进行搜索"
                  @change="searchFilter"
                  @input="debouncedSearch"
                  @clear="searchFilter"
                  clearable
                  prefix-icon="Search" />
@@ -43,12 +43,12 @@
                <el-button type="primary"
                           link
                           :disabled="isTopLevelNode(data, node)"
                           @click="openProDia('edit', data)">
                           @click="openProDia('edit', data, node)">
                  编辑
                </el-button>
                <el-button type="primary"
                           link
                           @click="openProDia('add', data)">
                           @click="openProDia('add', data, node)">
                  添加产品
                </el-button>
                <el-button v-if="!node.childNodes.length"
@@ -285,6 +285,8 @@
  const search = ref("");
  const currentId = ref("");
  const currentParentId = ref("");
  /** 产品弹窗：add 存父节点 id；edit 存当前节点 id 与 parentId（不依赖树选中项） */
  const productDialogTarget = ref(null);
  const operationType = ref("");
  const treeLoad = ref(false);
  const list = ref([]);
@@ -388,17 +390,28 @@
    return [null, undefined, "", 0, "0"].includes(data?.parentId);
  };
  // 打开产品弹框
  const openProDia = (type, data) => {
    if (data && type === "edit" && isTopLevelNode(data)) {
  const openProDia = (type, data, node) => {
    if (data && type === "edit" && isTopLevelNode(data, node)) {
      proxy.$modal.msgWarning("一级节点不能编辑或删除");
      return;
    }
    operationType.value = type;
    productDia.value = true;
    form.value.productName = "";
    if (type === "edit") {
      form.value.productName = data.productName;
    productDialogTarget.value = null;
    if (type === "add" && data) {
      productDialogTarget.value = { parentId: data.id };
    } else if (type === "edit" && data) {
      let parentId = data.parentId;
      if (
        [null, undefined, ""].includes(parentId) &&
        node?.parent?.data?.id != null
      ) {
        parentId = node.parent.data.id;
      }
      productDialogTarget.value = { id: data.id, parentId };
    }
    productDia.value = true;
    form.value.productName =
      type === "edit" && data ? data.productName : "";
  };
  // 打开规格型号弹框
  const openModelDia = (type, data) => {
@@ -417,14 +430,16 @@
    proxy.$refs.formRef.validate(valid => {
      if (valid) {
        if (operationType.value === "add") {
          form.value.parentId = currentId.value;
          form.value.parentId =
            productDialogTarget.value?.parentId ?? currentId.value;
          form.value.id = "";
        } else if (operationType.value === "addOne") {
          form.value.id = "";
          form.value.parentId = "";
        } else {
          form.value.id = currentId.value;
          form.value.parentId = "";
          form.value.id =
            productDialogTarget.value?.id ?? currentId.value;
          form.value.parentId = productDialogTarget.value?.parentId ?? "";
        }
        addOrEditProduct(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
@@ -437,6 +452,7 @@
  // 关闭产品弹框
  const closeProDia = () => {
    proxy.$refs.formRef.resetFields();
    productDialogTarget.value = null;
    productDia.value = false;
  };

@@ -549,40 +565,31 @@
        proxy.$modal.msg("已取消");
      });
  };
  // 调用tree过滤方法 中文英过滤
  const filterNode = (value, data, node) => {
    if (!value) {
      //如果数据为空，则返回true,显示所有的数据项
      return true;
    }
    // 查询列表是否有匹配数据，将值小写，匹配英文数据
    let val = value.toLowerCase();
    return chooseNode(val, data, node); // 调用过滤二层方法
  const debounce = (fn, delay = 300) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => fn(...args), delay);
    };
  };
  // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
  const chooseNode = (value, data, node) => {
    if (data.label.indexOf(value) !== -1) {

  const debouncedSearch = debounce(() => {
    searchFilter();
  }, 300);

  const filterNode = (value, data) => {
    if (!value) return true;
    return chooseNode(value.toLowerCase(), data);
  };

  const chooseNode = (value, data) => {
    const label = (data.label || '').toLowerCase();
    if (label.indexOf(value) !== -1) {
      return true;
    }
    const level = node.level;
    // 如果传入的节点本身就是一级节点就不用校验了
    if (level === 1) {
      return false;
    if (data.children && data.children.length > 0) {
      return data.children.some(child => chooseNode(value, child));
    }
    // 先取当前节点的父节点
    let parentData = node.parent;
    // 遍历当前节点的父节点
    let index = 0;
    while (index < level - 1) {
      // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
      if (parentData.data.label.indexOf(value) !== -1) {
        return true;
      }
      // 否则的话再往上一层做匹配
      parentData = parentData.parent;
      index++;
    }
    // 没匹配到返回false
    return false;
  };
  getProductTreeList();