update ฟอร์มสืบสวน สอบสวนวินัย
This commit is contained in:
parent
422ea07f4d
commit
b5cc5c9cb7
12 changed files with 768 additions and 564 deletions
|
|
@ -10,8 +10,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
|
|||
import type {
|
||||
FormData,
|
||||
MyObjectInvestigateRef,
|
||||
} from "@/modules/11_discipline/interface/request/investigate";
|
||||
import { diffDates } from "@fullcalendar/core/internal";
|
||||
} from "@/modules/11_discipline/interface/request/investigateFact";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
|
|
@ -23,7 +22,7 @@ const { filterFnOptionsType } = investigateFactStore;
|
|||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const investigateDis = useInvestigateDisStore();
|
||||
|
||||
const complaintsOptions = ref<any>([]);
|
||||
// const complaintsOptions = ref<any>([]);
|
||||
const isUpdate = ref<boolean>(false);
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
|
|
@ -41,6 +40,7 @@ const investigationRef = ref<Object | null>(null);
|
|||
const daysExtendRef = ref<Object | null>(null);
|
||||
const statusResultRef = ref<Object | null>(null);
|
||||
const causeTextRef = ref<Object | null>(null);
|
||||
const reasonRef = ref<Object | null>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -70,11 +70,12 @@ const formData = reactive<FormData>({
|
|||
dateEnd: new Date(),
|
||||
investigation: "",
|
||||
daysExtend: null,
|
||||
statusResult: "ยังไม่ระบุ",
|
||||
statusResult: "",
|
||||
causeText: "",
|
||||
complaintStatus: "",
|
||||
reason: "",
|
||||
});
|
||||
const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
|
||||
const evidenceFiles = ref<any>([{ name: "ชื่อไฟล์" }, { name: "ชื่อไฟล์" }]);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectInvestigate: MyObjectInvestigateRef = {
|
||||
|
|
@ -91,6 +92,7 @@ const objectInvestigate: MyObjectInvestigateRef = {
|
|||
daysExtend: daysExtendRef,
|
||||
statusResult: statusResultRef,
|
||||
causeText: causeTextRef,
|
||||
reason: reasonRef,
|
||||
};
|
||||
|
||||
const rows = ref([]);
|
||||
|
|
@ -163,7 +165,7 @@ async function fetchDataDetail() {
|
|||
formData.dateEnd = props.data.dateEnd;
|
||||
formData.investigation = props.data.investigation;
|
||||
formData.daysExtend = props.data.daysExtend;
|
||||
formData.statusResult = props.data.results;
|
||||
formData.statusResult = props.data.statusResult;
|
||||
formData.causeText = props.data.results;
|
||||
}
|
||||
}
|
||||
|
|
@ -601,61 +603,162 @@ watch(props.data, async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
dense
|
||||
:readonly="statusStep"
|
||||
lazy-rules
|
||||
ref="statusResultRef"
|
||||
v-model="formData.statusResult"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
|
||||
:options="investigateFactStore.statusResultOptions"
|
||||
label="ผลการสืบสวน"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
@filter="(inputValue: any,
|
||||
<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"
|
||||
>
|
||||
ผลการสืบสวน
|
||||
</div>
|
||||
|
||||
<div class="col-12"><q-separator /></div>
|
||||
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
dense
|
||||
:readonly="statusStep"
|
||||
lazy-rules
|
||||
ref="statusResultRef"
|
||||
v-model="formData.statusResult"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
|
||||
:options="investigateFactStore.statusResultOptions"
|
||||
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>
|
||||
><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.statusResult == 'have_cause'" class="col-3">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
dense
|
||||
ref="causeTextRef"
|
||||
v-model="formData.causeText"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
|
||||
:options="investigateFactStore.causeTextOptions"
|
||||
label="ร้ายแรง/ไม่ร้ายแรง"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
<div v-if="formData.statusResult == 'have_cause'" class="col-3">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
dense
|
||||
ref="causeTextRef"
|
||||
v-model="formData.causeText"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
|
||||
]"
|
||||
:options="investigateFactStore.causeTextOptions"
|
||||
label="ร้ายแรง/ไม่ร้ายแรง"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
><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="row col-12">
|
||||
<q-input
|
||||
class="full-width cursor-pointer"
|
||||
outlined
|
||||
ref="reasonRef"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.reason"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เหตุผล'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<q-file
|
||||
class="col-11"
|
||||
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 class="col-1 self-center">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-upload"
|
||||
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-list bordered separator class="full-width q-mt-md">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
v-for="(file, index) in evidenceFiles"
|
||||
:key="index"
|
||||
>
|
||||
<q-item-section>{{ file.name + (index + 1) }}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="blue"
|
||||
icon="mdi-download-outline"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="red"
|
||||
icon="mdi-delete-outline"
|
||||
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -668,87 +771,88 @@ watch(props.data, async () => {
|
|||
</div>
|
||||
</form>
|
||||
</q-card>
|
||||
<div class="col-12 row q-col-gutter-md q-mt-sm">
|
||||
<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"
|
||||
>
|
||||
อัปโหลดไฟล์เอกสารหลักฐาน
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<q-file
|
||||
class="col-11 q-mt-sm"
|
||||
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 class="col-1 self-center">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
class="q-ml-sm q-mt-sm"
|
||||
icon="mdi-upload"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-card flat class="q-pa-md q-mt-sm">
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
|
||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
อัปโหลดไฟล์เอกสารหลักฐาน
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<q-list bordered separator class="full-width">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
v-for="(file, index) in evidenceFiles"
|
||||
:key="index"
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<q-file
|
||||
class="col-11 q-mt-sm"
|
||||
for="#evidenceFiles"
|
||||
outlined
|
||||
dense
|
||||
ref="evidenceFilesRef"
|
||||
v-model="formData.evidenceFiles"
|
||||
label="ไฟล์เอกสารหลักฐาน"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
|
||||
hide-bottom-space
|
||||
>
|
||||
<q-item-section>{{ file.name + (index + 1) }}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="blue"
|
||||
icon="mdi-download-outline"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
|
||||
</q-btn>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="col-1 self-center">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
class="q-ml-sm q-mt-sm"
|
||||
icon="mdi-upload"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<q-list bordered separator class="full-width">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
v-for="(file, index) in evidenceFiles"
|
||||
:key="index"
|
||||
>
|
||||
<q-item-section>{{ file.name + (index + 1) }}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="blue"
|
||||
icon="mdi-download-outline"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="red"
|
||||
icon="mdi-delete-outline"
|
||||
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="red"
|
||||
icon="mdi-delete-outline"
|
||||
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<Dialogbody
|
||||
v-model:Modal="modal"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue