validateForm เพิ่มเรื่องร้องเรียน
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
dd89933261
commit
b00a946c64
8 changed files with 302 additions and 62 deletions
|
|
@ -1,23 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import type { DataOption } from "../../interface/index/Main";
|
||||
// import Type
|
||||
import type {
|
||||
DataOption,
|
||||
MyObjectComplaintsRef,
|
||||
} from "../../interface/index/Main";
|
||||
|
||||
// importStroe
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
|
||||
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก
|
||||
|
||||
const complainstStore = useComplainstDataStore();
|
||||
const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore;
|
||||
const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore; // function จาก store complainstStore
|
||||
|
||||
// options ทั้งหมด
|
||||
const complainantoptions = ref<DataOption[]>([
|
||||
{ id: "0", name: "บุคคล" },
|
||||
{ id: "1", name: "หน่ายงาน" },
|
||||
|
|
@ -67,15 +71,15 @@ const fileDocDataUpload = ref<File[]>([]);
|
|||
onMounted(() => {
|
||||
fectOptioin(complainantoptions.value, agencytoptions.value);
|
||||
});
|
||||
|
||||
// เลือกผู้ร้องเรียน
|
||||
async function selectComplainant(val: string) {
|
||||
complainant.value = "";
|
||||
office.value = "";
|
||||
agency.value = "";
|
||||
if (val === "0") {
|
||||
await fectListname();
|
||||
await fectListname(); // ถ้าเลือกบุกคลจะเรียก function fectListname เรียกรายชื่อจากทะเบียน
|
||||
} else if (val === "1") {
|
||||
await fectOffice();
|
||||
await fectOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fectOffice เรียกโครงสร้างสำนักงาน
|
||||
}
|
||||
}
|
||||
// เรียกรายชื่อ
|
||||
|
|
@ -96,6 +100,7 @@ async function fectListname() {
|
|||
];
|
||||
selectComplainantTpye(listName);
|
||||
}
|
||||
// เรียกโครงสร้างสำนักงาน
|
||||
async function fectOffice() {
|
||||
// const listOffice = [
|
||||
// {
|
||||
|
|
@ -112,22 +117,23 @@ async function fectOffice() {
|
|||
// },
|
||||
// ];
|
||||
}
|
||||
// อัพโหลดไฟล์
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
|
||||
// เลือกระดับการพิจารณา
|
||||
function selectLevel(val: string) {
|
||||
let dayNum = 0;
|
||||
if (val == "0") {
|
||||
dayNum = 45;
|
||||
dayNum = 45; // ปกติ
|
||||
} else if (val == "1") {
|
||||
dayNum = 30;
|
||||
dayNum = 30; // ด่วน
|
||||
} else {
|
||||
dayNum = 15;
|
||||
dayNum = 15; // ด่วนมาก
|
||||
}
|
||||
|
||||
// วันแจ้งเตือนล่วงหน้า
|
||||
if (dateconsideration.value) {
|
||||
const currentDate = new Date(dateconsideration.value);
|
||||
const newDate = new Date(
|
||||
|
|
@ -136,7 +142,56 @@ function selectLevel(val: string) {
|
|||
datewarn.value = newDate;
|
||||
}
|
||||
}
|
||||
// validateForm
|
||||
const complainantTypeRef = ref<any>(null);
|
||||
const complainantRef = ref<any>(null);
|
||||
const officeRef = ref<any>(null);
|
||||
const agencyRef = ref<any>(null);
|
||||
const topicComplaintRef = ref<any>(null);
|
||||
const detailRef = ref<any>(null);
|
||||
const datereceiveRef = ref<any>();
|
||||
const dateconsiderationRef = ref<any>(null);
|
||||
const offenseDescriptionRef = ref<any>(null);
|
||||
const considerationLevelRef = ref<any>(null);
|
||||
const datewarnRef = ref<any>(null);
|
||||
const receivecomplaintsRef = ref<any>(null);
|
||||
const petitionerRef = ref<any>(null);
|
||||
const filesRef = ref<any>(null);
|
||||
|
||||
const objectComplaintsRef: MyObjectComplaintsRef = {
|
||||
complainantType: complainantTypeRef,
|
||||
complainant: complainantRef,
|
||||
office: officeRef,
|
||||
agency: agencyRef,
|
||||
topicComplaint: topicComplaintRef,
|
||||
detail: detailRef,
|
||||
datereceive: datereceiveRef,
|
||||
dateconsideration: dateconsiderationRef,
|
||||
offenseDescription: offenseDescriptionRef,
|
||||
considerationLevel: considerationLevelRef,
|
||||
datewarn: datewarnRef,
|
||||
receivecomplaints: receivecomplaintsRef,
|
||||
petitioner: petitionerRef,
|
||||
files: filesRef,
|
||||
};
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in objectComplaintsRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
|
||||
const property = objectComplaintsRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
} else {
|
||||
console.log("ไม่ผ่าน ");
|
||||
}
|
||||
}
|
||||
// บันทึกข้อมูล
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -162,13 +217,14 @@ function onSubmit() {
|
|||
</div>
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-card flat bordered>
|
||||
<q-form @submit.prevent="onSubmit">
|
||||
<form @submit.prevent="validateForm">
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div
|
||||
class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
<q-select
|
||||
ref="complainantTypeRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="complainantType"
|
||||
|
|
@ -185,26 +241,58 @@ function onSubmit() {
|
|||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
|
||||
)"
|
||||
/>
|
||||
>
|
||||
<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-xs-12 col-sm-2" v-if="complainantType === '0'">
|
||||
<q-select
|
||||
ref="complainantRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="complainant"
|
||||
:options="complainstStore.optionListName"
|
||||
label="ราชชื่อจากทะเบียรประวัติ"
|
||||
label="รายชื่อจากทะเบียรประวัติ"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
|
||||
lazy-rules
|
||||
use-input
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantOP'
|
||||
)"
|
||||
><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-xs-12 col-sm-2" v-if="complainantType === '1'">
|
||||
<q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
|
||||
<q-input
|
||||
ref="officeRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="office"
|
||||
label="เลือกสำนักงาน"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
<q-select
|
||||
ref="agencyRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="agency"
|
||||
|
|
@ -220,10 +308,19 @@ function onSubmit() {
|
|||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
|
||||
)"
|
||||
/>
|
||||
>
|
||||
<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-xs-12 col-sm-12">
|
||||
<q-input
|
||||
ref="topicComplaintRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="topicComplaint"
|
||||
|
|
@ -236,6 +333,7 @@ function onSubmit() {
|
|||
</div>
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<q-input
|
||||
ref="detailRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="detail"
|
||||
|
|
@ -264,6 +362,7 @@ function onSubmit() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="datereceiveRef"
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
|
|
@ -306,6 +405,7 @@ function onSubmit() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateconsiderationRef"
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
|
|
@ -334,6 +434,7 @@ function onSubmit() {
|
|||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
<q-select
|
||||
ref="offenseDescriptionRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="offenseDescription"
|
||||
|
|
@ -349,6 +450,7 @@ function onSubmit() {
|
|||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
<q-select
|
||||
ref="considerationLevelRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="considerationLevel"
|
||||
|
|
@ -382,6 +484,7 @@ function onSubmit() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="datewarnRef"
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
|
|
@ -407,6 +510,7 @@ function onSubmit() {
|
|||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
<q-select
|
||||
ref="receivecomplaintsRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="receivecomplaints"
|
||||
|
|
@ -423,6 +527,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6"></div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<q-input
|
||||
ref="petitionerRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="petitioner"
|
||||
|
|
@ -433,6 +538,7 @@ function onSubmit() {
|
|||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<q-file
|
||||
ref="filesRef"
|
||||
class="col-xs-12 col-sm-10"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -443,6 +549,7 @@ function onSubmit() {
|
|||
lazy-rules
|
||||
accept=".pdf,.xlsx,.doc"
|
||||
clearable
|
||||
:rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
|
|
@ -463,7 +570,7 @@ function onSubmit() {
|
|||
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</q-form>
|
||||
</form>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
|
|||
const router = useRouter();
|
||||
|
||||
const complainstStore = useComplainstDataStore();
|
||||
const { fectComplainst } = complainstStore;
|
||||
const { fectComplainst } = complainstStore; // function จาก stores
|
||||
|
||||
//ข้อมูล Table
|
||||
const filterTable = ref<string>("");
|
||||
|
|
@ -99,6 +99,7 @@ onMounted(async () => {
|
|||
await fecthListComplaints();
|
||||
});
|
||||
|
||||
// เรีนกรายการเรื่องร้องเรียน
|
||||
async function fecthListComplaints() {
|
||||
const listData = [
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue