refactor: add UploadFile
This commit is contained in:
Net
parent
676e7d4f94
commit
f308f6da3c
3 changed files with 242 additions and 1 deletions
216
src/components/upload-file/UploadFile.vue
Normal file
216
src/components/upload-file/UploadFile.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { SaveButton, UndoButton } from 'components/button';
|
||||
|
||||
import { VuePDF, usePDF } from '@tato30/vue-pdf';
|
||||
|
||||
const currentFileUrl = defineModel<string>('currentFileUrl');
|
||||
const { pdf, pages } = usePDF(currentFileUrl);
|
||||
|
||||
const selected = defineModel<string>('selected');
|
||||
const file = defineModel<File | null>('file');
|
||||
|
||||
const scale = ref(1);
|
||||
const page = ref(1);
|
||||
|
||||
const currentTab = ref<string>('information');
|
||||
|
||||
const currentIndexDropdownList = ref(0);
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
tree?: { label: string; children: { label: string }[] }[];
|
||||
dropdownList?: string[];
|
||||
}>(),
|
||||
{
|
||||
tree: () => [],
|
||||
},
|
||||
);
|
||||
|
||||
function browse() {
|
||||
inputFile?.click();
|
||||
}
|
||||
|
||||
const inputFile = (() => {
|
||||
const _element = document.createElement('input');
|
||||
_element.type = 'file';
|
||||
_element.accept = 'image/jpeg,image/png';
|
||||
_element.addEventListener('change', change);
|
||||
return _element;
|
||||
})();
|
||||
|
||||
function change(e: Event) {
|
||||
const _element = e.target as HTMLInputElement | null;
|
||||
const _file = _element?.files?.[0];
|
||||
|
||||
if (_file) {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(_file);
|
||||
reader.onload = () => {
|
||||
currentFileUrl.value = reader.result as string;
|
||||
};
|
||||
|
||||
if (_file) file.value = _file;
|
||||
|
||||
emit(
|
||||
'sendOcr',
|
||||
props.dropdownList?.[currentIndexDropdownList.value] || '',
|
||||
inputFile?.files?.[0],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const tabsList = [
|
||||
{
|
||||
label: 'information',
|
||||
name: 'information',
|
||||
},
|
||||
{
|
||||
label: 'document',
|
||||
name: 'document',
|
||||
},
|
||||
];
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'sendOcr', dropdown: string, file?: File): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="full-height full-width row">
|
||||
<div>
|
||||
<div class="q-pa-sm text-center bordered" style="height: 50px">
|
||||
<q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
|
||||
<q-list v-for="(v, i) in dropdownList" :key="v">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
() => {
|
||||
currentIndexDropdownList = i;
|
||||
browse();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="full-height bordered-l bordered-b q-pa-sm">
|
||||
<q-tree
|
||||
:nodes="tree || []"
|
||||
node-key="label"
|
||||
selected-color="primary"
|
||||
v-model:selected="selected"
|
||||
default-expand-all
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div
|
||||
class="bordered row items-center justify-evenly q-pa-sm"
|
||||
style="height: 50px"
|
||||
>
|
||||
<q-btn
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
class="btn-next"
|
||||
icon="mdi-chevron-left"
|
||||
unelevated
|
||||
dense
|
||||
id="btn-prev-page-top"
|
||||
/>
|
||||
|
||||
<div>Page {{ page }} of {{ pages }}</div>
|
||||
|
||||
<q-btn
|
||||
@click="scale = scale > 0.25 ? scale - 0.25 : scale"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-magnify-minus-outline"
|
||||
class="app-text-dark"
|
||||
>
|
||||
<q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
|
||||
</q-btn>
|
||||
<div>{{ scale * 100 }}%</div>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
class="app-text-dark"
|
||||
icon="mdi-magnify-plus-outline"
|
||||
@click="scale = scale < 2 ? scale + 0.25 : scale"
|
||||
>
|
||||
<q-tooltip>{{ $t('zoomIn') }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
@click="page = page < pages ? page + 1 : page"
|
||||
class="btn-next"
|
||||
icon="mdi-chevron-right"
|
||||
unelevated
|
||||
dense
|
||||
id="btn-prev-page-top"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
|
||||
>
|
||||
<VuePDF
|
||||
v-if="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="currentFileUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div
|
||||
class="bordered row items-center justify-between q-pa-sm"
|
||||
style="height: 50px"
|
||||
>
|
||||
ข้อมูลหนังสือเดินทาง
|
||||
|
||||
<div class="row">
|
||||
<UndoButton icon-only type="button" />
|
||||
<SaveButton icon-only type="button" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bordered-r bordered-b full-height">
|
||||
<q-tabs
|
||||
dense
|
||||
inline-label
|
||||
mobile-arrows
|
||||
v-model="currentTab"
|
||||
active-class="active-tab text-weight-bold"
|
||||
class="app-text-muted full-width"
|
||||
align="left"
|
||||
>
|
||||
<q-tab
|
||||
:id="`tab-${tab.label}`"
|
||||
v-for="tab in tabsList"
|
||||
v-bind:key="tab.name"
|
||||
class="content-tab text-capitalize"
|
||||
:name="tab.name"
|
||||
:label="$t(tab.label)"
|
||||
/>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
1
src/components/upload-file/index.ts
Normal file
1
src/components/upload-file/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default as UploadFile } from './UploadFile.vue';
|
||||
|
|
@ -6,6 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
|
|||
import { getUserId, getRole } from 'src/services/keycloak';
|
||||
import { baseUrl } from 'src/stores/utils';
|
||||
|
||||
import useOcrStore from 'stores/ocr';
|
||||
import useCustomerStore from 'stores/customer';
|
||||
import useEmployeeStore from 'stores/employee';
|
||||
import useMyBranchStore from 'stores/my-branch';
|
||||
|
|
@ -47,10 +48,13 @@ import SideMenu from 'components/SideMenu.vue';
|
|||
import { AddButton } from 'components/button';
|
||||
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
|
||||
|
||||
import { UploadFile } from 'components/upload-file';
|
||||
|
||||
import {
|
||||
columnsCustomer,
|
||||
columnsEmployee,
|
||||
formMenuIconEmployee,
|
||||
uploadFileList,
|
||||
} from './constant';
|
||||
import { useCustomerForm, useEmployeeForm } from './form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
|
@ -75,6 +79,7 @@ const employeeStore = useEmployeeStore();
|
|||
const customerFormStore = useCustomerForm();
|
||||
const employeeFormStore = useEmployeeForm();
|
||||
const optionStore = useOptionStore();
|
||||
const ocrStore = useOcrStore();
|
||||
|
||||
const filtdRequire = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>({
|
||||
main: ['citizenId', 'legalPersonNo', 'registerName'],
|
||||
|
|
@ -2629,7 +2634,7 @@ const emptyCreateDialog = ref(false);
|
|||
:key="idx"
|
||||
>
|
||||
<q-form
|
||||
class="full-width"
|
||||
class="full-width q-mb-xl"
|
||||
v-if="customerFormData.customerBranch"
|
||||
greedy
|
||||
@submit.prevent="
|
||||
|
|
@ -2877,6 +2882,13 @@ const emptyCreateDialog = ref(false);
|
|||
anchor: 'drawer-form-visa',
|
||||
tab: 'personalInfo',
|
||||
},
|
||||
|
||||
{
|
||||
name: $t('อัปโหลดไฟล์'),
|
||||
anchor: 'drawer-upload-file',
|
||||
tab: 'personalInfo',
|
||||
},
|
||||
|
||||
...(currentFromDataEmployee.employeeCheckup?.map(
|
||||
(v, i) => ({
|
||||
name: $t('general.times', { number: i + 1 }),
|
||||
|
|
@ -3058,6 +3070,18 @@ const emptyCreateDialog = ref(false);
|
|||
v-model:entry-date="currentFromDataEmployee.entryDate"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
<UploadFile
|
||||
:tree="[]"
|
||||
:dropdown-list="uploadFileList"
|
||||
@send-ocr="
|
||||
async (v: any, f: any) => {
|
||||
console.log(v, f);
|
||||
|
||||
await ocrStore.sendOcr({ file: f });
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="employeeFormState.currentTab === 'healthCheck'">
|
||||
<FormEmployeeHealthCheck
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue