refactor: edit uploadfile
This commit is contained in:
Net
parent
633fc38160
commit
7a02cb19d7
2 changed files with 508 additions and 642 deletions
|
|
@ -1,11 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import {
|
||||
SaveButton,
|
||||
UndoButton,
|
||||
CloseButton,
|
||||
DeleteButton,
|
||||
} from 'components/button';
|
||||
import { DeleteButton } from 'components/button';
|
||||
import { dialog } from 'stores/utils';
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
|
@ -13,18 +8,18 @@ import { VuePDF, usePDF } from '@tato30/vue-pdf';
|
|||
|
||||
const { t } = useI18n();
|
||||
const currentFileSelected = ref<string>('');
|
||||
const file = defineModel<
|
||||
const obj = defineModel<
|
||||
{
|
||||
name?: string;
|
||||
group?: string;
|
||||
url?: string;
|
||||
file?: File;
|
||||
}[]
|
||||
>('file', {
|
||||
>({
|
||||
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 currentMode = ref<string>('');
|
||||
const currentIndex = ref(0);
|
||||
|
|
@ -40,11 +35,11 @@ const props = withDefaults(
|
|||
readonly?: boolean;
|
||||
dropdownList?: { label: string; value: string }[];
|
||||
hideAction?: boolean;
|
||||
branch?: boolean;
|
||||
autoSave?: boolean;
|
||||
}>(),
|
||||
{
|
||||
autoSave: false,
|
||||
treeFile: () => [],
|
||||
branch: false,
|
||||
},
|
||||
);
|
||||
|
||||
|
|
@ -60,61 +55,82 @@ const inputFile = (() => {
|
|||
return _element;
|
||||
})();
|
||||
|
||||
function change(e: Event) {
|
||||
async function change(e: Event) {
|
||||
const _element = e.target as HTMLInputElement | null;
|
||||
const _file = _element?.files?.[0];
|
||||
currentIndex.value = file.value.length;
|
||||
|
||||
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();
|
||||
reader.readAsDataURL(_file);
|
||||
reader.onload = () => {
|
||||
if (file.value[currentIndex.value]) {
|
||||
file.value[currentIndex.value].url = reader.result as string;
|
||||
console.log(file.value[currentIndex.value]);
|
||||
if (obj.value[currentIndex.value]) {
|
||||
obj.value[currentIndex.value].url = reader.result as string;
|
||||
currentFileSelected.value = _file.name;
|
||||
}
|
||||
};
|
||||
|
||||
if (_file && file.value[currentIndex.value]) {
|
||||
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) {
|
||||
if (!!props.autoSave) {
|
||||
emit(
|
||||
'save',
|
||||
props.dropdownList?.[currentIndexDropdownList.value].value || '',
|
||||
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, () => {
|
||||
file.value.findIndex((v, i) => {
|
||||
obj.value.findIndex((v, i) => {
|
||||
if (v.name?.includes(currentFileSelected.value)) {
|
||||
currentIndex.value = i;
|
||||
|
||||
|
|
@ -136,7 +152,7 @@ const emit = defineEmits<{
|
|||
|
||||
const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
|
||||
|
||||
function deleteFileOfBranch(filename: string) {
|
||||
function deleteFileOfBranch(filename: string, index: number) {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
|
|
@ -145,35 +161,11 @@ function deleteFileOfBranch(filename: string) {
|
|||
persistent: true,
|
||||
message: t('dialog.message.confirmDelete'),
|
||||
action: async () => {
|
||||
emit('deleteFile', filename);
|
||||
},
|
||||
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
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 || '';
|
||||
if (!!props.autoSave) {
|
||||
emit('deleteFile', filename);
|
||||
} else {
|
||||
obj.value.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
cancel: () => {},
|
||||
|
|
@ -183,7 +175,7 @@ function deleteFile() {
|
|||
|
||||
<template>
|
||||
<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">
|
||||
<q-btn-dropdown
|
||||
:disable="readonly"
|
||||
|
|
@ -192,34 +184,61 @@ function deleteFile() {
|
|||
label="อัปโหลดเอกสาร"
|
||||
@click="
|
||||
() => {
|
||||
if (branch) {
|
||||
browse();
|
||||
}
|
||||
currentIndex = obj.length;
|
||||
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">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
<div class="full-width row items-center justify-between">
|
||||
<div class="ellipsis col-8">
|
||||
<q-tooltip>{{ v.name }}</q-tooltip>
|
||||
{{ v.name }}
|
||||
</div>
|
||||
<DeleteButton
|
||||
iconOnly
|
||||
@click.stop="
|
||||
() => {
|
||||
currentIndexDropdownList = i;
|
||||
browse();
|
||||
deleteFileOfBranch(v.name || '', i);
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ $t(v.label) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</q-item>
|
||||
|
||||
<div class="bordered-l bordered-b q-pa-sm col full-height scroll">
|
||||
<q-tree
|
||||
:nodes="treeFile || []"
|
||||
<!-- <q-tree
|
||||
:nodes="
|
||||
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"
|
||||
label-key="label"
|
||||
children-key="file"
|
||||
|
|
@ -233,22 +252,20 @@ function deleteFile() {
|
|||
<q-tooltip>{{ prop.node.label }}</q-tooltip>
|
||||
{{ prop.node.label }}
|
||||
</div>
|
||||
<div v-if="branch">
|
||||
<DeleteButton
|
||||
iconOnly
|
||||
@click.stop="
|
||||
() => {
|
||||
deleteFileOfBranch(prop.node.label);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<DeleteButton
|
||||
iconOnly
|
||||
@click.stop="
|
||||
() => {
|
||||
deleteFileOfBranch(prop.node.label);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
</q-tree> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!branch" class="col full-height column no-wrap">
|
||||
<div class="col full-height column no-wrap">
|
||||
<div
|
||||
class="bordered row items-center justify-evenly q-pa-sm no-wrap"
|
||||
style="height: 50px"
|
||||
|
|
@ -302,92 +319,25 @@ function deleteFile() {
|
|||
<div
|
||||
class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
|
||||
>
|
||||
<template v-if="statusOcr">
|
||||
<q-spinner color="primary" size="3em" :thickness="2" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<VuePDF
|
||||
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" :src="currentFile?.url" />
|
||||
</template>
|
||||
<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"
|
||||
:src="currentFile?.url"
|
||||
style="height: 220px; max-width: 300px"
|
||||
/>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -792,6 +792,7 @@ async function onSubmit(submitSelectedItem?: boolean) {
|
|||
},
|
||||
formBankBook.value,
|
||||
onCreateImageList.value,
|
||||
currentAttachmentList.value,
|
||||
);
|
||||
|
||||
if (res) {
|
||||
|
|
@ -1731,31 +1732,6 @@ watch(currentHq, () => {
|
|||
}-hsl)/${imageUrl ? '0' : '0.15'})`"
|
||||
:menu="formMenuIcon"
|
||||
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="
|
||||
() => {
|
||||
imageDialog = true;
|
||||
|
|
@ -1824,52 +1800,44 @@ watch(currentHq, () => {
|
|||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<SideMenu
|
||||
:menu="
|
||||
:menu="[
|
||||
{
|
||||
main: [
|
||||
{
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'form-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'form-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'form-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'form-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'form-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'form-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'form-branch-admin-view',
|
||||
},
|
||||
],
|
||||
attachment: [
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'form-attachment',
|
||||
},
|
||||
],
|
||||
remark: [
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'form-remark',
|
||||
},
|
||||
],
|
||||
}[currentTab] || []
|
||||
"
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'form-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'form-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'form-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'form-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'form-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'form-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'form-branch-admin-view',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'form-attachment',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'form-remark',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
|
|
@ -1885,163 +1853,144 @@ watch(currentHq, () => {
|
|||
id="branch-form"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<template v-if="currentTab === 'main'">
|
||||
<FormBranchInformation
|
||||
id="form-information"
|
||||
v-model:branchCount="formLastSubBranch"
|
||||
v-model:abbreviation="formData.code"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="form.field.basicInformation"
|
||||
:view="isSubCreate || !!currentId"
|
||||
onCreate
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="form-contact"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:separator="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.contact"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
<FormBranchInformation
|
||||
id="form-information"
|
||||
v-model:branchCount="formLastSubBranch"
|
||||
v-model:abbreviation="formData.code"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="form.field.basicInformation"
|
||||
:view="isSubCreate || !!currentId"
|
||||
onCreate
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="form-contact"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:separator="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.contact"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
|
||||
<AddressForm
|
||||
id="form-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
v-model:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
:readonly="formType === 'view'"
|
||||
/>
|
||||
<FormLocation
|
||||
id="form-location"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
outlined
|
||||
dense
|
||||
title="branch.form.group.location"
|
||||
/>
|
||||
<FormQr
|
||||
id="form-qr"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
/>
|
||||
<FormBank
|
||||
id="form-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload && refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="form-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
/>
|
||||
</template>
|
||||
<AddressForm
|
||||
id="form-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
v-model:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
:readonly="formType === 'view'"
|
||||
/>
|
||||
<FormLocation
|
||||
id="form-location"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
outlined
|
||||
dense
|
||||
title="branch.form.group.location"
|
||||
/>
|
||||
<FormQr
|
||||
id="form-qr"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
/>
|
||||
<FormBank
|
||||
id="form-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload && refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="form-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
<template v-if="currentTab === 'attachment'">
|
||||
<UploadFile
|
||||
branch
|
||||
:file="currentAttachmentList"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
currentAttachmentList.reduce<
|
||||
Record<string, { label: string; file: { label: string }[] }>
|
||||
>((a, b) => {
|
||||
if (b.name && !a[b.name]) {
|
||||
a[b.name] = {
|
||||
label: b.name,
|
||||
file: [],
|
||||
};
|
||||
<UploadFile
|
||||
id="form-attachment"
|
||||
class="q-mb-xl"
|
||||
:auto-save="currentId !== ''"
|
||||
branch
|
||||
v-model="currentAttachmentList"
|
||||
@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 a;
|
||||
}, {}) || {},
|
||||
)
|
||||
"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
|
||||
await branchStore.putAttachment(currentId, attachmentList);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
"
|
||||
@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>
|
||||
|
|
@ -2083,20 +2032,6 @@ watch(currentHq, () => {
|
|||
:caption="formData.code"
|
||||
icon="mdi-office-building-outline"
|
||||
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(${
|
||||
formTypeBranch === 'headOffice'
|
||||
? '--pink-6'
|
||||
|
|
@ -2134,7 +2069,7 @@ watch(currentHq, () => {
|
|||
formType = 'view';
|
||||
}
|
||||
|
||||
await fetchList({ pageSize: 99999 });
|
||||
await fetchList({ tree: true, pageSize: 99999 });
|
||||
}
|
||||
"
|
||||
:menu="formMenuIcon"
|
||||
|
|
@ -2147,7 +2082,6 @@ watch(currentHq, () => {
|
|||
class="row full-width full-height surface-1 rounded relative-position"
|
||||
>
|
||||
<div
|
||||
v-if="currentTab === 'main'"
|
||||
class="q-py-md q-px-lg"
|
||||
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"
|
||||
>
|
||||
<SideMenu
|
||||
:menu="
|
||||
:menu="[
|
||||
{
|
||||
main: [
|
||||
{
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'info-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'info-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'info-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'info-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'info-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'info-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'info-branch-admin-view',
|
||||
},
|
||||
],
|
||||
attachment: [
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'info-attachment',
|
||||
},
|
||||
],
|
||||
remark: [
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'info-remark',
|
||||
},
|
||||
],
|
||||
}[currentTab] || []
|
||||
"
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'info-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'info-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'info-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'info-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'info-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'info-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'info-branch-admin-view',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'info-attachment',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'info-remark',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
|
|
@ -2248,175 +2174,165 @@ watch(currentHq, () => {
|
|||
id="branch-info"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<template v-if="currentTab === 'main'">
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:virtual="formData.virtual"
|
||||
v-model:abbreviation="formData.code"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
view
|
||||
title="form.field.basicInformation"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="branch.form.group.contact"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<AddressForm
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
:readonly="formType === 'view'"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
v-model:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormLocation
|
||||
id="info-location"
|
||||
title="branch.form.group.location"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
outlined
|
||||
dense
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBank
|
||||
id="info-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
class="q-mb-xl"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="info-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
/>
|
||||
</template>
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:virtual="formData.virtual"
|
||||
v-model:abbreviation="formData.code"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
view
|
||||
title="form.field.basicInformation"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="branch.form.group.contact"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<AddressForm
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
:readonly="formType === 'view'"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
v-model:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormLocation
|
||||
id="info-location"
|
||||
title="branch.form.group.location"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
outlined
|
||||
dense
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBank
|
||||
id="info-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
class="q-mb-xl"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="info-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
<template v-if="currentTab === 'attachment'">
|
||||
<UploadFile
|
||||
id="info-attachment"
|
||||
branch
|
||||
:file="currentAttachmentList"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
currentAttachmentList.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;
|
||||
}, {}) || {},
|
||||
)
|
||||
"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
|
||||
await branchStore.putAttachment(
|
||||
currentId,
|
||||
attachmentList,
|
||||
);
|
||||
<UploadFile
|
||||
auto-save
|
||||
class="q-mb-xl"
|
||||
id="info-attachment"
|
||||
branch
|
||||
:file="currentAttachmentList"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
currentAttachmentList.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;
|
||||
}, {}) || {},
|
||||
)
|
||||
"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
await branchStore.putAttachment(currentId, attachmentList);
|
||||
}
|
||||
"
|
||||
@deleteFile="
|
||||
async (filename) => {
|
||||
const res = await branchStore.deleteByIdAttachment(
|
||||
currentId,
|
||||
filename,
|
||||
}
|
||||
"
|
||||
@deleteFile="
|
||||
async (filename) => {
|
||||
const res = await branchStore.deleteByIdAttachment(
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue