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

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

@ -558,12 +558,12 @@ const putData = (id: string) => {
},
];
if (caretaker2.value) {
assign_director.push({
personal_id: caretaker2.value.id,
role: "mentor",
dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
});
}
assign_director.push({
personal_id: caretaker2.value.id,
role: "mentor",
dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
});
}
const data = {
personalId: GUID,
fullname: fullname.value,
@ -765,9 +765,27 @@ watch(knowledge.value, () => {
เพมแบบมอบหมายงานการทดลองปฏหนาทราชการ
</div>
<div v-else class="col-12 row q-gutter-md">
<div>แบบมอบหมายงานการทดลองปฏหนาทราชการ</div>
<div>
แบบมอบหมายงานการทดลองปฏหนาทราชการ
</div>
<!-- <q-space /> -->
<div v-if="status == false">
<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="!status">
<q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
@ -776,7 +794,8 @@ watch(knowledge.value, () => {
<q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
<q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)" icon="mdi-content-save-outline">
<q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)"
icon="mdi-content-save-outline">
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</div>
@ -807,7 +826,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-4">
<q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
option-value="value" :outlined="status == true" v-model="monthSelect" :label="`ระยะเวลากี่เดือน`" />
option-value="value" :outlined="status == true" v-model="monthSelect"
:label="`ระยะเวลากี่เดือน`" />
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
@ -837,10 +857,10 @@ watch(knowledge.value, () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space dense borderless :outlined="status == true" readonly class="full-width datepicker"
:model-value="date_finish != null
? date2Thai(date_finish)
: undefined
<q-input hide-bottom-space dense borderless :outlined="status == true" readonly
class="full-width datepicker" :model-value="date_finish != null
? date2Thai(date_finish)
: undefined
" :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
</q-input>
</template>
@ -864,20 +884,18 @@ watch(knowledge.value, () => {
:options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
:label="`ผู้ดูแลคนที่ 1`" option-label="name" />
<q-select clearable
:options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
:outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
<q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
</div>
<div v-else class="col-12 row q-col-gutter-md">
<q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
:options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
:label="`ผู้ดูแลคนที่ 1`" option-label="name" />
<q-select clearable
:options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
:outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
<q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
</div>
</div>
<div class="col-12">
@ -937,9 +955,10 @@ watch(knowledge.value, () => {
<div v-for="(item, index) in knowledgeArray" :key="index" class="col-12 row q-col-gutter-sm">
<div class="col-11 q-my-xs">
<q-select :option-label="(item) => `${item.title}-${item.description}`
" option-value="id" map-options :rules="index < 3? [(val) => !!val || 'กรุณาเลือกความสามารถ']: []"
hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
borderless :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
" option-value="id" map-options
:rules="index < 3 ? [(val) => !!val || 'กรุณาเลือกความสามารถ'] : []" hide-bottom-space
:options="OPknowledge" class="bg-white" :readonly="status != true" dense borderless
:outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
}`" />
</div>
<div v-if="index > 2" class="col-xs-12 col-sm-1 flex justify-center items-center">
@ -1090,10 +1109,11 @@ watch(knowledge.value, () => {
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
map-options :outlined="status == true" v-model="skill" label="ด้านที่ 1">
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPcomputer"
class="bg-white" :readonly="status != true" dense borderless map-options
:outlined="status == true" v-model="skill" label="ด้านที่ 1">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1103,10 +1123,11 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select ellipsis-2-lines :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
:outlined="status == true" v-model="skill2" label="ด้านที่ 2">
`${item.title} - ${item.level_description}`
" option-value="id" map-options hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPenglish"
class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
v-model="skill2" label="ด้านที่ 2">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1116,10 +1137,11 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
borderless :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPinfomation"
class="bg-white" :readonly="status != true" dense map-options borderless
:outlined="status == true" v-model="skill3" label="ด้านที่ 3">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1129,10 +1151,11 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPresourse" class="bg-white" :readonly="status != true" dense map-options
borderless :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPresourse"
class="bg-white" :readonly="status != true" dense map-options borderless
:outlined="status == true" v-model="skill4" label="ด้านที่ 4">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1211,8 +1234,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-6">
<q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
" :option-label="(item) => `${item.title} - ${item.description}`"
option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
" :option-label="(item) => `${item.title} - ${item.description}`" option-value="id"
class="bg-white" :readonly="status != true" dense map-options borderless
:outlined="status == true" v-model="main5" label="ตัวที่ 5">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
@ -1228,10 +1251,10 @@ watch(knowledge.value, () => {
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group2, group3])" class="bg-white"
:readonly="status != true" dense borderless map-options :outlined="status == true"
v-model="group" label="ตัวที่ 1">
" option-value="id" hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group2, group3])" class="bg-white" :readonly="status != true"
dense borderless map-options :outlined="status == true" v-model="group" label="ตัวที่ 1">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1241,10 +1264,10 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group, group3])" class="bg-white"
:readonly="status != true" dense borderless map-options :outlined="status == true"
v-model="group2" label="ตัวที่ 2">
" option-value="id" hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group, group3])" class="bg-white" :readonly="status != true"
dense borderless map-options :outlined="status == true" v-model="group2" label="ตัวที่ 2">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1254,10 +1277,10 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group, group2])" class="bg-white"
:readonly="status != true" dense borderless :outlined="status == true" v-model="group3"
label="ตัวที่ 3">
" option-value="id" map-options hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group, group2])" class="bg-white" :readonly="status != true"
dense borderless :outlined="status == true" v-model="group3" label="ตัวที่ 3">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
{{ scope.opt.title }} -
@ -1597,12 +1620,12 @@ watch(knowledge.value, () => {
</template>
</datepicker>
</div>
<q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
<q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])"
option-value="id" option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense
borderless :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
<q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
:outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
<q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
class="col-xs-12 col-sm-8" :readonly="status != true " dense borderless :outlined="status == true"
v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="status != true | !caretaker2">
@ -1613,12 +1636,9 @@ watch(knowledge.value, () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space
:disable="!caretaker2"
:readonly="status != true" dense s borderless :outlined="status == true"
class="full-width datepicker" :model-value="date3 != null ? date2Thai(date3) : null"
label="ลงวันที่">
<q-input hide-bottom-space :disable="!caretaker2" :readonly="status != true" dense s borderless
:outlined="status == true" class="full-width datepicker"
:model-value="date3 != null ? date2Thai(date3) : null" label="ลงวันที่">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>