@html-zj/demo 1.0.0

package/OrgTree.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="org-tree-page">
+    <h3>机构树公共组件示例</h3>
+
+    <el-card shadow="never">
+      <el-form label-width="110px" size="mini">
+        <el-form-item label="是否有默认值">
+          <el-switch v-model="useDefault"></el-switch>
+        </el-form-item>
+        <el-form-item label="机构选择">
+          <OrgTreeSelect v-model="selectedOrgId" />
+        </el-form-item>
+      </el-form>
+      <div class="selected-value">当前值：{{ selectedOrgId || '-' }}</div>
+      <div class="selected-value">当前模式：{{ useDefault ? '有默认值' : '无默认值' }}</div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import OrgTreeSelect from '@/components/OrgTreeSelect.vue'
+
+const DEFAULT_ORG_ID = '1320'
+
+export default {
+  name: 'OrgTree',
+  components: {
+    OrgTreeSelect
+  },
+  data () {
+    return {
+      useDefault: false,
+      selectedOrgId: ''
+    }
+  },
+  watch: {
+    useDefault: {
+      immediate: true,
+      handler (value) {
+        this.selectedOrgId = value ? DEFAULT_ORG_ID : ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.org-tree-page {
+  padding: 16px;
+}
+
+.selected-value {
+  margin-top: 8px;
+  color: #606266;
+  font-size: 13px;
+}
+</style>

package/OrgTreeSelect.vue

@@ -0,0 +1,278 @@
+<template>
+  <el-popover
+    placement="bottom-start"
+    :width="width"
+    trigger="click"
+    v-model="visible"
+    @show="onPopoverShow"
+  >
+    <div class="tree-panel">
+      <el-input
+        size="mini"
+        clearable
+        :placeholder="searchPlaceholder"
+        v-model="searchKeyword"
+        @input="onSearchInput"
+      />
+      <el-tree
+        v-if="!isSearchMode"
+        ref="lazyTree"
+        class="org-tree"
+        node-key="id"
+        lazy
+        :load="loadLazyTree"
+        :props="treeProps"
+        :expand-on-click-node="false"
+        @node-click="onNodeClick"
+      />
+      <el-tree
+        v-else
+        :key="searchTreeKey"
+        class="org-tree"
+        node-key="id"
+        :data="searchTreeData"
+        :props="treeProps"
+        :default-expanded-keys="searchExpandedKeys"
+        :auto-expand-parent="true"
+        :expand-on-click-node="false"
+        @node-click="onNodeClick"
+      />
+      <!-- <div v-show="loading" class="panel-tip">加载中...</div>
+      <div v-show="searchNoResult" class="panel-tip">没有匹配到机构</div> -->
+    </div>
+    <el-input
+      slot="reference"
+      class="reference-input"
+      size="mini"
+      readonly
+      clearable
+      :placeholder="placeholder"
+      v-model="selectedName"
+      @clear="clearSelection"
+    >
+      <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
+    </el-input>
+  </el-popover>
+</template>
+
+<script>
+import { fetchOrgById, fetchOrgChildren, searchOrgTreeByName } from '@/mock/orgTreeApi'
+
+export default {
+  name: 'OrgTreeSelect',
+  // 组件对外参数说明：
+  // 1) value: 当前选中的机构 id（配合 v-model 使用）
+  // 2) placeholder/searchPlaceholder: 输入框提示文案
+  // 3) width: 下拉面板宽度
+  // 4) fetchChildrenApi/searchTreeApi/fetchByIdApi: 可注入的接口函数，默认使用 mock
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择机构'
+    },
+    searchPlaceholder: {
+      type: String,
+      default: '输入机构名称搜索'
+    },
+    width: {
+      type: Number,
+      default: 420
+    },
+    fetchChildrenApi: {
+      type: Function,
+      default: fetchOrgChildren
+    },
+    searchTreeApi: {
+      type: Function,
+      default: searchOrgTreeByName
+    },
+    fetchByIdApi: {
+      type: Function,
+      default: fetchOrgById
+    }
+  },
+  data () {
+    return {
+      // 控制 popover 展开/关闭
+      visible: false,
+      // 面板加载状态（懒加载和搜索共用）
+      loading: false,
+      // 输入框展示的机构名称（与 value 对应）
+      selectedName: '',
+      // 搜索关键词
+      searchKeyword: '',
+      // 搜索模式下的树数据
+      searchTreeData: [],
+      // 搜索模式下需要默认展开的节点 id 列表（用于展开根到目标路径）
+      searchExpandedKeys: [],
+      // 强制重建搜索树，保证 default-expanded-keys 每次搜索都生效
+      searchTreeKey: 0,
+      // 是否处于搜索模式：false=懒加载树，true=搜索结果树
+      isSearchMode: false,
+      searchNoResult: false,
+      // 搜索防抖定时器
+      searchTimer: null,
+      // el-tree 字段映射
+      treeProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'isLeaf'
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      // 外部 v-model 变化时，同步回显机构名
+      handler (id) {
+        this.syncSelectedName(id)
+      }
+    }
+  },
+  beforeDestroy () {
+    // 组件销毁前清理定时器，避免内存泄漏
+    this.clearSearchTimer()
+  },
+  methods: {
+    // 根据机构 id 拉取详情，用于默认值和回显
+    async syncSelectedName (id) {
+      if (!id) {
+        this.selectedName = ''
+        return
+      }
+      const node = await this.fetchByIdApi(id)
+      this.selectedName = node ? node.name : ''
+    },
+    async onPopoverShow () {
+      // 每次打开面板，如果当前无搜索词，切回懒加载模式
+      if (!this.searchKeyword) {
+        this.isSearchMode = false
+        this.searchTreeData = []
+        this.searchNoResult = false
+      }
+      if (this.isSearchMode) {
+        return
+      }
+      const treeRef = this.$refs.lazyTree
+      if (treeRef && treeRef.store) {
+        // 打开面板时确保根节点被加载出来
+        await treeRef.store.load(null, () => {})
+      }
+    },
+    // el-tree 懒加载函数：按父节点 id 加载直接子节点
+    async loadLazyTree (node, resolve) {
+      this.loading = true
+      try {
+        const parentId = node.level === 0 ? null : node.data.id
+        const children = await this.fetchChildrenApi(parentId)
+        resolve(
+          children.map(item => ({
+            id: item.id,
+            name: item.name,
+            isLeaf: !item.hasChildren
+          }))
+        )
+      } finally {
+        this.loading = false
+      }
+    },
+    // 输入搜索词时做防抖，减少接口调用频率
+    onSearchInput () {
+      this.clearSearchTimer()
+      this.searchTimer = setTimeout(() => {
+        this.searchTree()
+      }, 350)
+    },
+    clearSearchTimer () {
+      if (this.searchTimer) {
+        clearTimeout(this.searchTimer)
+      }
+      this.searchTimer = null
+    },
+    // 搜索机构：返回“根 -> 命中机构”的树路径结构并展开显示
+    async searchTree () {
+      const keyword = this.searchKeyword.trim()
+      if (!keyword) {
+        this.isSearchMode = false
+        this.searchTreeData = []
+        this.searchExpandedKeys = []
+        this.searchNoResult = false
+        return
+      }
+      this.loading = true
+      try {
+        const treeData = await this.searchTreeApi(keyword)
+        this.searchTreeData = treeData
+        this.searchExpandedKeys = this.collectExpandableNodeIds(treeData)
+        this.searchTreeKey += 1
+        this.isSearchMode = true
+        this.searchNoResult = treeData.length === 0
+      } finally {
+        this.loading = false
+      }
+    },
+    // 提取所有非叶子节点 id，让树从根级逐层展开
+    collectExpandableNodeIds (treeData) {
+      const keys = []
+      const loop = (nodes) => {
+        nodes.forEach(node => {
+          if (node.children && node.children.length > 0) {
+            keys.push(node.id)
+            loop(node.children)
+          }
+        })
+      }
+      loop(treeData || [])
+      return keys
+    },
+    // 点击任意节点即选中，向外抛出 input/change
+    onNodeClick (nodeData) {
+      this.selectedName = nodeData.name
+      this.visible = false
+      this.$emit('input', nodeData.id)
+      this.$emit('change', { id: nodeData.id, name: nodeData.name })
+    },
+    // 清空当前选中
+    clearSelection () {
+      this.selectedName = ''
+      this.$emit('input', '')
+      this.$emit('change', { id: '', name: '' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.reference-input {
+  cursor: pointer;
+}
+
+/* reference 插槽的输入框及图标统一显示手型 */
+.reference-input ::v-deep .el-input__inner,
+.reference-input ::v-deep .el-input__suffix {
+  cursor: pointer;
+}
+
+.tree-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.org-tree {
+  max-height: 280px;
+  overflow: auto;
+  border: 1px solid #ebeef5;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.panel-tip {
+  color: #909399;
+  font-size: 12px;
+}
+</style>

package/orgTreeApi.js

@@ -0,0 +1,90 @@
+const ORG_LIST = [
+  { id: '1000', name: '集团总部', parentId: null },
+  { id: '1100', name: '华北大区', parentId: '1000' },
+  { id: '1200', name: '华东大区', parentId: '1000' },
+  { id: '1300', name: '华南大区', parentId: '1000' },
+  { id: '1110', name: '北京分公司', parentId: '1100' },
+  { id: '1120', name: '天津分公司', parentId: '1100' },
+  { id: '1210', name: '上海分公司', parentId: '1200' },
+  { id: '1220', name: '杭州分公司', parentId: '1200' },
+  { id: '1310', name: '广州分公司', parentId: '1300' },
+  { id: '1320', name: '深圳分公司', parentId: '1300' },
+  { id: '1111', name: '北京一部', parentId: '1110' },
+  { id: '1112', name: '北京二部', parentId: '1110' },
+  { id: '1211', name: '上海浦东事业部', parentId: '1210' },
+  { id: '1212', name: '上海闵行事业部', parentId: '1210' },
+  { id: '1321', name: '深圳南山事业部', parentId: '1320' }
+]
+
+function delay (ms = 260) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+function getChildrenByParentId (parentId) {
+  const children = ORG_LIST.filter(item => item.parentId === parentId)
+  return children.map(item => ({
+    id: item.id,
+    name: item.name,
+    hasChildren: ORG_LIST.some(candidate => candidate.parentId === item.id)
+  }))
+}
+
+function getNodeById (id) {
+  return ORG_LIST.find(item => item.id === id) || null
+}
+
+function getAncestorPathIds (id) {
+  const ids = []
+  let cursor = getNodeById(id)
+  while (cursor) {
+    ids.unshift(cursor.id)
+    cursor = cursor.parentId ? getNodeById(cursor.parentId) : null
+  }
+  return ids
+}
+
+function mergePathToTree (tree, pathIds) {
+  let currentLevel = tree
+  for (let i = 0; i < pathIds.length; i++) {
+    const id = pathIds[i]
+    const source = getNodeById(id)
+    if (!source) {
+      continue
+    }
+    let currentNode = currentLevel.find(item => item.id === id)
+    if (!currentNode) {
+      currentNode = {
+        id: source.id,
+        name: source.name,
+        hasChildren: ORG_LIST.some(candidate => candidate.parentId === source.id),
+        children: []
+      }
+      currentLevel.push(currentNode)
+    }
+    currentLevel = currentNode.children
+  }
+}
+
+export async function fetchOrgChildren (parentId) {
+  await delay()
+  return getChildrenByParentId(parentId || null)
+}
+
+export async function searchOrgTreeByName (keyword) {
+  await delay(320)
+  const trimmed = (keyword || '').trim()
+  if (!trimmed) {
+    return []
+  }
+  const matchedNodes = ORG_LIST.filter(item => item.name.includes(trimmed))
+  const tree = []
+  matchedNodes.forEach(node => {
+    mergePathToTree(tree, getAncestorPathIds(node.id))
+  })
+  return tree
+}
+
+export async function fetchOrgById (id) {
+  await delay(120)
+  return getNodeById(id)
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@html-zj/demo",
+  "version": "1.0.0",
+  "description": "demo",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  }
+}