byte-sailing-new/src/components/product/treeList.vue

<template>
  <div class="treeList">
    <div class="title commons-title">
      {{ title }}
    </div>
    <div class="search">
      <el-input
        v-model="search"
        placeholder="请输入搜索内容"
        clearable
        @clear="search = ''"
        @keyup.enter="searchChange"
      ></el-input>
      <!-- <el-button type="primary" @click="searchChange">搜索</el-button> -->
      <el-button type="primary" plain @click="add({ id: 0 })">
        <el-icon :size="20">
          <Plus />
        </el-icon>
      </el-button>
    </div>
    <div class="box">
      <el-tree
        :data="data"
        ref="tree"
        node-key="id"
        @node-click="treeChange"
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :current-node-key="1"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div style="flex: 1">{{ node.label}}</div>
            <div class="icon-warp" style="float: right; width: 71px; margin-left: 10px" v-if="node.label != '全部'" v-show="activeNode == data.id">
              <el-icon :size="17" @click.stop="() => edit(node, data)">
                <Edit />
              </el-icon>
              <el-icon
                :size="17"
                style="margin-left: 10px"
                @click.stop="() => add(data)"
              >
                <Plus />
              </el-icon>
              <el-icon
                :size="17"
                style="margin-left: 10px"
                @click.stop="() => del(data)"
              >
                <Delete />
              </el-icon>
            </div>
          </div>
        </template>
      </el-tree>
    </div>

    <el-dialog
      :title="treeModalType == 'add' ? '添加分类' : '编辑分类'"
      v-model="treeModal"
      width="400"
      v-loading="loading"
    >
      <byForm
        :formConfig="formConfig"
        :formOption="formOption"
        v-model="formData.data"
        :rules="rules"
        ref="byform"
      >
      </byForm>
      <template #footer>
        <el-button @click="treeModal = false" size="large">取 消</el-button>
        <el-button
          type="primary"
          v-no-double-click="submitForm"
          size="large"
          :loading="submitLoading"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { toRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import byForm from "@/components/byForm/index";

const props = defineProps({
  title: {
    type: String,
    default: "分类",
  },
  submitType: {
    type: String,
    default: "1", //默认产品
  },
  data: {
    type: Array,
    default: [],
  },
});
const search = ref("");
const emit = defineEmits(["update:modelValue"]);
const { proxy } = getCurrentInstance();
let activeNode = ref('1');
const treeChange = (e, data) => {
  let el = document.getElementsByClassName("el-tree")[0].firstElementChild;
  console.log(el)
  if(e.id != 1) {
    //删除el的is-current class name
    el.classList.remove('is-current')
  }
  activeNode.value = e.id
  if (proxy.type == "radio") {
    emit("update:modelValue", e.id);
    emit("change", e);
  } else {
    emit("change", e);
  }
};

// const filterNode = (value, data, node) => {
//   if (!value) return true;
//   return data.label.indexOf(value) !== -1;
// };
const getParents = (node, name, key) => {
  if (node.parent && node.parent.data[key]) {
    name += node.parent.data[key];
    return getParents(node.parent, name, key);
  }
  return name;
};
// 以下可实现搜索显示子节点
const filterNode = (value, data, node) => {
  let names = getParents(node, node.data.label, "label");
  let isName = names.indexOf(value) !== -1;
  return !value || isName ? true : false;
};

const searchChange = () => {
  proxy.$refs.tree.filter(search.value);
};
const byform = ref(null);
const treeListData = ref([]);
let treeModal = ref(false);
let submitLoading = ref(false);
let treeModalType = ref("add");
let currentNode = reactive({
  id: "",
});
let formData = reactive({
  data: {
    name: "",
    parentId: "",
    definition: props.submitType,
  },
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
let rules = ref({
  name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "name",
      label: "分类名称",
      required: true,
    },
  ];
});
const add = (data) => {
  treeModal.value = true;
  treeModalType.value = "add";
  formData.data = {
    name: "",
    parentId: "",
    definition: props.submitType,
  };
  formData.data.parentId = data.id;
};

const edit = (node, data) => {
  treeModal.value = true;
  treeModalType.value = "edit";
  formData.data = {
    name: data.label,
    id: data.id,
    definition: props.submitType,
  };
};

const del = (data) => {
  ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 删除
    proxy
      .post("/productClassify/delete", {
        id: data.id,
      })
      .then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getTreeList();
      });
  });
};
const submitForm = () => {
  byform.value.handleSubmit((valid) => {
    submitLoading.value = true;
    proxy.post("/productClassify/" + treeModalType.value, formData.data).then(
      (res) => {
        ElMessage({
          message: treeModalType.value == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        getTreeList();
        treeModal.value = false;
        submitLoading.value = false;
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const getTreeList = () => {
  emit("changeTreeList");
  // proxy
  //   .post("/productClassify/tree", {
  //     parentId: "",
  //     name: "",
  //     definition: props.submitType,
  //   })
  //   .then((message) => {
  //     treeListData.value = message;
  //   });
};
// getTreeList();
const handleMouseOver = (data) => {
  console.log(data, "sss");
  // currentNode.id = toRaw(data).id;
};

//为class为el-tree的第一个子元素添加一个is-current
const addClass = () => {
  let el = document.getElementsByClassName("el-tree")[0].firstElementChild;
  if(proxy.data.length > 0) {
    el.classList.add("is-current");
  } else{
    setTimeout(() => {
      addClass();
    }, 300);
  }
};
onMounted(() => {
  addClass();
});

</script>

<style lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node:hover{
  .icon-warp{
    display:block!important;
  }
}
.treeList {
  display: block;
  height: 100%;
  background: #fff;
  padding: 20px;
  height: calc(100vh - 140px);

  .search {
    margin-bottom: 20px;
    .el-input {
      width: calc(100% - 70px);
      margin-right: 10px;
      text-align: center;
    }
  }
  // .searh,.title,.box{
  //   padding-left:20px ;
  // }
  .box {
    padding-right: 0px;
    height: calc(100vh - 270px);
    overflow-y: auto;
    overflow-x: auto;
    .el-tree {
      .el-tree-node__content {
        width:min-content;
        min-width: 260px;
      }

      .el-tree-node > .el-tree-node__children {
        overflow: visible;
      }
    }
  }
}
</style>