ออกคำสั่งเลื่อนเงินเดือน => validate

src/modules/13_salary/components/Command/step01.vue

@@ -57,13 +57,13 @@ const salaryRoundOptionMain = ref<DataOption1[]>([]);
 const salaryRoundOption = ref<DataOption1[]>([]);
 
 //Main
-const typeOrder = ref<any>([]);
+const typeOrder = ref<any>();
 const nameOrder = ref<any>("");
 const command = ref<number | "">();
-const dateYear = ref<number>(new Date().getFullYear());
-const dateCommand = ref<Date>(new Date());
+const dateYear = ref<number | null>(null);
+const dateCommand = ref<Date | null>(null);
 const byOrder = ref<string>("");
-const nameCommand = ref<any>([]);
+const nameCommand = ref<any>();
 const positionCommand = ref<string>("");
 const year = ref<number>(0);
 const SalaryRound = ref<string>("");
@@ -114,8 +114,6 @@ const commandCodes = ref<string[]>([
 ]);
 // เรียกคำสั่ง
 const fecthTypeOption = async (actions: string) => {
-  console.log(actions);
-
   showLoader();
   await http
     .get(config.API.typeOrder())
@@ -165,8 +163,6 @@ const fetchdetailOrder = async () => {
     .then(async (res: any) => {
       const data = res.data.result;
 
-      console.log(data);
-
       const orderTypeCode = await data.orderTypeCode.toUpperCase();
 
       typeOrder.value = typeOrderOption.value.find(
@@ -262,34 +258,34 @@ const submit = async () => {
     year: year.value,
     salaryPeriodId: SalaryRound.value,
   };
-  if (
-    typeOrder.value.commandCode == "C-PM-33" ||
-    typeOrder.value.commandCode == "C-PM-34" ||
-    typeOrder.value.commandCode == "C-PM-35"
-  ) {
-    Object.assign(formdata, {
-      // examRound: examRound.value,
-      // conclusionRegisterNo: conclusionRegisterNo.value,
-      // conclusionRegisterDate: conclusionRegisterDate.value,
-      // conclusionResultNo: conclusionResultNo.value.toString(),
-      // conclusionResultDate: conclusionResultDate.value,
-    });
-  }
+  // if (
+  //   typeOrder.value.commandCode == "C-PM-33" ||
+  //   typeOrder.value.commandCode == "C-PM-34" ||
+  //   typeOrder.value.commandCode == "C-PM-35"
+  // ) {
+  //   Object.assign(formdata, {
+  //     // examRound: examRound.value,
+  //     // conclusionRegisterNo: conclusionRegisterNo.value,
+  //     // conclusionRegisterDate: conclusionRegisterDate.value,
+  //     // conclusionResultNo: conclusionResultNo.value.toString(),
+  //     // conclusionResultDate: conclusionResultDate.value,
+  //   });
+  // }
 
   // เช็คค่าว่าง
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result) {
-      dialogConfirm($q, () => {
-        // ถ้ามี orderId ให้ อัพเดท ไม่มีให้สร้าง
-        if (!orderId) {
-          createListOrder(formdata, typeOrder.value.commandCode);
-        } else {
-          let orderIdString = orderId.toString();
-          updateOrder(formdata, orderIdString, typeOrder.value.commandCode);
-        }
-      });
+  // await myForm.value!.validate().then((result: boolean) => {
+  //   if (result) {
+  dialogConfirm($q, () => {
+    // ถ้ามี orderId ให้ อัพเดท ไม่มีให้สร้าง
+    if (!orderId) {
+      createListOrder(formdata, typeOrder.value.commandCode);
+    } else {
+      let orderIdString = orderId.toString();
+      updateOrder(formdata, orderIdString, typeOrder.value.commandCode);
     }
   });
+  // }
+  // });
 };
 
 // สร้างคำสัง
@@ -406,9 +402,10 @@ function fetchSalaryRound() {
 }
 </script>
 <template>
-  <div style="max-height: 68vh; overflow-y: scroll">
-    <!-- Main -->
-    <q-form ref="myForm" class="q-pa-md">
+  <q-form greedy @submit.prevent @validation-success="submit" class="q-pa-md">
+    <div style="max-height: 68vh; overflow-y: scroll">
+      <!-- Main -->
+
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
           <q-select
@@ -416,7 +413,7 @@ function fetchSalaryRound() {
             outlined
             dense
             v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
             hide-bottom-space
             :label="`${'ประเภทคำสั่ง'}`"
             map-options
@@ -425,6 +422,7 @@ function fetchSalaryRound() {
             option-value="id"
             use-input
             input-debounce="0"
+            lazy-rules
             @update:model-value="selectCMP(typeOrder)"
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
@@ -436,6 +434,7 @@ function fetchSalaryRound() {
             :class="getClass(true)"
             outlined
             autogrow
+            lazy-rules
             dense
             v-model="nameOrder"
             :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
@@ -449,9 +448,11 @@ function fetchSalaryRound() {
               :class="getClass(true)"
               outlined
               dense
+              lazy-rules
               v-model="command"
               hide-bottom-space
               :label="`${'คำสั่งเลขที่'}`"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
             />
           </div>
           <label class="col-1 flex justify-center items-center text-bold"
@@ -471,8 +472,9 @@ function fetchSalaryRound() {
               }}</template>
               <template #trigger>
                 <q-input
+                  lazy-rules
                   class="inputgreen"
-                  :model-value="dateYear + 543"
+                  :model-value="dateYear !== null ? dateYear + 543 : null"
                   :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                   :label="`${'พ.ศ.'}`"
                   dense
@@ -503,6 +505,7 @@ function fetchSalaryRound() {
               <q-input
                 outlined
                 dense
+                lazy-rules
                 class="inputgreen"
                 :model-value="
                   dateCommand != null ? date2Thai(dateCommand) : null
@@ -537,6 +540,7 @@ function fetchSalaryRound() {
             :options="byOrderOption"
             option-value="id"
             use-input
+            lazy-rules
             input-debounce="0"
             @update:model-value="(nameCommand = ''), (positionCommand = '')"
             @filter="(inputValue:any,
@@ -552,6 +556,7 @@ function fetchSalaryRound() {
             :class="getClass(true)"
             outlined
             dense
+            lazy-rules
             v-model="nameCommand"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]"
             hide-bottom-space
@@ -580,6 +585,7 @@ function fetchSalaryRound() {
             :class="getClass(true)"
             outlined
             dense
+            lazy-rules
             v-model="positionCommand"
             :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
             :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
@@ -594,6 +600,7 @@ function fetchSalaryRound() {
           <q-input
             :class="getClass(true)"
             outlined
+            lazy-rules
             dense
             v-model="nameCommand"
             :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
@@ -609,6 +616,7 @@ function fetchSalaryRound() {
             :class="getClass(true)"
             outlined
             dense
+            lazy-rules
             v-model="positionCommand"
             :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
             :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
@@ -638,6 +646,7 @@ function fetchSalaryRound() {
                 :model-value="year === 0 ? null : Number(year) + 543"
                 :label="`${'ปีงบประมาณ'}`"
                 class="inputgreen"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -667,21 +676,22 @@ function fetchSalaryRound() {
             use-input
             input-debounce="0"
             emit-value
+            lazy-rules
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'SalaryRound'
                       ) "
           />
         </div>
       </div>
-    </q-form>
-  </div>
+    </div>
 
-  <q-separator />
-  <div class="flex justify-end q-pa-sm q-gutter-sm">
-    <q-btn unelevated label="บันทึก" color="public" @click="submit">
-      <q-tooltip>บันทึกข้อมูล</q-tooltip>
-    </q-btn>
-  </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn unelevated label="บันทึก" type="submit" color="public">
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </q-form>
 </template>
 
 <style>

src/modules/13_salary/views/commandSalary.vue

@@ -508,7 +508,9 @@ function redirectToPage(id: string, status: string) {
                   v-for="col in props.cols"
                   :key="col.name"
                   :props="props"
-                  @click="redirectToPage(props.row.orderId, props.row.status)"
+                  @click="
+                    redirectToPage(props.row.orderId, props.row.orderStatusName)
+                  "
                 >
                   <div v-if="col.name === 'no'">
                     {{ props.rowIndex + 1 }}