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 = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ import { useOrderStore } from "../../stroes/OrderStore";
|
|||
|
||||
const router = useRouter();
|
||||
const OrderStore = useOrderStore();
|
||||
const { fecthOrder } = OrderStore;
|
||||
const { fecthOrder } = OrderStore; // function จาก stores
|
||||
|
||||
// ข้อมูล table
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "subject",
|
||||
|
|
@ -74,13 +75,13 @@ const visibleColumns = ref<string[]>([
|
|||
"signer",
|
||||
"statusorder",
|
||||
]);
|
||||
|
||||
const filterTable = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
await fecthListOrder();
|
||||
});
|
||||
|
||||
// เรียกรายการคำสั่ง จาก API
|
||||
async function fecthListOrder() {
|
||||
const listData = [
|
||||
{
|
||||
|
|
@ -108,9 +109,10 @@ async function fecthListOrder() {
|
|||
statusorder: "เสร็จสิ้นแล้ว",
|
||||
},
|
||||
];
|
||||
await fecthOrder(listData);
|
||||
await fecthOrder(listData); // ส่งข้อมูลไปยัง stores
|
||||
}
|
||||
|
||||
// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
|
||||
function redirectToPageadd() {
|
||||
router.push(`/discipline-order/add`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
// import step
|
||||
import step01 from "./Step01.vue";
|
||||
import step02 from "./Step02.vue";
|
||||
import step03 from "./Step03.vue";
|
||||
|
|
@ -9,11 +10,12 @@ import step03 from "./Step03.vue";
|
|||
const router = useRouter();
|
||||
|
||||
const step = ref<number>(1);
|
||||
|
||||
// nextStep
|
||||
const nextStep = async () => {
|
||||
localStorage.setItem("currentStep", step.value.toString());
|
||||
step.value++;
|
||||
};
|
||||
// previousStep
|
||||
const previousStep = async () => {
|
||||
localStorage.setItem("currentStep", step.value.toString());
|
||||
step.value--;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type { DataOption } from "../../interface/index/Main";
|
||||
import type { DataOption, MyObjectRef } from "../../interface/index/Main";
|
||||
// importStroe
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const next = () => props.next();
|
||||
|
||||
// Options ต่างๆ
|
||||
const orderTypeOptions = ref<DataOption[]>([
|
||||
{ id: "0", name: "ประเภทคำสั่ง 1" },
|
||||
{ id: "1", name: "ประเภทคำสั่ง 2" },
|
||||
|
|
@ -37,7 +37,7 @@ const listInvestigationOptions = ref<DataOption[]>([
|
|||
{ id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
|
||||
{ id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
|
||||
]);
|
||||
|
||||
// ตัวแปรทั้งหมด
|
||||
const orderType = ref<string>("");
|
||||
const orderBy = ref<string>("");
|
||||
const listInvestigation = ref<string>("");
|
||||
|
|
@ -49,6 +49,47 @@ const authorityPosition = ref<string>("");
|
|||
const subject = ref<string>("");
|
||||
const mistakeDetail = ref<string>("");
|
||||
|
||||
// validateForm
|
||||
const orderTypeRef = ref<any>(null);
|
||||
const orderByRef = ref<any>(null);
|
||||
const listInvestigationRef = ref<any>(null);
|
||||
const authorityRef = ref<any>(null);
|
||||
const orderNumberRef = ref<any>(null);
|
||||
const dateYearRef = ref<any>(null);
|
||||
const dateRef = ref<any>(null);
|
||||
const authorityPositionRef = ref<any>(null);
|
||||
const subjectRef = ref<any>(null);
|
||||
const mistakeDetailRef = ref<any>(null);
|
||||
const myObjectRef: MyObjectRef = {
|
||||
orderType: orderTypeRef,
|
||||
orderBy: orderByRef,
|
||||
listInvestigation: listInvestigationRef,
|
||||
authority: authorityRef,
|
||||
orderNumber: orderNumberRef,
|
||||
dateYear: dateYearRef,
|
||||
date: dateRef,
|
||||
authorityPosition: authorityPositionRef,
|
||||
subject: subjectRef,
|
||||
mistakeDetail: mistakeDetailRef,
|
||||
};
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in myObjectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(myObjectRef, key)) {
|
||||
const property = myObjectRef[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,
|
||||
|
|
@ -62,12 +103,13 @@ function onSubmit() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-form @submit.prevent="onSubmit">
|
||||
<form @submit.prevent.stop="validateForm">
|
||||
<div class="col-12 row q-pa-lg">
|
||||
<div class="col-xs-12 col-sm-12 q-col-gutter-x-lg row q-col-gutter-y-xs">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
ประเภทคำสั่ง
|
||||
<q-select
|
||||
ref="orderTypeRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="orderType"
|
||||
|
|
@ -84,6 +126,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งโดย
|
||||
<q-select
|
||||
ref="orderByRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="orderBy"
|
||||
|
|
@ -100,6 +143,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
เลือกรายการสอบสวนความผิดทางวินัย
|
||||
<q-select
|
||||
ref="listInvestigationRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="listInvestigation"
|
||||
|
|
@ -118,6 +162,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
ผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
ref="authorityRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="authority"
|
||||
|
|
@ -130,6 +175,7 @@ function onSubmit() {
|
|||
<div class="col-6">
|
||||
คำสั่งที่
|
||||
<q-input
|
||||
ref="orderNumberRef"
|
||||
outlined
|
||||
dense
|
||||
v-model="orderNumber"
|
||||
|
|
@ -157,6 +203,7 @@ function onSubmit() {
|
|||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateYearRef"
|
||||
:model-value="dateYear + 543"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
|
||||
:label="`${'พ.ศ.'}`"
|
||||
|
|
@ -187,6 +234,7 @@ function onSubmit() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateRef"
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
|
|
@ -208,6 +256,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
ตำแหน่งผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
ref="authorityPositionRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="authorityPosition"
|
||||
|
|
@ -219,6 +268,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งเรื่อง
|
||||
<q-input
|
||||
ref="subjectRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="subject"
|
||||
|
|
@ -230,6 +280,7 @@ function onSubmit() {
|
|||
<div class="col-xs-12 col-sm-12">
|
||||
รายละเอียดการกระทำความผิด
|
||||
<q-input
|
||||
ref="mistakeDetailRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="mistakeDetail"
|
||||
|
|
@ -252,7 +303,7 @@ function onSubmit() {
|
|||
type="submit"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
|
|
@ -11,10 +12,79 @@ const props = defineProps({
|
|||
});
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const name = ref<string>("");
|
||||
const lastname = ref<string>("");
|
||||
const age = ref<string>("");
|
||||
|
||||
const nameRef = ref<any>(null);
|
||||
const ageRef = ref<any>(null);
|
||||
const lastnameRef = ref<any>(null);
|
||||
const myObject: MyObject = {
|
||||
name: nameRef,
|
||||
lastname: lastnameRef,
|
||||
age: ageRef,
|
||||
};
|
||||
interface MyObject {
|
||||
name: any;
|
||||
lastname: any;
|
||||
age: any;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
const hasError = [];
|
||||
for (const key in myObject) {
|
||||
if (Object.prototype.hasOwnProperty.call(myObject, key)) {
|
||||
const property = myObject[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
console.log("ผ่าน สำเร็จ!");
|
||||
} else {
|
||||
console.log("ไม่ผ่าน ");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div><h1>step02</h1></div>
|
||||
<form @submit.prevent.stop="onSubmit" class="q-gutter-md">
|
||||
<q-input
|
||||
ref="nameRef"
|
||||
filled
|
||||
v-model="name"
|
||||
label="Your name *"
|
||||
hint="Name and surname"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || `${'Name and surname'}`]"
|
||||
/>
|
||||
<q-input
|
||||
ref="lastnameRef"
|
||||
filled
|
||||
v-model="lastname"
|
||||
label="lastname *"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || `${'lastname'}`]"
|
||||
/>
|
||||
<q-input
|
||||
ref="ageRef"
|
||||
filled
|
||||
type="number"
|
||||
v-model="age"
|
||||
label="Your age *"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || `${'Your age'}`]"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<q-btn label="Submit" type="submit" color="primary" />
|
||||
</div>
|
||||
</form>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -22,11 +22,28 @@ interface MyObjectRef {
|
|||
mistakeDetail: any,
|
||||
[key: string]: any;
|
||||
}
|
||||
interface MyObjectComplaintsRef {
|
||||
complainantType: any
|
||||
complainant: any
|
||||
office: any
|
||||
agency: any
|
||||
topicComplaint: any
|
||||
datereceive: any
|
||||
dateconsideration: any
|
||||
offenseDescription: any
|
||||
considerationLevel: any
|
||||
datewarn: any
|
||||
receivecomplaints: any
|
||||
petitioner: any
|
||||
files: any
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export type {
|
||||
DataOption,
|
||||
investigatefactsDataRowType,
|
||||
MyObjectRef,
|
||||
MyObjectComplaintsRef,
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import type { DataOption } from "../interface/index/Main";
|
|||
|
||||
export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
|
||||
const rows = ref<any>([])
|
||||
const optionListName = ref<any>([{}])
|
||||
|
||||
|
||||
|
||||
function fectComplainst(data: any) {
|
||||
|
|
@ -21,49 +21,39 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
|
|||
rows.value = datalist
|
||||
}
|
||||
|
||||
function selectComplainantTpye(list: any) {
|
||||
optionListName.value = list
|
||||
}
|
||||
|
||||
|
||||
const complainantoptionsMain = ref<DataOption[]>()
|
||||
const complainantoptions = ref<DataOption[]>()
|
||||
const agencytoptionsMain = ref<DataOption[]>()
|
||||
const agencytoptions = ref<DataOption[]>()
|
||||
const optionListNameMain = ref<DataOption[]>([])
|
||||
const optionListName = ref<DataOption[]>([])
|
||||
function fectOptioin(complainantoptions: any, agencytoptions: any) {
|
||||
complainantoptionsMain.value = complainantoptions
|
||||
agencytoptionsMain.value = agencytoptions
|
||||
|
||||
}
|
||||
function selectComplainantTpye(list: any) {
|
||||
optionListNameMain.value = list
|
||||
optionListName.value = list
|
||||
}
|
||||
function filterSelector(val: any, update: Function, type: string) {
|
||||
console.log(val, type);
|
||||
let data: DataOption[] | undefined = undefined;
|
||||
let filter: DataOption[] | undefined = undefined;
|
||||
if (type == "filtercomplainantType") {
|
||||
data = complainantoptionsMain.value
|
||||
} else if (type == "filteragencytoptions") {
|
||||
data = agencytoptionsMain.value
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
if (data) {
|
||||
filter = data.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "filtercomplainantType") {
|
||||
complainantoptions.value = filter
|
||||
} else if (type = "filteragencytoptions") {
|
||||
agencytoptions.value = filter
|
||||
update(() => {
|
||||
if (type === "filtercomplainantType" && complainantoptionsMain.value) {
|
||||
complainantoptions.value = complainantoptionsMain.value.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
} else if (type === "filteragencytoptions" && agencytoptionsMain.value) {
|
||||
agencytoptions.value = agencytoptionsMain.value.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
} else if (type === "filtercomplainantOP" && optionListNameMain.value) {
|
||||
optionListName.value = optionListNameMain.value.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
return {
|
||||
rows,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue