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

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

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>