ปรับ css ออกคำสั่งเพิ่มเติม
This commit is contained in:
parent
eb4558bb0f
commit
bdc7ab8df3
5 changed files with 56 additions and 48 deletions
|
|
@ -455,8 +455,8 @@
|
|||
lazy-rules
|
||||
:readonly="!editvisible"
|
||||
:borderless="!editvisible"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ฃื่อ'}`]"
|
||||
label="ฃื่อ"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
label="ชื่อ"
|
||||
/>
|
||||
<q-input
|
||||
v-model="inputLink"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue