fix bug ออกคำสั่ง

src/modules/18_command/components/Step/1_Detail.vue

@@ -39,8 +39,7 @@ let formData = reactive<FormDataDetail>({
   commandAffectDate: null, //วันที่ลงนาม
   commandExcecuteDate: null, //วันที่คำสั่งมีผล
   isBangkok: false,
-  isAttachment:true
-  
+  isAttachment: true,
 });
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
@@ -88,68 +87,117 @@ defineExpose({
 </script>
 
 <template>
-  <q-card-section>
-    <div class="row q-col-gutter-sm">
-      <!-- คำสั่งเลขที่ -->
-      <!-- คำสั่งเรื่อง -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.issue"
-          hide-bottom-space
-          :label="`${'คำสั่งเรื่อง'}`"
-          @update:model-value="onCheckChangeData()"
-        />
-      </div>
-
-      <div class="col-4 row">
-        <div class="col-6">
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card-section>
+      <div class="row q-col-gutter-sm">
+        <!-- คำสั่งเลขที่ -->
+        <!-- คำสั่งเรื่อง -->
+        <div class="col-12">
           <q-input
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
             outlined
             dense
-            v-model="formData.commandNo"
+            v-model="formData.issue"
             hide-bottom-space
-            :label="`${'คำสั่งเลขที่'}`"
+            :label="`${'คำสั่งเรื่อง'}`"
             @update:model-value="onCheckChangeData()"
           />
         </div>
-        <label class="col-1 flex justify-center items-center text-bold">
-          /
-        </label>
-        <div class="col-5">
+
+        <div class="col-4 row">
+          <div class="col-6">
+            <q-input
+              :class="store.classInput(!store.readonly)"
+              :readonly="store.readonly"
+              outlined
+              dense
+              v-model="formData.commandNo"
+              hide-bottom-space
+              :label="`${'คำสั่งเลขที่'}`"
+              @update:model-value="onCheckChangeData()"
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold">
+            /
+          </label>
+          <div class="col-5">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formData.commandYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              :class="store.classInput(!store.readonly)"
+              :readonly="store.readonly"
+              @update:model-value="onCheckChangeData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  hide-bottom-space
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  :model-value="
+                    formData.commandYear == null
+                      ? null
+                      : formData.commandYear + 543
+                  "
+                  :label="`${'พ.ศ.'}`"
+                >
+                  <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>
+
+        <div class="col-4">
           <datepicker
+            clearable
             menu-class-name="modalfix"
-            v-model="formData.commandYear"
+            v-model="formData.commandAffectDate"
             :locale="'th'"
             autoApply
-            year-picker
             :enableTimePicker="false"
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
             @update:model-value="onCheckChangeData()"
           >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
             <template #trigger>
               <q-input
+                clearable
                 dense
                 outlined
                 hide-bottom-space
                 :class="store.classInput(!store.readonly)"
                 :readonly="store.readonly"
                 :model-value="
-                  formData.commandYear == null
+                  formData.commandAffectDate == null
                     ? null
-                    : formData.commandYear + 543
+                    : date2Thai(formData.commandAffectDate)
                 "
-                :label="`${'พ.ศ.'}`"
+                :label="`${'วันที่ลงนาม'}`"
+                @clear="() => (formData.commandAffectDate = null)"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -163,114 +211,68 @@ defineExpose({
             </template>
           </datepicker>
         </div>
-      </div>
 
-      <div class="col-4">
-        <datepicker
-          clearable
-          menu-class-name="modalfix"
-          v-model="formData.commandAffectDate"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          @update:model-value="onCheckChangeData()"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              clearable
-              dense
-              outlined
-              hide-bottom-space
-              :class="store.classInput(!store.readonly)"
-              :readonly="store.readonly"
-              :model-value="
-                formData.commandAffectDate == null
-                  ? null
-                  : date2Thai(formData.commandAffectDate)
-              "
-              :label="`${'วันที่ลงนาม'}`"
-              @clear="() => (formData.commandAffectDate = null)"
-            >
-              <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-4">
-        <datepicker
-          clearable
-          menu-class-name="modalfix"
-          v-model="formData.commandExcecuteDate"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          @update:model-value="onCheckChangeData()"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              clearable
-              dense
-              outlined
-              hide-bottom-space
-              :class="store.classInput(!store.readonly)"
-              :readonly="store.readonly"
-              :model-value="
-                formData.commandExcecuteDate == null
-                  ? null
-                  : date2Thai(formData.commandExcecuteDate)
-              "
-              :label="`${'วันที่คำสั่งมีผล'}`"
-              @clear="() => (formData.commandExcecuteDate = null)"
-            >
-              <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-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.detailHeader"
-          hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
-          @update:model-value="onCheckChangeData()"
-          type="textarea"
-        />
-        <!-- <q-card bordered flat>
+        <div class="col-4">
+          <datepicker
+            clearable
+            menu-class-name="modalfix"
+            v-model="formData.commandExcecuteDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            @update:model-value="onCheckChangeData()"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                clearable
+                dense
+                outlined
+                hide-bottom-space
+                :class="store.classInput(!store.readonly)"
+                :readonly="store.readonly"
+                :model-value="
+                  formData.commandExcecuteDate == null
+                    ? null
+                    : date2Thai(formData.commandExcecuteDate)
+                "
+                :label="`${'วันที่คำสั่งมีผล'}`"
+                @clear="() => (formData.commandExcecuteDate = null)"
+              >
+                <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-12">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.detailHeader"
+            hide-bottom-space
+            :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
+            @update:model-value="onCheckChangeData()"
+            type="textarea"
+          />
+          <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนต้น
           </div>
@@ -307,23 +309,24 @@ defineExpose({
             </q-field>
           </q-card-section>
         </q-card> -->
-      </div>
+        </div>
 
-      <!-- เนื้อหาคำสั่งส่วนกลาง -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.detailBody"
-          hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งหลัก'}`"
-          @update:model-value="onCheckChangeData()"
-          type="textarea"
-          :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
-        />
-        <!-- <q-card bordered flat>
+        <!-- เนื้อหาคำสั่งส่วนกลาง -->
+        <div class="col-12">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.detailBody"
+            hide-bottom-space
+            :label="`${'เนื้อหาคำสั่งหลัก'}`"
+            @update:model-value="onCheckChangeData()"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
+            lazy-rules
+          />
+          <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนกลาง
           </div>
@@ -360,22 +363,22 @@ defineExpose({
             </q-field>
           </q-card-section>
         </q-card> -->
-      </div>
+        </div>
 
-      <!-- เนื้อหาคำสั่งส่วนท้าย -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.detailFooter"
-          hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
-          @update:model-value="onCheckChangeData()"
-          type="textarea"
-        />
-        <!-- <q-card bordered flat>
+        <!-- เนื้อหาคำสั่งส่วนท้าย -->
+        <div class="col-12">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.detailFooter"
+            hide-bottom-space
+            :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
+            @update:model-value="onCheckChangeData()"
+            type="textarea"
+          />
+          <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนท้าย
           </div>
@@ -412,25 +415,26 @@ defineExpose({
             </q-field>
           </q-card-section>
         </q-card> -->
+        </div>
+
+        <div class="col-12">
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            v-model="formData.isBangkok"
+            label="นี่คือคำสั่งกรุงเทพมหานคร"
+          />
+        </div>
       </div>
+    </q-card-section>
 
-      <div class="col-12">
-        <q-checkbox
-          keep-color
-          color="primary"
-          dense
-          v-model="formData.isBangkok"
-          label="นี่คือคำสั่งกรุงเทพมหานคร"
-        />
-      </div>
-    </div>
-  </q-card-section>
+    <q-separator />
 
-  <q-separator />
-
-  <q-card-actions align="right" v-if="!store.readonly">
-    <q-btn label="บันทึก" color="public" @click="onSubmit" />
-  </q-card-actions>
+    <q-card-actions align="right" v-if="!store.readonly">
+      <q-btn label="บันทึก" color="public" type="submit" />
+    </q-card-actions>
+  </q-form>
 
   <DialogPerview
     v-model:modal="modalPreview"