ปรับ form สืบสวนข้อเท็จจริง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
31883d8794
commit
7f3ed1368b
1 changed files with 98 additions and 34 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import router from "@/router";
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { onMounted, ref, watch, reactive, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
|
||||
|
|
@ -11,6 +11,7 @@ import type {
|
|||
import { diffDates } from "@fullcalendar/core/internal";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
|
||||
/**เรียกใช้ store */
|
||||
const investigateFactStore = useInvestigateFactStore();
|
||||
|
|
@ -67,6 +68,7 @@ const formData = reactive<FormData>({
|
|||
causeText: "",
|
||||
complaintStatus: "",
|
||||
});
|
||||
const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectInvestigate: MyObjectInvestigateRef = {
|
||||
|
|
@ -85,6 +87,10 @@ const objectInvestigate: MyObjectInvestigateRef = {
|
|||
causeText: causeTextRef,
|
||||
};
|
||||
|
||||
const statusStep = computed(() => {
|
||||
return route.name === "/discipline-disciplinaryEdit" ? true : false;
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
|
|
@ -153,6 +159,7 @@ async function fetchDataDetail() {
|
|||
}
|
||||
onMounted(async () => {
|
||||
await fetchDataDetail();
|
||||
console.log(route.name);
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -181,11 +188,11 @@ watch(props.data, async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="q-mt-sm">
|
||||
<q-card flat class="q-mt-sm">
|
||||
<form @submit.prevent="validateForm">
|
||||
<div class="q-pa-md q-col-gutter-md">
|
||||
<div class="col-xs-12 row items-center q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<!-- <div class="col-6">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
|
|
@ -212,9 +219,9 @@ watch(props.data, async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="col-3">
|
||||
<!-- <div class="col-3">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
|
|
@ -241,10 +248,12 @@ watch(props.data, async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
:readonly="statusStep"
|
||||
:disable="statusStep"
|
||||
for="#investigation"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
|
|
@ -301,7 +310,7 @@ watch(props.data, async () => {
|
|||
>
|
||||
วันที่สืบสวน
|
||||
<q-checkbox
|
||||
v-if="data != null"
|
||||
v-if="data != null && statusStep === false"
|
||||
for="#clickTime"
|
||||
size="md"
|
||||
v-model="formData.clickTime"
|
||||
|
|
@ -318,7 +327,7 @@ watch(props.data, async () => {
|
|||
<div class="col-3" v-if="!formData.clickTime">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="isUpdate"
|
||||
:readonly="isUpdate && statusStep"
|
||||
v-model="formData.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
|
|
@ -334,7 +343,7 @@ watch(props.data, async () => {
|
|||
for="#date"
|
||||
class="full-width cursor-pointer"
|
||||
ref="dateRef"
|
||||
:readonly="isUpdate"
|
||||
:readonly="statusStep && isUpdate"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
|
|
@ -399,7 +408,7 @@ watch(props.data, async () => {
|
|||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateEnd"
|
||||
:readonly="isUpdate"
|
||||
:readonly="statusStep && isUpdate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -414,7 +423,7 @@ watch(props.data, async () => {
|
|||
for="#dateEnd"
|
||||
ref="dateEndRef"
|
||||
class="full-width cursor-pointer"
|
||||
:readonly="isUpdate"
|
||||
:readonly="statusStep && isUpdate"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
|
|
@ -446,7 +455,7 @@ watch(props.data, async () => {
|
|||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
for="#complaintdetail"
|
||||
class="full-width cursor-pointer"
|
||||
|
|
@ -463,9 +472,9 @@ watch(props.data, async () => {
|
|||
:label="`${'รายละเอียดเรื่องร้องเรียน'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12">
|
||||
<!-- <div class="col-12">
|
||||
<q-file
|
||||
for="#fileComplaint"
|
||||
outlined
|
||||
|
|
@ -481,7 +490,7 @@ watch(props.data, async () => {
|
|||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
|
|
@ -500,30 +509,13 @@ watch(props.data, async () => {
|
|||
/>
|
||||
</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 q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
for="#fault"
|
||||
outlined
|
||||
dense
|
||||
:readonly="statusStep"
|
||||
lazy-rules
|
||||
ref="statusResultRef"
|
||||
v-model="formData.statusResult"
|
||||
|
|
@ -588,4 +580,76 @@ 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>
|
||||
<q-btn class="col q-mt-sm" flat round color="primary" icon="upload">
|
||||
<q-tooltip>อัปโหลดเอกสารหลักฐาน</q-tooltip></q-btn
|
||||
>
|
||||
</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>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue