云文件管理系统上传组件优化

web-vue/src/components/BatchMoveDialog.vue

@@ -1,24 +1,24 @@
-<template>
+<template>
   <el-dialog
     v-model="visible"
     title="批量移动"
-    width="400px"
+    width="500px"
     :close-on-click-modal="false"
   >
-    <el-form>
-      <el-form-item label="目标文件夹">
-        <el-select v-model="targetFolderId" placeholder="请选择目标文件夹" style="width: 100%" clearable>
-          <el-option :label="parentFolderName" :value="'parent'" v-if="canGoParent" />
-          <el-option label="根目录" :value="'root'" />
-          <el-option
-            v-for="folder in folders"
-            :key="folder.id"
-            :label="folder.name"
-            :value="folder.id"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
+    <div class="form-item">
+      <span class="label">目标目录</span>
+      <el-tree-select
+        v-model="targetFolderId"
+        :data="folderTreeData"
+        :props="treeProps"
+        placeholder="请选择目标目录"
+        clearable
+        check-strictly
+        :render-after-expand="false"
+        style="flex: 1"
+        node-key="id"
+      />
+    </div>
     <template #footer>
       <el-button @click="visible = false">
         <el-icon><Close /></el-icon>
@@ -33,7 +33,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { Close, FolderOpened } from '@element-plus/icons-vue'
 
 const props = defineProps({
@@ -50,18 +50,77 @@ const visible = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
-const targetFolderId = ref('')
+const targetFolderId = ref(null)
+
+// 树形配置
+const treeProps = {
+  label: 'name',
+  children: 'children',
+  value: 'id'
+}
+
+// 转换目录数据为树形结构
+const folderTreeData = computed(() => {
+  // 根节点
+  const rootNodes = [
+    {
+      id: 'root',
+      name: '根目录',
+      children: []
+    }
+  ]
+  
+  // 递归转换后端返回的树形数据
+  const convertFolderTree = (folders) => {
+    if (!folders || folders.length === 0) return []
+    
+    return folders.map(folder => ({
+      id: folder.id,
+      name: folder.name,
+      children: folder.children && folder.children.length > 0 
+        ? convertFolderTree(folder.children) 
+        : undefined
+    }))
+  }
+  
+  // 将后端返回的目录树挂载到根目录下
+  rootNodes[0].children = convertFolderTree(props.folders)
+  
+  return rootNodes
+})
 
 const handleConfirm = () => {
   emit('confirm', targetFolderId.value)
   visible.value = false
-  targetFolderId.value = ''
+  targetFolderId.value = null
 }
 
 const open = () => {
-  targetFolderId.value = ''
+  targetFolderId.value = null
   visible.value = true
 }
 
+// 重置选中状态
+watch(visible, (val) => {
+  if (!val) {
+    targetFolderId.value = null
+  }
+})
+
 defineExpose({ open })
 </script>
+
+<style scoped>
+.form-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.label {
+  flex-shrink: 0;
+  width: 80px;
+  font-size: 14px;
+  color: #606266;
+}
+</style>