updated command step 1

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

@@ -38,6 +38,7 @@ let formData = reactive<FormDataDetail>({
   issue: null,
   commandAffectDate: null, //วันที่ลงนาม
   commandExcecuteDate: null, //วันที่คำสั่งมีผล
+  isBangkok: false,
 });
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
@@ -164,6 +165,7 @@ defineExpose({
 
       <div class="col-4">
         <datepicker
+          clearable
           menu-class-name="modalfix"
           v-model="formData.commandAffectDate"
           :locale="'th'"
@@ -181,6 +183,7 @@ defineExpose({
           </template>
           <template #trigger>
             <q-input
+              clearable
               dense
               outlined
               hide-bottom-space
@@ -192,6 +195,7 @@ defineExpose({
                   : date2Thai(formData.commandAffectDate)
               "
               :label="`${'วันที่ลงนาม'}`"
+              @clear="() => (formData.commandAffectDate = null)"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -207,6 +211,7 @@ defineExpose({
       </div>
       <div class="col-4">
         <datepicker
+          clearable
           menu-class-name="modalfix"
           v-model="formData.commandExcecuteDate"
           :locale="'th'"
@@ -224,6 +229,7 @@ defineExpose({
           </template>
           <template #trigger>
             <q-input
+              clearable
               dense
               outlined
               hide-bottom-space
@@ -235,6 +241,7 @@ defineExpose({
                   : date2Thai(formData.commandExcecuteDate)
               "
               :label="`${'วันที่คำสั่งมีผล'}`"
+              @clear="() => (formData.commandExcecuteDate = null)"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -257,7 +264,7 @@ defineExpose({
           dense
           v-model="formData.detailHeader"
           hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งส่วนต้น'}`"
+          :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
           @update:model-value="onCheckChangeData()"
           type="textarea"
         />
@@ -309,9 +316,10 @@ defineExpose({
           dense
           v-model="formData.detailBody"
           hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งส่วนกลาง'}`"
+          :label="`${'เนื้อหาคำสั่งหลัก'}`"
           @update:model-value="onCheckChangeData()"
           type="textarea"
+          :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
         />
         <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
@@ -361,7 +369,7 @@ defineExpose({
           dense
           v-model="formData.detailFooter"
           hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งส่วนท้าย'}`"
+          :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
           @update:model-value="onCheckChangeData()"
           type="textarea"
         />
@@ -403,6 +411,16 @@ defineExpose({
           </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>