ปรับวินัย
This commit is contained in:
parent
7b56868c1f
commit
3482ec0ae4
18 changed files with 1222 additions and 70 deletions
|
|
@ -1,354 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
||||
import type {
|
||||
FormData,
|
||||
MyObjectRef,
|
||||
} from "@/modules/11_discipline/interface/request/order";
|
||||
// importStroe
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const $q = useQuasar();
|
||||
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
/** Options ต่างๆ */
|
||||
const orderTypeOptions = ref<DataOption[]>([
|
||||
{ id: "0", name: "ประเภทคำสั่ง 1" },
|
||||
{ id: "1", name: "ประเภทคำสั่ง 2" },
|
||||
{ id: "2", name: "ประเภทคำสั่ง 3" },
|
||||
]);
|
||||
const orderByOptions = ref<DataOption[]>([
|
||||
{ id: "0", name: "คำสั่งโดย 1" },
|
||||
{ id: "1", name: "คำสั่งโดย 2" },
|
||||
{ id: "2", name: "คำสั่งโดย 3" },
|
||||
]);
|
||||
const listInvestigationOptions = ref<DataOption[]>([
|
||||
{ id: "0", name: "รายการสอบสวนความผิดทางวินัย 1" },
|
||||
{ id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
|
||||
{ id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
|
||||
]);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
orderType: "",
|
||||
orderBy: "",
|
||||
listInvestigation: "",
|
||||
authority: "",
|
||||
orderNumber: "",
|
||||
dateYear: 0,
|
||||
date: null,
|
||||
authorityPosition: "",
|
||||
subject: "",
|
||||
mistakeDetail: "",
|
||||
});
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const orderTypeRef = ref<Object | null>(null);
|
||||
const orderByRef = ref<Object | null>(null);
|
||||
const listInvestigationRef = ref<Object | null>(null);
|
||||
const authorityRef = ref<Object | null>(null);
|
||||
const orderNumberRef = ref<Object | null>(null);
|
||||
const dateYearRef = ref<Object | null>(null);
|
||||
const dateRef = ref<Object | null>(null);
|
||||
const authorityPositionRef = ref<Object | null>(null);
|
||||
const subjectRef = ref<Object | null>(null);
|
||||
const mistakeDetailRef = ref<Object | null>(null);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const myObjectRef: MyObjectRef = {
|
||||
orderType: orderTypeRef,
|
||||
orderBy: orderByRef,
|
||||
listInvestigation: listInvestigationRef,
|
||||
authority: authorityRef,
|
||||
orderNumber: orderNumberRef,
|
||||
dateYear: dateYearRef,
|
||||
date: dateRef,
|
||||
authorityPosition: authorityPositionRef,
|
||||
subject: subjectRef,
|
||||
mistakeDetail: mistakeDetailRef,
|
||||
};
|
||||
|
||||
/**ฟังชั่น ไป step ต่อไป */
|
||||
function next() {
|
||||
props.next();
|
||||
}
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
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() {
|
||||
console.log(formData);
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
next();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent.stop="validateForm">
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<div class="row col-xs-12 col-sm-12 q-col-gutter-x-sm">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
ประเภทคำสั่ง
|
||||
<q-select
|
||||
for="selectOrderType"
|
||||
ref="orderTypeRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.orderType"
|
||||
:options="orderTypeOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
|
||||
lazy-rules
|
||||
use-input
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งโดย
|
||||
<q-select
|
||||
for="selectOrderBy"
|
||||
ref="orderByRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.orderBy"
|
||||
:options="orderByOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
|
||||
lazy-rules
|
||||
use-input
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
เลือกรายการสอบสวนความผิดทางวินัย
|
||||
<q-select
|
||||
for="selectListInvestigation"
|
||||
ref="listInvestigationRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.listInvestigation"
|
||||
:options="listInvestigationOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกรายการสอบสวนความผิดทางวินัย'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
use-input
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
ผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
for="inputAuthority"
|
||||
ref="authorityRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.authority"
|
||||
placeholder="กรอกผู้มีอำนาจลงนาม"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row col-xs-7 col-sm-3">
|
||||
<div class="col-6">
|
||||
คำสั่งที่
|
||||
<q-input
|
||||
for="inputOrderNumber"
|
||||
ref="orderNumberRef"
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.orderNumber"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
|
||||
lazy-rules
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<label class="col-1 flex justify-center items-center text-bold"
|
||||
>/</label
|
||||
>
|
||||
<div class="col-5">
|
||||
พศ
|
||||
<datepicker
|
||||
v-model="formData.dateYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="inputDateYear"
|
||||
ref="dateYearRef"
|
||||
:model-value="
|
||||
formData.dateYear ? formData.dateYear + 543 : null
|
||||
"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
|
||||
dense
|
||||
outlined
|
||||
>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-5 col-sm-3">
|
||||
วันที่มีผลคำสั่ง
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="inputDate"
|
||||
ref="dateRef"
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.date != null ? date2Thai(formData.date) : null
|
||||
"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่มีผลคำสั่ง'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
ตำแหน่งผู้มีอำนาจลงนาม
|
||||
<q-input
|
||||
for="inputAuthorityPosition"
|
||||
ref="authorityPositionRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.authorityPosition"
|
||||
placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
คำสั่งเรื่อง
|
||||
<q-input
|
||||
for="inputSubject"
|
||||
ref="subjectRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.subject"
|
||||
placeholder="กรอกคำสั่งเรื่อง"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
รายละเอียดการกระทำความผิด
|
||||
<q-input
|
||||
for="inputMistakeDetail"
|
||||
ref="mistakeDetailRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.mistakeDetail"
|
||||
placeholder="กรอกรายละเอียดการกระทำความผิด"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||
lazy-rules
|
||||
type="textarea"
|
||||
rows="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
for="ButtonOnSubmit"
|
||||
id="formSubmit"
|
||||
color="secondary"
|
||||
label="บันทึก"
|
||||
type="submit"
|
||||
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue