ปรับ Layout สืบสวนข้อเท็จจริง,สอบสวนความผิดทางวินัย

This commit is contained in:
Tanyalak 2023-11-07 12:13:42 +07:00
parent 7716b459ac
commit 960f996ebc
7 changed files with 577 additions and 505 deletions

View file

@ -117,341 +117,340 @@ watch(props.data, async () => {
</script>
<template>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md">
<form @submit.prevent="validateForm">
<div class="row col-12">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<q-input
for="#complaint"
class="full-width inputgreen cursor-pointer"
ref="complaintRef"
outlined
dense
lazy-rules
borderless
v-model="formData.complaint"
:rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
hide-bottom-space
:label="`${'เรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="row no-wrap col-12">
<div class="col-4 q-my-md q-mr-xs">
<q-select
for="#fault"
outlined
dense
ref="faultRef"
v-model="formData.fault"
:rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
:options="investigateFactStore.faultOp"
label="ลักษณะความผิด"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
)"
><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-4 q-my-md q-mr-xs">
<q-select
for="#investigation"
outlined
dense
ref="investigationRef"
:rules="[
(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
]"
v-model="formData.investigation"
:options="investigateFactStore.investigationOp"
label="ลักษณะการสืบสวน"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
<div
v-if="formData.investigation === '003'"
class="col-12 q-mb-md"
<div class="q-pa-md">
<div class="col-xs-12 row items-center q-col-gutter-md">
<div class="col-12">
<q-input
for="#complaint"
class="full-width inputgreen cursor-pointer"
ref="complaintRef"
outlined
dense
lazy-rules
borderless
v-model="formData.complaint"
:rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
hide-bottom-space
:label="`${'เรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="col-6">
<q-select
for="#fault"
outlined
dense
ref="faultRef"
v-model="formData.fault"
:rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
:options="investigateFactStore.faultOp"
label="ลักษณะความผิด"
emit-value
map-options
option-label="name"
option-value="id"
hide-bottom-space
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
)"
><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-6">
<q-select
for="#investigation"
outlined
dense
ref="investigationRef"
:rules="[
(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
]"
v-model="formData.investigation"
:options="investigateFactStore.investigationOp"
label="ลักษณะการสืบสวน"
emit-value
map-options
option-label="name"
option-value="id"
hide-bottom-space
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
)"
><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.investigation === '003'"
class="col-12"
>
<q-input
for="#other"
class="full-width inputgreen cursor-pointer"
outlined
ref="otherRef"
dense
borderless
v-model="formData.other"
hide-bottom-space
:label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
type="textarea"
:rules="[
(val) =>
formData.investigation === '003'
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
/>
</div>
<div class="row col-12">
<q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
<div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
นทบสวน
<q-checkbox
for="#clickTime"
size="md"
v-model="formData.clickTime"
label="ขยายเวลา"
color="primary"
class="text-weight-medium q-ml-sm"
keep-color
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 col-sm-12 q-pa-sm row">
<div v-if="formData.clickTime !== true" class="q-col-gutter-sm row">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#date"
class="full-width inputgreen cursor-pointer"
ref="dateRef"
outlined
dense
lazy-rules
borderless
hide-bottom-space
:model-value="
formData.date ? date2Thai(formData.date) : 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>
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#dateEnd"
ref="dateEndRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
hide-bottom-space
borderless
:model-value="
formData.dateEnd
? date2Thai(formData.dateEnd)
: 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 v-else class="q-mx-xs col-xs-12 col-sm-6">
<q-select
for="#daysExtend"
outlined
dense
lazy-rules
ref="daysExtendRef"
v-model="formData.daysExtend"
:options="investigateFactStore.daysExtendOp"
label="จำนวนวันที่ต้องการขยาย"
emit-value
hide-bottom-space
map-options
:rules="[
(val) =>
formData.clickTime === true
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</q-card>
</div>
<div class="col-12 ">
<q-input
for="#complaintdetail"
class="full-width inputgreen cursor-pointer"
outlined
ref="complaintdetailRef"
dense
lazy-rules
borderless
v-model="formData.complaintdetail"
:rules="[
(val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
]"
hide-bottom-space
:label="`${'รายละเอียดเรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="col-12">
<q-file
for="#fileComplaint"
outlined
ref="fileComplaintRef"
dense
v-model="formData.fileComplaint"
label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12">
<q-input
for="#detail"
class="full-width inputgreen cursor-pointer"
outlined
ref="detailRef"
dense
lazy-rules
borderless
v-model="formData.detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
type="textarea"
/>
</div>
<div class="col-12">
<q-file
for="#evidenceFiles"
outlined
dense
ref="evidenceFilesRef"
v-model="formData.evidenceFiles"
label="ไฟล์หลักฐานการรับ"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="row col-12 items-start">
<div class="col-4">
<q-input
for="#other"
class="full-width inputgreen cursor-pointer"
outlined
ref="otherRef"
for="#results"
standout
dense
borderless
v-model="formData.other"
ref="resultsRef"
:rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
v-model="formData.results"
outlined
debounce="300"
placeholder="ผลการสืบสวน"
hide-bottom-space
:label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
type="textarea"
:rules="[
(val) =>
formData.investigation === '003'
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
/>
</div>
<div class="row items-start col-12">
<p
class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
>
นทบสวน
</p>
<q-checkbox
for="#clickTime"
size="md"
v-model="formData.clickTime"
label="ขยายเวลา"
</q-input>
</div>
<div class="col-4">
<q-btn
id="#confirm"
label="ยืนยันผลการสืบสวน"
color="primary"
class="text-weight-medium q-ml-sm"
keep-color
/>
<div v-if="formData.clickTime !== true" class="self-start row">
<div class="q-mx-xs">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#date"
class="full-width inputgreen cursor-pointer"
ref="dateRef"
outlined
dense
lazy-rules
borderless
:model-value="
formData.date ? date2Thai(formData.date) : 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="q-mx-xs q-">
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#dateEnd"
ref="dateEndRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
borderless
:model-value="
formData.dateEnd
? date2Thai(formData.dateEnd)
: 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 v-else class="q-mx-xs">
<q-select
for="#daysExtend"
outlined
dense
lazy-rules
ref="daysExtendRef"
v-model="formData.daysExtend"
:options="investigateFactStore.daysExtendOp"
label="จำนวนวันที่ต้องการขยาย"
emit-value
map-options
:rules="[
(val) =>
formData.clickTime === true
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
<div class="col-12 q-my-xs">
<q-input
for="#complaintdetail"
class="full-width inputgreen cursor-pointer"
outlined
ref="complaintdetailRef"
dense
lazy-rules
borderless
v-model="formData.complaintdetail"
:rules="[
(val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
]"
hide-bottom-space
:label="`${'รายละเอียดเรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="col-12 q-my-sm">
<q-file
for="#fileComplaint"
outlined
ref="fileComplaintRef"
dense
v-model="formData.fileComplaint"
label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
class="q-py-sm q-ml-sm"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 q-my-sm">
<q-input
for="#detail"
class="full-width inputgreen cursor-pointer"
outlined
ref="detailRef"
dense
lazy-rules
borderless
v-model="formData.detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
type="textarea"
/>
</div>
<div class="col-12 q-my-xs">
<q-file
for="#evidenceFiles"
outlined
dense
ref="evidenceFilesRef"
v-model="formData.evidenceFiles"
label="ไฟล์หลักฐานการรับ"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="row col-12 items-start q-mt-sm">
<div class="col-4">
<q-input
for="#results"
standout
dense
ref="resultsRef"
:rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
v-model="formData.results"
outlined
debounce="300"
placeholder="ผลการสืบสวน"
>
</q-input>
</div>
<div class="col-4">
<q-btn
id="#confirm"
label="ยืนยันผลการสืบสวน"
color="public"
class="q-py-sm q-ml-sm"
>
<q-tooltip>นยนผลการสบสวน</q-tooltip>
</q-btn>
</div>
<q-tooltip>นยนผลการสบสวน</q-tooltip>
</q-btn>
</div>
</div>
</div>
@ -464,6 +463,5 @@ watch(props.data, async () => {
>
</div>
</form>
</div>
</q-card>
</template>