clone code

This commit is contained in:
Kittapath 2023-06-01 12:54:58 +07:00
parent c9597d1e38
commit d57bcd1719
362 changed files with 104804 additions and 0 deletions

102
src/stores/data.ts Normal file
View 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
// }
// },
// }

619
src/stores/mixin.ts Normal file
View file

@ -0,0 +1,619 @@
import { defineStore } from "pinia";
import moment from "moment";
import CustomComponent from "@/components/CustomDialog.vue";
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();
});
};
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 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 "-";
}
};
return {
calAge,
date2Thai,
dateToISO,
notify,
notifyError,
dateText,
monthYear2Thai,
dateMonth2Thai,
success,
weekThai,
genColor15,
typeCategoryExam,
textToPhone,
textToFax,
dateThaiRange,
modalDelete,
modalConfirm,
modalError,
dialogMessage,
messageError,
};
});