@utogether/udp-core 2.0.0-beta.5 → 2.0.0-beta.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@utogether/udp-core",
   "private": false,
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.7",
   "description": "",
   "type": "module",
   "main1": "index.ts",

package/src/components/SuScrollTree/ScrollPanel.vue

@@ -1,170 +1,176 @@
-<template>
-  <div class="u-scroll-panel" @click.prevent="handleClickPanel">
-    <div class="u-panel-header">
-      <h2>{{ title }}</h2>
-      <ut-button v-if="showAllButton" content="BtnExpand" @click="handleExpand(data, true)" />
-      <ut-button v-if="showAllButton" status="warning" content="BtnCollapse" @click="handleExpand(data, false)" />
-      <vxe-button icon="vxe-icon-refresh" @click="onRefresh" />
-    </div>
-    <div class="u-panel-content system-scrollbar">
-      <el-tree
-        ref="tree"
-        :data="data"
-        :props="treeOtions"
-        :expand-on-click-node="false"
-        style="background-color: #fff"
-        class="u-tree-panel"
-        node-key="id"
-        highlight-current
-        @node-click="handleNodeClick"
-      >
-        <template #default="{ node }">
-          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">
-            <i class="ri-folder-2-fill ri-lg mr-1" style="color: #fadb14" />
-          </span>
-          <span>{{ node.label }}</span>
-        </template>
-      </el-tree>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { getServiceApi } from '../../api';
-import type { Ref } from 'vue';
-import { ref, inject, watch, nextTick } from 'vue';
-
-interface IProps {
-  title: string;
-  url: string;
-  showAllButton?: boolean;
-  treeOtions: Object;
-  defaultParams?: Object;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  treeOtions: () => {
-    return {
-      children: 'children',
-      label: 'label'
-    };
-  },
-  defaultParams: () => {
-    return {};
-  },
-  showAllButton: false
-});
-
-const data = ref<any>([]);
-const tree: Ref<any | null> = ref(null);
-// 当前激活item
-const active: IRecord = inject('active');
-// tree面板变更
-const scrollPanelChange: IRecord = inject('scrollPanelChange');
-// tree 列表
-const treeList: IRecord = inject('treeList');
-
-watch(
-  () => scrollPanelChange.value,
-  () => {
-    scrollPanelChange.value && getDataList();
-  }
-);
-
-const getDataList = async (params = {}) => {
-  const query = Object.assign(params, props.defaultParams);
-  const serverData = (await getServiceApi().get(props.url, query)) as IResponseData;
-  data.value = serverData.list || serverData;
-  treeList.value = serverData.list || serverData;
-  active.value = serverData.list ? serverData.list[0] : serverData[0];
-  nextTick(() => {
-    tree.value && tree?.value.setCurrentKey(active.value?.id || '');
-  });
-  scrollPanelChange.value = false;
-};
-const handleNodeClick = (row: any) => {
-  active.value = row;
-};
-
-const handleClickPanel = () => {
-  active.value = {};
-};
-
-const handleExpand = (array, expanded) => {
-  array.forEach(el => {
-    tree.value.store.nodesMap[el.id].expanded = expanded;
-    if (el.children?.length) {
-      handleExpand(el.children, expanded);
-    }
-  });
-  console.log('[ tree.value ] >', tree.value);
-};
-
-const onRefresh = () => {
-  getDataList();
-};
-defineExpose({
-  onRefresh
-});
-getDataList();
-</script>
-
-<style lang="scss">
-.u-scroll-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: #fff;
-
-  .u-panel-header {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #eee;
-
-    h2 {
-      // display: box;
-      height: 30px;
-      padding: 0;
-      margin: 0;
-      margin-right: 20px;
-      overflow: hidden;
-      -webkit-line-clamp: 1;
-      font-size: 14px;
-      line-height: 30px;
-      -webkit-box-orient: vertical;
-    }
-
-    .el-input {
-      flex: 1;
-    }
-  }
-
-  .u-panel-content {
-    flex: 1;
-    overflow: auto;
-  }
-
-  .u-tree-panel {
-    height: 100%; // 0630
-    :deep(.el-tree-node__content) {
-      height: 36px;
-    }
-
-    :deep(.el-tree-node.is-current > .el-tree-node__content) {
-      background-color: rgb(64 158 255 / 40%);
-    }
-
-    :deep(.el-tree-node > .el-tree-node__content) {
-      transition: 0.2s;
-    }
-  }
-
-  .el-vl__window {
-    height: 360px !important;
-    // &:first-child {
-    //   height: 100% !important;
-    // }
-  }
-}
-</style>
+<template>
+  <div class="u-scroll-panel" @click.prevent="handleClickPanel">
+    <div class="u-panel-header">
+      <h2>{{ title }}</h2>
+      <ut-button v-if="showAllButton" content="BtnExpand" @click="handleExpand(data, true)" />
+      <ut-button v-if="showAllButton" status="warning" content="BtnCollapse" @click="handleExpand(data, false)" />
+      <vxe-button icon="vxe-icon-refresh" @click="onRefresh" />
+    </div>
+    <div class="u-panel-content system-scrollbar">
+      <el-tree
+        ref="tree"
+        :data="data"
+        :props="treeOtions"
+        :expand-on-click-node="false"
+        style="background-color: #fff"
+        class="u-tree-panel"
+        node-key="id"
+        highlight-current
+        @node-click="handleNodeClick"
+      >
+        <template #default="{ node }">
+          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">
+            <i class="ri-folder-2-fill ri-lg mr-1" style="color: #fadb14" />
+          </span>
+          <span>{{ node.label }}</span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getServiceApi } from '../../api';
+import type { Ref } from 'vue';
+import { ref, inject, watch, nextTick } from 'vue';
+
+interface IProps {
+  title: string;
+  url: string;
+  showAllButton?: boolean;
+  initLoadAll?: boolean;
+  treeOtions: Object;
+  defaultParams?: Object;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  treeOtions: () => {
+    return {
+      children: 'children',
+      label: 'label'
+    };
+  },
+  defaultParams: () => {
+    return {};
+  },
+  showAllButton: false,
+  initLoadAll: false
+});
+
+const data = ref<any>([]);
+const tree: Ref<any | null> = ref(null);
+// 当前激活item
+const active: IRecord = inject('active');
+// tree面板变更
+const scrollPanelChange: IRecord = inject('scrollPanelChange');
+// tree 列表
+const treeList: IRecord = inject('treeList');
+
+watch(
+  () => scrollPanelChange.value,
+  () => {
+    scrollPanelChange.value && getDataList();
+  }
+);
+
+const getDataList = async (params = {}) => {
+  const query = Object.assign(params, props.defaultParams);
+  const serverData = (await getServiceApi().get(props.url, query)) as IResponseData;
+  data.value = serverData.list || serverData;
+  treeList.value = serverData.list || serverData;
+  if (props.initLoadAll) {
+    active.value = {};
+  } else {
+    active.value = serverData.list ? serverData.list[0] : serverData[0];
+  }
+  nextTick(() => {
+    tree.value && tree?.value.setCurrentKey(active.value?.id || '');
+  });
+  scrollPanelChange.value = false;
+};
+const handleNodeClick = (row: any) => {
+  active.value = row;
+};
+
+const handleClickPanel = () => {
+  active.value = {};
+};
+
+const handleExpand = (array, expanded) => {
+  array.forEach(el => {
+    tree.value.store.nodesMap[el.id].expanded = expanded;
+    if (el.children?.length) {
+      handleExpand(el.children, expanded);
+    }
+  });
+  console.log('[ tree.value ] >', tree.value);
+};
+
+const onRefresh = () => {
+  getDataList();
+};
+defineExpose({
+  onRefresh
+});
+getDataList();
+</script>
+
+<style lang="scss">
+.u-scroll-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+
+  .u-panel-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+
+    h2 {
+      // display: box;
+      height: 30px;
+      padding: 0;
+      margin: 0;
+      margin-right: 20px;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      font-size: 14px;
+      line-height: 30px;
+      -webkit-box-orient: vertical;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .u-panel-content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .u-tree-panel {
+    height: 100%; // 0630
+    :deep(.el-tree-node__content) {
+      height: 36px;
+    }
+
+    :deep(.el-tree-node.is-current > .el-tree-node__content) {
+      background-color: rgb(64 158 255 / 40%);
+    }
+
+    :deep(.el-tree-node > .el-tree-node__content) {
+      transition: 0.2s;
+    }
+  }
+
+  .el-vl__window {
+    height: 360px !important;
+    // &:first-child {
+    //   height: 100% !important;
+    // }
+  }
+}
+</style>