feat: file name as label when edit
This commit is contained in:
parent
e20d5a4c50
commit
7e5cb46e97
4 changed files with 20 additions and 4 deletions
|
|
@ -14,6 +14,7 @@ const props = withDefaults(
|
||||||
fileName2Long?: boolean
|
fileName2Long?: boolean
|
||||||
}
|
}
|
||||||
mode: 'create' | 'edit'
|
mode: 'create' | 'edit'
|
||||||
|
fileNameLabel?: string
|
||||||
title?: string
|
title?: string
|
||||||
description?: string
|
description?: string
|
||||||
keyword?: string[]
|
keyword?: string[]
|
||||||
|
|
@ -146,7 +147,13 @@ const file = ref<File | undefined>()
|
||||||
outlined
|
outlined
|
||||||
v-model="file"
|
v-model="file"
|
||||||
@update:model-value="(v) => $emit('filechange', v.name)"
|
@update:model-value="(v) => $emit('filechange', v.name)"
|
||||||
:label="file?.name ? undefined : 'เลือกไฟล์'"
|
:label="
|
||||||
|
mode === 'edit' && fileNameLabel && !file?.name
|
||||||
|
? fileNameLabel
|
||||||
|
: file?.name
|
||||||
|
? undefined
|
||||||
|
: 'เลือกไฟล์'
|
||||||
|
"
|
||||||
:error="!!error.fileExist || !!error.fileName2Long"
|
:error="!!error.fileExist || !!error.fileName2Long"
|
||||||
:error-message="
|
:error-message="
|
||||||
error.fileExist
|
error.fileExist
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ const fileFormType = ref<'edit' | 'create'>('create')
|
||||||
const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
|
const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
|
||||||
const fileExistNotification = ref<boolean>(false)
|
const fileExistNotification = ref<boolean>(false)
|
||||||
const fileFormComponent = ref<InstanceType<typeof FileForm>>()
|
const fileFormComponent = ref<InstanceType<typeof FileForm>>()
|
||||||
|
const fileNameLabel = ref<string>()
|
||||||
|
|
||||||
function triggerFileCreate() {
|
function triggerFileCreate() {
|
||||||
fileFormType.value = 'create'
|
fileFormType.value = 'create'
|
||||||
|
|
@ -37,6 +38,7 @@ function triggerFileEdit(
|
||||||
category: string[]
|
category: string[]
|
||||||
},
|
},
|
||||||
pathname: string,
|
pathname: string,
|
||||||
|
file?: string,
|
||||||
) {
|
) {
|
||||||
fileFormState.value = true
|
fileFormState.value = true
|
||||||
fileFormType.value = 'edit'
|
fileFormType.value = 'edit'
|
||||||
|
|
@ -47,6 +49,7 @@ function triggerFileEdit(
|
||||||
keyword: value.keyword,
|
keyword: value.keyword,
|
||||||
category: value.category,
|
category: value.category,
|
||||||
}
|
}
|
||||||
|
fileNameLabel.value = file
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
|
@ -56,9 +59,11 @@ defineExpose({
|
||||||
|
|
||||||
const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
|
const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
|
||||||
|
|
||||||
function checkFileExist(name: string) {
|
function checkFileExist(name: string, except?: string) {
|
||||||
return Boolean(
|
return Boolean(
|
||||||
file.value[currentInfo.value.path].find((v) => v.fileName === name),
|
file.value[currentInfo.value.path].find(
|
||||||
|
(v) => v.fileName === name && v.fileName !== except,
|
||||||
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,6 +122,7 @@ async function submitFileForm(
|
||||||
ref="fileFormComponent"
|
ref="fileFormComponent"
|
||||||
:mode="fileFormType"
|
:mode="fileFormType"
|
||||||
:error="fileFormError"
|
:error="fileFormError"
|
||||||
|
:fileNameLabel="fileNameLabel"
|
||||||
v-model:open="fileFormState"
|
v-model:open="fileFormState"
|
||||||
v-model:title="fileFormData.title"
|
v-model:title="fileFormData.title"
|
||||||
v-model:description="fileFormData.description"
|
v-model:description="fileFormData.description"
|
||||||
|
|
@ -124,7 +130,8 @@ async function submitFileForm(
|
||||||
v-model:category="fileFormData.category"
|
v-model:category="fileFormData.category"
|
||||||
@reset="() => (fileFormError = {})"
|
@reset="() => (fileFormError = {})"
|
||||||
@filechange="
|
@filechange="
|
||||||
(name: string) => (fileFormError.fileExist = checkFileExist(name))
|
(name: string) =>
|
||||||
|
(fileFormError.fileExist = checkFileExist(name, fileNameLabel))
|
||||||
"
|
"
|
||||||
@submit="submitFileForm"
|
@submit="submitFileForm"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -248,6 +248,7 @@ function triggerFileDelete(pathname: string) {
|
||||||
category: value.category,
|
category: value.category,
|
||||||
},
|
},
|
||||||
value.pathname,
|
value.pathname,
|
||||||
|
value.fileName,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
@delete="() => triggerFileDelete(value.pathname)"
|
@delete="() => triggerFileDelete(value.pathname)"
|
||||||
|
|
|
||||||
|
|
@ -312,6 +312,7 @@ const onRowClick = ((_, row) => {
|
||||||
fileFormComponent?.triggerFileEdit(
|
fileFormComponent?.triggerFileEdit(
|
||||||
data.row,
|
data.row,
|
||||||
data.row.pathname,
|
data.row.pathname,
|
||||||
|
data.row.fileName,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
id="listViewFileEdit"
|
id="listViewFileEdit"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue