เพิ่ม ui ลาออก
This commit is contained in:
AnandaTon
parent
1b40d859e5
commit
bd6ccdbb3f
11 changed files with 8937 additions and 13229 deletions
20449
package-lock.json
generated
20449
package-lock.json
generated
File diff suppressed because it is too large
Load diff
116
package.json
116
package.json
|
|
@ -1,55 +1,65 @@
|
||||||
{
|
{
|
||||||
"name": "ehr",
|
"name": "ehr",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "run-p type-check build-only",
|
"build": "run-p build-only",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"test:unit": "vitest --environment jsdom --root src/",
|
"test:unit": "vitest --environment jsdom --root src/",
|
||||||
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
||||||
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
||||||
"build-only": "vite build",
|
"build-only": "vite build",
|
||||||
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fullcalendar/core": "^6.1.8",
|
"@fullcalendar/core": "^6.0.1",
|
||||||
"@fullcalendar/daygrid": "^6.1.8",
|
"@fullcalendar/daygrid": "^6.0.1",
|
||||||
"@fullcalendar/interaction": "^6.1.8",
|
"@fullcalendar/interaction": "^6.0.2",
|
||||||
"@fullcalendar/list": "^6.1.8",
|
"@fullcalendar/list": "^6.0.2",
|
||||||
"@fullcalendar/timegrid": "^6.1.8",
|
"@fullcalendar/react": "^6.0.1",
|
||||||
"@fullcalendar/vue3": "^6.1.8",
|
"@fullcalendar/timegrid": "^6.0.2",
|
||||||
"@quasar/extras": "^1.15.8",
|
"@fullcalendar/vue3": "^6.0.1",
|
||||||
"@vuepic/vue-datepicker": "^5.2.1",
|
"@quasar/extras": "^1.15.8",
|
||||||
"pinia": "^2.1.4",
|
"@tato30/vue-pdf": "^1.5.1",
|
||||||
"quasar": "^2.11.1",
|
"@vuepic/vue-datepicker": "^3.6.3",
|
||||||
"vue": "^3.2.45",
|
"bma-org-chart": "^0.0.7",
|
||||||
"vue-router": "^4.1.6"
|
"keycloak-js": "^20.0.2",
|
||||||
},
|
"moment": "^2.29.4",
|
||||||
"devDependencies": {
|
"pinia": "^2.0.29",
|
||||||
"@quasar/vite-plugin": "^1.3.0",
|
"quasar": "^2.11.1",
|
||||||
"@rushstack/eslint-patch": "^1.1.4",
|
"structure-chart": "^0.0.9",
|
||||||
"@types/jsdom": "^20.0.1",
|
"vue": "^3.2.45",
|
||||||
"@types/node": "^18.11.12",
|
"vue-router": "^4.1.6",
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"vue3-datepicker": "^0.3.4",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
"vue3-pdfjs": "^0.1.6"
|
||||||
"@vue/eslint-config-prettier": "^7.0.0",
|
},
|
||||||
"@vue/eslint-config-typescript": "^11.0.0",
|
"devDependencies": {
|
||||||
"@vue/test-utils": "^2.2.6",
|
"@quasar/vite-plugin": "^1.3.0",
|
||||||
"@vue/tsconfig": "^0.1.3",
|
"@rushstack/eslint-patch": "^1.1.4",
|
||||||
"cypress": "^12.0.2",
|
"@types/jsdom": "^20.0.1",
|
||||||
"eslint": "^8.22.0",
|
"@types/node": "^18.11.12",
|
||||||
"eslint-plugin-cypress": "^2.12.1",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"eslint-plugin-vue": "^9.3.0",
|
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||||
"jsdom": "^20.0.3",
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
"npm-run-all": "^4.1.5",
|
"@vue/eslint-config-typescript": "^11.0.0",
|
||||||
"prettier": "^2.7.1",
|
"@vue/test-utils": "^2.2.6",
|
||||||
"sass": "^1.32.12",
|
"@vue/tsconfig": "^0.1.3",
|
||||||
"start-server-and-test": "^1.15.2",
|
"cypress": "^12.0.2",
|
||||||
"typescript": "~4.7.4",
|
"eslint": "^8.22.0",
|
||||||
"vite": "^4.0.0",
|
"eslint-plugin-cypress": "^2.12.1",
|
||||||
"vitest": "^0.25.6",
|
"eslint-plugin-vue": "^9.3.0",
|
||||||
"vue-tsc": "^1.0.12"
|
"jsdom": "^20.0.3",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"sass": "^1.32.12",
|
||||||
|
"start-server-and-test": "^1.15.2",
|
||||||
|
"typescript": "~4.7.4",
|
||||||
|
"vite": "^4.0.0",
|
||||||
|
"vitest": "^0.25.6",
|
||||||
|
"vue-table-to-excel": "^1.0.6",
|
||||||
|
"vue-tsc": "^1.0.12"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
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 { createApp, defineAsyncComponent } from "vue"
|
||||||
import App from './App.vue'
|
import App from "./App.vue"
|
||||||
import router from './router'
|
import router from "./router"
|
||||||
import { Dialog, Notify, Quasar } from "quasar";
|
import { Dialog, Notify, Quasar } from "quasar"
|
||||||
import th from "quasar/lang/th";
|
import th from "quasar/lang/th"
|
||||||
import quasarUserOptions from "./quasar-user-options"
|
import quasarUserOptions from "./quasar-user-options"
|
||||||
import { createPinia } from "pinia";
|
import { createPinia } from "pinia"
|
||||||
import "@vuepic/vue-datepicker/dist/main.css";
|
import "@vuepic/vue-datepicker/dist/main.css"
|
||||||
|
|
||||||
import 'quasar/src/css/index.sass'
|
import "quasar/src/css/index.sass"
|
||||||
|
|
||||||
// import './assets/main.css'
|
// import './assets/main.css'
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App)
|
||||||
const pinia = createPinia();
|
const pinia = createPinia()
|
||||||
|
|
||||||
app.use(router);
|
app.use(router)
|
||||||
|
app.use(pinia)
|
||||||
|
|
||||||
app.use(Quasar, {
|
app.use(Quasar, {
|
||||||
plugins: {
|
plugins: {
|
||||||
Notify,
|
Notify,
|
||||||
Dialog
|
Dialog,
|
||||||
},
|
},
|
||||||
lang: th,
|
lang: th,
|
||||||
}
|
})
|
||||||
);
|
|
||||||
|
|
||||||
app.component(
|
app.component(
|
||||||
"datepicker",
|
"datepicker",
|
||||||
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
||||||
);
|
)
|
||||||
app.mount('#app');
|
app.mount("#app")
|
||||||
|
|
|
||||||
|
|
@ -1,196 +1,175 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, Static } from "vue";
|
import { ref, Static } from "vue"
|
||||||
const link = ref<number>(1);
|
const link = ref<number>(1)
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import router from "@/router";
|
import router from "@/router"
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const fullname = ref<string>("ธัญลักษณ์");
|
const fullname = ref<string>("ธัญลักษณ์")
|
||||||
const inboxList = ref<any>([
|
const inboxList = ref<any>([
|
||||||
{
|
{
|
||||||
no: 1,
|
no: 1,
|
||||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||||
timereceive: "13/12/2565",
|
timereceive: "13/12/2565",
|
||||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||||
ratingModel: 0,
|
ratingModel: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
no: 2,
|
no: 2,
|
||||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||||
timereceive: "13/12/2565",
|
timereceive: "13/12/2565",
|
||||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||||
ratingModel: 1,
|
ratingModel: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
no: 3,
|
no: 3,
|
||||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||||
timereceive: "13/12/2565",
|
timereceive: "13/12/2565",
|
||||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||||
ratingModel: 0,
|
ratingModel: 0,
|
||||||
},
|
},
|
||||||
]);
|
])
|
||||||
const items = ref<any>([
|
const items = ref<any>([
|
||||||
{
|
{
|
||||||
icon: "mdi-account-group-outline",
|
icon: "mdi-account-group-outline",
|
||||||
title: "แผนผังองค์กร",
|
title: "แผนผังองค์กร",
|
||||||
sub: "ดูแผนผังองค์กร",
|
sub: "ดูแผนผังองค์กร",
|
||||||
color: "blue-3",
|
color: "blue-3",
|
||||||
path: "",
|
path: "",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-clipboard-account-outline",
|
icon: "mdi-clipboard-account-outline",
|
||||||
title: "ประเมินผล",
|
title: "ประเมินผล",
|
||||||
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
||||||
color: "lime-4",
|
color: "lime-4",
|
||||||
path: "",
|
path: "",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-calendar-account-outline",
|
icon: "mdi-calendar-account-outline",
|
||||||
title: "การลา",
|
title: "การลา",
|
||||||
sub:"ดู/ลงเวลา ทำเรื่องลา",
|
sub: "ดู/ลงเวลา ทำเรื่องลา",
|
||||||
color: "cyan-3",
|
color: "cyan-3",
|
||||||
path: "",
|
path: "",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-folder-account-outline",
|
icon: "mdi-folder-account-outline",
|
||||||
title: "ผลงาน",
|
title: "ผลงาน",
|
||||||
sub:"ดูผลงาน",
|
sub: "ดูผลงาน",
|
||||||
color: "light-green-3",
|
color: "light-green-3",
|
||||||
path: "",
|
path: "",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-account-arrow-right-outline",
|
icon: "mdi-account-arrow-right-outline",
|
||||||
title: "ขอโอน",
|
title: "ขอโอน",
|
||||||
sub:"ทำเรื่องขอโอนย้าย",
|
sub: "ทำเรื่องขอโอนย้าย",
|
||||||
color: "deep-purple-3",
|
color: "deep-purple-3",
|
||||||
path: "/transfer",
|
path: "/transfer",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-account-remove-outline",
|
icon: "mdi-account-remove-outline",
|
||||||
title: "ลาออก",
|
title: "ลาออก",
|
||||||
sub:"ทำเรื่องลาออก",
|
sub: "ทำเรื่องลาออก",
|
||||||
color: "orange-3",
|
color: "orange-3",
|
||||||
path: "",
|
path: "/leave",
|
||||||
active: false,
|
active: false,
|
||||||
}
|
},
|
||||||
]);
|
])
|
||||||
|
|
||||||
const transferToPage = (path?: string) => {
|
const transferToPage = (path?: string) => {
|
||||||
router.push(`${path}`);
|
router.push(`${path}`)
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%;">
|
<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="col-12 row" v-if="!$q.screen.gt.xs">
|
||||||
<div class="text-white text-weight-light text-18px">สวัสดี, {{fullname}}</div>
|
<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
|
||||||
<div
|
<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
|
||||||
style="color: #ffffff;"
|
</div>
|
||||||
class="text-18px text-weight-medium col-12"
|
<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">
|
||||||
</div>
|
<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
|
||||||
</div>
|
<div class="col-12">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-9">
|
<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
|
||||||
<div class="row justify-start q-col-gutter-md">
|
<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
|
||||||
<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-avatar>
|
||||||
<q-card
|
</div>
|
||||||
bordered
|
<div class="q-pt-md col-12 text-left text-18px">{{ item.title }}</div>
|
||||||
@click="transferToPage(item.path)"
|
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">{{ item.sub }}</div>
|
||||||
class="noactive col-12">
|
</q-card>
|
||||||
<div class="col-12">
|
</div>
|
||||||
<q-avatar
|
</div>
|
||||||
:color="item.color"
|
</div>
|
||||||
text-color="white"
|
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
||||||
:size="$q.screen.gt.xs ? '55px': '40px'"
|
<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">
|
||||||
<q-icon
|
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
|
||||||
:name="item.icon"
|
<q-space />
|
||||||
:size="$q.screen.gt.xs ? '28px': '20px'"
|
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
|
||||||
color="black"
|
</div>
|
||||||
/>
|
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
|
||||||
</q-avatar>
|
<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">
|
||||||
</div>
|
<q-item-section>
|
||||||
<div class="q-pt-md col-12 text-left text-18px" >{{ item.title }}</div>
|
<q-item-label>{{ contact.sender }}</q-item-label>
|
||||||
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px;">{{ item.sub }}</div>
|
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
|
||||||
</q-card>
|
</q-item-section>
|
||||||
</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-section side top>
|
||||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
|
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
|
||||||
<div class="text-yellow-10">
|
<div class="text-yellow-10">
|
||||||
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
|
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
|
||||||
ไม่พบข้อความ
|
ไม่พบข้อความ
|
||||||
</div>
|
</div>
|
||||||
</q-banner>
|
</q-banner>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
.my-menu-link {
|
.my-menu-link {
|
||||||
color: #1bb19b;
|
color: #1bb19b;
|
||||||
background: #ebf9f7 !important;
|
background: #ebf9f7 !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.my-menu-link .q-hoverable {
|
.my-menu-link .q-hoverable {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.my-menu{
|
.my-menu {
|
||||||
background: #f1f0f04a ;
|
background: #f1f0f04a;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.q-card{
|
.q-card {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
.text-18px{
|
.text-18px {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
.noactive {
|
.noactive {
|
||||||
color: #35473C ;
|
color: #35473c;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 10%;
|
padding: 10%;
|
||||||
transition: 0.1s ease;
|
transition: 0.1s ease;
|
||||||
opacity:1;
|
opacity: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.noactive:hover{
|
.noactive:hover {
|
||||||
background: #ebf9f7 ;
|
background: #ebf9f7;
|
||||||
color: #1bb19b !important;
|
color: #1bb19b !important;
|
||||||
font-weight: 600 ;
|
font-weight: 600;
|
||||||
border: 1px solid #6dbdb142;
|
border: 1px solid #6dbdb142;
|
||||||
}
|
}
|
||||||
.disabledcard {
|
.disabledcard {
|
||||||
color: rgba(209, 209, 209, 0.733) !important;
|
color: rgba(209, 209, 209, 0.733) !important;
|
||||||
|
|
@ -198,6 +177,6 @@ const transferToPage = (path?: string) => {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
cursor: no-drop !important;
|
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 MainLayout = () => import("@/views/MainLayout.vue")
|
||||||
const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.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({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: "/",
|
||||||
name: 'home',
|
name: "home",
|
||||||
component: MainLayout,
|
component: MainLayout,
|
||||||
children:[
|
children: [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "dashboard",
|
name: "dashboard",
|
||||||
component: Dashboard,
|
component: Dashboard,
|
||||||
},
|
},
|
||||||
...ModuleTransfer
|
...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