perf: organization tree select folding icon fixed position

@@ -31,7 +31,6 @@
   import { CreateContextOptions } from '/@/components/ContextMenu';
   import { CreateContextOptions } from '/@/components/ContextMenu';
 
 
   import { CheckEvent } from './typing';
   import { CheckEvent } from './typing';
-  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
 
   interface State {
   interface State {
     expandedKeys: Keys;
     expandedKeys: Keys;
@@ -52,13 +51,13 @@
       'update:searchValue',
       'update:searchValue',
     ],
     ],
     setup(props, { attrs, slots, emit, expose }) {
     setup(props, { attrs, slots, emit, expose }) {
-      /**
-       * 作者自带Tree组件
-       * 新增显示隐藏
-       * ft
-       */
-      //ft
-      const isFlod = ref(false);
+      // /**
+      //  * 作者自带Tree组件
+      //  * 新增显示隐藏
+      //  * ft
+      //  */
+      // //ft
+      // const isFlod = ref(false);
       //ft
       //ft
       const state = reactive<State>({
       const state = reactive<State>({
         checkStrictly: props.checkStrictly,
         checkStrictly: props.checkStrictly,
@@ -234,9 +233,9 @@
       }
       }
 
 
       //ft
       //ft
-      function handleFlodOrUnFoldFunc(v) {
-        isFlod.value = v;
-      }
+      // function handleFlodOrUnFoldFunc(v) {
+      //   isFlod.value = v;
+      // }
       //ft
       //ft
       function handleClickNode(key: string, children: TreeItem[]) {
       function handleClickNode(key: string, children: TreeItem[]) {
         if (!props.clickRowToExpand || !children || children.length === 0) return;
         if (!props.clickRowToExpand || !children || children.length === 0) return;
@@ -419,7 +418,7 @@
         const showTitle = title || toolbar || search || slots.headerTitle;
         const showTitle = title || toolbar || search || slots.headerTitle;
         const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         return (
         return (
-          <div style={isFlod.value ? '' : 'width:0vw'} class={[prefixCls, 'h-full', attrs.class]}>
+          <div class={[prefixCls, 'h-full', attrs.class]}>
             {showTitle && (
             {showTitle && (
               <TreeHeader
               <TreeHeader
                 style={'position:relative'}
                 style={'position:relative'}
@@ -448,23 +447,6 @@
             </ScrollContainer>
             </ScrollContainer>
 
 
             <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
             <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
-            <span
-              v-show={unref(isFlod)}
-              onClick={() => handleFlodOrUnFoldFunc(false)}
-              class={['is-flod', unref(isFlod) ? 'fold-right' : 'fold-left']}
-            >
-              <DoubleLeftOutlined />
-            </span>
-            <span
-              v-show={!unref(isFlod) && unref(treeDataRef).length != 0}
-              onClick={() => handleFlodOrUnFoldFunc(true)}
-              class={[
-                'is-unflod',
-                !unref(isFlod) && unref(treeDataRef).length != 0 ? 'fold-left' : 'fold-right',
-              ]}
-            >
-              <DoubleRightOutlined />
-            </span>
           </div>
           </div>
         );
         );
       };
       };
@@ -481,6 +463,7 @@
       top: 0.85rem;
       top: 0.85rem;
       left: 1.1vw;
       left: 1.1vw;
     }
     }
+
     .fold-right {
     .fold-right {
       z-index: 1;
       z-index: 1;
       cursor: pointer;
       cursor: pointer;

 <template>
 <template>
-  <div style="position: absolute"> </div>
-  <div class="bg-white m-4 mr-0 overflow-hidden">
-    <BasicTree
-      title="组织列表"
-      toolbar
-      search
-      :clickRowToExpand="false"
-      :treeData="treeData"
-      :expandedKeys="treeExpandData"
-      :replaceFields="{ key: 'id', title: 'name' }"
-      :selectedKeys="selectedKeys"
-      @select="handleSelect"
-      v-bind="$attrs"
-    />
+  <div class="organization-tree flex relative">
+    <div class="cursor-pointer flex py-4 fold-icon" :class="foldFlag ? 'absolute' : ''">
+      <div @click="handleFold">
+        <DoubleRightOutlined :class="[foldFlag ? '' : 'rotate-180']" class="text-xl transform" />
+      </div>
+    </div>
+    <div
+      :style="{ width: foldFlag ? '0px' : '100%' }"
+      :class="[foldFlag ? '' : 'my-4 ml-2']"
+      class="bg-white mr-0 overflow-hidden"
+    >
+      <BasicTree
+        title="组织列表"
+        toolbar
+        search
+        :clickRowToExpand="false"
+        :treeData="treeData"
+        :expandedKeys="treeExpandData"
+        :replaceFields="{ key: 'id', title: 'name' }"
+        :selectedKeys="selectedKeys"
+        @select="handleSelect"
+        v-bind="$attrs"
+      />
+    </div>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup name="OrganizationIdTree">
 <script lang="ts" setup name="OrganizationIdTree">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, unref } from 'vue';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { getOrganizationList } from '/@/api/system/system';
   import { getOrganizationList } from '/@/api/system/system';
+  import { DoubleRightOutlined } from '@ant-design/icons-vue';
 
 
   const emit = defineEmits(['select']);
   const emit = defineEmits(['select']);
   const treeData = ref<TreeItem[]>([]);
   const treeData = ref<TreeItem[]>([]);
@@ -37,6 +48,12 @@
   function resetOrganization() {
   function resetOrganization() {
     selectedKeys.value = [];
     selectedKeys.value = [];
   }
   }
+
+  const foldFlag = ref(true);
+  const handleFold = () => {
+    foldFlag.value = !unref(foldFlag);
+  };
+
   onMounted(async () => {
   onMounted(async () => {
     treeData.value = (await getOrganizationList()) as unknown as TreeItem[];
     treeData.value = (await getOrganizationList()) as unknown as TreeItem[];
     const getAllIds = findForAllId(treeData.value as any, []);
     const getAllIds = findForAllId(treeData.value as any, []);
@@ -47,3 +64,17 @@
     resetOrganization,
     resetOrganization,
   });
   });
 </script>
 </script>
+
+<style scoped lang="less">
+  .organization-tree {
+    .expand {
+      opacity: 0;
+    }
+
+    &:hover {
+      .expand {
+        opacity: 1;
+      }
+    }
+  }
+</style>