feat：Tree组件 新增显示隐藏功能

@@ -31,6 +31,7 @@
   import { CreateContextOptions } from '/@/components/ContextMenu';
 
   import { CheckEvent } from './typing';
+  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 
   interface State {
     expandedKeys: Keys;
@@ -51,6 +52,14 @@
       'update:searchValue',
     ],
     setup(props, { attrs, slots, emit, expose }) {
+      /**
+       * 作者自带Tree组件
+       * 新增显示隐藏
+       * ft
+       */
+      //ft
+      const isFlod = ref(false);
+      //ft
       const state = reactive<State>({
         checkStrictly: props.checkStrictly,
         expandedKeys: props.expandedKeys || [],
@@ -205,6 +214,7 @@
       });
 
       function handleSearch(searchValue: string) {
+        console.log('searchValue', searchValue);
         if (searchValue !== searchText.value) searchText.value = searchValue;
         emit('update:searchValue', searchValue);
         if (!searchValue) {
@@ -223,6 +233,11 @@
         );
       }
 
+      //ft
+      function handleFlodOrUnFoldFunc(v) {
+        isFlod.value = v;
+      }
+      //ft
       function handleClickNode(key: string, children: TreeItem[]) {
         if (!props.clickRowToExpand || !children || children.length === 0) return;
         if (!state.expandedKeys.includes(key)) {
@@ -388,9 +403,10 @@
         const showTitle = title || toolbar || search || slots.headerTitle;
         const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         return (
-          <div class={[prefixCls, 'h-full', attrs.class]}>
+          <div style={isFlod.value ? '' : 'width:0vw'} class={[prefixCls, 'h-full', attrs.class]}>
             {showTitle && (
               <TreeHeader
+                style={'position:relative'}
                 checkable={checkable}
                 checkAll={checkAll}
                 expandAll={expandAll}
@@ -416,6 +432,28 @@
             </ScrollContainer>
 
             <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
+            <span
+              v-show={unref(isFlod)}
+              onClick={() => handleFlodOrUnFoldFunc(false)}
+              style={
+                isFlod.value
+                  ? 'z-index:9999;cursor:pointer;position:absolute;top:40vh;left:17.5vw'
+                  : 'z-index:9999;cursor:pointer;position:absolute;top:40vh;left:0.5vw'
+              }
+            >
+              <RightOutlined />
+            </span>
+            <span
+              v-show={!unref(isFlod) && unref(treeDataRef).length != 0}
+              onClick={() => handleFlodOrUnFoldFunc(true)}
+              style={
+                isFlod.value
+                  ? 'z-index:9999;cursor:pointer;position:absolute;top:40vh;left:17.5vw'
+                  : 'z-index:9999;cursor:pointer;position:absolute;top:40vh;left:0.5vw'
+              }
+            >
+              <LeftOutlined />
+            </span>
           </div>
         );
       };