ปรับรูปแบบฟอร์ม ปุ่ม ในระบบบริการเจ้าของข้อมูล

This commit is contained in:
STW_TTTY\stwtt 2024-06-11 16:02:21 +07:00
parent 3800ce5547
commit f08e636d82
16 changed files with 171 additions and 158 deletions

View file

@ -111,6 +111,10 @@ const fileUploadDoc = async (file: any) => {
nameFile.value = file[0].name;
files.value = file;
};
function fileOpen(url: string) {
window.open(url, "_blank");
}
</script>
<template>
@ -147,6 +151,7 @@ const fileUploadDoc = async (file: any) => {
dense
outlined
v-model="tranferOrg"
hide-bottom-space
label="หน่วยงานที่ขอโอนไป"
:readonly="routeName != 'addTransfer'"
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
@ -159,6 +164,7 @@ const fileUploadDoc = async (file: any) => {
outlined
v-model="noteReason"
label="เหตุผล"
hide-bottom-space
type="textarea"
:readonly="routeName != 'addTransfer'"
:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
@ -193,26 +199,31 @@ const fileUploadDoc = async (file: any) => {
/> -->
</div>
<div class="col-12 row" v-if="routeName != 'addTransfer'">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพมเต
</div>
</div>
<q-card bordered flat class="full-width">
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
>
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพมเต
</div>
</div>
<q-separator />
<q-list separator>
<q-item
v-for="file in files"
:key="file.key"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
{{ file.fileName }}
</q-item-section>
<q-item-section avatar>
<q-btn
color="teal-5"
round
flat
icon="mdi-download"
@click="fileOpen(file.pathName)"
></q-btn>
</q-item-section>
</q-item>
</q-list>
@ -222,17 +233,20 @@ const fileUploadDoc = async (file: any) => {
</div>
</div>
<q-separator v-if="routeName == 'addTransfer'" />
<div class="row col-12 q-pa-md" v-if="routeName == 'addTransfer'">
<q-card-actions
align="right"
class="row col-12"
v-if="routeName == 'addTransfer'"
>
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="primary"
label="ยื่นเรื่องขอโอน"
type="onsubmit"
/>
</div>
</q-card-actions>
</q-card>
</q-form>
</div>

View file

@ -184,7 +184,7 @@ function downloadFile(data: string) {
<q-card bordered>
<div class="col-12 row q-col-gutter-sm q-pa-md">
<div class="col-xs-12 col-sm-12">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-12 row q-col-gutter-sm">
<q-input
:class="
routeName !== 'AddRetire'
@ -331,12 +331,12 @@ function downloadFile(data: string) {
<q-icon name="attach_file" /> </template
></q-file>
</div>
<div class="col-12 row">
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card
bordered
flat
class="row col-12 text-dark q-mt-sm"
v-if="routeName != 'AddRetire'"
>
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
@ -375,11 +375,11 @@ function downloadFile(data: string) {
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card
bordered
class="row col-12 text-dark q-mt-sm"
v-if="routeName != 'AddRetire'"
>
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
@ -443,11 +443,11 @@ function downloadFile(data: string) {
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card
bordered
class="row col-12 text-dark q-mt-sm"
v-if="routeName != 'AddRetire'"
>
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
@ -510,11 +510,11 @@ function downloadFile(data: string) {
</div>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card
bordered
class="row col-12 text-dark q-mt-sm"
v-if="routeName != 'AddRetire'"
>
<div
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
@ -580,8 +580,9 @@ function downloadFile(data: string) {
</div>
</div>
<div class="row col-12 q-pa-md" v-if="routeName != 'AddRetire'">
<q-space />
</div>
<q-separator v-if="routeName !== 'AddRetire'" />
<q-card-actions align="right" v-if="routeName !== 'AddRetire'" class="q-px-md">
<q-btn
v-if="
dataDetail.status !== 'DELETE' &&
@ -589,27 +590,25 @@ function downloadFile(data: string) {
dataDetail.status !== 'CANCEL'
"
unelevated
dense
class="q-px-md items-center"
color="orange"
label="ยกเลิกการลาออก"
@click="cancelResing"
:disable="tranferOrg == '' && noteReason == ''"
/>
</div>
</div>
</q-card-actions>
<q-separator v-if="routeName == 'AddRetire'" />
<div class="row col-12 q-pa-md" v-if="routeName == 'AddRetire'">
<q-card-actions align="right" v-if="routeName == 'AddRetire'" class="q-px-md">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="primary"
label="ยื่นเรื่องขอลาออก"
type="submit"
/>
</div>
</q-card-actions>
</q-card>
</q-form>
</div>

View file

@ -513,6 +513,7 @@ watch(
label="เขียนที่"
:rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
lazy-rules
hide-bottom-space
outlined
dense
/>
@ -522,6 +523,7 @@ watch(
type="textarea"
label="กรอกเหตุผล"
:rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
hide-bottom-space
lazy-rules
outlined
dense
@ -532,6 +534,7 @@ watch(
v-model="formDelete.doc"
label="เลือกไฟล์เอกสารหลักฐาน"
:rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
hide-bottom-space
lazy-rules
use-chips
dense

View file

@ -567,14 +567,13 @@ onMounted(() => {
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-card-actions align="right" class="bg-white text-teal q-pa-none q-pt-sm">
<q-btn
v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>นทกแบบราง</q-tooltip></q-btn
@ -584,13 +583,14 @@ onMounted(() => {
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>นใบลา</q-tooltip></q-btn
>
</div>
</q-card-actions>
</form>
</template>

View file

@ -87,7 +87,7 @@ onMounted(async () => {
</script>
<template>
<div class="col-12 row justify-center">
<div class="row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
@ -103,9 +103,9 @@ onMounted(async () => {
<div>สรางใบลา</div>
</div>
<q-form ref="myform" class="col-12">
<q-form ref="myform" >
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div style="display: flex; align-items: center">
<q-icon

View file

@ -596,7 +596,7 @@ onMounted(async () => {
<div class="col-12">
<q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row ">
<div class="col-12 row">
<div class="col-12 q-py-md q-px-lg">
<div class="col-12 row items-center no-wrap">
<div class="toptitle2">
@ -729,7 +729,7 @@ onMounted(async () => {
</div>
</div>
</div>
<div class="q-pt-sm q-gutter-sm" align="right">
<q-card-actions class="q-pt-sm q-pa-none q-gutter-sm" align="right">
<q-btn
v-if="
store.step >= store.currentStep &&
@ -784,7 +784,7 @@ onMounted(async () => {
color="public"
@click="onCilckNextStep()"
/>
</div>
</q-card-actions>
</div>
</q-card>
</div>

View file

@ -598,7 +598,7 @@ watch(
<div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="col-12 row items-center text-weight-medium bg-grey-1 q-pl-md q-pr-sm"
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
>
<div>แบบพจารณาคณสมบคคล</div>
<q-space />

View file

@ -123,7 +123,7 @@ watch(
<q-card style="width: 700px; max-width: 80vw">
<HeaderDialog :tittle="'ประวัติการประเมิน'" :close="props.close" />
<q-separator />
<q-card-section class="q-pt-none">
<q-card-section >
<div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
<div class="col-12">
<q-table

View file

@ -423,10 +423,8 @@ function onSubmit(data: any) {
</q-card>
</div>
</div>
<div v-if="!isReadOnly">
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-separator v-if="!isReadOnly"/>
<q-card-actions align="right" class="bg-white text-teal" v-if="!isReadOnly">
<q-btn
id="onSubmit"
type="submit"
@ -434,8 +432,8 @@ function onSubmit(data: any) {
color="secondary"
><q-tooltip>นท</q-tooltip></q-btn
>
</div>
</div>
</q-card-actions>
</q-card>
</form>
</div>

View file

@ -264,21 +264,18 @@ onMounted(async () => {
</div>
<div class="col-12">
<q-card bordered class="q-pa-md">
<div class="row q-mb-sm">
<div>
<q-btn
id="addComplaints"
for="addComplaints"
size="12px"
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมการอทธรณ/องทกข</q-tooltip></q-btn
>
</div>
</div>
<q-btn
id="addComplaints"
for="addComplaints"
size="12px"
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพมการอทธรณ/องทกข</q-tooltip></q-btn
>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-md-2">
<datepicker
@ -378,88 +375,91 @@ onMounted(async () => {
options-cover
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<d-table
flat
bordered
dense
class="custom-table2"
style="max-height: 80vh"
:rows="dataStore.rows"
:columns="dataStore.columns"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="editPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="editPage(props.row.id)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
<div class="col-12">
<d-table
flat
bordered
dense
class="custom-table2"
style="max-height: 80vh"
:rows="dataStore.rows"
:columns="dataStore.columns"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="editPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<q-item-label v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</q-item-label>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="editPage(props.row.id)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
<q-item-label v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</q-item-label>
<q-item-label v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div>
</div>
</q-card>
</div>
</div>

View file

@ -383,7 +383,7 @@ onMounted(() => {
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<q-toolbar style="padding: 0px">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
@ -394,11 +394,8 @@ onMounted(() => {
class="q-mr-sm"
@click="router.push(`/`)"
/>
<q-toolbar-title class="toptitle text-white items-center">
รายการขอรบประเมนผลการปฏราชการระดบบคคล</q-toolbar-title
>
</q-toolbar>
รายการขอรบประเมนผลการปฏราชการระดบบคคล
</div>
<!-- <div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
@ -414,7 +411,7 @@ onMounted(() => {
</div> -->
<div class="col-12">
<q-card bordered class="q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="row q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-md-3">
<datepicker
menu-class-name="modalfix"
@ -492,7 +489,6 @@ onMounted(() => {
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</div>

View file

@ -198,7 +198,7 @@ onMounted(async () => {
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<q-toolbar style="padding: 0px;">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
@ -209,11 +209,8 @@ onMounted(async () => {
class="q-mr-sm"
@click="router.push(`/`)"
/>
<q-toolbar-title class="toptitle text-white items-center">
รายการการประเมนผลการปฏราชการระดบบคคล</q-toolbar-title
>
</q-toolbar>
รายการการประเมนผลการปฏราชการระดบบคคล
</div>
<!-- <div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"

View file

@ -2760,6 +2760,7 @@ onMounted(async () => {
class="col-xs-12 col-sm-8"
:readonly="editStatus != true"
dense
hide-bottom-space
borderless
:outlined="editStatus == true"
v-model="chairman"
@ -2787,6 +2788,7 @@ onMounted(async () => {
class="col-xs-12 col-sm-8"
:readonly="!editStatus"
dense
hide-bottom-space
borderless
:outlined="editStatus"
v-model="chairman"

View file

@ -569,6 +569,7 @@ onMounted(() => {
dense
:disable="!status"
class="full-width datepicker"
hide-bottom-space
:model-value="
evaluate_date != null ? date2Thai(evaluate_date) : null
"

View file

@ -123,6 +123,7 @@ onMounted(() => {
dense
borderless
outlined
hide-bottom-space
v-model="answer1"
type="textarea"
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
@ -142,6 +143,7 @@ onMounted(() => {
borderless
outlined
v-model="answer2"
hide-bottom-space
type="textarea"
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
/>

View file

@ -1711,6 +1711,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
hide-bottom-space
outlined
dense
class="full-width datepicker col-3"