byte-sailing-vue/src/components/select-good/tree.vue

<template>
  <el-card
    shadow="always"
    :body-style="{ padding: '20px' }"
    v-loading="loading"
  >
    <div class="tree-title">
      <div class="bk"></div>
      <div>{{ $t("purchase_management.subscribe.goodClassify") }}</div>
    </div>
    <el-row class="search" style="display: flex; align-items: center">
      <el-input :placeholder="$t('search')" v-model="filterText" size="small">
      </el-input>
    </el-row>
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      default-expand-all
      @node-click="handleNodeClick"
      :filter-node-method="filterNode"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </el-card>
</template>

<script>
import * as API from "@/api/product-material/product/index.js";
// import test from "@/components/form-test/index.vue";
export default {
  name: "tree",
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: true,
      filterText: "",
      treeQuery: {
        type: "1",
        name: "",
      },
      // treeData: [],
      treeParams: {
        id: null,
        type: null,
        parentId: null,
        parentIdSet: null,
        name: null,
      },
      currentNode: {},
      treeForm: {
        loadingStatus: false,
        name: {
          label: this.$t("product_material.product.treeName"),
          type: "input",
        },
        otherButton: {
          align: "center",
          list: [
            {
              name: this.$t("cancelText"),
              methodsText: "cancel",
              cancel: () => {
                this.treeModal = false;
              },
            },
            {
              name: this.$t("submitText"),
              methodsText: "submit",
              type: "primary",
              submit: () => {
                this.treehandleSubmit();
              },
            },
          ],
        },
      },
      treeRules: {
        name: [
          {
            required: true,
            message: this.$t("product_material.product.nameRules"),
            trigger: "blur",
          },
        ],
      },
      treeModalType: "add",
      treeModal: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    // this.getTree();
  },
  methods: {
    handleMouseenter(data) {
      this.currentNode = data;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    resetForm(formName) {},
    treehandleSubmit() {
      this.$refs.form.$refs["form"].validate((valid) => {
        if (valid) {
          this.treeForm.loadingStatus = true;
          if (!this.treeParams.id) {
            API.productClassifyAdd(this.treeParams).then(
              () => {
                this.msgSuccess(this.$t("addSuccess"));
                this.treeModal = false;
                this.treeForm.loadingStatus = false;
                this.getTree();
              },
              (err) => {
                console.log("productClassifyAdd: " + err);
                this.treeForm.loadingStatus = false;
              }
            );
          } else {
            API.productClassifyEdit(this.treeParams).then(
              () => {
                this.msgSuccess(this.$t("editSuccess"));
                this.treeModal = false;
                this.treeForm.loadingStatus = false;
                this.getTree();
              },
              (err) => {
                console.log("productClassifyEdit: " + err);
                this.treeForm.loadingStatus = false;
              }
            );
          }
        }
      });
    },
    handleNodeClick(row) {
      this.$emit("treeClick", row);
    },
    getTree() {
      this.loading = true;
      API.productTree(this.treeQuery).then(
        (res) => {
          this.treeData = res.data.data;
          this.loading = false;
        },
        (err) => {
          console.log("productTree: " + err);
          this.loading = false;
        }
      );
    },
    add(row) {
      this.treeParams = {
        parentIdSet: "",
        type: "1",
        parentId: "",
        name: "",
      };
      this.treeParams.parentId = row.id;
      this.treeModal = true;
    },
    edit(node, row) {
      this.treeModalType = "edit";
      this.treeParams = {
        type: "1",
        parentId: node.parent.data.id,
        name: row.name,
        id: row.id,
      };
      this.treeModal = true;
    },
    del(row) {
      this.$confirm(this.$t("askDeleteData"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(() => {
          API.productClassifyDel({ id: row.id, type: "1" }).then(() => {
            this.msgSuccess(this.$t("deleteSuccess"));
            this.getTree();
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-title {
  display: flex;
  font-size: 14px;
  margin-bottom: 15px;
  height: 20px;
  line-height: 20px;
  .bk {
    width: 4px;
    height: 100%;
    background: rgba(0, 132, 255, 1);
    margin-right: 8px;
  }
}
.search {
  margin-bottom: 10px;
}
</style>