จัดโค้ด ออกคำสั่ง/รายงาน

src/modules/11_discipline/components/4_Order/Step01.vue

@@ -14,6 +14,8 @@ const mixin = useCounterMixin();
 const { date2Thai, dialogConfirm } = mixin;
 const $q = useQuasar();
 
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -24,8 +26,8 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-// Options ต่างๆ
+
+/** Options ต่างๆ */
 const orderTypeOptions = ref<DataOption[]>([
   { id: "0", name: "ประเภทคำสั่ง 1" },
   { id: "1", name: "ประเภทคำสั่ง 2" },
@@ -41,7 +43,8 @@ const listInvestigationOptions = ref<DataOption[]>([
   { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
   { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
 ]);
-// ตัวแปรทั้งหมด
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   orderType: "",
   orderBy: "",
@@ -55,7 +58,7 @@ const formData = reactive<FormData>({
   mistakeDetail: "",
 });
 
-// validateForm
+/** ตัวแปร ref สำหรับแสดง validate */
 const orderTypeRef = ref<Object | null>(null);
 const orderByRef = ref<Object | null>(null);
 const listInvestigationRef = ref<Object | null>(null);
@@ -66,6 +69,8 @@ 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,
@@ -78,6 +83,13 @@ const myObjectRef: MyObjectRef = {
   subject: subjectRef,
   mistakeDetail: mistakeDetailRef,
 };
+
+/**ฟังชั่น ไป step ต่อไป */
+function next() {
+  props.next();
+}
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function validateForm() {
   const hasError = [];
   for (const key in myObjectRef) {
@@ -96,6 +108,7 @@ function validateForm() {
   }
 }
 
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   console.log(formData);
   dialogConfirm(
@@ -131,6 +144,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           คำสั่งโดย
           <q-select
@@ -149,6 +163,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           เลือกรายการสอบสวนความผิดทางวินัย
           <q-select
@@ -169,6 +184,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           ผู้มีอำนาจลงนาม
           <q-input
@@ -182,6 +198,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="row col-xs-7 col-sm-3">
           <div class="col-6">
             คำสั่งที่
@@ -197,6 +214,7 @@ function onSubmit() {
             >
             </q-input>
           </div>
+
           <label class="col-1 flex justify-center items-center text-bold"
             >/</label
           >
@@ -229,6 +247,7 @@ function onSubmit() {
             </datepicker>
           </div>
         </div>
+
         <div class="col-xs-5 col-sm-3">
           วันที่มีผลคำสั่ง
           <datepicker
@@ -270,6 +289,7 @@ function onSubmit() {
             </template>
           </datepicker>
         </div>
+
         <div class="col-xs-12 col-sm-6">
           ตำแหน่งผู้มีอำนาจลงนาม
           <q-input
@@ -283,6 +303,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           คำสั่งเรื่อง
           <q-input
@@ -296,6 +317,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="col-xs-12 col-sm-12">
           รายละเอียดการกระทำความผิด
           <q-input