แก้ฟอร์มสอบสวน
This commit is contained in:
parent
95054e1a21
commit
7b5ec07d41
2 changed files with 256 additions and 248 deletions
|
|
@ -222,7 +222,7 @@ function updateDateMonth(date: Date) {
|
|||
<q-card style="min-width: 60vw">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold">
|
||||
ปฎิทินแสดงวันที่สืบสวน
|
||||
ปฎิทินแสดงวันที่สอบสวน
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ const filter = ref<string>("");
|
|||
|
||||
const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const extendStatus = ref<boolean>(false);
|
||||
|
||||
function toggleModal() {
|
||||
modalPerson.value = !modalPerson.value;
|
||||
|
|
@ -189,8 +190,6 @@ function validateForm() {
|
|||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
isSave.value = false;
|
||||
formData.extendStatus = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -220,6 +219,8 @@ function onSubmit() {
|
|||
}
|
||||
|
||||
emit("submit:disciplinary", formData);
|
||||
isSave.value = false;
|
||||
extendStatus.value = false;
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
|
|
@ -787,257 +788,260 @@ onMounted(async () => {
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12"
|
||||
style="border: 1px solid #d6dee1"
|
||||
>
|
||||
<div
|
||||
class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12"
|
||||
style="border: 1px solid #d6dee1"
|
||||
>
|
||||
<div>
|
||||
วันที่สืบสวน
|
||||
<q-checkbox
|
||||
v-if="
|
||||
formData.disciplinaryExtendHistory.length > 0 &&
|
||||
!isReadonly
|
||||
"
|
||||
:disable="isReadonly"
|
||||
for="#extendStatus"
|
||||
size="md"
|
||||
v-model="formData.extendStatus"
|
||||
label="ขยายเวลา"
|
||||
color="primary"
|
||||
dense
|
||||
class="text-weight-medium q-ml-sm"
|
||||
keep-color
|
||||
@update:model-value="
|
||||
changeFormData();
|
||||
resetExtend();
|
||||
"
|
||||
/>
|
||||
<div
|
||||
class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||
>
|
||||
<div>
|
||||
วันที่สอบสวน
|
||||
<q-checkbox
|
||||
v-if="
|
||||
formData.disciplinaryExtendHistory.length > 0 &&
|
||||
!isReadonly
|
||||
"
|
||||
:disable="isReadonly"
|
||||
for="#extendStatus"
|
||||
size="md"
|
||||
v-model="extendStatus"
|
||||
label="ขยายเวลา"
|
||||
color="primary"
|
||||
dense
|
||||
class="text-weight-medium q-ml-sm"
|
||||
keep-color
|
||||
@update:model-value="
|
||||
changeFormData();
|
||||
resetExtend();
|
||||
"
|
||||
/>
|
||||
</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>
|
||||
<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">
|
||||
<div class="q-col-gutter-sm row col-12">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div v-if="formData.extendStatus" class="col-3">
|
||||
<q-select
|
||||
:readonly="isReadonly"
|
||||
for="#daysExtend"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
ref="daysExtendRef"
|
||||
v-model="formData.daysExtend"
|
||||
:options="investigateDis.daysExtendOps"
|
||||
label="จำนวนวันที่ต้องการขยาย"
|
||||
emit-value
|
||||
hide-bottom-space
|
||||
map-options
|
||||
:rules="[
|
||||
(val) =>
|
||||
formData.extendStatus
|
||||
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
|
||||
: true,
|
||||
]"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
@update:model-value="calEndDate"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="q-pa-sm">
|
||||
<div class="q-col-gutter-sm row col-12">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div v-if="extendStatus" class="col-3">
|
||||
<q-select
|
||||
:readonly="isReadonly"
|
||||
for="#daysExtend"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
ref="daysExtendRef"
|
||||
v-model="formData.daysExtend"
|
||||
:options="investigateDis.daysExtendOps"
|
||||
label="จำนวนวันที่ต้องการขยาย"
|
||||
emit-value
|
||||
hide-bottom-space
|
||||
map-options
|
||||
:rules="[
|
||||
(val) =>
|
||||
formData.extendStatus
|
||||
? !!val ||
|
||||
'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
|
||||
: true,
|
||||
]"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
@update:model-value="calEndDate"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div v-if="!formData.extendStatus" class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length > 0
|
||||
"
|
||||
v-model="formData.disciplinaryDateStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="changeFormData()"
|
||||
>
|
||||
<template #year="{ year }">{{
|
||||
year + 543
|
||||
}}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="#date"
|
||||
class="full-width cursor-pointer"
|
||||
ref="dateRef"
|
||||
:input-style="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length >
|
||||
0
|
||||
? { color: 'black' }
|
||||
: { color: 'teal' }
|
||||
"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length >
|
||||
0
|
||||
"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
formData.disciplinaryDateStart
|
||||
? date2Thai(
|
||||
formData.disciplinaryDateStart
|
||||
)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
|
||||
]"
|
||||
:label="`${'วันที่เริ่มการสืบสวน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.disciplinaryDateEnd"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length > 0
|
||||
"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="changeFormData()"
|
||||
>
|
||||
<template #year="{ year }">{{
|
||||
year + 543
|
||||
}}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="#dateEnd"
|
||||
:input-style="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length >
|
||||
0
|
||||
? { color: 'black' }
|
||||
: { color: 'teal' }
|
||||
"
|
||||
ref="dateEndRef"
|
||||
class="full-width cursor-pointer"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length >
|
||||
0
|
||||
"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:model-value="
|
||||
formData.disciplinaryDateEnd
|
||||
? date2Thai(formData.disciplinaryDateEnd)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
|
||||
]"
|
||||
:label="`${'วันที่สิ้นสุดการสืบสวน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div v-if="!extendStatus" class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length > 0
|
||||
"
|
||||
v-model="formData.disciplinaryDateStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="changeFormData()"
|
||||
>
|
||||
<template #year="{ year }">{{
|
||||
year + 543
|
||||
}}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="#date"
|
||||
class="full-width cursor-pointer"
|
||||
ref="dateRef"
|
||||
:input-style="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory
|
||||
.length > 0
|
||||
? { color: 'black' }
|
||||
: { color: 'teal' }
|
||||
"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory
|
||||
.length > 0
|
||||
"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
formData.disciplinaryDateStart
|
||||
? date2Thai(
|
||||
formData.disciplinaryDateStart
|
||||
)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
|
||||
]"
|
||||
:label="`${'วันที่เริ่มการสืบสวน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.disciplinaryDateEnd"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory.length > 0
|
||||
"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="changeFormData()"
|
||||
>
|
||||
<template #year="{ year }">{{
|
||||
year + 543
|
||||
}}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="#dateEnd"
|
||||
:input-style="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory
|
||||
.length > 0
|
||||
? { color: 'black' }
|
||||
: { color: 'teal' }
|
||||
"
|
||||
ref="dateEndRef"
|
||||
class="full-width cursor-pointer"
|
||||
:readonly="
|
||||
isReadonly ||
|
||||
formData.disciplinaryExtendHistory
|
||||
.length > 0
|
||||
"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:model-value="
|
||||
formData.disciplinaryDateEnd
|
||||
? date2Thai(
|
||||
formData.disciplinaryDateEnd
|
||||
)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
|
||||
]"
|
||||
:label="`${'วันที่สิ้นสุดการสืบสวน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- วันที่สืบสวน (List Log) -->
|
||||
<div
|
||||
v-if="
|
||||
formData.disciplinaryExtendHistory !== null &&
|
||||
formData.disciplinaryExtendHistory.length > 1
|
||||
"
|
||||
class="col-12 fixed-height-history"
|
||||
>
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="(
|
||||
e, key
|
||||
) in formData.disciplinaryExtendHistory.slice(1)"
|
||||
>
|
||||
<q-item-section :key="key">
|
||||
{{ e.name }} ({{ e.daysExtend }} วัน)
|
||||
<p class="q-mb-none">
|
||||
{{ date2Thai(e.dateStart) }} -
|
||||
{{ date2Thai(e.dateEnd) }}
|
||||
</p>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<!-- วันที่สอบสวน (List Log) -->
|
||||
<div
|
||||
v-if="
|
||||
formData.disciplinaryExtendHistory !== null &&
|
||||
formData.disciplinaryExtendHistory.length > 1
|
||||
"
|
||||
class="col-12 fixed-height-history"
|
||||
>
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="(
|
||||
e, key
|
||||
) in formData.disciplinaryExtendHistory.slice(1)"
|
||||
>
|
||||
<q-item-section :key="key">
|
||||
{{ e.name }} ({{ e.daysExtend }} วัน)
|
||||
<p class="q-mb-none">
|
||||
{{ date2Thai(e.dateStart) }} -
|
||||
{{ date2Thai(e.dateEnd) }}
|
||||
</p>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
:readonly="isReadonly"
|
||||
|
|
@ -1564,7 +1568,11 @@ onMounted(async () => {
|
|||
@returnDirector="returnDirector"
|
||||
/>
|
||||
|
||||
<CalandarDialog :modal="calendarModal" :close="calendarModalclose" :lists="formData.disciplinaryExtendHistory"/>
|
||||
<CalandarDialog
|
||||
:modal="calendarModal"
|
||||
:close="calendarModalclose"
|
||||
:lists="formData.disciplinaryExtendHistory"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -1572,4 +1580,4 @@ onMounted(async () => {
|
|||
overflow-y: auto;
|
||||
max-height: 150px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue