云文件系统初始化

web-vue/src/components/BatchMoveDialog.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="批量移动"
+    width="400px"
+    :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>
+    <template #footer>
+      <el-button @click="visible = false">
+        <el-icon><Close /></el-icon>
+        <span style="margin-left: 4px">取消</span>
+      </el-button>
+      <el-button type="primary" @click="handleConfirm">
+        <el-icon><FolderOpened /></el-icon>
+        <span style="margin-left: 4px">移动</span>
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Close, FolderOpened } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  folders: { type: Array, default: () => [] },
+  canGoParent: { type: Boolean, default: false },
+  parentFolderName: { type: String, default: '返回上一级' }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const targetFolderId = ref('')
+
+const handleConfirm = () => {
+  emit('confirm', targetFolderId.value)
+  visible.value = false
+  targetFolderId.value = ''
+}
+
+const open = () => {
+  targetFolderId.value = ''
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>