hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ย้าย ปฏิทิน เข้าใน ฟอร์ม

Browse source
This commit is contained in:
setthawutttty 2023-12-06 17:55:06 +07:00
parent ecb81632ab
commit 3b138d9bf6
6 changed files with 243 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
View file

@ -57,7 +57,7 @@ const calendarOptions = ref<CalendarOptions>({
expandRows: true,
nowIndicator: true,
height: "100%",
eventColor: "#50a5fc",
eventColor: "#02A998",
eventTextColor: "#fff",
eventBorderColor: "#50a5fc",
displayEventTime: false,
@ -72,23 +72,38 @@ const dateMonth = ref<DataDateMonthObject>({
});
/** function เรียกข่อมูล calendar*/
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
async function fetchCalendar() {
showLoader();
await http
.post(config.API.investigateCalendar(), {
year: dateMonth.value.year,
mounth: dateMonth.value.month,
month: dateMonth.value.month,
})
.then((res) => {
const data = res.data.result;
const event = data.map((e: CaledarInvestigatefacts) => ({
const defaultColor = "#02A998";
const gradientColors = generateGradientColors(data.length);
const events = data.map((e: CaledarInvestigatefacts, index: number) => ({
id: e.id,
title: e.title,
start: e.investigationDateStart,
end: e.investigationDateEnd,
allDay: true,
color:
data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
}));
calendarOptions.value.events = event;
calendarOptions.value.events = events;
})
.catch((err) => {
messageError($q, err);
@ -105,6 +120,14 @@ async function fetchCalendar() {
});
}
function generateGradientColors(length: number) {
const colors = [];
for (let i = 0; i < length; i++) {
colors.push(getRandomColor());
}
return colors;
}
/** function เปลี่ยนปฎิทิน*/
function changCalendar() {
fetchCalendar();
@ -151,6 +174,26 @@ const phone = ref("000-00000000");
const reason = ref("ยกเลิกการลา");
const model = ref(null);
const modeCancel = ref(true);
function gotoPrevMonth() {
const calen = fullCalendar.value.getApi();
calen.prev();
console.log("b", calen.getDate());
updateDateMonth(calen.getDate());
}
function gotoNextMonth() {
const calen = fullCalendar.value.getApi();
calen.next();
console.log("n", calen.getDate());
updateDateMonth(calen.getDate());
}
function updateDateMonth(date: Date) {
dateMonth.value.year = date.getFullYear();
dateMonth.value.month = date.getMonth();
fetchCalendar();
}
</script>
<template>
<q-dialog v-model="props.modal">
@ -175,8 +218,8 @@ const modeCancel = ref(true);
<div class="row q-gutter-sm">
<div class="col-12">
<div class="row q-gutter-sm q-pb-sm main-content">
<div class="demo-app-main">
<div class="row col-12 q-mb-sm">
<div class="demo-app-main q-mb-xl">
<!-- <div class="row col-12 q-mb-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<datepicker
v-model="dateMonth"
@ -209,6 +252,33 @@ const modeCancel = ref(true);
</template>
</datepicker>
</div>
</div> -->
<div class="row q-mb-sm justify-between">
<q-btn
size="12px"
dense
icon="mdi-chevron-left"
class="self-center items-center"
color="primary"
@click="gotoPrevMonth"
></q-btn>
<p class="q-ma-none text-center">
{{ monthYearThai(dateMonth) }}
</p>
<q-btn
size="12px"
dense
icon="mdi-chevron-right"
class="self-center items-center"
color="primary"
@click="gotoNextMonth"
></q-btn>
</div>
<FullCalendar
ref="fullCalendar"
@ -239,17 +309,6 @@ const modeCancel = ref(true);
</div>
</template>
</FullCalendar>
<div class="row q-col-gutter-lg justify-end q-pb-lg">
<div class="items-center row">
<q-icon
size="10px"
color="light-blue-14"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">สืบสวน</span>
</div>
</div>
</div>
</div>
</div>
@ -352,6 +411,7 @@ const modeCancel = ref(true);
.demo-app-main {
flex-grow: 1;
/* padding: 3em; */
}

85
src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
View file

@ -10,6 +10,8 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
import type {
FormData,
MyObjectInvestigateRef,
@ -139,6 +141,9 @@ const initialPagination = ref<any>({
rowsPerPage: 0,
});
const calendarModal = ref<boolean>(false);
const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
const hasError = [];
@ -452,6 +457,10 @@ function changeFormData() {
isSave.value = true;
}
function calendarOpen() {
calendarModal.value = true;
}
onMounted(async () => {
mainStore.rowsAdd = [];
getOc();
@ -717,27 +726,46 @@ onMounted(async () => {
style="border: 1px solid #d6dee1"
>
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
วันที่สืบสวน
<q-checkbox
v-if="
formData.investigationDateStart != null &&
formData.investigationDateEnd != null &&
((isReadonly && formData.investigationExtendStatus) ||
!isReadonly)
"
:disable="isReadonly"
for="#extendStatus"
size="md"
v-model="formData.investigationExtendStatus"
label="ขยายเวลา"
color="primary"
dense
class="text-weight-medium q-ml-sm"
keep-color
@update:model-value="changeFormData()"
/>
<div>
วันที่สืบสวน
<q-checkbox
v-if="
formData.investigationDateStart != null &&
formData.investigationDateEnd != null &&
((isReadonly && formData.investigationExtendStatus) ||
!isReadonly)
"
:disable="isReadonly"
for="#extendStatus"
size="md"
v-model="formData.investigationExtendStatus"
label="ขยายเวลา"
color="primary"
dense
class="text-weight-medium q-ml-sm"
keep-color
@update:model-value="changeFormData()"
/>
</div>
<q-space style="height: 1px;"/>
<div>
<q-btn
name="calendar"
round
size="12px"
flat
dense
icon="mdi-calendar-month"
class="self-center items-center"
color="primary"
@click="calendarOpen"
>
<q-tooltip>ปฏิทิน</q-tooltip>
</q-btn>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="q-pa-sm">
@ -765,7 +793,11 @@ onMounted(async () => {
for="#date"
class="full-width cursor-pointer"
ref="dateRef"
:input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
:input-style="
isReadonly
? { color: 'black' }
: { color: 'teal' }
"
:readonly="isReadonly"
outlined
dense
@ -852,7 +884,11 @@ onMounted(async () => {
<template #trigger>
<q-input
for="#dateEnd"
:input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
:input-style="
isReadonly
? { color: 'black' }
: { color: 'teal' }
"
ref="dateEndRef"
class="full-width cursor-pointer"
:readonly="isReadonly"
@ -1330,6 +1366,11 @@ onMounted(async () => {
@update:pagination="updatePagingProp"
@returnDirector="returnDirector"
/>
<CalandarDialog
:modal="calendarModal"
:close="calendarModalclose"
/>
</template>
<style scoped>

29
src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
View file

@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
import config from "@/app.config";
import http from "@/plugins/http";
import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
const dataInvestigate = useInvestigateFactStore();
const mixin = useCounterMixin();
@ -29,8 +29,7 @@ const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const calendarModal = ref<boolean>(false);
const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
/**
*pagination ของตาราง
*/
@ -95,10 +94,6 @@ async function editPage(id: string) {
router.push(`/discipline/investigatefacts/${id}`);
}
function calendarOpen() {
calendarModal.value = true;
}
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
@ -112,21 +107,6 @@ onMounted(async () => {
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
name="calendar"
round
size="12px"
flat
icon="mdi-calendar-month"
class="q-mr-sm"
color="primary"
@click="calendarOpen"
>
<q-tooltip>ปฏิทิน</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
@ -237,9 +217,4 @@ onMounted(async () => {
</d-table>
</div>
</q-card>
<CalandarDialog
:modal="calendarModal"
:close="calendarModalclose"
/>
</template>

83
src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
View file

@ -72,24 +72,38 @@ const dateMonth = ref<DataDateMonthObject>({
});
/** function เรียกข่อมูล calendar*/
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
async function fetchCalendar() {
showLoader();
await http
.post(config.API.disciplinaryCalendar(), {
year: dateMonth.value.year,
mounth: dateMonth.value.month,
month: dateMonth.value.month,
})
.then((res) => {
const data = res.data.result;
const event = data.map((e: CaledarDisciplinary) => ({
const defaultColor = "#02A998";
const gradientColors = generateGradientColors(data.length);
const events = data.map((e: CaledarDisciplinary, index: number) => ({
id: e.id,
title: e.title,
start: e.disciplinaryDateStart,
end: e.disciplinaryDateEnd,
start: e.disciplinaryDateEnd,
end: e.disciplinaryDateStart,
allDay: true,
color:
data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
}));
calendarOptions.value.events = event;
calendarOptions.value.events = events;
})
.catch((err) => {
messageError($q, err);
@ -97,15 +111,23 @@ async function fetchCalendar() {
.finally(() => {
setTimeout(() => {
if (fullCalendar !== undefined) {
const calen = fullCalendar.value.getApi();
const date = new Date(dateMonth.value.year, dateMonth.value.month);
calen.gotoDate(date);
const calen = fullCalendar.value.getApi();
const date = new Date(dateMonth.value.year, dateMonth.value.month);
calen.gotoDate(date);
}
hideLoader();
}, 1000);
});
}
function generateGradientColors(length: number) {
const colors = [];
for (let i = 0; i < length; i++) {
colors.push(getRandomColor());
}
return colors;
}
/** function เปลี่ยนปฎิทิน*/
function changCalendar() {
fetchCalendar();
@ -148,6 +170,26 @@ const phone = ref("000-00000000");
const reason = ref("ยกเลิกการลา");
const model = ref(null);
const modeCancel = ref(true);
function gotoPrevMonth() {
const calen = fullCalendar.value.getApi();
calen.prev();
console.log("b", calen.getDate());
updateDateMonth(calen.getDate());
}
function gotoNextMonth() {
const calen = fullCalendar.value.getApi();
calen.next();
console.log("n", calen.getDate());
updateDateMonth(calen.getDate());
}
function updateDateMonth(date: Date) {
dateMonth.value.year = date.getFullYear();
dateMonth.value.month = date.getMonth();
fetchCalendar();
}
</script>
<template>
<q-dialog v-model="props.modal">
@ -173,7 +215,7 @@ const modeCancel = ref(true);
<div class="col-12">
<div class="row q-gutter-sm q-pb-sm main-content">
<div class="demo-app-main">
<div class="row col-12 q-mb-sm">
<!-- <div class="row col-12 q-mb-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<datepicker
v-model="dateMonth"
@ -206,6 +248,29 @@ const modeCancel = ref(true);
</template>
</datepicker>
</div>
</div> -->
<div class="row q-mb-sm justify-between">
<q-btn
size="12px"
dense
icon="mdi-chevron-left"
class="self-center items-center"
color="primary"
@click="gotoPrevMonth"
></q-btn>
<p class="q-ma-none text-center">
{{ monthYearThai(dateMonth) }}
</p>
<q-btn
size="12px"
dense
icon="mdi-chevron-right"
class="self-center items-center"
color="primary"
@click="gotoNextMonth"
></q-btn>
</div>
<FullCalendar
ref="fullCalendar"

29
src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
View file

@ -4,7 +4,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
/**import type*/
import type { QTableProps } from "quasar";
import type {
@ -32,6 +32,9 @@ import { useComplainstDataStore } from "@/modules/11_discipline/store/Complaints
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
const calendarModal = ref<boolean>(false);
const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
const complainstStore = useComplainstDataStore();
const investigateDis = useInvestigateDisStore();
const mainStore = useDisciplineMainStore();
@ -432,6 +435,10 @@ function changeFormData() {
isSave.value = true;
}
function calendarOpen() {
calendarModal.value = true;
}
/** Hook */
onMounted(async () => {
mainStore.rowsAdd = [];
@ -779,7 +786,7 @@ onMounted(async () => {
style="border: 1px solid #d6dee1"
>
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
วันที่สอบสวน
@ -800,6 +807,22 @@ onMounted(async () => {
keep-color
@update:model-value="changeFormData()"
/>
<q-space style="height: 1px" />
<div>
<q-btn
name="calendar"
round
size="12px"
flat
dense
icon="mdi-calendar-month"
class="self-center items-center"
color="primary"
@click="calendarOpen"
>
<q-tooltip>ปฏิทิน</q-tooltip>
</q-btn>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="q-pa-sm">
@ -1482,4 +1505,6 @@ onMounted(async () => {
@update:pagination="updatePaging"
@returnDirector="returnDirector"
/>
<CalandarDialog :modal="calendarModal" :close="calendarModalclose" />
</template>

22
src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
View file

@ -1,10 +1,7 @@
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
const calendarModal = ref<boolean>(false);
const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
const table = ref<any>(null);
const filterRef = ref<any>(null);
const attrs = ref<any>(useAttrs());
@ -46,10 +43,6 @@ const emit = defineEmits([
"update:editvisible",
]);
function calendarOpen() {
calendarModal.value = true;
}
function paginationLabel(start: string, end: string, total: string) {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
@ -72,20 +65,6 @@ function resetFilter() {
<template>
<div class="q-pb-sm row q-col-gutter-sm">
<div>
<q-btn
name="calendar"
round
size="12px"
flat
icon="mdi-calendar-month"
class="q-mr-sm"
color="primary"
@click="calendarOpen"
>
<q-tooltip>ปฏิทิน</q-tooltip>
</q-btn>
</div>
<q-space />
<!-- ค้นหาข้อความใน table -->
<q-input
@ -148,7 +127,6 @@ function resetFilter() {
<slot v-bind="props" name="columns"></slot>
</template>
</d-table>
<CalandarDialog :modal="calendarModal" :close="calendarModalclose" />
</template>
<style lang="scss">