优化移动 文件弹窗层

src/views/SellTemplate/components/TreeFile.vue

 <template>
     <el-dialog v-model="show" v-loading="loading" :show-close="false" 
     :close-on-press-escape="false" :close-on-click-modal="false" 
-    style="width: 350px;">
+    style="width: 260px;">
         <template #header>
             <div class="row overflow-hide">
                 <div>
@@ -38,9 +38,8 @@
             
         </template>
         
-        <div class="TreeFile-container"
-        style="min-height: 200px;max-height: 400px;overflow: scroll;">
-            <el-input class="q-pb-md q-px-md" v-model="filterText" placeholder="关键词检索文件夹" />
+        <div class="TreeFile-container">
+            <!-- <el-input class="q-pb-md q-px-md" v-model="filterText" placeholder="关键词检索文件夹" />
             <el-tree 
             ref="treeRef"
             :data="dataList" 
@@ -50,13 +49,28 @@
             show-checkbox 
             check-strictly
             :filter-node-method="filterNode"
-            @check="handleTreeNodeClick"/>
+            @check="handleTreeNodeClick"/>-->
+            <el-tree-select
+            placeholder="请选择文件"
+            node-key="FileId"
+            :props="defaultProps" 
+            v-model="datas.FolderId"
+            :data="dataList"
+            check-strictly
+            :render-after-expand="false"
+            show-checkbox
+            check-on-click-node
+            style="width: 220px"
+            default-expand-all
+            :filter-node-method="filterNode"
+            />
+            
         </div>
         
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="()=>closedhandler()">关闭</el-button>
-                <el-button type="primary" @click="()=>MoveToFolder()"> 保存移动 </el-button>
+                <el-button :disabled="datas.FolderId==null" type="primary" @click="()=>MoveToFolder()"> 保存移动 </el-button>
             </span>
         </template>
     </el-dialog>
@@ -97,18 +111,16 @@ import FolderService from "@/services/FolderService";
     }
     const filterText = ref('')
     const treeRef = ref<InstanceType<typeof ElTree>>()
-    const defaultProps = ref(
-        {
-            children: 'ChildList',
-            label: 'FileName',
-            disabled: 'disabled',
-        }
-    )
+    const defaultProps = {
+        children: 'ChildList',
+        label: 'FileName',
+        disabled: 'disabled',
+    }
     const datas = reactive({
         pdfImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708337830000_43.png',
         adsImg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png',
         fileList: [] as Tree[],
-        FolderId: '',
+        FolderId: null as Number,
         FolderObj: {},
         checkedKeys: null as any
     })