init

.svn/pristine/d8/d80cf37ad0837e8cd773ec0ac748254dbd0909f0.svn-base

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "module": "esnext",
+      "target": "es2015",
+      "moduleResolution": "Node",
+      "strict": true,
+      "allowJs": true,
+      "resolveJsonModule": true,
+      "declaration": true,
+      "emitDeclarationOnly": true,
+      "esModuleInterop": true,
+      "declarationDir": "types",
+      "jsx": "preserve",
+      "lib": ["ESNext","DOM"]
+    },
+    "include": ["src/**/*","shims-vue.d.ts"],
+    "exclude": ["node_modules"]
+}

.svn/pristine/d8/d819e4c19d2610a70740414ab77146e76ccea64c.svn-base

@@ -0,0 +1 @@
+.layui-scroll{height:100%;overflow:hidden!important}.layui-scroll-y{position:relative;height:100%}.layui-scroll-y .layui-scroll-wrap{height:100%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.layui-scroll-y .layui-scroll-track{position:absolute;top:0;right:0;bottom:0;border-radius:8px;z-index:20}.layui-scroll-y .layui-scroll-track .layui-scroll-thumb{margin:0 auto;border-radius:6px;cursor:default}.layui-scroll-y ::-webkit-scrollbar{display:none}

.svn/pristine/d8/d8235397979677f0ac8a9cece3b4317658e02f43.svn-base

@@ -0,0 +1 @@
+x
%<25>=<0E> @agO<67><4F><EFBFBD><EFBFBD><EFBFBD>A8<41>J<EFBFBD>&

.svn/pristine/d8/d848e1c3d823eb1e938c147af77d7d113c93822a.svn-base

@@ -0,0 +1,153 @@
+<script lang="ts">
+export default {
+  name: "LayTree",
+};
+</script>
+
+<script lang="ts" setup>
+import TreeNode from "./TreeNode.vue";
+import { computed, useSlots, watch, ref, onMounted, nextTick } from "vue";
+import { useTree } from "./useTree";
+import { TreeData } from "./tree";
+import { StringFn, StringOrNumber, KeysType, EditType } from "./tree.type";
+import "./index.less";
+
+export interface OriginalTreeData {
+  title: StringFn | string;
+  id: StringOrNumber;
+  field: StringFn | string;
+  children?: OriginalTreeData[];
+  disabled?: boolean;
+}
+
+export interface ReplaceFieldsOptions {
+  id?: string;
+  children?: string;
+  title?: string;
+}
+
+export interface TreeProps {
+  data: OriginalTreeData;
+  disabled?: boolean;
+  edit?: EditType;
+  checkedKeys?: KeysType;
+  checkStrictly?: boolean | string;
+  collapseTransition?: boolean;
+  onlyIconControl?: boolean;
+  selectedKey?: any;
+  showLine?: boolean;
+  showCheckbox?: boolean;
+  replaceFields?: ReplaceFieldsOptions;
+}
+
+interface TreeEmits {
+  (e: "update:checkedKeys", keys: KeysType): void;
+  (e: "update:expandKeys", keys: KeysType): void;
+  (e: "node-click", node: OriginalTreeData): void;
+}
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  checkedKeys: () => {
+    return [];
+  },
+  showCheckbox: false,
+  edit: false,
+  collapseTransition: true,
+  checkStrictly: false,
+  onlyIconControl: false,
+  disabled: false,
+  showLine: true,
+  replaceFields: () => {
+    return {
+      id: "id",
+      children: "children",
+      title: "title",
+    };
+  },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits<TreeEmits>();
+
+const className = computed(() => {
+  return {
+    "layui-tree": true,
+    "layui-form": props.showCheckbox,
+    "layui-tree-line": props.showLine,
+  };
+});
+
+let tree = ref();
+let nodeList = ref();
+const unWatch = ref(false);
+const initStatus = ref(false);
+
+const loadNodeList = () => {
+  let { tree: _tree, nodeList: _nodeList } = useTree(props, emit);
+  tree.value = _tree;
+  nodeList.value = _nodeList.value;
+};
+
+watch(
+  () => props.data,
+  () => {
+    loadNodeList();
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.checkedKeys,
+  () => {
+    if (!unWatch.value) {
+      loadNodeList();
+    }
+  }
+);
+
+watch(
+  tree,
+  () => {
+    if (initStatus.value) {
+      const { checkedKeys } = tree.value.getKeys();
+      unWatch.value = true;
+      emit("update:checkedKeys", checkedKeys);
+      setTimeout(() => {
+        unWatch.value = false;
+      }, 0);
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    initStatus.value = true;
+  });
+});
+
+function handleClick(node: TreeData) {
+  const originNode = tree.value.getOriginData(node.id);
+  emit("node-click", originNode);
+}
+</script>
+<template>
+  <div :class="className">
+    <tree-node
+      :tree="tree"
+      :node-list="nodeList"
+      :show-checkbox="showCheckbox"
+      :show-line="showLine"
+      :selectedKey="selectedKey"
+      :check-strictly="checkStrictly"
+      :collapse-transition="collapseTransition"
+      :only-icon-control="onlyIconControl"
+      @node-click="handleClick"
+    >
+      <template v-if="$slots.title" v-slot:title="{ data }">
+        <slot name="title" :data="data"></slot>
+      </template>
+    </tree-node>
+  </div>
+</template>