- ออกคำสั่ง step 4 hide download

- ปรับเมนูในทะเบียนประวัติ และเมนู (แต่งตั้ง-เลื่อน)
This commit is contained in:
Warunee Tamkoo 2023-08-10 20:13:12 +07:00
parent 054802c8b7
commit 5b800ed351
3 changed files with 64 additions and 253 deletions

View file

@ -172,13 +172,7 @@
<q-item clickable v-close-popup @click="postAdd">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>แตงต</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>เลอน</q-item-section>
<q-item-section>แตงต-เลอน</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">

View file

@ -1,36 +1,22 @@
<template>
<div>
<div style="min-height: 70vh">
<q-splitter
v-model="splitterModel"
style="height: 70vh"
@update:model-value="onchangePage"
>
<q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
<template v-slot:before>
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<div class="q-pr-sm">คำส</div>
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'"
>
<q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
:disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
<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 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 avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
@ -39,27 +25,17 @@
</div>
<div @click="setTab('second')" :class="getClass(tab == 'second')">
<div class="q-pr-sm">เอกสารแนบทาย</div>
<q-btn
size="12px"
flat
dense
:color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download"
:disable="tab !== 'second'"
>
<q-btn v-show="TailerPDF == ''" size="12px" flat dense
:color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
<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 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="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>ไฟล .xls</q-item-section>
</q-item>
</q-list>
@ -67,24 +43,12 @@
</q-btn>
</div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
<q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
</div>
<q-separator style="margin-top: -1px; z-index: 1" />
<q-card bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -92,12 +56,7 @@
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -106,12 +65,7 @@
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -119,12 +73,7 @@
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -132,12 +81,7 @@
</template>
<template v-slot:separator>
<q-avatar
color="primary"
text-color="white"
size="30px"
icon="drag_indicator"
/>
<q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
</template>
<template v-slot:after>
@ -148,15 +92,8 @@
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">คำส</label>
<q-file
outlined
dense
v-model="fileOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
>
<q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
@ -164,15 +101,8 @@
</div>
<div>
<label class="text-file">เอกสารแนบทาย</label>
<q-file
outlined
dense
v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
>
<q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
@ -186,51 +116,24 @@
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">เลขทคำส</label>
<q-input
:outlined="true"
dense
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
/>
<q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" />
</div>
<div>
<label class="text-file">ออกคำส</label>
<datepicker
menu-class-name="modalfix"
v-model="years"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="years" :locale="'th'" autoApply year-picker
:enableTimePicker="false" week-start="0">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
lazy-rules
:model-value="years + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]"
hide-bottom-space
:label="`${'ปีที่ออกคำสั่ง'}`"
>
<q-input outlined dense lazy-rules :model-value="years + 543" :rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
</q-icon>
</template>
</q-input>
@ -239,15 +142,8 @@
</div>
<div>
<label class="text-file">นทลงนาม</label>
<datepicker
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -255,24 +151,13 @@
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null"
:label="`${'วันที่มีผลออกคำสั่ง'}`"
:rules="[
<q-input outlined dense class="full-width datepicker" hide-bottom-space
:model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
]"
>
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
</q-icon>
</template>
</q-input>
@ -282,20 +167,9 @@
</div>
</fieldset>
<div class="flex justify-around">
<q-btn
unelevated
label="ออกคำสั่ง"
:color="validateForm() ? 'public' : 'grey'"
:disable="statusOrder == 'N'"
@click="clickExecute(orderId)"
/>
<q-btn
class="text-dark"
unelevated
label="ส่งไปลงนาม"
color="grey"
:disable="statusOrder == 'N'"
/>
<q-btn unelevated label="ออกคำสั่ง" :color="validateForm() ? 'public' : 'grey'"
:disable="statusOrder == 'N'" @click="clickExecute(orderId)" />
<q-btn class="text-dark" unelevated label="ส่งไปลงนาม" color="grey" :disable="statusOrder == 'N'" />
</div>
</div>
</q-form>
@ -304,23 +178,11 @@
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา"
>
<q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา">
</q-btn>
<q-btn
unelevated
label="บันทึก"
:color="validateForm() ? 'public' : 'grey'"
:disable="!validateForm()"
@click="save"
>
<q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
@click="save">
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
@ -328,13 +190,7 @@
</q-btn> -->
</div>
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
<q-card class="bg-white text-white">
<!-- <q-bar>
<q-space />
@ -345,24 +201,12 @@
</q-bar> -->
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
<q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
v-close-popup />
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -370,32 +214,16 @@
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent :scale="0.1" />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -403,12 +231,7 @@
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -469,7 +292,7 @@ const fetchAttachment = async (orderId: string) => {
.get(config.API.attachmentOrder(orderId))
.then(async (res) => {
let response = res.data.result;
console.log(response);
// console.log(response);
order.value = response.orderNo;
years.value = Number(response.orderYear);
if (response.date !== undefined) {
@ -511,7 +334,7 @@ const viewPDF = async (pdf: string) => {
}, 1500);
};
watch(tab, () => {
console.log(tab.value);
// console.log(tab.value);
if (tab.value === "main") {
viewPDF(OrderPDF.value);
}
@ -545,7 +368,7 @@ const props = defineProps({
},
});
const next = () => props.next();
// const next = () => props.next();
const previous = () => props.previous();
const onchangePage = (val: any) => {
@ -576,8 +399,8 @@ const save = () => {
await fetchAttachment(orderId.value);
await fecthstatusOrder(orderId.value);
})
.onCancel(() => {})
.onDismiss(() => {});
.onCancel(() => { })
.onDismiss(() => { });
}
});
}
@ -628,8 +451,8 @@ const clickExecute = async (id: string) => {
messageError($q, e);
});
})
.onCancel(() => {})
.onDismiss(() => {});
.onCancel(() => { })
.onDismiss(() => { });
};
const validateForm = () => {
@ -655,6 +478,7 @@ const setTab = (val: string) => {
border-radius: 10px;
border: 1px solid #e9eaec;
}
.text-header {
color: #34373c;
font-size: 1rem;