ปรับ css ออกคำสั่งเพิ่มเติม

This commit is contained in:
Tanyalak 2023-07-06 12:26:46 +07:00
parent eb4558bb0f
commit bdc7ab8df3
5 changed files with 56 additions and 48 deletions

View file

@ -455,8 +455,8 @@
lazy-rules lazy-rules
:readonly="!editvisible" :readonly="!editvisible"
:borderless="!editvisible" :borderless="!editvisible"
:rules="[(val) => !!val || `${'กรุณากรอก ื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ื่อ'}`]"
label="ื่อ" label="ื่อ"
/> />
<q-input <q-input
v-model="inputLink" v-model="inputLink"

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="q-pa-sm" style="max-height: 68vh; overflow-y: scroll"> <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
<div class="col-12 row q-pb-sm items-center"> <div class="col-12 row q-pb-sm items-center">
<q-btn flat round color="primary" @click="refresh" icon="mdi-refresh"> <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
<q-tooltip>ปเดตขอม</q-tooltip> <q-tooltip>ปเดตขอม</q-tooltip>
@ -49,7 +49,6 @@
<q-table <q-table
flat flat
bordered bordered
dense
:rows="rows" :rows="rows"
:columns="columns" :columns="columns"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll"> <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
<div class="col-12 row q-py-sm items-center"> <div class="col-12 row q-py-sm items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus"> <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพมขอม</q-tooltip> <q-tooltip>เพมขอม</q-tooltip>
@ -713,7 +713,7 @@ const deleteData = async (id: string) => {};
color: #4154b3; color: #4154b3;
} }
.custom-header-table { .custom-header-table {
max-height: 64vh; height: auto;
.q-table tr:nth-child(odd) td { .q-table tr:nth-child(odd) td {
background: white; background: white;
} }

View file

@ -9,22 +9,24 @@
<template v-slot:before> <template v-slot:before>
<div class="space"> <div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')"> <div @click="setTab('main')" :class="getClass(tab == 'main')">
<label>คำส</label> <div class="q-pr-sm">คำส</div>
<q-btn <q-btn
size="12px" size="12px"
flat flat
round dense
icon="mdi-download" icon="mdi-download"
:disable="tab !== 'main'" :disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'" :color="tab !== 'main' ? 'grey' : 'add'"
> >
<q-tooltip>ดาวนโหลด</q-tooltip> <q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu> <q-menu>
<q-list style="min-width: 100px"> <q-list style="min-width: 150px">
<q-item clickable v-close-popup> <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-section>ไฟล .PDF</q-item-section>
</q-item> </q-item>
<q-item clickable v-close-popup> <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-section>ไฟล .docx</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -32,38 +34,40 @@
</q-btn> </q-btn>
</div> </div>
<div @click="setTab('second')" :class="getClass(tab == 'second')"> <div @click="setTab('second')" :class="getClass(tab == 'second')">
<label>เอกสารแนบทาย</label> <div class="q-pr-sm">เอกสารแนบทาย</div>
<q-btn <q-btn
size="12px" size="12px"
flat flat
round dense
:color="tab !== 'second' ? 'grey' : 'add'" :color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download" icon="mdi-download"
:disable="tab !== 'second'" :disable="tab !== 'second'"
> >
<q-tooltip>ดาวนโหลด</q-tooltip> <q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu> <q-menu>
<q-list style="min-width: 100px"> <q-list style="min-width: 150px">
<q-item clickable v-close-popup> <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-section>ไฟล .PDF</q-item-section>
</q-item> </q-item>
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section>ไฟล .docx</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-item>
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="card-pdf q-ma-md q-pa-md"> <q-separator style="margin-top: -1px; z-index: 1;" />
<div class="q-pa-sm"> <q-card bordered class="card-pdf q-ma-md q-pa-md">
<div <div
class="justify-between items-center align-center q-py-sm row" class="justify-between items-center align-center q-pb-sm row"
> >
<q-btn <q-btn
class="text-grey" class="text-dark bg-grey-4"
outline flat
round dense
@click="page = page > 1 ? page - 1 : page" @click="page = page > 1 ? page - 1 : page"
> >
<q-icon name="mdi-chevron-left" /> <q-icon name="mdi-chevron-left" />
@ -74,9 +78,9 @@
</span> </span>
<q-btn <q-btn
class="text-grey" class="text-dark bg-grey-4"
outline flat
round dense
@click="page = page < numOfPages ? page + 1 : page" @click="page = page < numOfPages ? page + 1 : page"
> >
<q-icon name="mdi-chevron-right" /> <q-icon name="mdi-chevron-right" />
@ -87,12 +91,12 @@
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> --> <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div> </div>
<div <div
class="justify-between items-center align-center q-py-sm row" class="justify-between items-center align-center q-pt-sm row"
> >
<q-btn <q-btn
class="text-grey" class="text-dark bg-grey-4"
outline flat
round dense
@click="page = page > 1 ? page - 1 : page" @click="page = page > 1 ? page - 1 : page"
> >
<q-icon name="mdi-chevron-left" /> <q-icon name="mdi-chevron-left" />
@ -103,16 +107,15 @@
</span> </span>
<q-btn <q-btn
class="text-grey" class="text-dark bg-grey-4"
outline flat
round dense
@click="page = page < numOfPages ? page + 1 : page" @click="page = page < numOfPages ? page + 1 : page"
> >
<q-icon name="mdi-chevron-right" /> <q-icon name="mdi-chevron-right" />
</q-btn> </q-btn>
</div> </div>
</div> </q-card>
</div>
<!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'"> <!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
<pdf-viewer v-model:PDFV="vuePDFRef" /> <pdf-viewer v-model:PDFV="vuePDFRef" />
</div> --> </div> -->
@ -134,9 +137,9 @@
<template v-slot:after> <template v-slot:after>
<q-form ref="myForm"> <q-form ref="myForm">
<div class="q-pa-md q-gutter-y-md"> <div class="q-pa-md q-gutter-y-md">
<fieldset class="border q-pa-lg"> <fieldset class="border q-px-lg q-py-md">
<legend class="text-header">ปโหลดไฟล</legend> <legend class="text-header q-px-sm">ปโหลดไฟล</legend>
<div class="q-gutter-y-lg"> <div class="q-gutter-y-md q-mb-md">
<div> <div>
<label class="text-file">คำส</label> <label class="text-file">คำส</label>
<q-file <q-file
@ -144,6 +147,7 @@
dense dense
v-model="fileOrder" v-model="fileOrder"
label="เลือกไฟล์คำสั่ง" label="เลือกไฟล์คำสั่ง"
hide-bottom-space
lazy-rules lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
> >
@ -152,7 +156,6 @@
</template> </template>
</q-file> </q-file>
</div> </div>
<!-- <div class="q-py-lg" /> -->
<div> <div>
<label class="text-file">เอกสารแนบทาย</label> <label class="text-file">เอกสารแนบทาย</label>
<q-file <q-file
@ -160,6 +163,7 @@
dense dense
v-model="fileTailer" v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย" label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
lazy-rules lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
> >
@ -171,9 +175,9 @@
</div> </div>
</fieldset> </fieldset>
<fieldset class="border q-pa-lg"> <fieldset class="border q-px-lg q-py-md">
<legend class="text-header">รายละเอยด</legend> <legend class="text-header q-px-sm">รายละเอยด</legend>
<div class="q-gutter-y-md"> <div class="q-gutter-y-md q-mb-md">
<div> <div>
<label class="text-file">เลขทคำส</label> <label class="text-file">เลขทคำส</label>
<q-input <q-input
@ -249,6 +253,7 @@
outlined outlined
dense dense
class="full-width datepicker" class="full-width datepicker"
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null" :model-value="date != null ? date2Thai(date) : null"
:label="`${'วันที่มีผลออกคำสั่ง'}`" :label="`${'วันที่มีผลออกคำสั่ง'}`"
:rules="[ :rules="[
@ -414,24 +419,26 @@ const setTab = (val: string) => {
} }
.text-header { .text-header {
color: #34373c; color: #34373c;
font-size: 1.2rem; font-size: 1rem;
font-weight: normal; font-weight: 300;
} }
.text-file { .text-file {
padding-top: 5px;
color: #34373c; color: #34373c;
font-size: 1.1rem; font-weight: 500;
font-weight: bold;
} }
.space { .space {
background-color: #e9eaec; background-color: #e9eaec61;
display: flex; display: flex;
z-index: 3;
} }
.card-header { .card-header {
margin-top: 5px; margin-top: 5px;
background-color: #e9eaec; background-color: transparent;
padding: 2px !important;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
width: 200px; width: 200px;
display: flex; display: flex;
@ -442,21 +449,23 @@ const setTab = (val: string) => {
.card-header-active { .card-header-active {
margin-top: 5px; margin-top: 5px;
margin-left: -1px;
background-color: white; background-color: white;
padding: 2px !important;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
width: 200px; width: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
border-bottom-style: none; border-bottom-style: none;
font-weight: bold; font-weight: 600;
align-items: center; align-items: center;
} }
.card-pdf { .card-pdf {
border-radius: 10px; border-radius: 10px;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
background-color: #e9eaec; background-color: #e9eaec61;
// height: 60vh; // height: 60vh;
} }
</style> </style>

View file

@ -905,7 +905,7 @@ const getClass = (val: boolean) => {
/> />
</div> --> </div> -->
<div <div
class="col-xs-6 col-sm-3 col-md-3" class="col-xs-6 col-sm-4 col-md-4"
v-if="informaData.profileType == 'employee'" v-if="informaData.profileType == 'employee'"
> >
<selector <selector
@ -933,7 +933,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
<div <div
class="col-xs-6 col-sm-3 col-md-3" class="col-xs-6 col-sm-2 col-md-2"
v-if="informaData.profileType == 'employee'" v-if="informaData.profileType == 'employee'"
> >
<selector <selector