@lambo-design/schema-tree 1.0.0-beta.2

package/index.js

@@ -0,0 +1,2 @@
+import LamboSchemaTree from './src/index';
+export default LamboSchemaTree

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lambo-design/schema-tree",
+  "version": "1.0.0-beta.2",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/shared": "^1.0.0-beta.318",
+    "@lambo-design/core": "^4.7.1-beta.171"
+  },
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
+}

package/src/index.vue

@@ -0,0 +1,416 @@
+<template>
+  <div>
+    <Input style="width: 100%" v-if="isShowSearch" search clearable v-model="searchQuery" :placeholder="placeholder" @on-search="handleSearch" @on-clear="handleSearch" />
+    <Tree ref="treeRef"
+          v-bind="$attrs"
+          :data="treeData"
+          :expand-node="expandNode"
+          :multiple="showCheckbox"
+          :show-checkbox="showCheckbox"
+          :render="renderContent"
+          @on-check-change="handleCheckChange"
+          @on-select-change="handleSelectChange">
+    </Tree>
+  </div>
+</template>
+<script>
+import ajax from '@lambo-design/shared/utils/ajax'
+import {deepCopy} from '@lambo-design/shared/utils/assist';
+
+function deepEach(list, callback) {
+  if (Array.isArray(list) && list.length) {
+    for (let idx = 0; idx < list.length; idx++) {
+      const node = list[idx];
+      let breakDeep = false;
+      if (typeof callback === 'function') {
+        try {
+          const callbackResult = callback(node, idx);
+          if (typeof callbackResult === 'boolean') {
+            breakDeep = callbackResult;
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      if (!breakDeep) {
+        deepEach(node.children, callback);
+      }
+    }
+  }
+}
+
+export default {
+  name: "schema-tree",
+  components: {},
+  data() {
+    return {
+      level: 1,
+      searchQuery: '',
+      tempData: [],
+      treeData: [],
+      expandAll: false,
+      checkNodes: [],
+    }
+  },
+  props: {
+    dataUrl: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '回车键搜索'
+    },
+    isShowSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showCheckbox: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isCustomIcon: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isCustomStatus: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isExpand: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    expandNode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    lazyModel: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    expandLevel: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    iconList: {
+      type: Array,
+      required: false,
+      default(){
+        return []
+      }
+    },
+    statusList: {
+      type: Array,
+      required: false,
+      default(){
+        return []
+      }
+    },
+    rootId: {
+      type: String,
+      default: 'root'
+    },
+    queryParams: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+  },
+  computed: {},
+  watch: {
+    queryParams: function () {
+      this.getRootData();
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      if (this.isExpand) {
+        if (this.expandLevel === 0) {
+          this.expandAll = true
+        } else if (this.expandLevel > 0){
+          this.expandAll = false
+        }
+      }
+      this.getRootData()
+    },
+    // 点击复选框时触发
+    handleCheckChange(nodes, curNode) {
+      if (!this.showCheckbox) {
+        this.setCheckStatus([curNode.id])
+      } else {
+        deepEach(nodes, (node) => {
+          if (node.selected || node.checked) {
+            this.checkNodes.push(node.id)
+          }
+        })
+        if (!curNode.checked) {
+          this.checkNodes = this.checkNodes.filter(item => item !== curNode.id)
+        }
+        this.setCheckStatus(this.checkNodes)
+      }
+      this.$emit('on-check-change', nodes, curNode)
+    },
+    setCheckStatus(selectNodes) {
+      deepEach(this.treeData, (node) => {
+        if (selectNodes.includes(node.id)) {
+          node.checked = true
+        } else if (this.treeData.length==1) {
+          this.treeData[0].checked = false
+          node.checked = false
+        }
+        if (node.checked && node.children) {
+          // 如果子节点匹配到数据，标记父节点
+          deepEach(node.children, (child) => {
+            if (!selectNodes.includes(child.id)) {
+              node.checked = false
+            }
+          })
+        }
+      })
+      deepEach(this.tempData, (node) => {
+        if (selectNodes.includes(node.id)) {
+          node.checked = true
+        } else if (this.tempData.length==1) {
+          this.tempData[0].checked = false
+          node.checked = false
+        }
+        if (node.checked && node.children) {
+          // 如果子节点匹配到数据，标记父节点
+          deepEach(node.children, (child) => {
+            if (!selectNodes.includes(child.id)) {
+              node.checked = false
+            }
+          })
+        }
+      })
+    },
+    getRootData(name) {
+      let url = name ? this.getUrl(this.rootId, name) : this.getUrl(this.rootId)
+      let self = this
+      ajax.get(url).then(function (resp) {
+        if (resp.data && resp.data.code === 1) {
+          self.processData(resp.data.data);
+          self.treeData = resp.data.data
+
+          if (!self.lazyModel) {
+            self.tempData = deepCopy(self.treeData)
+            self.handleSearch()
+          } else if (self.treeData.length > 0 && self.treeData[0].children.length == 0) {
+            self.getNode(self.treeData)
+          }
+        } else {
+          self.$Message.error('获取数据失败');
+        }
+      }).catch((err) => {
+        self.$Message.error('获取数据失败,请联系管理员');
+      })
+    },
+    getNode(node) {
+      if (this.isExpand && this.level <= this.expandLevel) {
+        this.level++
+        let self = this
+        ajax.get(this.getUrl(node[0].id)).then(function (resp) {
+          if (resp.data && resp.data.code === 1) {
+            self.processData(resp.data.data);
+            node[0].children = resp.data.data
+            self.getNode(node[0].children)
+
+          } else {
+            self.$Message.error('获取数据失败');
+          }
+        }).catch((err) => {
+          self.$Message.error('获取数据失败,请联系管理员');
+        })
+      }
+    },
+    updateNode(node) {
+      let self = this
+      ajax.get(this.getUrl(node[0].id)).then(function (resp) {
+        if (resp.data && resp.data.code === 1) {
+          self.processData(resp.data.data);
+          node[0].children = resp.data.data
+          self.getNode(node[0].children)
+        } else {
+          self.$Message.error('获取数据失败');
+        }
+      }).catch((err) => {
+        self.$Message.error('获取数据失败,请联系管理员');
+      })
+    },
+    processData(data) {
+      data.forEach(item => {
+        item.iconType = item.iconType ? item.iconType : 1;
+        item.expand = this.isExpand ? this.expandAll ? true : this.expandLevel >= this.level++ : false;
+        item.children = item.children ? item.children : [];
+        if (item.children.length > 0) {
+          this.processData(item.children);
+          this.lazyModel = false
+        }
+      });
+    },
+    renderContent(h, {root, node, data}) {
+      // 根据 icontype 过滤 iconList 并获取 icon
+      let iconRender = null
+      if (this.isCustomIcon && data.icon) {
+        const iconItem = this.iconList.find(item => item.id == data.icon);
+        if (iconItem && iconItem.type) {
+          iconRender = h('Icon', {
+            props: {
+              type: iconItem.type,
+              size: '16'
+            },
+            style: {
+              marginRight: '8px'
+            }
+          })
+        }
+      } else if (this.icon) {
+        iconRender = h('Icon', {
+          props: {
+            type: this.icon,
+            size: '16'
+          },
+          style: {
+            marginRight: '8px'
+          }
+        })
+      }
+      let statusRender = null
+      if (this.isCustomStatus && data.status) {
+        const statusItem = this.statusList.find(item => item.id == data.status);
+        if (statusItem) {
+          statusRender = h('span', {
+            style: {
+              color: statusItem.color,
+            },
+          }, "[" + statusItem.name + "]")
+        }
+      }
+      return h('span', {
+        style: {
+          width: '100%',
+        }
+      }, [
+        iconRender,
+        h('span', data.title),
+        statusRender
+      ]);
+    },
+    handleSelectChange(data) {
+      this.$emit('on-select-change', data)
+      if (data.length > 0 && data[0].children.length == 0 && this.tempData.length == 0) {
+        this.updateNode(data)
+      }
+    },
+    getUrl(paramValue, name) {
+      const hasQuery = this.dataUrl.includes('?');
+      const separator = hasQuery ? '&' : '?';
+      const params = this.queryParams
+      const queryString = new URLSearchParams(params).toString();
+      if (name) {
+        return `${this.dataUrl}${separator}${encodeURIComponent('id')}=${encodeURIComponent(paramValue)}&${encodeURIComponent('name')}=${encodeURIComponent(name)}&${queryString}`;
+      }
+      return `${this.dataUrl}${separator}${encodeURIComponent('id')}=${encodeURIComponent(paramValue)}&${queryString}`;
+    },
+    handleSearch() {
+      if (this.searchQuery.trim() === '') {
+        // 清空搜索结果
+        if (!this.lazyModel) {
+          this.treeData = deepCopy(this.tempData); // 恢复原始数据
+        } else {
+          this.getRootData()
+        }
+        return;
+      }
+      if (!this.lazyModel) {
+        this.expandNodesByQuery(this.searchQuery);
+        let temp = deepCopy(this.tempData)
+        this.removeUnexpandedNodes(temp)
+        this.treeData = temp
+      } else {
+        this.getRootData(this.searchQuery)
+      }
+      this.$emit('handleSearch', this.searchQuery)
+
+    },
+    resetExpand() {
+      // 重置所有节点的 expand 状态
+      if (!this.lazyModel) {
+        this.tempData.forEach(node => this.resetNodeExpand(node));
+      } else {
+        this.treeData.forEach(node => this.resetNodeExpand(node));
+
+      }
+    },
+    resetNodeExpand(node) {
+      node.expand = false;
+      if (node.children) {
+        node.children.forEach(child => this.resetNodeExpand(child));
+      }
+    },
+    expandNodesByQuery(query) {
+      this.resetExpand();
+      if (!this.lazyModel) {
+        this.tempData.forEach(node => this.expandNodeIfMatch(node, query));
+      } else {
+        this.treeData.forEach(node => this.expandNodeIfMatch(node, query));
+      }
+    },
+    expandNodeIfMatch(node, query) {
+      if (node.children) {
+        node.children.forEach(child => {
+          if (this.expandNodeIfMatch(child, query)) {
+            node.expand = true;
+          }
+        });
+      }
+      if (this.matchNode(node, query)) {
+        node.expand = true;
+        return true;
+      }
+      return node.expand
+    },
+    matchNode(node, query) {
+      // 根据需要调整匹配逻辑
+      const queryLower = query.toLowerCase();
+      return node.title.toLowerCase().includes(queryLower) || node.id.toLowerCase().includes(queryLower);
+    },
+    removeUnexpandedNodes(nodes) {
+      for (let i = nodes.length - 1; i >= 0; i--) {
+        const node = nodes[i];
+        if (!node.expand) {
+          // 如果节点 expand 为 false，则删除该节点
+          nodes.splice(i, 1);
+        } else {
+          // 如果节点 expand 为 true，则递归处理其子节点
+          if (node.children && node.children.length > 0) {
+            this.removeUnexpandedNodes(node.children);
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+</style>
+