เพิ่ม ui ลาออก
This commit is contained in:
AnandaTon
parent
1b40d859e5
commit
bd6ccdbb3f
11 changed files with 8937 additions and 13229 deletions
79
src/components/CustomDialog.vue
Normal file
79
src/components/CustomDialog.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
|
||||
<q-card class="q-pa-sm">
|
||||
<q-card-section class="row">
|
||||
<div class="q-pr-md">
|
||||
<q-avatar :icon="icon" size="lg" font-size="25px" color="blue-1" :text-color="color" />
|
||||
</div>
|
||||
<div class="col text-dark">
|
||||
<span class="text-bold">{{ title }}</span>
|
||||
<br />
|
||||
<span>{{ message }}</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal" v-if="onlycancel">
|
||||
<q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
|
||||
<!-- <q-btn :label="textOk" :color="color" @click="onOKClick" /> -->
|
||||
</q-card-actions>
|
||||
<q-card-actions align="right" class="bg-white text-teal" v-else>
|
||||
<q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
|
||||
<q-btn :label="textOk" :color="color" @click="onOKClick" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDialogPluginComponent } from "quasar"
|
||||
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
},
|
||||
textOk: {
|
||||
type: String,
|
||||
default: "ตกลง",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "หัวข้อ?",
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: "ข้อความ",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "question_mark",
|
||||
},
|
||||
onlycancel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
defineEmits([
|
||||
// REQUIRED; need to specify some events that your
|
||||
// component will emit through useDialogPluginComponent()
|
||||
...useDialogPluginComponent.emits,
|
||||
])
|
||||
|
||||
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
||||
// dialogRef - Vue ref to be applied to QDialog
|
||||
// onDialogHide - Function to be used as handler for @hide on QDialog
|
||||
// onDialogOK - Function to call to settle dialog with "ok" outcome
|
||||
// example: onDialogOK() - no payload
|
||||
// example: onDialogOK({ /*...*/ }) - with payload
|
||||
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
|
||||
|
||||
// this is part of our example (so not required)
|
||||
function onOKClick() {
|
||||
// on OK, it is REQUIRED to
|
||||
// call onDialogOK (with optional payload)
|
||||
onDialogOK()
|
||||
// or with payload: onDialogOK({ ... })
|
||||
// ...and it will also hide the dialog automatically
|
||||
}
|
||||
</script>
|
||||
46
src/main.ts
46
src/main.ts
|
|
@ -1,32 +1,32 @@
|
|||
import { createApp, defineAsyncComponent } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { Dialog, Notify, Quasar } from "quasar";
|
||||
import th from "quasar/lang/th";
|
||||
import { createApp, defineAsyncComponent } from "vue"
|
||||
import App from "./App.vue"
|
||||
import router from "./router"
|
||||
import { Dialog, Notify, Quasar } from "quasar"
|
||||
import th from "quasar/lang/th"
|
||||
import quasarUserOptions from "./quasar-user-options"
|
||||
import { createPinia } from "pinia";
|
||||
import "@vuepic/vue-datepicker/dist/main.css";
|
||||
import { createPinia } from "pinia"
|
||||
import "@vuepic/vue-datepicker/dist/main.css"
|
||||
|
||||
import 'quasar/src/css/index.sass'
|
||||
import "quasar/src/css/index.sass"
|
||||
|
||||
// import './assets/main.css'
|
||||
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
app.use(router);
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
|
||||
app.use(Quasar, {
|
||||
plugins: {
|
||||
Notify,
|
||||
Dialog
|
||||
},
|
||||
lang: th,
|
||||
}
|
||||
);
|
||||
plugins: {
|
||||
Notify,
|
||||
Dialog,
|
||||
},
|
||||
lang: th,
|
||||
})
|
||||
|
||||
app.component(
|
||||
"datepicker",
|
||||
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
||||
);
|
||||
app.mount('#app');
|
||||
app.component(
|
||||
"datepicker",
|
||||
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
||||
)
|
||||
app.mount("#app")
|
||||
|
|
|
|||
|
|
@ -1,196 +1,175 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, Static } from "vue";
|
||||
const link = ref<number>(1);
|
||||
import { useQuasar } from "quasar";
|
||||
import router from "@/router";
|
||||
import { ref, Static } from "vue"
|
||||
const link = ref<number>(1)
|
||||
import { useQuasar } from "quasar"
|
||||
import router from "@/router"
|
||||
|
||||
const $q = useQuasar();
|
||||
const fullname = ref<string>("ธัญลักษณ์");
|
||||
const $q = useQuasar()
|
||||
const fullname = ref<string>("ธัญลักษณ์")
|
||||
const inboxList = ref<any>([
|
||||
{
|
||||
no: 1,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 1,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
]);
|
||||
{
|
||||
no: 1,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 1,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
])
|
||||
const items = ref<any>([
|
||||
{
|
||||
icon: "mdi-account-group-outline",
|
||||
title: "แผนผังองค์กร",
|
||||
sub: "ดูแผนผังองค์กร",
|
||||
color: "blue-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-clipboard-account-outline",
|
||||
title: "ประเมินผล",
|
||||
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
||||
color: "lime-4",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-calendar-account-outline",
|
||||
title: "การลา",
|
||||
sub:"ดู/ลงเวลา ทำเรื่องลา",
|
||||
color: "cyan-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-folder-account-outline",
|
||||
title: "ผลงาน",
|
||||
sub:"ดูผลงาน",
|
||||
color: "light-green-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-arrow-right-outline",
|
||||
title: "ขอโอน",
|
||||
sub:"ทำเรื่องขอโอนย้าย",
|
||||
color: "deep-purple-3",
|
||||
path: "/transfer",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-remove-outline",
|
||||
title: "ลาออก",
|
||||
sub:"ทำเรื่องลาออก",
|
||||
color: "orange-3",
|
||||
path: "",
|
||||
active: false,
|
||||
}
|
||||
]);
|
||||
{
|
||||
icon: "mdi-account-group-outline",
|
||||
title: "แผนผังองค์กร",
|
||||
sub: "ดูแผนผังองค์กร",
|
||||
color: "blue-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-clipboard-account-outline",
|
||||
title: "ประเมินผล",
|
||||
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
||||
color: "lime-4",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-calendar-account-outline",
|
||||
title: "การลา",
|
||||
sub: "ดู/ลงเวลา ทำเรื่องลา",
|
||||
color: "cyan-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-folder-account-outline",
|
||||
title: "ผลงาน",
|
||||
sub: "ดูผลงาน",
|
||||
color: "light-green-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-arrow-right-outline",
|
||||
title: "ขอโอน",
|
||||
sub: "ทำเรื่องขอโอนย้าย",
|
||||
color: "deep-purple-3",
|
||||
path: "/transfer",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-remove-outline",
|
||||
title: "ลาออก",
|
||||
sub: "ทำเรื่องลาออก",
|
||||
color: "orange-3",
|
||||
path: "/leave",
|
||||
active: false,
|
||||
},
|
||||
])
|
||||
|
||||
const transferToPage = (path?: string) => {
|
||||
router.push(`${path}`);
|
||||
};
|
||||
router.push(`${path}`)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%;">
|
||||
<div class="col-12 row" v-if="!$q.screen.gt.xs">
|
||||
<div class="text-white text-weight-light text-18px">สวัสดี, {{fullname}}</div>
|
||||
<div
|
||||
style="color: #ffffff;"
|
||||
class="text-18px text-weight-medium col-12"
|
||||
>
|
||||
ระบบทรัพยากรบุคคล
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-9">
|
||||
<div class="row justify-start q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
|
||||
<q-card
|
||||
bordered
|
||||
@click="transferToPage(item.path)"
|
||||
class="noactive col-12">
|
||||
<div class="col-12">
|
||||
<q-avatar
|
||||
:color="item.color"
|
||||
text-color="white"
|
||||
:size="$q.screen.gt.xs ? '55px': '40px'"
|
||||
>
|
||||
<q-icon
|
||||
:name="item.icon"
|
||||
:size="$q.screen.gt.xs ? '28px': '20px'"
|
||||
color="black"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div class="q-pt-md col-12 text-left text-18px" >{{ item.title }}</div>
|
||||
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px;">{{ item.sub }}</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
:style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'"
|
||||
class="q-pb-md col-12"
|
||||
>
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
|
||||
<q-space />
|
||||
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
|
||||
</div>
|
||||
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
|
||||
<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
|
||||
<q-item-section>
|
||||
<q-item-label >{{ contact.sender }}</q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
|
||||
</q-item-section>
|
||||
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
|
||||
<div class="col-12 row" v-if="!$q.screen.gt.xs">
|
||||
<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
|
||||
<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-9">
|
||||
<div class="row justify-start q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
|
||||
<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
|
||||
<div class="col-12">
|
||||
<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
|
||||
<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div class="q-pt-md col-12 text-left text-18px">{{ item.title }}</div>
|
||||
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">{{ item.sub }}</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
||||
<q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'" class="q-pb-md col-12">
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
|
||||
<q-space />
|
||||
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
|
||||
</div>
|
||||
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
|
||||
<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ contact.sender }}</q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
|
||||
<div class="text-yellow-10">
|
||||
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
|
||||
ไม่พบข้อความ
|
||||
</div>
|
||||
</q-banner>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
|
||||
<div class="text-yellow-10">
|
||||
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
|
||||
ไม่พบข้อความ
|
||||
</div>
|
||||
</q-banner>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.my-menu-link {
|
||||
color: #1bb19b;
|
||||
color: #1bb19b;
|
||||
background: #ebf9f7 !important;
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.my-menu-link .q-hoverable {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.my-menu{
|
||||
background: #f1f0f04a ;
|
||||
border-radius: 10px;
|
||||
.my-menu {
|
||||
background: #f1f0f04a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.q-card{
|
||||
border-radius: 12px;
|
||||
.q-card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.text-18px{
|
||||
font-size: 1.25em;
|
||||
.text-18px {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.noactive {
|
||||
color: #35473C ;
|
||||
color: #35473c;
|
||||
border-radius: 12px;
|
||||
padding: 10%;
|
||||
transition: 0.1s ease;
|
||||
opacity:1;
|
||||
cursor: pointer;
|
||||
padding: 10%;
|
||||
transition: 0.1s ease;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.noactive:hover{
|
||||
background: #ebf9f7 ;
|
||||
color: #1bb19b !important;
|
||||
font-weight: 600 ;
|
||||
border: 1px solid #6dbdb142;
|
||||
.noactive:hover {
|
||||
background: #ebf9f7;
|
||||
color: #1bb19b !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid #6dbdb142;
|
||||
}
|
||||
.disabledcard {
|
||||
color: rgba(209, 209, 209, 0.733) !important;
|
||||
|
|
@ -198,6 +177,6 @@ const transferToPage = (path?: string) => {
|
|||
box-shadow: none !important;
|
||||
border-radius: 12px;
|
||||
cursor: no-drop !important;
|
||||
padding: 10%;
|
||||
padding: 10%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
25
src/modules/03_leave/router.ts
Normal file
25
src/modules/03_leave/router.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Router ขอโอน
|
||||
*/
|
||||
|
||||
const LeaveMain = () => import("@/modules/03_leave/views/Main.vue")
|
||||
|
||||
const AddLeave = () => import("@/modules/03_leave/views/AddLeave.vue")
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/leave",
|
||||
name: "leave",
|
||||
component: LeaveMain,
|
||||
},
|
||||
{
|
||||
path: "/leave/add",
|
||||
name: "AddLeave",
|
||||
component: AddLeave,
|
||||
},
|
||||
{
|
||||
path: "/leave/:id",
|
||||
name: "detailLeave",
|
||||
component: AddLeave,
|
||||
},
|
||||
]
|
||||
115
src/modules/03_leave/views/AddLeave.vue
Normal file
115
src/modules/03_leave/views/AddLeave.vue
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div class="col-12 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 icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
|
||||
<div v-if="routeName == 'AddLeave'">เพิ่มเรื่องลาออก</div>
|
||||
<div v-else>รายละเอียดเรื่องลาออก</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<q-card bordered flat>
|
||||
<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ฟอร์มลาออก</div>
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input class="col-8" dense outlined v-model="tranferOrg" label="สถานที่ยื่นขอลาออกจากราชการ" :readonly="routeName != 'AddLeave'" />
|
||||
<datepicker class="col-2" menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply readonly borderless :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
|
||||
readonly
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
:model-value="dateCommand != null ? date2Thai(dateCommand) : null"
|
||||
:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
class="col-2"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateLeave"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="routeName != 'AddLeave'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
:readonly="routeName != 'AddLeave'"
|
||||
class="full-width datepicker"
|
||||
:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
|
||||
:label="`${'วันที่ขอลาออกจากราชการ'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input class="col-12" dense outlined v-model="noteReason" label="วันที่ขอลาออกจากราชการ" type="textarea" :readonly="routeName != 'AddLeave'" />
|
||||
|
||||
<q-separator />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 q-pa-sm" v-if="routeName == 'AddLeave'">
|
||||
<q-space />
|
||||
<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอโอน" @click="router.go(-1)" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar"
|
||||
import { ref } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const dateCommand = ref<Date>(new Date())
|
||||
const dateLeave = ref<Date>(new Date())
|
||||
const file = ref(null)
|
||||
const tranferOrg = ref("")
|
||||
const noteReason = ref("")
|
||||
const noPos = ref("")
|
||||
const level = ref("")
|
||||
const salary = ref("")
|
||||
const positionNew = ref("")
|
||||
const salaryNew = ref("")
|
||||
const transfer = ref("")
|
||||
const note = ref("")
|
||||
|
||||
const routeName = router.currentRoute.value.name
|
||||
</script>
|
||||
149
src/modules/03_leave/views/Main.vue
Normal file
149
src/modules/03_leave/views/Main.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar"
|
||||
import { ref } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
|
||||
import Table from "@/components/Table.vue"
|
||||
|
||||
const filter = ref<string>("")
|
||||
const rows = ref<any>([
|
||||
{ date: "02/02/2566", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/ฝ่ายการคลัง", status: "รอดำเนินการ" },
|
||||
{ date: "02/02/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
|
||||
{ date: "10/01/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
|
||||
])
|
||||
const initialPagination = ref({
|
||||
rowsPerPage: 0,
|
||||
})
|
||||
const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "status"])
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5px;",
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "noPos",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: true,
|
||||
field: "noPos",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
align: "left",
|
||||
label: "อันดับ/ระดับ",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "salary",
|
||||
align: "left",
|
||||
label: "เงินเดือน",
|
||||
sortable: true,
|
||||
field: "salary",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "transfer",
|
||||
align: "left",
|
||||
label: "โอนไปสังกัด",
|
||||
sortable: true,
|
||||
field: "transfer",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:10%;",
|
||||
},
|
||||
])
|
||||
const clickAdd = async () => {
|
||||
router.push(`/leave/add`)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 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 icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
|
||||
ลาออก
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<Table
|
||||
style="max-height: 80vh"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:inputShow="false"
|
||||
:add="clickAdd"
|
||||
:titleText="''"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/leave/1`)">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'">
|
||||
<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
|
||||
<q-tooltip>รอดำเนินการ</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon size="20px" v-else name="mdi-check" color="teal">
|
||||
<q-tooltip>เสร็จสิ้น</q-tooltip>
|
||||
</q-icon>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style></style>
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from "vue-router"
|
||||
|
||||
const MainLayout = () => import("@/views/MainLayout.vue");
|
||||
const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue");
|
||||
const MainLayout = () => import("@/views/MainLayout.vue")
|
||||
const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue")
|
||||
|
||||
import ModuleTransfer from "@/modules/02_transfer/router.ts";
|
||||
import ModuleTransfer from "@/modules/02_transfer/router.ts"
|
||||
import ModuleLeave from "@/modules/03_leave/router.ts"
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: MainLayout,
|
||||
children:[
|
||||
{
|
||||
path: "/",
|
||||
name: "dashboard",
|
||||
component: Dashboard,
|
||||
},
|
||||
...ModuleTransfer
|
||||
]
|
||||
},
|
||||
]
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: MainLayout,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
name: "dashboard",
|
||||
component: Dashboard,
|
||||
},
|
||||
...ModuleTransfer,
|
||||
...ModuleLeave,
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router;
|
||||
export default router
|
||||
|
|
|
|||
102
src/stores/data.ts
Normal file
102
src/stores/data.ts
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import { ref, computed } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useDataStore = defineStore("data", () => {
|
||||
// ref() คือการประกาศ state เหมือน vuex
|
||||
const count = ref<number>(0);
|
||||
const loader = ref<boolean>(false);
|
||||
|
||||
const expandedReport2 = ref<string[]>([]);
|
||||
const selectedReport2 = ref<string>("");
|
||||
const expandedRegister = ref<string[]>([]);
|
||||
const selectedRegister = ref<string>("");
|
||||
// computed() คือการประกาศ getters เหมือน vuex
|
||||
const doubleCount = computed(() => count.value * 2);
|
||||
// function() คือการประกาศ actions เหมือน vuex
|
||||
const increment = () => {
|
||||
count.value++;
|
||||
};
|
||||
// tabData เป็น paramert ใช้เปรียนเทียบ tab ให้ active
|
||||
const tabData = ref<string>("");
|
||||
/**
|
||||
* active tab หน้า รายละเอียดทะเบียนประวัติ
|
||||
* @param val string เป็นชื่อของ ตัวนั้นๆ
|
||||
*/
|
||||
const changeTab = (val: string) => {
|
||||
tabData.value = val;
|
||||
};
|
||||
|
||||
/**
|
||||
* active tab หน้า รายละเอียดทะเบียนประวัติ
|
||||
* @param val boolean false = close , true = open
|
||||
*/
|
||||
const loaderPage = (val: boolean) => {
|
||||
loader.value = val;
|
||||
};
|
||||
|
||||
/**
|
||||
* เปิด tree จัดการบัญชี2
|
||||
* @param val string เป็นชื่อของ ตัวนั้นๆ
|
||||
*/
|
||||
const changeTreeReport2 = (e: string[], s: string) => {
|
||||
expandedReport2.value = e;
|
||||
selectedReport2.value = s;
|
||||
};
|
||||
|
||||
/**
|
||||
* เปิด tree ทะเบียนประวัติ
|
||||
* @param val string เป็นชื่อของ ตัวนั้นๆ
|
||||
*/
|
||||
const changeTreeRegister = (e: string[], s: string) => {
|
||||
expandedRegister.value = e;
|
||||
selectedRegister.value = s;
|
||||
};
|
||||
|
||||
return {
|
||||
count,
|
||||
doubleCount,
|
||||
increment,
|
||||
tabData,
|
||||
changeTab,
|
||||
loader,
|
||||
loaderPage,
|
||||
expandedReport2,
|
||||
selectedReport2,
|
||||
changeTreeReport2,
|
||||
expandedRegister,
|
||||
selectedRegister,
|
||||
changeTreeRegister,
|
||||
};
|
||||
});
|
||||
|
||||
// การเขียนแบบ composition api
|
||||
// ตัวอย่างการใช้งาน use...Store() ตามชื่อที่ตั้ง
|
||||
|
||||
// import { useDataStore } from '@/stores/data'
|
||||
|
||||
//storeToRefs ใช้กรณีที่เราจะแปลงค่าเป็น state ใน หน้านั้น
|
||||
|
||||
// import { storeToRefs } from 'pinia'
|
||||
|
||||
// export default {
|
||||
// setup() {
|
||||
// const store = useDataStore()
|
||||
|
||||
// ***********************************
|
||||
// พยายามไม่ให้ ชื่อ เหมือนกับ props ** ตัวอย่างปกติ
|
||||
// const { count, doubleCount, increment } = store
|
||||
// ***********************************
|
||||
|
||||
// ตัวอย่าง แปลงค่า store เป็น state หรือ ref
|
||||
// const { name, doubleCount } = storeToRefs(store)
|
||||
// ถ้าเป็น function เรียกแยกอีกทีก็ได้
|
||||
// const { increment } = store
|
||||
// ***********************************
|
||||
|
||||
//return {
|
||||
// count,
|
||||
// doubleCount,
|
||||
// increment
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
720
src/stores/mixin.ts
Normal file
720
src/stores/mixin.ts
Normal file
|
|
@ -0,0 +1,720 @@
|
|||
import { defineStore } from "pinia";
|
||||
import moment from "moment";
|
||||
import CustomComponent from "@/components/CustomDialog.vue";
|
||||
import { Loading, QSpinnerCube } from "quasar";
|
||||
|
||||
export const useCounterMixin = defineStore("mixin", () => {
|
||||
/**
|
||||
* ฟังก์ชันกลาง
|
||||
*/
|
||||
|
||||
const calAge = (
|
||||
srcDate: Date,
|
||||
birthCal: Date = new Date(),
|
||||
eng: boolean = false
|
||||
) => {
|
||||
const year = eng ? "years" : "ปี";
|
||||
const month = eng ? "months" : "เดือน";
|
||||
const day = eng ? "days" : "วัน";
|
||||
|
||||
if (srcDate == null) {
|
||||
return `0 ${year} 0 ${month} 0 ${day}`;
|
||||
}
|
||||
|
||||
const toDay = birthCal;
|
||||
const birth = new Date(srcDate);
|
||||
|
||||
const yearNow = toDay.getFullYear();
|
||||
const monthNow = toDay.getMonth();
|
||||
const dateNow = toDay.getDate();
|
||||
|
||||
const yearDob = birth.getFullYear();
|
||||
const monthDob = birth.getMonth();
|
||||
const dateDob = birth.getDate();
|
||||
|
||||
const lastYear = 12;
|
||||
const subtractDate: Object = moment().subtract(1, "months").endOf("month");
|
||||
|
||||
const lastMonths = new Date(subtractDate.toString()).getDate();
|
||||
|
||||
let yearAge = yearNow - yearDob;
|
||||
let monthAge = 0;
|
||||
let dateAge = 0;
|
||||
|
||||
if (monthNow >= monthDob) {
|
||||
monthAge = monthNow - monthDob;
|
||||
} else {
|
||||
yearAge--;
|
||||
monthAge = lastYear + monthNow - monthDob;
|
||||
}
|
||||
|
||||
if (dateNow >= dateDob) {
|
||||
dateAge = dateNow - dateDob;
|
||||
} else {
|
||||
monthAge--;
|
||||
dateAge = lastMonths + dateNow - dateDob;
|
||||
|
||||
if (monthAge < 0) {
|
||||
monthAge = 11;
|
||||
yearAge--;
|
||||
}
|
||||
}
|
||||
|
||||
const age = {
|
||||
years: yearAge,
|
||||
months: monthAge,
|
||||
days: dateAge,
|
||||
};
|
||||
|
||||
return `${yearAge} ${year} ${monthAge} ${month} ${dateAge} ${day}`;
|
||||
};
|
||||
|
||||
function date2Thai(
|
||||
srcDate: Date,
|
||||
isFullMonth: boolean = false,
|
||||
isTime: boolean = false
|
||||
) {
|
||||
if (srcDate == null) {
|
||||
return null;
|
||||
`
|
||||
`;
|
||||
}
|
||||
const date = new Date(srcDate);
|
||||
const isValidDate = Boolean(+date);
|
||||
if (!isValidDate) return srcDate.toString();
|
||||
if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
|
||||
const fullMonthThai = [
|
||||
"มกราคม",
|
||||
"กุมภาพันธ์",
|
||||
"มีนาคม",
|
||||
"เมษายน",
|
||||
"พฤษภาคม",
|
||||
"มิถุนายน",
|
||||
"กรกฎาคม",
|
||||
"สิงหาคม",
|
||||
"กันยายน",
|
||||
"ตุลาคม",
|
||||
"พฤศจิกายน",
|
||||
"ธันวาคม",
|
||||
];
|
||||
const abbrMonthThai = [
|
||||
"ม.ค.",
|
||||
"ก.พ.",
|
||||
"มี.ค.",
|
||||
"เม.ย.",
|
||||
"พ.ค.",
|
||||
"มิ.ย.",
|
||||
"ก.ค.",
|
||||
"ส.ค.",
|
||||
"ก.ย.",
|
||||
"ต.ค.",
|
||||
"พ.ย.",
|
||||
"ธ.ค.",
|
||||
];
|
||||
let dstYear = 0;
|
||||
if (date.getFullYear() > 2500) {
|
||||
dstYear = date.getFullYear();
|
||||
} else {
|
||||
dstYear = date.getFullYear() + 543;
|
||||
}
|
||||
let dstMonth = "";
|
||||
if (isFullMonth) {
|
||||
dstMonth = fullMonthThai[date.getMonth()];
|
||||
} else {
|
||||
dstMonth = abbrMonthThai[date.getMonth()];
|
||||
}
|
||||
let dstTime = "";
|
||||
if (isTime) {
|
||||
const H = date.getHours().toString().padStart(2, "0");
|
||||
const M = date.getMinutes().toString().padStart(2, "0");
|
||||
// const S = date.getSeconds().toString().padStart(2, "0")
|
||||
// dstTime = " " + H + ":" + M + ":" + S + " น."
|
||||
dstTime = " " + H + ":" + M + " น.";
|
||||
}
|
||||
return (
|
||||
date.getDate().toString().padStart(2, "0") +
|
||||
" " +
|
||||
dstMonth +
|
||||
" " +
|
||||
dstYear +
|
||||
dstTime
|
||||
);
|
||||
}
|
||||
|
||||
function dateMonth2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
|
||||
if (!srcDate) return srcDate;
|
||||
const date = new Date(srcDate);
|
||||
const isValidDate = Boolean(+date);
|
||||
if (!isValidDate) return srcDate;
|
||||
if (isValidDate && date.getFullYear() < 1000) return srcDate;
|
||||
const fullMonthThai = [
|
||||
"มกราคม",
|
||||
"กุมภาพันธ์",
|
||||
"มีนาคม",
|
||||
"เมษายน",
|
||||
"พฤษภาคม",
|
||||
"มิถุนายน",
|
||||
"กรกฎาคม",
|
||||
"สิงหาคม",
|
||||
"กันยายน",
|
||||
"ตุลาคม",
|
||||
"พฤศจิกายน",
|
||||
"ธันวาคม",
|
||||
];
|
||||
const abbrMonthThai = [
|
||||
"ม.ค.",
|
||||
"ก.พ.",
|
||||
"มี.ค.",
|
||||
"เม.ย.",
|
||||
"พ.ค.",
|
||||
"มิ.ย.",
|
||||
"ก.ค.",
|
||||
"ส.ค.",
|
||||
"ก.ย.",
|
||||
"ต.ค.",
|
||||
"พ.ย.",
|
||||
"ธ.ค.",
|
||||
];
|
||||
let dstYear = 0;
|
||||
if (date.getFullYear() > 2500) {
|
||||
dstYear = date.getFullYear();
|
||||
} else {
|
||||
dstYear = date.getFullYear() + 543;
|
||||
}
|
||||
let dstMonth = "";
|
||||
if (isFullMonth) {
|
||||
dstMonth = fullMonthThai[date.getMonth()];
|
||||
} else {
|
||||
dstMonth = abbrMonthThai[date.getMonth()];
|
||||
}
|
||||
let dstTime = "";
|
||||
if (isTime) {
|
||||
const H = date.getHours().toString().padStart(2, "0");
|
||||
const M = date.getMinutes().toString().padStart(2, "0");
|
||||
// const S = date.getSeconds().toString().length === 1 ? "0" + date.getSeconds() : date.getSeconds()
|
||||
// dstTime = " " + H + ":" + M + ":" + S + " น."
|
||||
dstTime = " " + H + ":" + M + " น.";
|
||||
}
|
||||
return date.getDate().toString().padStart(2, "0") + " " + dstMonth;
|
||||
}
|
||||
|
||||
function monthYear2Thai(month: number, year: number, isFullMonth = false) {
|
||||
const date = new Date(`${year}-${month + 1}-1`);
|
||||
const fullMonthThai = [
|
||||
"มกราคม",
|
||||
"กุมภาพันธ์",
|
||||
"มีนาคม",
|
||||
"เมษายน",
|
||||
"พฤษภาคม",
|
||||
"มิถุนายน",
|
||||
"กรกฎาคม",
|
||||
"สิงหาคม",
|
||||
"กันยายน",
|
||||
"ตุลาคม",
|
||||
"พฤศจิกายน",
|
||||
"ธันวาคม",
|
||||
];
|
||||
const abbrMonthThai = [
|
||||
"ม.ค.",
|
||||
"ก.พ.",
|
||||
"มี.ค.",
|
||||
"เม.ย.",
|
||||
"พ.ค.",
|
||||
"มิ.ย.",
|
||||
"ก.ค.",
|
||||
"ส.ค.",
|
||||
"ก.ย.",
|
||||
"ต.ค.",
|
||||
"พ.ย.",
|
||||
"ธ.ค.",
|
||||
];
|
||||
let dstYear = 0;
|
||||
if (date.getFullYear() > 2500) {
|
||||
dstYear = date.getFullYear();
|
||||
} else {
|
||||
dstYear = date.getFullYear() + 543;
|
||||
}
|
||||
let dstMonth = "";
|
||||
if (isFullMonth) {
|
||||
dstMonth = fullMonthThai[date.getMonth()];
|
||||
} else {
|
||||
dstMonth = abbrMonthThai[date.getMonth()];
|
||||
}
|
||||
return dstMonth + " " + dstYear;
|
||||
}
|
||||
|
||||
function dateToISO(date: Date) {
|
||||
return (
|
||||
date.getFullYear() +
|
||||
"-" +
|
||||
appendLeadingZeroes(date.getMonth() + 1) +
|
||||
"-" +
|
||||
appendLeadingZeroes(date.getDate())
|
||||
);
|
||||
}
|
||||
|
||||
function appendLeadingZeroes(n: Number) {
|
||||
if (n <= 9) return "0" + n;
|
||||
return n;
|
||||
}
|
||||
|
||||
function textToPhone(n: string) {
|
||||
const p = n.substr(0, 3) + "-" + n.substr(3, 3) + "-" + n.substr(6, 4);
|
||||
return p;
|
||||
}
|
||||
|
||||
function textToFax(n: string) {
|
||||
const p = n.substr(0, 2) + "-" + n.substr(2, 3) + "-" + n.substr(5, 4);
|
||||
return p;
|
||||
}
|
||||
|
||||
const success = (q: any, val: string) => {
|
||||
// useQuasar ไม่สามารถใช้นอกไฟล์ .vue
|
||||
if (val !== "") {
|
||||
return q.notify({
|
||||
message: val,
|
||||
color: "primary",
|
||||
icon: "mdi-information",
|
||||
position: "bottom-right",
|
||||
multiLine: true,
|
||||
timeout: 1000,
|
||||
badgeColor: "positive",
|
||||
classes: "my-notif-class",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function notify(q: any, val: string) {
|
||||
if (val !== "") {
|
||||
q.notify({
|
||||
color: "teal-10",
|
||||
message: val,
|
||||
icon: "mdi-information",
|
||||
position: "bottom-right",
|
||||
multiLine: true,
|
||||
timeout: 7000,
|
||||
actions: [{ label: "ปิด", color: "white", handler: () => {} }],
|
||||
});
|
||||
}
|
||||
}
|
||||
function notifyError(q: any, val: string) {
|
||||
if (val !== "") {
|
||||
q.notify({
|
||||
color: "negative",
|
||||
message: val,
|
||||
icon: "mdi-alert-circle",
|
||||
position: "top",
|
||||
multiLine: true,
|
||||
timeout: 12000,
|
||||
actions: [{ label: "ปิด", color: "white", handler: () => {} }],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const messageError = (q: any, e: any = "") => {
|
||||
if (e.response !== undefined) {
|
||||
if (e.response.data.status !== undefined) {
|
||||
if (e.response.data.status == 401) {
|
||||
//invalid_token
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
|
||||
icon: "warning",
|
||||
color: "red",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: `${e.response.data.message}`,
|
||||
icon: "warning",
|
||||
color: "red",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (e.response.status == 401) {
|
||||
//invalid_token
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
|
||||
icon: "warning",
|
||||
color: "red",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
|
||||
icon: "warning",
|
||||
color: "red",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
|
||||
icon: "warning",
|
||||
color: "red",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const dialogMessage = (
|
||||
// ไม่เอาใส่ undefined
|
||||
q: any,
|
||||
title: string | undefined,
|
||||
message: string | undefined,
|
||||
icon: string | undefined,
|
||||
textOk: string | undefined,
|
||||
color: string | undefined,
|
||||
ok?: Function | undefined,
|
||||
cancel?: Function | undefined,
|
||||
onlycancel: Boolean = false
|
||||
) => {
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: title,
|
||||
message: message,
|
||||
icon: icon,
|
||||
color: color,
|
||||
textOk: textOk,
|
||||
onlycancel: onlycancel,
|
||||
},
|
||||
})
|
||||
.onOk(() => {
|
||||
if (ok != undefined) ok();
|
||||
})
|
||||
.onCancel(() => {
|
||||
if (cancel != undefined) cancel();
|
||||
});
|
||||
};
|
||||
|
||||
const showLoader = () => {
|
||||
Loading.show({
|
||||
spinner: QSpinnerCube,
|
||||
spinnerSize: 140,
|
||||
spinnerColor: "primary",
|
||||
backgroundColor: "white",
|
||||
});
|
||||
};
|
||||
|
||||
const hideLoader = () => {
|
||||
Loading.hide();
|
||||
};
|
||||
|
||||
function modalDelete(
|
||||
q: any,
|
||||
title: string,
|
||||
message: string,
|
||||
ok: Function,
|
||||
cancel?: Function
|
||||
) {
|
||||
q.dialog({
|
||||
title: `<span class="text-red">${title}</span>`,
|
||||
message: `<span class="text-black">${message}</span>`,
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "grey-14",
|
||||
},
|
||||
ok: {
|
||||
color: "red-6",
|
||||
},
|
||||
focus: "none",
|
||||
persistent: true,
|
||||
html: true,
|
||||
})
|
||||
.onOk(() => {
|
||||
ok();
|
||||
})
|
||||
.onCancel(() => {
|
||||
if (cancel != undefined) cancel();
|
||||
})
|
||||
.onDismiss(() => {});
|
||||
}
|
||||
|
||||
function modalConfirm(
|
||||
q: any,
|
||||
title: string,
|
||||
message: string,
|
||||
ok: Function,
|
||||
cancel?: Function
|
||||
) {
|
||||
q.dialog({
|
||||
title: `<span class="text-primary">${title}</span>`,
|
||||
message: `<span class="text-black">${message}</span>`,
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "grey",
|
||||
},
|
||||
ok: {
|
||||
color: "primary",
|
||||
},
|
||||
focus: "none",
|
||||
persistent: true,
|
||||
html: true,
|
||||
})
|
||||
.onOk(() => {
|
||||
ok();
|
||||
})
|
||||
.onCancel(() => {
|
||||
if (cancel != undefined) cancel();
|
||||
})
|
||||
.onDismiss(() => {});
|
||||
}
|
||||
|
||||
function modalWarning(q: any, title: string, message: string, ok?: Function) {
|
||||
// q.dialog({
|
||||
// title: `<span class="text-red">${title}</span>`,
|
||||
// message: `<span class="text-black">${message}</span>`,
|
||||
// ok: {
|
||||
// push: true,
|
||||
// color: "primary",
|
||||
// },
|
||||
// focus: "none",
|
||||
// persistent: true,
|
||||
// html: true,
|
||||
// })
|
||||
// .onOk(() => {
|
||||
// if (ok != undefined) ok();
|
||||
// })
|
||||
// .onCancel(() => {})
|
||||
// .onDismiss(() => {});
|
||||
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: title,
|
||||
message: message,
|
||||
icon: "warning",
|
||||
color: "warning",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function modalError(q: any, title: string, message: string, ok?: Function) {
|
||||
// q.dialog({
|
||||
// title: `<span class="text-red">${title}</span>`,
|
||||
// message: `<span class="text-black">${message}</span>`,
|
||||
// ok: {
|
||||
// push: true,
|
||||
// color: "primary",
|
||||
// },
|
||||
// focus: "none",
|
||||
// persistent: true,
|
||||
// html: true,
|
||||
// })
|
||||
// .onOk(() => {
|
||||
// if (ok != undefined) ok();
|
||||
// })
|
||||
// .onCancel(() => {})
|
||||
// .onDismiss(() => {});
|
||||
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: title,
|
||||
message: message,
|
||||
icon: "warning",
|
||||
color: "red",
|
||||
onlycancel: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const dateText = (val: Date) => {
|
||||
if (val != null) {
|
||||
return date2Thai(val);
|
||||
} else {
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
|
||||
* @param val ช่วงวันที่
|
||||
*/
|
||||
const dateThaiRange = (val: [Date, Date]) => {
|
||||
if (val === null) {
|
||||
return "";
|
||||
} else if (date2Thai(val[0]) === date2Thai(val[1])) {
|
||||
return `${date2Thai(val[0])}`;
|
||||
} else {
|
||||
return `${date2Thai(val[0])} - ${date2Thai(val[1])}`;
|
||||
}
|
||||
};
|
||||
|
||||
const weekThai = (val: Number) => {
|
||||
switch (val) {
|
||||
case 0:
|
||||
return "วันอาทิตย์";
|
||||
case 1:
|
||||
return "วันจันทร์";
|
||||
case 2:
|
||||
return "วันอังคาร";
|
||||
case 3:
|
||||
return "วันพุธ";
|
||||
case 4:
|
||||
return "วันพฤหัสบดี";
|
||||
case 5:
|
||||
return "วันศุกร์";
|
||||
case 6:
|
||||
return "วันเสาร์";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
|
||||
const genColor15 = (val: number) => {
|
||||
val = val % 15;
|
||||
switch (val) {
|
||||
case 1:
|
||||
return "pink";
|
||||
case 2:
|
||||
return "purple";
|
||||
case 3:
|
||||
return "deep-purple";
|
||||
case 4:
|
||||
return "indigo";
|
||||
case 5:
|
||||
return "blue";
|
||||
case 6:
|
||||
return "light-blue";
|
||||
case 7:
|
||||
return "cyan";
|
||||
case 8:
|
||||
return "teal";
|
||||
case 9:
|
||||
return "green";
|
||||
case 10:
|
||||
return "light-green";
|
||||
case 11:
|
||||
return "amber";
|
||||
case 12:
|
||||
return "orange";
|
||||
case 13:
|
||||
return "deep-orange";
|
||||
case 14:
|
||||
return "brown";
|
||||
case 0:
|
||||
return "blue-grey";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const typeCategoryExam = (val: string) => {
|
||||
switch (val) {
|
||||
case "hygiene":
|
||||
return "สำนักอนามัย";
|
||||
case "physician":
|
||||
return "สำนักการแพทย์";
|
||||
case "city":
|
||||
return "สำนักผังเมือง";
|
||||
case "culture":
|
||||
return "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
|
||||
const typeRetire = (val: string) => {
|
||||
switch (val) {
|
||||
case "retire":
|
||||
return "เกษียณอายุราชการ";
|
||||
case "resign":
|
||||
return "ลาออก";
|
||||
case "transfer":
|
||||
return "ให้โอน";
|
||||
case "death":
|
||||
return "ถึงแก่กรรม";
|
||||
case "layoff":
|
||||
return "ให้ออก";
|
||||
case "discharge":
|
||||
return "ปลดออก";
|
||||
case "dismiss":
|
||||
return "ไล่ออก";
|
||||
case "other":
|
||||
return "อื่นๆ";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
|
||||
const typeChangeName = (val: string) => {
|
||||
switch (val) {
|
||||
case "firstName":
|
||||
return "เปลี่ยนชื่อ";
|
||||
case "lastName":
|
||||
return "เปลี่ยนนามสกุล";
|
||||
case "all":
|
||||
return "เปลี่ยนชื่อ-นามสกุล";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
|
||||
const statusLeave = (val: string) => {
|
||||
switch (val) {
|
||||
case "waitting":
|
||||
return "รออนุมัติ";
|
||||
case "reject":
|
||||
return "ไม่ผ่านการอนุมัติ";
|
||||
case "approve":
|
||||
return "ผ่านการอนุมัติ";
|
||||
case "cancel":
|
||||
return "ยกเลิก";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
calAge,
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
notify,
|
||||
notifyError,
|
||||
dateText,
|
||||
monthYear2Thai,
|
||||
dateMonth2Thai,
|
||||
success,
|
||||
weekThai,
|
||||
genColor15,
|
||||
typeCategoryExam,
|
||||
textToPhone,
|
||||
textToFax,
|
||||
dateThaiRange,
|
||||
modalDelete,
|
||||
modalConfirm,
|
||||
modalError,
|
||||
dialogMessage,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
typeRetire,
|
||||
typeChangeName,
|
||||
statusLeave,
|
||||
modalWarning,
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue