refactor(ReorganizeDialog): 重构目标路径输入组件,移除不必要的目录加载逻辑

This commit is contained in:
jxxghp
2024-11-20 19:24:10 +08:00
parent 6413f30d18
commit c956e271a2
2 changed files with 29 additions and 59 deletions

View File

@@ -6,7 +6,7 @@ import { storageOptions } from '@/api/constants'
import { numberValidator } from '@/@validators'
import { useDisplay } from 'vuetify'
import ProgressDialog from './ProgressDialog.vue'
import { FileItem, TransferDirectoryConf } from '@/api/types'
import { FileItem } from '@/api/types'
// 显示器宽度
const display = useDisplay()
@@ -85,39 +85,13 @@ const transferForm = reactive({
from_history: false,
})
// 所有媒体库目录
const directories = ref<TransferDirectoryConf[]>([])
// 查询目录
async function loadDirectories() {
try {
const result: { [key: string]: any } = await api.get('system/setting/Directories')
directories.value = result.data?.value ?? []
} catch (error) {
console.log(error)
// 下载路径更新
function updateTargetPath(value: string) {
if (value !== transferForm.target_path) {
transferForm.target_path = value // 仅在值真正改变时更新
}
}
// 目的目录下拉框
const targetDirectories = computed(() => {
return directories.value.map(item => item.library_path)
})
// 监听目的路径变化,配置默认值
watch(
() => transferForm.target_path,
async newPath => {
if (newPath) {
const directory = directories.value.find(item => item.library_path === newPath)
if (directory) {
transferForm.target_storage = directory.storage ?? 'local'
transferForm.transfer_type = directory.transfer_type ?? ''
transferForm.scrape = directory.scraping ?? false
}
}
},
)
// 使用SSE监听加载进度
function startLoadingProgress() {
progressText.value = '请稍候 ...'
@@ -190,10 +164,6 @@ async function handleTransferLog(logid: number) {
console.log(e)
}
}
onMounted(() => {
loadDirectories()
})
</script>
<template>
@@ -229,15 +199,20 @@ onMounted(() => {
persistent-hint
/>
</VCol>
<VCol cols="12" md="12">
<VCombobox
v-model="transferForm.target_path"
:items="targetDirectories"
label="目的路径"
placeholder="留空自动"
hint="整理目的路径,留空将自动匹配"
persistent-hint
/>
<VCol cols="12">
<VPathField @update:modelValue="updateTargetPath" :storage="transferForm.target_storage">
<template #activator="{ menuprops }">
<VTextField
v-model="transferForm.target_path"
v-bind="menuprops"
label="目的路径"
placeholder="留空自动"
hint="整理目的路径,留空将自动匹配"
persistent-hint
clearable
/>
</template>
</VPathField>
</VCol>
</VRow>
<VRow>

View File

@@ -3,7 +3,6 @@ import api from '@/api'
import { FileItem } from '@/api/types'
import { VTreeview } from 'vuetify/labs/VTreeview'
// 输入变量为默认路径
const props = defineProps({
root: {
type: String,
@@ -16,16 +15,12 @@ const props = defineProps({
},
})
// update:modelValue 事件
const emit = defineEmits(['update:modelValue'])
// 激活的目录
const activedDirs = ref<string[]>([])
// 打开的目录
const openedDirs = ref<string[]>([])
const isUserAction = ref(false) // 标志:是否为用户主动操作
// 目录列表
const treeItems = ref<FileItem[]>([
{
name: '/',
@@ -37,19 +32,16 @@ const treeItems = ref<FileItem[]>([
},
])
// 拉取子目录
async function fetchDirs(item: any) {
return api
.post('/storage/list', item)
.then((data: any) => {
// 只添加目录到子目录
data = data.filter((i: any) => i.type === 'dir')
item.children.push(...data)
})
.catch(err => console.warn(err))
}
// 获取选择的目录路径
const selectedPath = computed(() => {
if (activedDirs.value.length > 0) {
return activedDirs.value[0]
@@ -57,13 +49,12 @@ const selectedPath = computed(() => {
return ''
})
// 监听目录变化
watch(activedDirs, newVal => {
if (!newVal.length) return
emit('update:modelValue', selectedPath)
if (!newVal.length || !isUserAction.value) return
emit('update:modelValue', selectedPath.value)
isUserAction.value = false
})
// 监听存储变化
watch(
() => props.storage,
async newVal => {
@@ -81,6 +72,10 @@ watch(
activedDirs.value = []
},
)
function handleUserSelect() {
isUserAction.value = true
}
</script>
<template>
@@ -102,7 +97,7 @@ watch(
max-height="20rem"
expand-icon="mdi-folder"
collapse-icon="mdi-folder-open"
>
</VTreeview>
@update:activated="handleUserSelect"
/>
</VMenu>
</template>