ปรับ 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
:readonly="!editvisible"
:borderless="!editvisible"
:rules="[(val) => !!val || `${'กรุณากรอก ื่อ'}`]"
label="ื่อ"
:rules="[(val) => !!val || `${'กรุณากรอก ื่อ'}`]"
label="ื่อ"
/>
<q-input
v-model="inputLink"

View file

@ -1,6 +1,6 @@
<template>
<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">
<q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
<q-tooltip>ปเดตขอม</q-tooltip>
@ -49,7 +49,6 @@
<q-table
flat
bordered
dense
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"

View file

@ -1,6 +1,6 @@
<template>
<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">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพมขอม</q-tooltip>
@ -713,7 +713,7 @@ const deleteData = async (id: string) => {};
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
height: auto;
.q-table tr:nth-child(odd) td {
background: white;
}

View file

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

View file

@ -905,7 +905,7 @@ const getClass = (val: boolean) => {
/>
</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'"
>
<selector
@ -933,7 +933,7 @@ const getClass = (val: boolean) => {
/>
</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'"
>
<selector