จัดโค้ด
This commit is contained in:
setthawutttty
parent
a5335df0b6
commit
a42d7b91ba
12 changed files with 216 additions and 413 deletions
|
|
@ -23,6 +23,11 @@ const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
|
|||
|
||||
const $q = useQuasar();
|
||||
|
||||
const title = ref("");
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const modalCancel = ref(false);
|
||||
const modeCancel = ref(true);
|
||||
|
||||
const props = defineProps({
|
||||
lists: {
|
||||
type: Array as PropType<ExtendHistoryObject[]>,
|
||||
|
|
@ -38,7 +43,6 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<CalendarOptions>({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
|
|
@ -99,7 +103,7 @@ async function fetchCalendar() {
|
|||
id: index.toString(),
|
||||
title: e.name,
|
||||
start: e.dateStart,
|
||||
end: moment(e.dateEnd).format("YYYY-MM-DD")+ " 23:59:59",
|
||||
end: moment(e.dateEnd).format("YYYY-MM-DD") + " 23:59:59",
|
||||
allDay: false,
|
||||
color:
|
||||
props.lists.length > 1 && index > 0
|
||||
|
|
@ -119,45 +123,6 @@ async function fetchCalendar() {
|
|||
}, 1000);
|
||||
}
|
||||
|
||||
// async function fetchCalendar() {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .post(config.API.investigateCalendar(), {
|
||||
// year: dateMonth.value.year,
|
||||
// month: dateMonth.value.month,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// const data = res.data.result;
|
||||
// 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 = events;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setTimeout(() => {
|
||||
// if (fullCalendar !== undefined) {
|
||||
// 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++) {
|
||||
|
|
@ -185,20 +150,6 @@ async function view(text: string) {
|
|||
modeCancel.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
async () => {
|
||||
props.modal && (await fetchCalendar());
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* ตัวแปรทั้งหมด
|
||||
*/
|
||||
const modalCancel = ref(false);
|
||||
const title = ref("");
|
||||
const modeCancel = ref(true);
|
||||
|
||||
function gotoPrevMonth() {
|
||||
const calen = fullCalendar.value.getApi();
|
||||
calen.prev();
|
||||
|
|
@ -218,6 +169,13 @@ function updateDateMonth(date: Date) {
|
|||
dateMonth.value.month = date.getMonth();
|
||||
fetchCalendar();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
async () => {
|
||||
props.modal && (await fetchCalendar());
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -245,40 +203,6 @@ function updateDateMonth(date: Date) {
|
|||
<div class="col-12">
|
||||
<div class="row q-gutter-sm q-pb-sm main-content">
|
||||
<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"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="changCalendar"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
style="width: 130px"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row q-mb-sm justify-between">
|
||||
<q-btn
|
||||
size="12px"
|
||||
|
|
@ -316,22 +240,12 @@ function updateDateMonth(date: Date) {
|
|||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div
|
||||
class="textHover col-10"
|
||||
@click="view(arg.event.title)"
|
||||
>
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<!-- <q-btn
|
||||
dense
|
||||
v-if="arg.event.groupId == 1"
|
||||
icon="mdi-close"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
@click="cancel(arg.event.title)"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
|
|
@ -359,12 +273,9 @@ function updateDateMonth(date: Date) {
|
|||
|
||||
.demo-app-main {
|
||||
flex-grow: 1;
|
||||
|
||||
/* padding: 3em; */
|
||||
}
|
||||
|
||||
.fc {
|
||||
/* the calendar root */
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
|
|
@ -379,13 +290,6 @@ function updateDateMonth(date: Date) {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* border: 2px solid #17a259; */
|
||||
/* border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-weight: bold;
|
||||
color: white !important;
|
||||
background: #17a259; */
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-frame {
|
||||
|
|
|
|||
|
|
@ -198,6 +198,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
class="demo-app-calendar"
|
||||
|
|
@ -208,41 +209,14 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div class="textHover col-10" @click="view(arg.event.title)">
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<!-- <q-btn
|
||||
dense
|
||||
v-if="arg.event.groupId == 1"
|
||||
icon="mdi-close"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
@click="cancel(arg.event.title)"
|
||||
/> -->
|
||||
</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-green"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">สถานะอนุมัติ</span>
|
||||
</div> -->
|
||||
<!-- <div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="red-6"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
|
||||
</div> -->
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
|
|
@ -252,15 +226,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
/>
|
||||
<span class="text-caption text-grey-8">สืบสวน</span>
|
||||
</div>
|
||||
<!-- <div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="orange"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">สถานะใหม่</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -287,6 +252,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
|
|
@ -306,6 +272,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input
|
||||
v-model="reason"
|
||||
|
|
@ -329,6 +296,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section
|
||||
class="row items-center q-pa-sm"
|
||||
v-if="modeCancel == true"
|
||||
|
|
@ -381,13 +349,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* border: 2px solid #17a259; */
|
||||
/* border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-weight: bold;
|
||||
color: white !important;
|
||||
background: #17a259; */
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-frame {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } = mixin;
|
|||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const modalPopup = ref<boolean>(false);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์มสืบสวน */
|
||||
const data = reactive<FormData>({
|
||||
|
|
@ -161,7 +162,8 @@ function getData() {
|
|||
data.investigationStatusResult = dataList.investigationStatusResult;
|
||||
data.investigationExtendStatus = dataList.investigationExtendStatus;
|
||||
data.investigationDaysExtend = dataList.investigationDaysExtend;
|
||||
data.investigationExtendHistory = dataList.investigationExtendHistory ?? [];
|
||||
data.investigationExtendHistory =
|
||||
dataList.investigationExtendHistory ?? [];
|
||||
// console.log(dataList);
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -195,7 +197,6 @@ async function onSubmit(data: any) {
|
|||
// router.push(`/discipline/investigatefacts`);
|
||||
}
|
||||
|
||||
const modalPopup = ref<boolean>(false);
|
||||
/** ยืนยัน ส่งไปสอบสวน */
|
||||
function sentInvestigate() {
|
||||
if (mainStore.rowsAdd.length > 0) {
|
||||
|
|
@ -341,6 +342,7 @@ watch(
|
|||
/>
|
||||
<div class="q-ma-none">แก้ไขรายการสืบสวนข้อเท็จจริง</div>
|
||||
<q-space />
|
||||
|
||||
<div class="q-gutter-x-sm">
|
||||
<q-btn
|
||||
v-if="data.status === 'NEW'"
|
||||
|
|
@ -362,6 +364,7 @@ watch(
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat class="col-12">
|
||||
<q-tabs
|
||||
v-model="store.tabMenu"
|
||||
|
|
|
|||
|
|
@ -487,7 +487,9 @@ function calendarOpen() {
|
|||
calendarModal.value = true;
|
||||
}
|
||||
|
||||
|
||||
/** เปลี่ยนสี เมื่อ readonly
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val:boolean){
|
||||
return {
|
||||
"full-width cursor-pointer ": val,
|
||||
|
|
@ -495,6 +497,9 @@ function inputEdit(val:boolean){
|
|||
};
|
||||
}
|
||||
|
||||
/** เปลี่ยนสี เมื่อ readonly
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEditExtend(val: boolean) {
|
||||
if (formData.investigationExtendHistory.length > 0) {
|
||||
return {
|
||||
|
|
@ -516,6 +521,7 @@ onMounted(async () => {
|
|||
<template>
|
||||
<div class="row col-12 bg-white">
|
||||
<div class="col-sm-12 col-md-9">
|
||||
|
||||
<div v-if="isSave" class="q-pa-sm q-gutter-sm">
|
||||
<q-banner
|
||||
inline-actions
|
||||
|
|
@ -526,11 +532,13 @@ onMounted(async () => {
|
|||
ยังไม่ได้บันทึกข้อมูล
|
||||
</q-banner>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="validateForm">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-pa-md q-col-gutter-md">
|
||||
<div class="col-xs-12 row q-col-gutter-md">
|
||||
|
||||
<div class="col-xs-12 col-sm-3" id="respondentType">
|
||||
<q-select
|
||||
:class="inputEdit(isReadonly)"
|
||||
|
|
@ -621,6 +629,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-12 q-pa-sm">
|
||||
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="mainStore.columnsRespondent"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue