Validate เพิ่ม id /for เทส

This commit is contained in:
AnandaTon 2023-10-24 15:11:34 +07:00
parent c602ca401b
commit 4b5b2530d2
5 changed files with 221 additions and 188 deletions

View file

@ -73,7 +73,7 @@
:borderless="!edit"
v-model="informaData.firstname"
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
:label="`${'ชื่อ(ภาษาไทย)'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
@ -87,7 +87,7 @@
:borderless="!edit"
v-model="informaData.lastname"
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
:label="`${'นามสกุล(ภาษาไทย)'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
@ -116,7 +116,11 @@
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="informaData.birthDate ? date2Thai(informaData.birthDate) : null"
:model-value="
informaData.birthDate
? date2Thai(informaData.birthDate)
: null
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
@ -1054,7 +1058,9 @@ const editData = async () => {
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
birthDate: informaData.value.birthDate ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
birthDate: informaData.value.birthDate
? dateToISO(informaData.value.birthDate)
: dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,

View file

@ -1,12 +1,15 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import type {
FormData,
disciplinaryRef,
} from "@/modules/11_discipline/interface/request/disciplinary";
const investigateDis = useInvestigateDisStore();
const { fecthDirector } = investigateDis;
@ -36,42 +39,107 @@ const popup = () => {
};
const mixin = useCounterMixin();
const { date2Thai, hideLoader } = mixin;
const initialPagination = ref<any>({
rowsPerPage: 0,
});
const { date2Thai, hideLoader, dialogConfirm } = mixin;
const router = useRouter();
const route = useRoute();
const rows = ref([]);
const modal = ref<boolean>(false);
const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const type = ref<string>("");
const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const dateInvestigate = ref<Date>(new Date());
const dateAllegation = ref<Date>(new Date());
const dateEvident = ref<Date>(new Date());
const filterKeyword2 = ref<string>("");
const typefault = ref<string>("");
const faultLevel = ref<string>("");
const type = ref<string>("");
const Complaint = ref<string>("");
const trueDetail = ref<string>("");
const evidence = ref<string>("");
const recordAccuser = ref<string>("");
const witnesses = ref<string>("");
const InvestResults = ref<string>("");
const files = ref<File>();
const filesEvidence = ref<File>();
const filesRecordAccuser = ref<File>();
const filesWitnesses = ref<File>();
const filesEtc = ref<File>();
const complaintRef = ref<Object | null>(null);
const dateInvestigateRef = ref<Object | null>(null);
const dateAllegationRef = ref<Object | null>(null);
const dateEvidentRef = ref<Object | null>(null);
const casefaultRef = ref<Object | null>(null);
const refLawRef = ref<Object | null>(null);
const typefaultRef = ref<Object | null>(null);
const faultLevelRef = ref<Object | null>(null);
const detailComplaintRef = ref<Object | null>(null);
const whereInvestigateRef = ref<Object | null>(null);
const witnessesRef = ref<Object | null>(null);
const InvestResultsRef = ref<Object | null>(null);
const filesEvidenceRef = ref<Object | null>(null);
const filesRecordAccuserRef = ref<Object | null>(null);
const filesWitnessesRef = ref<Object | null>(null);
const filesEtcRef = ref<Object | null>(null);
const trueDetailRef = ref<Object | null>(null);
const evidenceRef = ref<Object | null>(null);
const recordAccuserRef = ref<Object | null>(null);
const fileDocDataUpload = ref<File[]>([]);
const refRaw = ref<string>("");
const casefault = ref<string>("");
const whereInvestigate = ref<string>("");
const initialPagination = ref<any>({
rowsPerPage: 0,
});
const formData = reactive<FormData>({
Complaint: "",
dateInvestigate: null,
dateAllegation: null,
dateEvident: null,
casefault: "",
typefault: "",
faultLevel: "",
refLaw: "",
detailComplaint: "",
whereInvestigate: "",
trueDetail: "",
evidence: "",
recordAccuser: "",
witnesses: "",
InvestResults: "",
filesEvidence: null,
filesRecordAccuser: null,
filesWitnesses: null,
filesEtc: null,
});
const objectdisciplinary: disciplinaryRef = {
Complaint: complaintRef,
dateInvestigate: dateInvestigateRef,
dateAllegation: dateAllegationRef,
dateEvident: dateEvidentRef,
casefault: casefaultRef,
typefault: typefaultRef,
faultLevel: faultLevelRef,
refLaw: refLawRef,
detailComplaint: detailComplaintRef,
whereInvestigate: whereInvestigateRef,
trueDetail: trueDetailRef,
evidence: evidenceRef,
recordAccuser: recordAccuserRef,
witnesses: witnessesRef,
InvestResults: InvestResultsRef,
filesEvidence: filesEvidenceRef,
filesRecordAccuser: filesRecordAccuserRef,
filesWitnesses: filesWitnessesRef,
filesEtc: filesEtcRef,
};
function validateForm() {
const hasError = [];
for (const key in objectdisciplinary) {
if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
const property = objectdisciplinary[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("ไม่ผ่าน ");
console.log(hasError);
}
}
const routeName = router.currentRoute.value.name;
@ -90,7 +158,16 @@ const fileUploadDoc = async (files: any) => {
};
//
const checkSave = () => {};
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData);
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
const deleteData = async (id: string) => {
console.log("delete");
@ -115,7 +192,7 @@ const clickBack = () => {
/>
{{ "เพิ่มการสอบสวนความผิดทางวินัย" }}
</div>
<q-form ref="myForm">
<form @submit.prevent="validateForm">
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
@ -126,7 +203,9 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="Complaint"
v-model="formData.Complaint"
for="#Complaint"
ref="complaintRef"
label="เรื่องร้องเรียน"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
@ -134,6 +213,7 @@ const clickBack = () => {
<datepicker
menu-class-name="modalfix"
v-model="dateInvestigate"
ref="dateInvestigateRef"
:locale="'th'"
autoApply
class="col-xs-12 col-sm-4"
@ -173,6 +253,7 @@ const clickBack = () => {
</datepicker>
<datepicker
menu-class-name="modalfix"
ref="dateAllegationRef"
v-model="dateAllegation"
class="col-xs-12 col-sm-4"
:locale="'th'"
@ -216,6 +297,7 @@ const clickBack = () => {
</datepicker>
<datepicker
menu-class-name="modalfix"
ref="dateEvidentRef"
v-model="dateEvident"
:locale="'th'"
autoApply
@ -318,7 +400,9 @@ const clickBack = () => {
class="col-xs-12 col-sm-6"
dense
outlined
v-model="casefault"
ref="casefaultRef"
v-model="formData.casefault"
for="#casefault"
label="กรณีมีความผิด"
:rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
lazy-rules
@ -327,7 +411,9 @@ const clickBack = () => {
class="col-xs-12 col-sm-6"
dense
outlined
v-model="whereInvestigate"
for="#whereInvestigate"
ref="whereInvestigateRef"
v-model="formData.whereInvestigate"
label="สอบสวนที่"
:rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
lazy-rules
@ -336,7 +422,9 @@ const clickBack = () => {
dense
class="col-xs-12 col-sm-3"
outlined
v-model="typefault"
for="#typefault"
ref="typefaultRef"
v-model="formData.typefault"
option-label="name"
option-value="id"
:options="investigateDis.optionsTypefault"
@ -346,7 +434,9 @@ const clickBack = () => {
dense
class="col-xs-12 col-sm-3"
outlined
v-model="faultLevel"
for="#faultLevel"
ref="faultLevelRef"
v-model="formData.faultLevel"
option-label="name"
option-value="id"
:options="investigateDis.optionsfaultLevel"
@ -355,8 +445,10 @@ const clickBack = () => {
<q-input
class="col-xs-12 col-sm-6 q-pb-md"
dense
for="#refLaw"
outlined
v-model="refRaw"
ref="refLawRef"
v-model="formData.refLaw"
label="อ้างอิงมาตราตามกฎหมาย"
:rules="[
(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
@ -367,7 +459,9 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="Complaint"
for="#detailComplaint"
ref="detailComplaintRef"
v-model="formData.detailComplaint"
label="รายละเอียดเรื่องร้องเรียน"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
@ -376,7 +470,9 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="trueDetail"
for="#trueDetail"
ref="trueDetailRef"
v-model="formData.trueDetail"
label="รายละเอียดสืบสวนข้อเท็จจริง"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
@ -385,7 +481,9 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="evidence"
for="#evidence"
ref="evidenceRef"
v-model="formData.evidence"
label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
@ -394,7 +492,8 @@ const clickBack = () => {
class="col-12 q-pb-md"
outlined
dense
v-model="filesEvidence"
ref="filesEvidenceRef"
v-model="formData.filesEvidence"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
hide-bottom-space
@ -409,7 +508,8 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="recordAccuser"
ref="recordAccuserRef"
v-model="formData.recordAccuser"
label="บันทึกถ้อยคำของผู้กล่าวหา"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
@ -418,7 +518,8 @@ const clickBack = () => {
class="col-12 q-pb-md"
outlined
dense
v-model="filesRecordAccuser"
ref="filesRecordAccuserRef"
v-model="formData.filesRecordAccuser"
@added="fileUploadDoc"
label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
hide-bottom-space
@ -433,7 +534,9 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="witnesses"
for="#witnesses"
ref="witnessesRef"
v-model="formData.witnesses"
label="พยานและการบันทึกถ้อยคำ"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
@ -442,7 +545,8 @@ const clickBack = () => {
class="col-12 q-pb-md"
outlined
dense
v-model="filesWitnesses"
ref="filesWitnessesRef"
v-model="formData.filesWitnesses"
@added="fileUploadDoc"
label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
hide-bottom-space
@ -457,7 +561,9 @@ const clickBack = () => {
class="col-12"
dense
outlined
v-model="InvestResults"
for="#InvestResults"
ref="InvestResultsRef"
v-model="formData.InvestResults"
label="ผลการสอบสวน"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
@ -466,7 +572,8 @@ const clickBack = () => {
class="col-12"
outlined
dense
v-model="filesEtc"
ref="filesEtcRef"
v-model="formData.filesEtc"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐานอื่น ๆ"
hide-bottom-space
@ -485,18 +592,18 @@ const clickBack = () => {
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
id="onSubmit"
type="submit"
flat
round
color="public"
@click="checkSave"
color="secondary"
icon="mdi-content-save-outline"
><q-tooltip>บทกขอม</q-tooltip></q-btn
>
<q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
</q-btn>
</div>
</q-card>
</div>
</q-form>
</form>
</div>
<Dialogbody
v-model:Modal="modal"

View file

@ -22,139 +22,22 @@ const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const channel = ref<string>("");
onMounted(async () => {
// if (route.params.id) {
// // params id
// await fetchData();
// }
});
onMounted(async () => {});
//
const fetchData = async () => {
// edit.value = true;
// showLoader();
// await http
// .get(config.API.getRoundInsignia(id.value))
// .then((res) => {
// const data = res.data.result;
// id.value = data.period_id;
// roundInsig.value =
// options.value.filter((r: any) => r.value == data.period_round).length >
// 0
// ? options.value.filter((r: any) => r.value == data.period_round)[0]
// : null;
// yearly.value = data.period_year;
// datelast.value = data.period_amount;
// dateStart.value = new Date(data.period_start);
// dateEnd.value = new Date(data.period_end);
// files.value = data.period_doc;
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
};
const fetchData = async () => {};
const deleteData = async (id: string) => {
// showLoader();
// await http
// .delete(config.API.periodExamId(id))
// .then((res) => {
// success($q, "");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// });
};
const deleteData = async (id: string) => {};
//
//
const checkSave = () => {
// if (myForm.value !== null) {
// myForm.value.validate().then(async (success) => {
// if (success) {
// dialogConfirm($q, () => SaveData());
// } else if (Number(datelast.value) !== 0) {
// dialogMessageNotify($q, "");
// }
// });
// }
};
const checkSave = () => {};
//
const SaveData = async () => {
// if (edit.value) {
// await editData(id.value);
// } else {
// await addData();
// clickBack();
// }
};
const SaveData = async () => {};
//
const addData = async () => {
// const formData = new FormData();
// const name = ` ${
// roundInsig.value.value
// } ${yearly.value + 543} `;
// formData.append("name", name);
// formData.append("year", yearly.value.toString());
// formData.append("amount", datelast.value.toString());
// formData.append("round", roundInsig.value.value);
// if (dateStart.value !== null) {
// formData.append("startDate", dateToISO(dateStart.value));
// }
// if (dateEnd.value !== null) {
// formData.append("endDate", dateToISO(dateEnd.value));
// }
// formData.append("file", files.value);
// showLoader();
// await http
// .post(config.API.listRoundInsignia(), formData)
// .then(() => {
// success($q, "");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// });
};
const addData = async () => {};
//
const editData = async (id: string) => {
// const formData = new FormData();
// const name = ` ${
// roundInsig.value.value
// } ${yearly.value + 543}`;
// formData.append("name", name);
// formData.append("year", yearly.value.toString());
// formData.append("amount", datelast.value.toString());
// formData.append("round", roundInsig.value.value);
// if (dateStart.value !== null) {
// formData.append("startDate", dateToISO(dateStart.value));
// }
// if (dateEnd.value !== null) {
// formData.append("endDate", dateToISO(dateEnd.value));
// }
// formData.append("file", files.value);
// showLoader();
// await http
// .put(config.API.editRoundInsignia(id), formData)
// .then(() => {
// success($q, "");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// clickBack();
// });
};
const editData = async (id: string) => {};
const clickBack = () => {
router.push(`/discipline/channel`);
@ -187,6 +70,7 @@ const clickBack = () => {
dense
outlined
v-model="channel"
for="channel"
label="กรอกชื่อช่องทาง"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
/>

View file

@ -132,6 +132,7 @@ onMounted(() => {});
dense
v-model="filterKeyword"
ref="filterRef"
for="filterKeyword"
outlined
debounce="300"
placeholder="ค้นหา"
@ -150,6 +151,7 @@ onMounted(() => {});
<q-select
v-model="visibleColumns"
multiple
for="visibleColumns"
outlined
dense
options-dense
@ -204,18 +206,6 @@ onMounted(() => {});
</q-td>
</q-tr>
</template>
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template> -->
</d-table>
</div>
</q-card>

View file

@ -0,0 +1,46 @@
interface FormData {
Complaint: string;
dateInvestigate: Date | null;
dateAllegation: Date | null;
dateEvident: Date | null;
filesEvidence: File | null;
filesRecordAccuser: File | null;
filesWitnesses: File | null;
filesEtc: File | null;
casefault: string;
typefault: string;
faultLevel: string;
refLaw: string;
detailComplaint: string;
whereInvestigate: string;
trueDetail: string;
evidence: string;
recordAccuser: string;
witnesses: string;
InvestResults: string;
}
interface disciplinaryRef {
Complaint: object | null;
dateInvestigate: object | null;
dateAllegation: object | null;
dateEvident: object | null;
filesEvidence: object | null;
filesRecordAccuser: object | null;
filesWitnesses: object | null;
filesEtc: object | null;
casefault: object | null;
typefault: object | null;
faultLevel: object | null;
refLaw: object | null;
detailComplaint: object | null;
whereInvestigate: object | null;
trueDetail: object | null;
evidence: object | null;
recordAccuser: object | null;
witnesses: object | null;
InvestResults: object | null;
[key: string]: any;
}
export type { FormData, disciplinaryRef };