refactor(对话框组件): 重构文件及目录对话框的关闭逻辑
将重置表单的逻辑从close方法移到after-leave事件处理中 简化目录对话框的confirm事件参数,移除fullPath字段 清理CreateTemplateScreen中未使用的导入和状态
This commit is contained in:
1 parent
7f77c7f6f3
commit
d3f4242445
3 files changed
+17
-43
No files matched your search
@@ -2,6 +2,7 @@
|
|||||||
<v-dialog
|
<v-dialog
|
||||||
v-model="isVisible"
|
v-model="isVisible"
|
||||||
max-width="500"
|
max-width="500"
|
||||||
|
@after-leave="reset"
|
||||||
>
|
>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
@@ -49,7 +50,7 @@ interface Props {
|
|||||||
|
|
||||||
interface Emits {
|
interface Emits {
|
||||||
(e: 'update:modelValue', value: boolean): void
|
(e: 'update:modelValue', value: boolean): void
|
||||||
(e: 'confirm', data: { path: string; fullPath: string }): void
|
(e: 'confirm', data: { path: string; }): void
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@@ -100,25 +101,19 @@ const confirm = () => {
|
|||||||
if (!directoryPath.value.trim()) return
|
if (!directoryPath.value.trim()) return
|
||||||
|
|
||||||
// Construct the full path if there's a parent directory
|
// Construct the full path if there's a parent directory
|
||||||
let fullPath = directoryPath.value
|
|
||||||
if (props.parentDirectory) {
|
|
||||||
// Make sure parent directory ends with a slash before appending
|
|
||||||
const parentPath = props.parentDirectory.endsWith('/')
|
|
||||||
? props.parentDirectory
|
|
||||||
: props.parentDirectory + '/'
|
|
||||||
fullPath = parentPath + directoryPath.value
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('confirm', {
|
emit('confirm', {
|
||||||
path: directoryPath.value,
|
path: directoryPath.value,
|
||||||
fullPath
|
|
||||||
})
|
})
|
||||||
|
|
||||||
close()
|
close()
|
||||||
}
|
}
|
||||||
|
const reset = () => {
|
||||||
|
directoryPath.value = ''
|
||||||
|
formValid.value = false
|
||||||
|
}
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
isVisible.value = false
|
isVisible.value = false
|
||||||
directoryPath.value = ''
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
<v-dialog
|
<v-dialog
|
||||||
v-model="isVisible"
|
v-model="isVisible"
|
||||||
max-width="600"
|
max-width="600"
|
||||||
|
@after-leave="reset"
|
||||||
>
|
>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
@@ -155,9 +156,13 @@ const confirm = () => {
|
|||||||
close()
|
close()
|
||||||
}
|
}
|
||||||
|
|
||||||
const close = () => {
|
const reset = () => {
|
||||||
isVisible.value = false
|
|
||||||
filePath.value = ''
|
filePath.value = ''
|
||||||
selectedSourcePath.value = ''
|
selectedSourcePath.value = ''
|
||||||
|
formValid.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
isVisible.value = false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -142,15 +142,10 @@
|
|||||||
@confirm="handleFileDialogConfirm"
|
@confirm="handleFileDialogConfirm"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
|
||||||
import { useTemplateStore, TreeNode } from '@/renderer/store/template'
|
import { useTemplateStore, TreeNode } from '@/renderer/store/template'
|
||||||
import { useSnackbarStore } from '@/renderer/store/snackbar'
|
import { useSnackbarStore } from '@/renderer/store/snackbar'
|
||||||
import TemplateTree from '@/renderer/components/TemplateTree.vue'
|
import TemplateTree from '@/renderer/components/TemplateTree.vue'
|
||||||
@@ -177,14 +172,10 @@ const showFileDialog = ref(false)
|
|||||||
|
|
||||||
// Directory dialog state
|
// Directory dialog state
|
||||||
const showDirectoryDialog = ref(false)
|
const showDirectoryDialog = ref(false)
|
||||||
const directoryFormValid = ref(false)
|
|
||||||
const parentDirectoryForNewItems = ref<string | null>(null)
|
const parentDirectoryForNewItems = ref<string | null>(null)
|
||||||
const currentEditingItem = ref<TreeNode | null>(null)
|
const currentEditingItem = ref<TreeNode | null>(null)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Tree state
|
// Tree state
|
||||||
const expandedNodes = ref<string[]>([])
|
const expandedNodes = ref<string[]>([])
|
||||||
const treeHeight = ref(600)
|
const treeHeight = ref(600)
|
||||||
@@ -299,8 +290,8 @@ const addNewItemToCurrentDirectory = (directoryItem: TreeItem) => {
|
|||||||
showDirectoryDialog.value = true
|
showDirectoryDialog.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDirectoryDialogConfirm = (data: { path: string; fullPath: string }) => {
|
const handleDirectoryDialogConfirm = (data: { path: string }) => {
|
||||||
const { path, fullPath } = data
|
const { path } = data
|
||||||
|
|
||||||
// Check for duplicate names in the same parent directory
|
// Check for duplicate names in the same parent directory
|
||||||
if (parentDirectoryForNewItems.value) {
|
if (parentDirectoryForNewItems.value) {
|
||||||
@@ -340,7 +331,7 @@ const handleDirectoryDialogConfirm = (data: { path: string; fullPath: string })
|
|||||||
const updatedNode: TreeNode = {
|
const updatedNode: TreeNode = {
|
||||||
id: currentEditingItem.value.id,
|
id: currentEditingItem.value.id,
|
||||||
name: path,
|
name: path,
|
||||||
path: fullPath,
|
path: path,
|
||||||
type: 'directory'
|
type: 'directory'
|
||||||
}
|
}
|
||||||
treeStructure.value = updateNodeInTree(
|
treeStructure.value = updateNodeInTree(
|
||||||
@@ -353,7 +344,7 @@ const handleDirectoryDialogConfirm = (data: { path: string; fullPath: string })
|
|||||||
const newNode: TreeNode = {
|
const newNode: TreeNode = {
|
||||||
id: newId,
|
id: newId,
|
||||||
name: path,
|
name: path,
|
||||||
path: fullPath,
|
path: path,
|
||||||
type: 'directory'
|
type: 'directory'
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -427,9 +418,6 @@ const addChildToNode = (
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleFileDialogConfirm = (data: { path: string; fullPath: string; sourceFilePath?: string }) => {
|
const handleFileDialogConfirm = (data: { path: string; fullPath: string; sourceFilePath?: string }) => {
|
||||||
const { path, fullPath, sourceFilePath } = data
|
const { path, fullPath, sourceFilePath } = data
|
||||||
|
|
||||||
@@ -558,9 +546,6 @@ const goBack = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Unified method to edit items (both files and directories)
|
// Unified method to edit items (both files and directories)
|
||||||
// This function needs to find the actual path of the item in our hierarchical tree
|
// This function needs to find the actual path of the item in our hierarchical tree
|
||||||
const editItem = (item: TreeItem) => {
|
const editItem = (item: TreeItem) => {
|
||||||
@@ -620,7 +605,6 @@ const findNodeInTreeByName = (
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Show dialog to edit directory
|
// Show dialog to edit directory
|
||||||
const showEditDirectoryDialog = (directory: TreeNode) => {
|
const showEditDirectoryDialog = (directory: TreeNode) => {
|
||||||
// Set up for editing an existing directory
|
// Set up for editing an existing directory
|
||||||
@@ -637,8 +621,6 @@ const showEditFileDialog = (file: TreeNode) => {
|
|||||||
showFileDialog.value = true
|
showFileDialog.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const deleteItem = async (item: TreeItem) => {
|
const deleteItem = async (item: TreeItem) => {
|
||||||
const confirmed = await ConfirmDialogService.confirm({
|
const confirmed = await ConfirmDialogService.confirm({
|
||||||
title: '删除确认',
|
title: '删除确认',
|
||||||
@@ -669,14 +651,6 @@ const removeItemFromTree = (nodes: TreeNode[], itemId: string): TreeNode[] => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const saveTemplate = () => {
|
const saveTemplate = () => {
|
||||||
if (!formValid.value) return
|
if (!formValid.value) return
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user