chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: edit uploadfile

Browse source
This commit is contained in:
Net 2024-09-23 17:46:23 +07:00
parent 633fc38160
commit 7a02cb19d7
2 changed files with 508 additions and 642 deletions
Download patch file Download diff file Expand all files Collapse all files

338
src/components/upload-file/UploadFile.vue
View file

@ -1,11 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { import { DeleteButton } from 'components/button';
SaveButton,
UndoButton,
CloseButton,
DeleteButton,
} from 'components/button';
import { dialog } from 'stores/utils'; import { dialog } from 'stores/utils';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@ -13,18 +8,18 @@ import { VuePDF, usePDF } from '@tato30/vue-pdf';
const { t } = useI18n(); const { t } = useI18n();
const currentFileSelected = ref<string>(''); const currentFileSelected = ref<string>('');
const file = defineModel< const obj = defineModel<
{ {
name?: string; name?: string;
group?: string; group?: string;
url?: string; url?: string;
file?: File; file?: File;
}[] }[]
>('file', { >({
default: [], default: [],
}); });
const currentFile = computed(() => file.value.at(currentIndex.value)); const currentFile = computed(() => obj.value.at(currentIndex.value));
const statusOcr = defineModel<boolean>('statusOcr', { default: false }); const statusOcr = defineModel<boolean>('statusOcr', { default: false });
const currentMode = ref<string>(''); const currentMode = ref<string>('');
const currentIndex = ref(0); const currentIndex = ref(0);
@ -40,11 +35,11 @@ const props = withDefaults(
readonly?: boolean; readonly?: boolean;
dropdownList?: { label: string; value: string }[]; dropdownList?: { label: string; value: string }[];
hideAction?: boolean; hideAction?: boolean;
branch?: boolean; autoSave?: boolean;
}>(), }>(),
{ {
autoSave: false,
treeFile: () => [], treeFile: () => [],
branch: false,
}, },
); );
@ -60,61 +55,82 @@ const inputFile = (() => {
return _element; return _element;
})(); })();
function change(e: Event) { async function change(e: Event) {
const _element = e.target as HTMLInputElement | null; const _element = e.target as HTMLInputElement | null;
const _file = _element?.files?.[0]; const _file = _element?.files?.[0];
currentIndex.value = file.value.length;
if (_file) { if (_file) {
currentIndex.value = file.value.length + 1; if (!obj.value[currentIndex.value]) {
obj.value = [
...obj.value,
{
name: _file.name,
file: _file,
},
];
currentIndex.value = obj.value.length;
}
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(_file); reader.readAsDataURL(_file);
reader.onload = () => { reader.onload = () => {
if (file.value[currentIndex.value]) { if (obj.value[currentIndex.value]) {
file.value[currentIndex.value].url = reader.result as string; obj.value[currentIndex.value].url = reader.result as string;
console.log(file.value[currentIndex.value]); currentFileSelected.value = _file.name;
} }
}; };
if (_file && file.value[currentIndex.value]) { if (!!props.autoSave) {
file.value[currentIndex.value].file = _file;
file.value[currentIndex.value].group =
props.dropdownList?.[currentIndexDropdownList.value].value;
} else {
const newName =
props.dropdownList?.[currentIndexDropdownList.value].value +
'-' +
_file.name;
file.value.push({
name: props.branch === true ? _file.name : newName,
group: props.dropdownList?.[currentIndexDropdownList.value].value,
file: _file,
});
currentFileSelected.value = props.branch === true ? _file.name : newName;
}
statusOcr.value = true;
if (props.branch === true) {
emit( emit(
'save', 'save',
props.dropdownList?.[currentIndexDropdownList.value].value || '', props.dropdownList?.[currentIndexDropdownList.value].value || '',
inputFile?.files?.[0], inputFile?.files?.[0],
); );
} else {
emit(
'sendOcr',
props.dropdownList?.[currentIndexDropdownList.value].value || '',
inputFile?.files?.[0],
);
} }
} }
} }
// function change(e: Event) {
// const _element = e.target as HTMLInputElement | null;
// const _file = _element?.files?.[0];
// currentIndex.value = obj.value.length;
// if (_file) {
// currentIndex.value = obj.value.length + 1;
// const reader = new FileReader();
// reader.readAsDataURL(_file);
// reader.onload = () => {
// if (obj.value[currentIndex.value]) {
// obj.value[currentIndex.value].url = reader.result as string;
// console.log('asd');
// }
// };
// if (_file && obj.value[currentIndex.value]) {
// obj.value[currentIndex.value].file = _file;
// obj.value[currentIndex.value].group =
// props.dropdownList?.[currentIndexDropdownList.value].value;
// } else {
// obj.value.push({
// name: _file.name,
// group: props.dropdownList?.[currentIndexDropdownList.value].value,
// file: _file,
// });
// }
// if (!!props.autoSave) {
// emit(
// 'save',
// props.dropdownList?.[currentIndexDropdownList.value].value || '',
// inputFile?.files?.[0],
// );
// } else {
// }
// }
// }
watch(currentFileSelected, () => { watch(currentFileSelected, () => {
file.value.findIndex((v, i) => { obj.value.findIndex((v, i) => {
if (v.name?.includes(currentFileSelected.value)) { if (v.name?.includes(currentFileSelected.value)) {
currentIndex.value = i; currentIndex.value = i;
@ -136,7 +152,7 @@ const emit = defineEmits<{
const { pdf, pages } = usePDF(computed(() => currentFile.value?.url)); const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
function deleteFileOfBranch(filename: string) { function deleteFileOfBranch(filename: string, index: number) {
dialog({ dialog({
color: 'negative', color: 'negative',
icon: 'mdi-alert', icon: 'mdi-alert',
@ -145,35 +161,11 @@ function deleteFileOfBranch(filename: string) {
persistent: true, persistent: true,
message: t('dialog.message.confirmDelete'), message: t('dialog.message.confirmDelete'),
action: async () => { action: async () => {
emit('deleteFile', filename); if (!!props.autoSave) {
}, emit('deleteFile', filename);
} else {
cancel: () => {}, obj.value.splice(index, 1);
}); }
}
function deleteFile() {
const tempValue = props.treeFile.find(
(v: any) => v.label === t(currentMode.value),
);
if (!tempValue) return;
const idx = tempValue.file?.findIndex(
(v: any) => v.label === currentFileSelected.value,
);
dialog({
color: 'negative',
icon: 'mdi-alert',
title: t('dialog.title.confirmDelete'),
actionText: t('general.delete'),
persistent: true,
message: t('dialog.message.confirmDelete'),
action: async () => {
emit('deleteFile', currentFileSelected.value);
currentFileSelected.value = tempValue.file?.[idx - 1].label || '';
}, },
cancel: () => {}, cancel: () => {},
@ -183,7 +175,7 @@ function deleteFile() {
<template> <template>
<div class="full-width row no-wrap wrapper" style="height: 250px"> <div class="full-width row no-wrap wrapper" style="height: 250px">
<div class="col full-height column no-wrap"> <div class="col-3 full-height column no-wrap">
<div class="q-pa-sm text-center bordered" style="height: 50px"> <div class="q-pa-sm text-center bordered" style="height: 50px">
<q-btn-dropdown <q-btn-dropdown
:disable="readonly" :disable="readonly"
@ -192,34 +184,61 @@ function deleteFile() {
label="อัปโหลดเอกสาร" label="อัปโหลดเอกสาร"
@click=" @click="
() => { () => {
if (branch) { currentIndex = obj.length;
browse(); browse();
} }
"
></q-btn-dropdown>
</div>
<div class="bordered-l bordered-b q-pa-sm full-height scroll">
<q-item
clickable
v-for="(v, i) in obj"
:key="v.name"
dense
type="button"
class="no-padding items-center rounded"
active-class="menu-active"
:active="currentFileSelected === v.name"
@click="
async () => {
currentFileSelected = v.name || '';
} }
" "
> >
<q-list v-for="(v, i) in dropdownList" :key="v.value"> <div class="full-width row items-center justify-between">
<q-item <div class="ellipsis col-8">
clickable <q-tooltip>{{ v.name }}</q-tooltip>
v-close-popup {{ v.name }}
@click=" </div>
<DeleteButton
iconOnly
@click.stop="
() => { () => {
currentIndexDropdownList = i; deleteFileOfBranch(v.name || '', i);
browse();
} }
" "
> />
<q-item-section> </div>
<q-item-label>{{ $t(v.label) }}</q-item-label> </q-item>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="bordered-l bordered-b q-pa-sm col full-height scroll"> <!-- <q-tree
<q-tree :nodes="
:nodes="treeFile || []" Object.values(
obj.reduce<
Record<string, { label: string; file: { label: string }[] }>
>((a, b) => {
if (b.name && !a[b.name]) {
a[b.name] = {
label: b.name,
file: [],
};
}
return a;
}, {}) || {},
) || []
"
node-key="label" node-key="label"
label-key="label" label-key="label"
children-key="file" children-key="file"
@ -233,22 +252,20 @@ function deleteFile() {
<q-tooltip>{{ prop.node.label }}</q-tooltip> <q-tooltip>{{ prop.node.label }}</q-tooltip>
{{ prop.node.label }} {{ prop.node.label }}
</div> </div>
<div v-if="branch"> <DeleteButton
<DeleteButton iconOnly
iconOnly @click.stop="
@click.stop=" () => {
() => { deleteFileOfBranch(prop.node.label);
deleteFileOfBranch(prop.node.label); }
} "
" />
/>
</div>
</div> </div>
</template> </template>
</q-tree> </q-tree> -->
</div> </div>
</div> </div>
<div v-if="!branch" class="col full-height column no-wrap"> <div class="col full-height column no-wrap">
<div <div
class="bordered row items-center justify-evenly q-pa-sm no-wrap" class="bordered row items-center justify-evenly q-pa-sm no-wrap"
style="height: 50px" style="height: 50px"
@ -302,92 +319,25 @@ function deleteFile() {
<div <div
class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll" class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
> >
<template v-if="statusOcr"> <VuePDF
<q-spinner color="primary" size="3em" :thickness="2" /> style="height: 100%"
</template> v-if="
currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
<template v-else> currentFile?.file?.type === 'application/pdf'
<VuePDF "
v-if=" class="q-py-md"
currentFile?.url?.split('?').at(0)?.endsWith('.pdf') || :pdf="pdf"
currentFile?.file?.type === 'application/pdf' :page="page"
" :scale="scale"
class="q-py-md" />
:pdf="pdf" <q-img
:page="page" v-else
:scale="scale" class="q-py-md full-width"
/> :src="currentFile?.url"
style="height: 220px; max-width: 300px"
<q-img v-else class="q-py-md full-width" :src="currentFile?.url" /> />
</template>
</div> </div>
</div> </div>
<div v-if="!branch" class="col-5 full-height column no-wrap">
<div
class="bordered row items-center justify-between q-pa-sm"
style="height: 50px"
>
{{ currentMode && $t(currentMode) }}
<div class="row" v-if="!hideAction">
<UndoButton icon-only type="button" />
<SaveButton
icon-only
type="button"
@click="
$emit(
'save',
dropdownList?.[currentIndexDropdownList].value || '',
inputFile?.files?.[0],
)
"
/>
</div>
</div>
<div class="q-pa-sm bordered-r bordered-b full-height col scroll">
<slot name="form" :mode="currentMode.split('.').at(-1)" />
<div class="row items-center">
{{ currentFileSelected }}
<CloseButton
icon-only
v-if="!readonly && !!currentFileSelected"
type="button"
class="q-ml-sm"
@click="
() => {
deleteFile();
}
"
/>
</div>
</div>
</div>
<div
v-if="branch"
class="bordered col-8 surface-2 column justify-center items-center no-wrap scroll"
>
<VuePDF
style="height: 100%"
v-if="
currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
currentFile?.file?.type === 'application/pdf'
"
class="q-py-md"
:pdf="pdf"
:page="page"
:scale="scale"
/>
<q-img
v-else
class="q-py-md full-width"
style="height: 220px; max-width: 300px"
:src="currentFile?.url"
/>
</div>
</div> </div>
</template> </template>

812
src/pages/01_branch-management/MainPage.vue
View file

@ -792,6 +792,7 @@ async function onSubmit(submitSelectedItem?: boolean) {
}, },
formBankBook.value, formBankBook.value,
onCreateImageList.value, onCreateImageList.value,
currentAttachmentList.value,
); );
if (res) { if (res) {
@ -1731,31 +1732,6 @@ watch(currentHq, () => {
}-hsl)/${imageUrl ? '0' : '0.15'})`" }-hsl)/${imageUrl ? '0' : '0.15'})`"
:menu="formMenuIcon" :menu="formMenuIcon"
v-model:current-tab="currentTab" v-model:current-tab="currentTab"
:tabs-list="
[
{
name: 'main',
label: 'customerBranch.tab.main',
},
{
name: 'attachment',
label: 'customerBranch.tab.attachment',
},
{
name: 'remark',
label: 'customerBranch.tab.remark',
},
].filter((v) => {
if (!currentId && v.name === 'attachment') {
return false;
}
if (!currentId && v.name === 'remark') {
return false;
}
return true;
})
"
@view=" @view="
() => { () => {
imageDialog = true; imageDialog = true;
@ -1824,52 +1800,44 @@ watch(currentHq, () => {
v-if="$q.screen.gt.sm" v-if="$q.screen.gt.sm"
> >
<SideMenu <SideMenu
:menu=" :menu="[
{ {
main: [ name: $t('form.field.basicInformation'),
{ anchor: 'form-information',
name: $t('form.field.basicInformation'), },
anchor: 'form-information', {
}, name: $t('branch.form.group.contact'),
{ anchor: 'form-contact',
name: $t('branch.form.group.contact'), },
anchor: 'form-contact', {
}, name: $t('form.address'),
{ anchor: 'form-address',
name: $t('form.address'), },
anchor: 'form-address', {
}, name: $t('branch.form.group.location'),
{ anchor: 'form-location',
name: $t('branch.form.group.location'), },
anchor: 'form-location', {
}, name: 'QR Code',
{ anchor: 'form-qr',
name: 'QR Code', },
anchor: 'form-qr', {
}, name: $t('branch.form.group.bankAccount'),
{ anchor: 'form-bank',
name: $t('branch.form.group.bankAccount'), },
anchor: 'form-bank', {
}, name: $t('branch.form.group.admin'),
{ anchor: 'form-branch-admin-view',
name: $t('branch.form.group.admin'), },
anchor: 'form-branch-admin-view', {
}, name: $t('customerBranch.tab.attachment'),
], anchor: 'form-attachment',
attachment: [ },
{ {
name: $t('customerBranch.tab.attachment'), name: $t('customerBranch.tab.remark'),
anchor: 'form-attachment', anchor: 'form-remark',
}, },
], ]"
remark: [
{
name: $t('customerBranch.tab.remark'),
anchor: 'form-remark',
},
],
}[currentTab] || []
"
background="transparent" background="transparent"
:active="{ :active="{
background: 'hsla(var(--blue-6-hsl) / .2)', background: 'hsla(var(--blue-6-hsl) / .2)',
@ -1885,163 +1853,144 @@ watch(currentHq, () => {
id="branch-form" id="branch-form"
style="overflow-y: auto" style="overflow-y: auto"
> >
<template v-if="currentTab === 'main'"> <FormBranchInformation
<FormBranchInformation id="form-information"
id="form-information" v-model:branchCount="formLastSubBranch"
v-model:branchCount="formLastSubBranch" v-model:abbreviation="formData.code"
v-model:abbreviation="formData.code" v-model:code="formData.codeHeadOffice"
v-model:code="formData.codeHeadOffice" v-model:code-sub-branch="currentEdit.code"
v-model:code-sub-branch="currentEdit.code" v-model:taxNo="formData.taxNo"
v-model:taxNo="formData.taxNo" v-model:name="formData.name"
v-model:name="formData.name" v-model:nameEN="formData.nameEN"
v-model:nameEN="formData.nameEN" v-model:type-branch="formTypeBranch"
v-model:type-branch="formTypeBranch" v-model:permit-no="formData.permitNo"
v-model:permit-no="formData.permitNo" v-model:permit-issue-date="formData.permitIssueDate"
v-model:permit-issue-date="formData.permitIssueDate" v-model:permit-expire-date="formData.permitExpireDate"
v-model:permit-expire-date="formData.permitExpireDate" :separator="true"
:separator="true" :dense="true"
:dense="true" :outlined="true"
:outlined="true" :readonly="formType === 'view'"
:readonly="formType === 'view'" title="form.field.basicInformation"
title="form.field.basicInformation" :view="isSubCreate || !!currentId"
:view="isSubCreate || !!currentId" onCreate
onCreate />
/> <FormBranchContact
<FormBranchContact id="form-contact"
id="form-contact" v-model:type-branch="formTypeBranch"
v-model:type-branch="formTypeBranch" v-model:telephone-no="formData.telephoneNo"
v-model:telephone-no="formData.telephoneNo" v-model:contact="formData.contact"
v-model:contact="formData.contact" v-model:email="formData.email"
v-model:email="formData.email" v-model:contact-name="formData.contactName"
v-model:contact-name="formData.contactName" v-model:line-id="formData.lineId"
v-model:line-id="formData.lineId" v-model:web-url="formData.webUrl"
v-model:web-url="formData.webUrl" :separator="true"
:separator="true" :readonly="formType === 'view'"
:readonly="formType === 'view'" title="branch.form.group.contact"
title="branch.form.group.contact" :dense="true"
:dense="true" :outlined="true"
:outlined="true" />
/>
<AddressForm <AddressForm
id="form-address" id="form-address"
dense dense
outlined outlined
separator separator
prefix-id="default" prefix-id="default"
:title="'form.address'" :title="'form.address'"
v-model:address="formData.address" v-model:address="formData.address"
v-model:addressEN="formData.addressEN" v-model:addressEN="formData.addressEN"
v-model:province-id="formData.provinceId" v-model:province-id="formData.provinceId"
v-model:district-id="formData.districtId" v-model:district-id="formData.districtId"
v-model:sub-district-id="formData.subDistrictId" v-model:sub-district-id="formData.subDistrictId"
v-model:moo="formData.moo" v-model:moo="formData.moo"
v-model:mooEN="formData.mooEN" v-model:mooEN="formData.mooEN"
v-model:soi="formData.soi" v-model:soi="formData.soi"
v-model:soiEN="formData.soiEN" v-model:soiEN="formData.soiEN"
v-model:street="formData.street" v-model:street="formData.street"
v-model:streetEN="formData.streetEN" v-model:streetEN="formData.streetEN"
:readonly="formType === 'view'" :readonly="formType === 'view'"
/> />
<FormLocation <FormLocation
id="form-location" id="form-location"
:readonly="formType === 'view'" :readonly="formType === 'view'"
:separator="true" :separator="true"
v-model:latitude="formData.latitude" v-model:latitude="formData.latitude"
v-model:longitude="formData.longitude" v-model:longitude="formData.longitude"
outlined outlined
dense dense
title="branch.form.group.location" title="branch.form.group.location"
/> />
<FormQr <FormQr
id="form-qr" id="form-qr"
title="QR Code" title="QR Code"
:separator="true" :separator="true"
:qr="qrCodeimageUrl" :qr="qrCodeimageUrl"
:readonly="formType === 'view'" :readonly="formType === 'view'"
@view-qr=" @view-qr="
() => { () => {
triggerEditQrCodeLine(); triggerEditQrCodeLine();
} }
" "
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()" @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
/> />
<FormBank <FormBank
id="form-bank" id="form-bank"
:readonly="formType === 'view'" :readonly="formType === 'view'"
title="branch.form.group.bankAccount" title="branch.form.group.bankAccount"
dense dense
v-model:bank-book-list="formBankBook" v-model:bank-book-list="formBankBook"
@view-qr=" @view-qr="
(i) => { (i) => {
currentIndexQrCodeBank = i; currentIndexQrCodeBank = i;
triggerEditQrCodeBank(); triggerEditQrCodeBank();
} }
" "
@edit-qr=" @edit-qr="
(i) => { (i) => {
currentIndexQrCodeBank = i; currentIndexQrCodeBank = i;
refQrCodeUpload && refQrCodeUpload.browse(); refQrCodeUpload && refQrCodeUpload.browse();
} }
" "
/> />
<FormBranchAdmin <FormBranchAdmin
id="form-branch-admin-view" id="form-branch-admin-view"
:admin="currentBranchAdmin" :admin="currentBranchAdmin"
/> class="q-mb-xl"
</template> />
<template v-if="currentTab === 'attachment'"> <UploadFile
<UploadFile id="form-attachment"
branch class="q-mb-xl"
:file="currentAttachmentList" :auto-save="currentId !== ''"
:tree-file=" branch
Object.values( v-model="currentAttachmentList"
currentAttachmentList.reduce< @save="
Record<string, { label: string; file: { label: string }[] }> async (_group, file) => {
>((a, b) => { if (file) {
if (b.name && !a[b.name]) { attachmentList.push(file);
a[b.name] = {
label: b.name, await branchStore.putAttachment(currentId, attachmentList);
file: [], }
}; }
"
@deleteFile="
async (filename) => {
const res = await branchStore.deleteByIdAttachment(
currentId,
filename,
);
if (res) {
currentAttachmentList = currentAttachmentList.filter((v) => {
if (v.name === filename) {
return false;
} }
return a; return true;
}, {}) || {}, });
)
"
@save="
async (_group, file) => {
if (file) {
attachmentList.push(file);
await branchStore.putAttachment(currentId, attachmentList);
}
} }
" }
@deleteFile=" "
async (filename) => { />
const res = await branchStore.deleteByIdAttachment(
currentId,
filename,
);
if (res) {
currentAttachmentList = currentAttachmentList.filter(
(v) => {
if (v.name === filename) {
return false;
}
return true;
},
);
}
}
"
/>
</template>
<template v-if="currentTab === 'remark'"></template>
</div> </div>
</div> </div>
</div> </div>
@ -2083,20 +2032,6 @@ watch(currentHq, () => {
:caption="formData.code" :caption="formData.code"
icon="mdi-office-building-outline" icon="mdi-office-building-outline"
v-model:current-tab="currentTab" v-model:current-tab="currentTab"
:tabs-list="[
{
name: 'main',
label: 'customerBranch.tab.main',
},
{
name: 'attachment',
label: 'customerBranch.tab.attachment',
},
{
name: 'remark',
label: 'customerBranch.tab.remark',
},
]"
:color="`hsla(var(${ :color="`hsla(var(${
formTypeBranch === 'headOffice' formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
@ -2134,7 +2069,7 @@ watch(currentHq, () => {
formType = 'view'; formType = 'view';
} }
await fetchList({ pageSize: 99999 }); await fetchList({ tree: true, pageSize: 99999 });
} }
" "
:menu="formMenuIcon" :menu="formMenuIcon"
@ -2147,7 +2082,6 @@ watch(currentHq, () => {
class="row full-width full-height surface-1 rounded relative-position" class="row full-width full-height surface-1 rounded relative-position"
> >
<div <div
v-if="currentTab === 'main'"
class="q-py-md q-px-lg" class="q-py-md q-px-lg"
style="position: absolute; z-index: 99999; top: 0; right: 0" style="position: absolute; z-index: 99999; top: 0; right: 0"
> >
@ -2188,52 +2122,44 @@ watch(currentHq, () => {
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm" class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
> >
<SideMenu <SideMenu
:menu=" :menu="[
{ {
main: [ name: $t('form.field.basicInformation'),
{ anchor: 'info-information',
name: $t('form.field.basicInformation'), },
anchor: 'info-information', {
}, name: $t('branch.form.group.contact'),
{ anchor: 'info-contact',
name: $t('branch.form.group.contact'), },
anchor: 'info-contact', {
}, name: $t('form.address'),
{ anchor: 'info-address',
name: $t('form.address'), },
anchor: 'info-address', {
}, name: $t('branch.form.group.location'),
{ anchor: 'info-location',
name: $t('branch.form.group.location'), },
anchor: 'info-location', {
}, name: 'QR Code',
{ anchor: 'info-qr',
name: 'QR Code', },
anchor: 'info-qr', {
}, name: $t('branch.form.group.bankAccount'),
{ anchor: 'info-bank',
name: $t('branch.form.group.bankAccount'), },
anchor: 'info-bank', {
}, name: $t('branch.form.group.admin'),
{ anchor: 'info-branch-admin-view',
name: $t('branch.form.group.admin'), },
anchor: 'info-branch-admin-view', {
}, name: $t('customerBranch.tab.attachment'),
], anchor: 'info-attachment',
attachment: [ },
{ {
name: $t('customerBranch.tab.attachment'), name: $t('customerBranch.tab.remark'),
anchor: 'info-attachment', anchor: 'info-remark',
}, },
], ]"
remark: [
{
name: $t('customerBranch.tab.remark'),
anchor: 'info-remark',
},
],
}[currentTab] || []
"
background="transparent" background="transparent"
:active="{ :active="{
background: 'hsla(var(--blue-6-hsl) / .2)', background: 'hsla(var(--blue-6-hsl) / .2)',
@ -2248,175 +2174,165 @@ watch(currentHq, () => {
id="branch-info" id="branch-info"
style="overflow-y: auto" style="overflow-y: auto"
> >
<template v-if="currentTab === 'main'"> <FormBranchInformation
<FormBranchInformation id="info-information"
id="info-information" v-model:virtual="formData.virtual"
v-model:virtual="formData.virtual" v-model:abbreviation="formData.code"
v-model:abbreviation="formData.code" v-model:code="formData.codeHeadOffice"
v-model:code="formData.codeHeadOffice" v-model:code-sub-branch="currentEdit.code"
v-model:code-sub-branch="currentEdit.code" v-model:taxNo="formData.taxNo"
v-model:taxNo="formData.taxNo" v-model:name="formData.name"
v-model:name="formData.name" v-model:nameEN="formData.nameEN"
v-model:nameEN="formData.nameEN" v-model:type-branch="formTypeBranch"
v-model:type-branch="formTypeBranch" v-model:permit-no="formData.permitNo"
v-model:permit-no="formData.permitNo" v-model:permit-issue-date="formData.permitIssueDate"
v-model:permit-issue-date="formData.permitIssueDate" v-model:permit-expire-date="formData.permitExpireDate"
v-model:permit-expire-date="formData.permitExpireDate" :separator="true"
:separator="true" :dense="true"
:dense="true" :outlined="true"
:outlined="true" :readonly="formType === 'view'"
:readonly="formType === 'view'" view
view title="form.field.basicInformation"
title="form.field.basicInformation" class="q-mb-xl"
class="q-mb-xl" />
/> <FormBranchContact
<FormBranchContact id="info-contact"
id="info-contact" title="branch.form.group.contact"
title="branch.form.group.contact" v-model:telephone-no="formData.telephoneNo"
v-model:telephone-no="formData.telephoneNo" v-model:contact="formData.contact"
v-model:contact="formData.contact" v-model:email="formData.email"
v-model:email="formData.email" v-model:contact-name="formData.contactName"
v-model:contact-name="formData.contactName" v-model:line-id="formData.lineId"
v-model:line-id="formData.lineId" v-model:web-url="formData.webUrl"
v-model:web-url="formData.webUrl" :readonly="formType === 'view'"
:readonly="formType === 'view'" :view="formType === 'view'"
:view="formType === 'view'" :separator="true"
:separator="true" :dense="true"
:dense="true" :outlined="true"
:outlined="true" class="q-mb-xl"
class="q-mb-xl" />
/> <AddressForm
<AddressForm id="info-address"
id="info-address" dense
dense outlined
outlined separator
separator prefix-id="default"
prefix-id="default" :title="'form.address'"
:title="'form.address'" :readonly="formType === 'view'"
:readonly="formType === 'view'" v-model:address="formData.address"
v-model:address="formData.address" v-model:addressEN="formData.addressEN"
v-model:addressEN="formData.addressEN" v-model:province-id="formData.provinceId"
v-model:province-id="formData.provinceId" v-model:district-id="formData.districtId"
v-model:district-id="formData.districtId" v-model:sub-district-id="formData.subDistrictId"
v-model:sub-district-id="formData.subDistrictId" v-model:moo="formData.moo"
v-model:moo="formData.moo" v-model:mooEN="formData.mooEN"
v-model:mooEN="formData.mooEN" v-model:soi="formData.soi"
v-model:soi="formData.soi" v-model:soiEN="formData.soiEN"
v-model:soiEN="formData.soiEN" v-model:street="formData.street"
v-model:street="formData.street" v-model:streetEN="formData.streetEN"
v-model:streetEN="formData.streetEN" v-model:zip-code="formData.zipCode"
v-model:zip-code="formData.zipCode" class="q-mb-xl"
class="q-mb-xl" />
/> <FormLocation
<FormLocation id="info-location"
id="info-location" title="branch.form.group.location"
title="branch.form.group.location" v-model:latitude="formData.latitude"
v-model:latitude="formData.latitude" v-model:longitude="formData.longitude"
v-model:longitude="formData.longitude" :readonly="formType === 'view'"
:readonly="formType === 'view'" :separator="true"
:separator="true" outlined
outlined dense
dense class="q-mb-xl"
class="q-mb-xl" />
/> <FormQr
<FormQr id="info-qr"
id="info-qr" :readonly="formType === 'view'"
:readonly="formType === 'view'" title="QR Code"
title="QR Code" :separator="true"
:separator="true" :qr="qrCodeimageUrl"
:qr="qrCodeimageUrl" @view-qr="
@view-qr=" () => {
() => { triggerEditQrCodeLine();
triggerEditQrCodeLine(); }
} "
" @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()" class="q-mb-xl"
class="q-mb-xl" />
/> <FormBank
<FormBank id="info-bank"
id="info-bank" :readonly="formType === 'view'"
:readonly="formType === 'view'" title="branch.form.group.bankAccount"
title="branch.form.group.bankAccount" dense
dense v-model:bank-book-list="formBankBook"
v-model:bank-book-list="formBankBook" class="q-mb-xl"
class="q-mb-xl" @view-qr="
@view-qr=" (i) => {
(i) => { currentIndexQrCodeBank = i;
currentIndexQrCodeBank = i; triggerEditQrCodeBank();
triggerEditQrCodeBank(); }
} "
" @edit-qr="
@edit-qr=" (i) => {
(i) => { currentIndexQrCodeBank = i;
currentIndexQrCodeBank = i; refQrCodeUpload.browse();
refQrCodeUpload.browse(); }
} "
" />
/> <FormBranchAdmin
<FormBranchAdmin id="info-branch-admin-view"
id="info-branch-admin-view" :admin="currentBranchAdmin"
:admin="currentBranchAdmin" class="q-mb-xl"
/> />
</template>
<template v-if="currentTab === 'attachment'"> <UploadFile
<UploadFile auto-save
id="info-attachment" class="q-mb-xl"
branch id="info-attachment"
:file="currentAttachmentList" branch
:tree-file=" :file="currentAttachmentList"
Object.values( :tree-file="
currentAttachmentList.reduce< Object.values(
Record< currentAttachmentList.reduce<
string, Record<string, { label: string; file: { label: string }[] }>
{ label: string; file: { label: string }[] } >((a, b) => {
> if (b.name && !a[b.name]) {
>((a, b) => { a[b.name] = {
if (b.name && !a[b.name]) { label: b.name,
a[b.name] = { file: [],
label: b.name, };
file: [],
};
}
return a;
}, {}) || {},
)
"
@save="
async (_group, file) => {
if (file) {
attachmentList.push(file);
await branchStore.putAttachment(
currentId,
attachmentList,
);
} }
return a;
}, {}) || {},
)
"
@save="
async (_group, file) => {
if (file) {
attachmentList.push(file);
await branchStore.putAttachment(currentId, attachmentList);
} }
" }
@deleteFile=" "
async (filename) => { @deleteFile="
const res = await branchStore.deleteByIdAttachment( async (filename) => {
currentId, const res = await branchStore.deleteByIdAttachment(
filename, currentId,
filename,
);
if (res) {
currentAttachmentList = currentAttachmentList.filter(
(v) => {
if (v.name === filename) {
return false;
}
return true;
},
); );
if (res) {
currentAttachmentList = currentAttachmentList.filter(
(v) => {
if (v.name === filename) {
return false;
}
return true;
},
);
}
} }
" }
/> "
</template> />
<template v-if="currentTab === 'remark'"></template>
</div> </div>
</div> </div>
</div> </div>