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