refactor: show dialogdelete
This commit is contained in:
somnetsak123
Methapon2001
parent
da29ceecf1
commit
b600fcf940
3 changed files with 97 additions and 27 deletions
|
|
@ -1,9 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
defineEmits(['confirm', 'cancel'])
|
||||
defineEmits(['confirm', 'cancel', 'update:open'])
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
open: boolean
|
||||
}>(),
|
||||
{
|
||||
open: false,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog persistent transition-show="scale" transition-hide="scale">
|
||||
<q-dialog
|
||||
persistent
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
:model-value="props.open"
|
||||
@update:model-value="(v) => $emit('update:open', v)"
|
||||
>
|
||||
<q-card style="width: 400px">
|
||||
<q-card-section>
|
||||
<span class="text-h6">
|
||||
|
|
@ -21,7 +36,7 @@ defineEmits(['confirm', 'cancel'])
|
|||
label="ยกเลิก"
|
||||
flat
|
||||
v-close-popup
|
||||
@click="() => $emit('cancel')"
|
||||
@click="() => ($emit('update:open', !open))"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
|
|
|
|||
|
|
@ -4,22 +4,25 @@ import { storeToRefs } from 'pinia'
|
|||
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
import FileItemAction from '@/components/FileItemAction.vue'
|
||||
import DialogDelete from '@/components/DialogDelete.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
import UploadExistDialog from './UploadExistDialog.vue'
|
||||
import { useTreeDataStore } from '@/stores/tree-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import test from 'node:test'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
|
||||
{
|
||||
action: false,
|
||||
},
|
||||
}
|
||||
)
|
||||
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
|
||||
const { getFileInfo, getFileNameFormat } = useFileInfoStore()
|
||||
const { currentFolder, currentFile, currentDept, currentPath } =
|
||||
storeToRefs(useTreeDataStore())
|
||||
const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
|
||||
useTreeDataStore()
|
||||
)
|
||||
const {
|
||||
createFolder,
|
||||
editFolder,
|
||||
|
|
@ -35,10 +38,14 @@ const currentIcon = computed(() =>
|
|||
currentDept.value === 0
|
||||
? 'mdi-file-cabinet'
|
||||
: currentDept.value === 1
|
||||
? 'inbox'
|
||||
: 'o_folder_open',
|
||||
? 'inbox'
|
||||
: 'o_folder_open'
|
||||
)
|
||||
|
||||
const dialogDeleteState = ref<boolean>(false)
|
||||
const deleteFormPath = ref<string>('')
|
||||
const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
const folderFormPath = ref<string>('')
|
||||
const folderFormData = ref<{
|
||||
|
|
@ -58,6 +65,18 @@ const fileFormType = ref<'edit' | 'create'>('create')
|
|||
const fileFormError = ref<{ fileExist?: boolean }>({})
|
||||
const fileExistNotification = ref<boolean>(false)
|
||||
|
||||
function triggerFolderDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFolder'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
}
|
||||
|
||||
function triggerFileDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFile'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
}
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
|
|
@ -95,7 +114,7 @@ function triggerFileEdit(
|
|||
keyword: string
|
||||
category: string
|
||||
},
|
||||
pathname: string,
|
||||
pathname: string
|
||||
) {
|
||||
fileFormState.value = true
|
||||
fileFormType.value = 'edit'
|
||||
|
|
@ -119,7 +138,7 @@ async function submitFileForm(
|
|||
keyword: string
|
||||
category: string
|
||||
},
|
||||
force = false,
|
||||
force = false
|
||||
) {
|
||||
currentParam.value = value
|
||||
|
||||
|
|
@ -144,7 +163,7 @@ async function submitFileForm(
|
|||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
},
|
||||
value.file,
|
||||
value.file
|
||||
)
|
||||
}
|
||||
fileFormData.value = {}
|
||||
|
|
@ -186,7 +205,7 @@ async function submitFileForm(
|
|||
v-if="props.action"
|
||||
>
|
||||
<file-item-action
|
||||
@delete="() => deleteFolder(value.pathname)"
|
||||
@delete="() => triggerFolderDelete(value.pathname)"
|
||||
@edit="() => triggerFolderEdit(value.name, value.pathname)"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -292,10 +311,10 @@ async function submitFileForm(
|
|||
keyword: value.keyword.join(','),
|
||||
category: value.category.join(','),
|
||||
},
|
||||
value.pathname,
|
||||
value.pathname
|
||||
)
|
||||
"
|
||||
@delete="() => deleteFile(value.pathname)"
|
||||
@delete="() => triggerFileDelete(value.pathname)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -369,6 +388,15 @@ async function submitFileForm(
|
|||
@confirm="() => currentParam && submitFileForm(currentParam, true)"
|
||||
@cancel="() => (currentParam = undefined)"
|
||||
/>
|
||||
|
||||
<dialog-delete
|
||||
v-model:open="dialogDeleteState"
|
||||
@confirm="
|
||||
() =>
|
||||
deleteFormType &&
|
||||
(deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import type { QTableProps } from 'quasar'
|
|||
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
|
||||
import { useFileInfoStore } from '@/stores/file-info-data'
|
||||
import FileIcon from '@/components/FileIcon.vue'
|
||||
import DialogDelete from '@/components/DialogDelete.vue'
|
||||
import FileForm from './FileForm.vue'
|
||||
import FolderForm from './FolderForm.vue'
|
||||
|
||||
const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
|
||||
const { listDataFile, listDataFolder, currentDept, currentPath } =
|
||||
storeToRefs(useTreeDataStore())
|
||||
const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
|
||||
useTreeDataStore()
|
||||
)
|
||||
const {
|
||||
createFolder,
|
||||
editFolder,
|
||||
|
|
@ -32,18 +34,18 @@ const currentLevel = computed(() =>
|
|||
currentDept.value === 0
|
||||
? 'ตู้จัดเก็บเอกสาร'
|
||||
: currentDept.value === 1
|
||||
? 'ลิ้นชัก'
|
||||
: currentDept.value === 2
|
||||
? 'แฟ้ม'
|
||||
: 'แฟ้มย่อย',
|
||||
? 'ลิ้นชัก'
|
||||
: currentDept.value === 2
|
||||
? 'แฟ้ม'
|
||||
: 'แฟ้มย่อย'
|
||||
)
|
||||
|
||||
const currentIcon = computed(() =>
|
||||
currentDept.value === 0
|
||||
? 'mdi-file-cabinet'
|
||||
: currentDept.value === 1
|
||||
? 'inbox'
|
||||
: 'o_folder_open',
|
||||
? 'inbox'
|
||||
: 'o_folder_open'
|
||||
)
|
||||
|
||||
const folderFormState = ref<boolean>(false)
|
||||
|
|
@ -64,6 +66,22 @@ const fileFormData = ref<{
|
|||
}>({})
|
||||
const fileFormType = ref<'edit' | 'create'>('create')
|
||||
|
||||
const dialogDeleteState = ref<boolean>(false)
|
||||
const deleteFormPath = ref<string>('')
|
||||
const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
|
||||
|
||||
function triggerFolderDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFolder'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
}
|
||||
|
||||
function triggerFileDelete(pathname: string) {
|
||||
deleteFormType.value = 'deleteFile'
|
||||
deleteFormPath.value = pathname
|
||||
dialogDeleteState.value = !dialogDeleteState.value
|
||||
}
|
||||
|
||||
function triggerFolderCreate() {
|
||||
folderFormType.value = 'create'
|
||||
folderFormData.value = {}
|
||||
|
|
@ -101,7 +119,7 @@ function triggerFileEdit(
|
|||
keyword: string
|
||||
category: string
|
||||
},
|
||||
pathname: string,
|
||||
pathname: string
|
||||
) {
|
||||
fileFormState.value = true
|
||||
fileFormType.value = 'edit'
|
||||
|
|
@ -138,7 +156,7 @@ async function submitFileForm(value: {
|
|||
keyword: value.keyword,
|
||||
category: value.category,
|
||||
},
|
||||
value.file,
|
||||
value.file
|
||||
)
|
||||
}
|
||||
fileFormData.value = {}
|
||||
|
|
@ -295,7 +313,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
@click.stop="
|
||||
triggerFolderEdit(
|
||||
actionsRow.row.name,
|
||||
actionsRow.row.pathname,
|
||||
actionsRow.row.pathname
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
|
@ -304,7 +322,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="negative"
|
||||
dense
|
||||
icon="delete"
|
||||
@click.stop="deleteFolder(actionsRow.row.pathname)"
|
||||
@click.stop="triggerFolderDelete(actionsRow.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -395,7 +413,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
color="negative"
|
||||
dense
|
||||
icon="delete"
|
||||
@click="() => deleteFile(actionsRow.row.pathname)"
|
||||
@click="() => triggerFileDelete(actionsRow.row.pathname)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -424,6 +442,15 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
|
|||
v-model:name="folderFormData.name"
|
||||
@submit="submitFolderForm"
|
||||
/>
|
||||
|
||||
<dialog-delete
|
||||
v-model:open="dialogDeleteState"
|
||||
@confirm="
|
||||
() =>
|
||||
deleteFormType &&
|
||||
(deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue