เพิ่มปุ่มดาวน์โหลดเอกสาร

This commit is contained in:
Warunee Tamkoo 2023-08-24 22:26:12 +07:00
parent 7c8a9c77c0
commit 4a5990daca
4 changed files with 159 additions and 306 deletions

View file

@ -156,16 +156,25 @@ const postData = async () => {
<div class="toptitle text-dark col-12 row items-center q-gutter-md">
<div>แบบรายงานการประเมนฯ</div>
<!-- <q-space /> -->
<q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<div v-if="action == 'edit'">
<div v-if="status == false">
<q-btn
dense
flat
round
color="primary"
@click="edit()"
icon="mdi-pencil-outline"
>
<q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
</div>
@ -173,15 +182,8 @@ const postData = async () => {
<q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
<q-btn
dense
flat
round
class="q-ml-sm"
color="public"
@click="saveEdit(assignId)"
icon="mdi-content-save-outline"
>
<q-btn dense flat round class="q-ml-sm" color="public" @click="saveEdit(assignId)"
icon="mdi-content-save-outline">
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</div>
@ -191,16 +193,8 @@ const postData = async () => {
<div class="row col-12">
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="date_start"
:locale="'th'"
autoApply
borderless
:readonly="!status"
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
:readonly="!status" :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -208,23 +202,10 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:disable="!status"
class="full-width datepicker"
:model-value="
date_start != null ? date2Thai(date_start) : null
"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
" :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -232,16 +213,8 @@ const postData = async () => {
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
:locale="'th'"
autoApply
:readonly="!status"
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply :readonly="!status"
borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -249,23 +222,10 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:disable="!status"
class="full-width datepicker"
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
" :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -278,64 +238,28 @@ const postData = async () => {
<div class="col-12 row q-mt-xs">
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-6">
<q-select
:rules="[
(val) =>
!!val ||
'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
]"
hide-bottom-space
:options="options"
class="col-xs-12 col-sm-6"
dense
borderless
:disable="!status"
emit-value
map-options
option-label="label"
option-value="value"
outlined
v-model="develop"
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
/>
</div>
<q-select :rules="[
(val) =>
!!val ||
'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless :disable="!status"
emit-value map-options option-label="label" option-value="value" outlined v-model="develop"
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:rules="[
(val) =>
!!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
]"
hide-bottom-space
:options="optionsResult"
class="col-xs-12 col-sm-6"
:disable="!status"
dense
borderless
emit-value
map-options
option-label="label"
option-value="value"
outlined
v-model="result"
label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
/>
<q-select :rules="[
(val) =>
!!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
]" hide-bottom-space :options="optionsResult" class="col-xs-12 col-sm-6" :disable="!status" dense
borderless emit-value map-options option-label="label" option-value="value" outlined v-model="result"
label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
</div>
</div>
</div>
<div class="col-12 row q-mt-lg">
<div class="col-12">
<q-input
hide-bottom-space
dense
borderless
outlined
:disable="!status"
class="bg-white"
type="textarea"
v-model="reson"
label="เหตุผล"
:rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
/>
<q-input hide-bottom-space dense borderless outlined :disable="!status" class="bg-white" type="textarea"
v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']" />
</div>
</div>
@ -349,27 +273,11 @@ const postData = async () => {
ประธานคณะกรรมการประเมนผลการปฏหนาทราชการ
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="director_id"
outlined
:options="commander"
label="ชื่อ-นามสกุล"
option-label="name"
disable
/>
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander"
label="ชื่อ-นามสกุล" option-label="name" disable />
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="chairman_dated"
:locale="'th'"
:readonly="!status"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" :readonly="!status" autoApply
borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -377,23 +285,10 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:disable="!status"
class="full-width datepicker col-3"
:model-value="
chairman_dated != null ? date2Thai(chairman_dated) : null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -409,27 +304,11 @@ const postData = async () => {
<!-- ความเหนของผอำนาจสงบรรจตามมาตรา 52 -->
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="director_id2"
outlined
label="ชื่อ-นามสกุล"
:disable="!status"
:options="optionDirector"
option-label="name"
/>
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined label="ชื่อ-นามสกุล"
:disable="!status" :options="optionDirector" option-label="name" />
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="director1_dated"
:locale="'th'"
autoApply
borderless
:readonly="!status"
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
:readonly="!status" :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -437,25 +316,12 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:disable="!status"
class="full-width datepicker col-3"
:model-value="
director1_dated != null
? date2Thai(director1_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director1_dated != null
? date2Thai(director1_dated)
: null
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -471,27 +337,11 @@ const postData = async () => {
<!-- อำนาจสงบรรจตามมาตรา 52 -->
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="director_id3"
outlined
label="ชื่อ-นามสกุล"
:options="optionDirector"
:disable="!status"
option-label="name"
/>
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined label="ชื่อ-นามสกุล"
:options="optionDirector" :disable="!status" option-label="name" />
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="director2_dated"
:locale="'th'"
autoApply
:readonly="!status"
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply
:readonly="!status" borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -499,25 +349,12 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:disable="!status"
class="full-width datepicker col-3"
:model-value="
director2_dated != null
? date2Thai(director2_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director2_dated != null
? date2Thai(director2_dated)
: null
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -531,11 +368,7 @@ const postData = async () => {
<q-toolbar class="text-primary" v-if="action == 'add'">
<q-space />
<q-btn
label="บันทึก"
color="secondary"
@click="savaForm"
/>
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
</q-toolbar>
</div>
</template>