68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
|
<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>
|