{"version":3,"file":"layout-tree2.mjs","names":[],"sources":["../../../../../../packages/components/layout-tree/src/layout-tree.vue"],"sourcesContent":["<template>\n  <div class=\"el-layout-tree\">\n    <div v-if=\"props.noSearchInput\" class=\"el-layout-tree-search\">\n      <el-input\n        v-model=\"filterText\"\n        class=\"input-with-select\"\n        :placeholder=\"props.filterPlaceholder\"\n        :clearable=\"props.clearable\"\n        @input=\"handleInput\"\n        @keyup.enter=\"submit\"\n      >\n        <template #append>\n          <el-button :icon=\"Search\" @click=\"submit\" />\n        </template>\n      </el-input>\n      <template v-if=\"props.showExpandIcon\">\n        <el-icon\n          class=\"el-layout-tree-search-more fold-btn\"\n          v-show=\"expandAllStatus\"\n          @click=\"handleExpand\"\n          title=\"展开\"\n        >\n          <DArrowRight />\n        </el-icon>\n        <el-icon\n          class=\"el-layout-tree-search-more expand-btn\"\n          v-show=\"!expandAllStatus\"\n          @click=\"handleExpand\"\n          title=\"折叠\"\n        >\n          <DArrowRight />\n        </el-icon>\n      </template>\n    </div>\n    <div ref=\"elLayoutTreeBody\" class=\"el-layout-tree-body\">\n      <el-scrollbar class=\"pe-layout-tree-lazy\" style=\"overflow-x: hidden\">\n        <template v-if=\"props.lazy\">\n          <el-tree\n            ref=\"tree\"\n            v-loading=\"treeLoading\"\n            :data=\"dataListData\"\n            element-loading-text=\"正在加载中...\"\n            :props=\"defaultProps\"\n            :node-key=\"props.nodeKey\"\n            :show-checkbox=\"props.showCheckbox\"\n            :expand-on-click-node=\"props.expandOnClickNode\"\n            :lazy=\"props.lazy\"\n            :lazy-key=\"props.lazyKey\"\n            :load=\"loadNode\"\n            :filter-node-method=\"filterMethod\"\n            @node-click=\"handleNodeClick\"\n          >\n            <template #default=\"{ data }\">\n              <slot :data=\"data\">\n                <template v-if=\"props.icon\">\n                  <el-icon class=\"layout-tree-icon\" :color=\"props.iconColor\">\n                    <component :is=\"props.icon\" />\n                  </el-icon>\n                </template>\n                <template v-else>\n                  <el-icon\n                    v-if=\"data.children?.length > 0\"\n                    class=\"layout-tree-icon\"\n                  >\n                    <FolderOpened />\n                  </el-icon>\n                  <el-icon v-else class=\"layout-tree-icon\">\n                    <Document />\n                  </el-icon>\n                </template>\n                <template v-if=\"props.isTooltip\">\n                  <el-tooltip\n                    effect=\"dark\"\n                    :show-after=\"500\"\n                    :content=\"data[props.label]\"\n                    :placement=\"props.placement\"\n                  >\n                    <span class=\"layout-tree-text\">{{\n                      data[props.label]\n                    }}</span>\n                    <template #content>\n                      <slot name=\"toolTip\" :row=\"data\">{{\n                        data[props.label]\n                      }}</slot>\n                    </template>\n                  </el-tooltip>\n                </template>\n                <template v-else>\n                  <span class=\"layout-tree-text\">{{ data[props.label] }}</span>\n                  <slot name=\"right\" :data=\"data\" />\n                </template>\n              </slot>\n            </template>\n          </el-tree>\n        </template>\n        <template v-else>\n          <el-tree-v2\n            ref=\"tree\"\n            v-loading=\"treeLoading\"\n            element-loading-text=\"正在加载中...\"\n            :props=\"defaultProps\"\n            :height=\"height\"\n            :filter-method=\"filterMethod\"\n            highlight-current\n            :expand-on-click-node=\"false\"\n            :check-on-click-node=\"false\"\n            :item-size=\"getItemSize\"\n            :show-checkbox=\"props.showCheckbox\"\n            :default-expanded-keys=\"defaultExpandedKeys\"\n            :is-layout-tree=\"true\"\n            empty-text=\"暂无数据\"\n            @check=\"handleChecked\"\n            @node-click=\"handleNodeClick\"\n          >\n            <template #default=\"{ data }\">\n              <slot :data=\"data\">\n                <template v-if=\"props.icon\">\n                  <el-icon class=\"layout-tree-icon\" :color=\"props.iconColor\">\n                    <component :is=\"props.icon\" />\n                  </el-icon>\n                </template>\n                <template v-else>\n                  <el-icon\n                    v-if=\"data.children?.length > 0\"\n                    class=\"layout-tree-icon\"\n                  >\n                    <FolderOpened />\n                  </el-icon>\n                  <el-icon v-else class=\"layout-tree-icon\">\n                    <Document />\n                  </el-icon>\n                </template>\n                <template v-if=\"props.isTooltip\">\n                  <el-tooltip\n                    effect=\"dark\"\n                    :show-after=\"500\"\n                    :content=\"data[props.label]\"\n                    :placement=\"props.placement\"\n                  >\n                    <span class=\"layout-tree-text\">{{\n                      data[props.label]\n                    }}</span>\n                    <template #content>\n                      <slot name=\"toolTip\" :row=\"data\">{{\n                        data[props.label]\n                      }}</slot>\n                    </template>\n                  </el-tooltip>\n                </template>\n                <template v-else>\n                  <span class=\"layout-tree-text\">{{ data[props.label] }}</span>\n                  <slot name=\"right\" :data=\"data\" />\n                </template>\n              </slot>\n            </template>\n          </el-tree-v2>\n        </template>\n      </el-scrollbar>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { Document, FolderOpened, Search, DArrowRight } from 'pit-element-icons'\nimport { flattenTree, renderTemplate } from '@pit-element-plus/utils'\nimport { useGlobalProperties } from '@pit-element-plus/hooks'\nimport { useGlobalConfig } from '@pit-element-plus/components/config-provider'\nimport { ElTreeV2 } from '@pit-element-plus/components'\nimport { layoutTreeEmits, layoutTreeProps } from './layout-tree'\nimport type {\n  CheckedInfo,\n  TreeNode,\n  TreeNodeData,\n} from '@pit-element-plus/components/tree-v2/src/types'\nimport type { LayoutTreeContext } from './types'\n\ndefineOptions({\n  name: 'ElLayoutTree',\n})\n\nconst props = defineProps(layoutTreeProps)\nconst emit = defineEmits(layoutTreeEmits)\nconst global = useGlobalProperties()\nconst isTreeShowAll = useGlobalConfig('isTreeShowAll')\nconst treeItemSize = useGlobalConfig('treeItemSize')\n\nconst filterText = ref('')\nconst dataListData: any = ref([])\nconst elLayoutTreeBody = ref()\nconst height = ref(0)\nconst treeLoading = ref(false)\nconst tree = ref<InstanceType<typeof ElTreeV2>>()\nconst defaultExpandedKeys: any = ref([])\nconst expandAllStatus: any = ref(false)\n\nconst getItemSize = computed(() => props.itemSize || treeItemSize.value)\n\nconst defaultProps = {\n  children: 'children',\n  label: props.label,\n  isLeaf: 'isLeaf',\n  value: props.nodeKey,\n}\n\nconst handleInput = () => {\n  if (props.noFilterInput) {\n    submit()\n  }\n}\n\nconst submit = () => {\n  if (props.beforeSearchCallback) {\n    props.beforeSearchCallback()\n  } else {\n    submitFn()\n  }\n}\n\nconst submitFn = () => {\n  if (props.isRequestQuery) {\n    getQueryTree()\n  } else {\n    tree.value!.filter(filterText.value)\n  }\n}\n\nconst filterMethod = (value: any, data: { [x: string]: string | any[] }) => {\n  if (!value) return true\n  return data[props.label].includes(value)\n}\n\nconst loadNode = (node: any, resolve: (data: any) => void) => {\n  if (Object.keys(node.data).length > 0) {\n    const params = {\n      ...props.queryTreeParams,\n    }\n    params[props.lazyKey] = node.data[props.lazyKey]\n    const url = renderTemplate(props.queryTreeInterface as string, params)\n    global.$http\n      .request({\n        url,\n        method: props.queryTreeInterfaceMethod,\n        data: params,\n      })\n      .then((res: any) => {\n        if (res['data'].length > 0) {\n          res['data'].forEach((item: any) => {\n            if (!item.isLeaf) {\n              item.isLeaf = !item.hasChildren\n            }\n          })\n          return resolve(res['data'])\n        } else {\n          return resolve([])\n        }\n      })\n  }\n}\n\nconst getQueryTree: LayoutTreeContext['getQueryTree'] = () => {\n  treeLoading.value = true\n  if (props.queryTreeInterface) {\n    const queryTreeParams = props.queryTreeParams as object\n    const url = renderTemplate(props.queryTreeInterface, queryTreeParams)\n    global.$http\n      .request({\n        url,\n        method: props.queryTreeInterfaceMethod,\n        data: props.queryTreeParams,\n      })\n      .then((res: any) => {\n        treeLoading.value = false\n        let data: any = []\n        if (res['data']['list']) {\n          data = res['data']['list']\n        } else if (res['data']) {\n          data = res['data']\n        }\n        if (props.lazy) {\n          // eslint-disable-next-line array-callback-return\n          data.map((item: any) => {\n            item.isLeaf = !item.hasChildren\n          })\n        }\n        if (props.defaultObjectData) {\n          // eslint-disable-next-line vue/no-mutating-props\n          props.defaultObjectData[defaultProps.children] = data\n          data = [props.defaultObjectData]\n        } else {\n          if (isTreeShowAll.value) {\n            if (data && data.length > 0) {\n              if (props.forceOnSelectAll) {\n                const newData = [\n                  {\n                    [props.nodeKey]:\n                      props.queryTreeParams &&\n                      props.queryTreeParams[props.lazyKey]\n                        ? props.queryTreeParams[props.lazyKey]\n                        : '',\n                    [defaultProps.label]: '全部',\n                    hasChildren: true,\n                    isLeaf: false,\n                    [defaultProps.children]: data,\n                  },\n                ]\n                data = newData\n              }\n            }\n          }\n        }\n        setDataList(data)\n        if (props.defaultExpandAll) {\n          nextTick(() => {\n            defaultExpandedKeys.value = getExpanedKeys(data) as never[]\n            setExpandedKeysData(defaultExpandedKeys.value)\n          })\n        } else {\n          const ids = getTreeIds2(data, props.expandedLevel)\n          nextTick(() => {\n            defaultExpandedKeys.value = ids\n            setExpandedKeysData(defaultExpandedKeys.value)\n          })\n        }\n        nextTick(() => {\n          emit('result-back', data)\n        })\n      })\n      .finally(() => {\n        treeLoading.value = false\n      })\n  }\n}\n\nconst handleNodeClick = (data: TreeNodeData, node: TreeNode, e: MouseEvent) => {\n  emit('node-click', data, node, e)\n}\n\nconst handleChecked = (data: TreeNodeData, info: CheckedInfo) => {\n  emit('check', data, info)\n}\n\nconst setCurrentKey: LayoutTreeContext['setCurrentKey'] = (\n  value: string | number\n) => {\n  nextTick(() => {\n    tree.value?.setCurrentKey(value)\n  })\n}\n\nconst setDataList: LayoutTreeContext['setDataList'] = (data: any) => {\n  if (props.lazy) {\n    dataListData.value = data\n  } else {\n    dataListData.value = data\n    tree.value?.setData(data)\n  }\n}\n\nconst setExpandedKeysData = (keys: any) => {\n  if (!props.lazy) {\n    tree.value?.setExpandedKeys(keys)\n  }\n}\n\nconst getExpanedKeys = (data: any) => {\n  const flattenTreeData = flattenTree(data).map((item) => item[props.nodeKey])\n  if (props.defaultObjectData) {\n    flattenTreeData.unshift(props.defaultObjectData[props.nodeKey])\n  } else {\n    if (isTreeShowAll.value) {\n      if (props.forceOnSelectAll) {\n        flattenTreeData.unshift(\n          props.queryTreeParams && props.queryTreeParams[props.lazyKey]\n            ? props.queryTreeParams[props.lazyKey]\n            : ''\n        )\n      }\n    }\n  }\n  return flattenTreeData\n}\n\nconst getTreeIds = (\n  data: any,\n  targetLevel: any,\n  currentLevel = 1,\n  ids: any[] = []\n) => {\n  if (currentLevel === targetLevel) {\n    for (const node of data) {\n      ids.push(node[props.nodeKey])\n    }\n  } else {\n    for (const node of data) {\n      if (node.children && node.children.length > 0) {\n        getTreeIds(node.children, targetLevel, currentLevel + 1, ids)\n      }\n    }\n  }\n  return ids\n}\n\nconst getTreeIds2 = (data: any[], currentLevel = 1, ids: any[] = []) => {\n  for (const node of data) {\n    ids.push(node[props.nodeKey])\n    if (node.children && node.children.length > 0) {\n      getTreeIds2(node.children, currentLevel + 1, ids)\n    }\n  }\n  return ids\n}\n\nconst handleExpand = () => {\n  filterText.value = ''\n  if (expandAllStatus.value) {\n    const ids = getTreeIds2(dataListData.value)\n    defaultExpandedKeys.value = ids\n    setExpandedKeysData(defaultExpandedKeys.value)\n  } else {\n    const ids = getTreeIds(dataListData.value, props.expandedLevel)\n    defaultExpandedKeys.value = ids\n    setExpandedKeysData(defaultExpandedKeys.value)\n  }\n  expandAllStatus.value = !expandAllStatus.value\n}\n\nconst query: LayoutTreeContext['query'] = () => getQueryTree()\n\nonMounted(() => {\n  nextTick(() => {\n    height.value = elLayoutTreeBody.value.clientHeight\n    if (props.isDefaultQuery) {\n      if (props.dataList && props.dataList.length === 0) {\n        getQueryTree()\n      } else {\n        setDataList(props.dataList)\n        if (props.defaultExpandAll) {\n          nextTick(() => {\n            defaultExpandedKeys.value = getExpanedKeys(\n              props.dataList\n            ) as never[]\n            setExpandedKeysData(defaultExpandedKeys.value)\n          })\n        } else {\n          const ids = getTreeIds2(props.dataList, props.expandedLevel)\n          nextTick(() => {\n            defaultExpandedKeys.value = ids\n            setExpandedKeysData(defaultExpandedKeys.value)\n          })\n        }\n      }\n    }\n  })\n})\n\ndefineExpose({\n  /**\n   * @description setCurrentKey\n   */\n  setCurrentKey,\n  /**\n   * @description getQueryTree\n   */\n  getQueryTree,\n  /**\n   * @description setDataList\n   */\n  setDataList,\n  /**\n   * @description query\n   */\n  query,\n})\n</script>\n"],"mappings":""}