hrms-bangkok/hrms-recruit
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

consend form

Browse source
This commit is contained in:
Kittapath 2023-03-22 00:25:55 +07:00
parent 6fe6aed921
commit 380eb0d10b
17 changed files with 482 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/modules/01_exam/components/Form/Document.vue
View file

@ -1,66 +1,78 @@
<!-- card อัปโหลดเอกสาร -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
icon="mdi-file-document"
:addData="true"
:editOnly="true"
:cancel="cancelData"
:editData="step == 2"
/>
<div class="row col-12 q-gutter-sm q-pt-sm">
<div v-if="edit" class="col-12 q-ma-none">
<q-input
class="q-my-sm"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
color="blue"
type="file"
flat
auto-upload
:factory="fileUpload"
class="full-width"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc]"
/>
</div>
<div class="col-12">
<HeaderTop
v-model:edit="edit"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
icon="mdi-file-document"
:addData="true"
:editOnly="true"
:cancel="cancelData"
:editData="step == 2"
/>
</div>
<q-separator class="q-mt-sm" />
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<div class="col-12">
<div v-if="edit" class="row justify-center q-pa-md">
<div class="col-4">
<q-input
class="q-my-sm"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
color="blue"
type="file"
flat
auto-upload
:factory="fileUpload"
class="full-width"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc]"
/>
</div>
</div>
<q-separator class="q-mt-sm" />
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
>
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</q-card>
</template>
<script setup lang="ts">