ช่วงเวลา เปลี่ยนเป็น เริ่ม สิ้นสุด

src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue

@@ -75,7 +75,8 @@ const formDetail = reactive<any>({
   strategyId: "",
   strategyName: "",
   documentInfoEvidence: "",
-  date: null,
+  startDate:null,
+  endDate:null
 });
 
 /** Option  รอบการประเมิน*/
@@ -124,11 +125,8 @@ function fetchListPlanByid(id: string) {
       formDetail.achievement5 = data.achievement5;
       formDetail.documentInfoEvidence = data.documentInfoEvidence;
 
-      if (data.startDate && data.endDate) {
-        formDetail.date = [];
-        formDetail.date[0] = data.startDate;
-        formDetail.date[1] = data.endDate;
-      }
+      formDetail.startDate = data.startDate
+      formDetail.endDate = data.endDate
 
       listCheckID.value = data.kpiPlanId;
     })
@@ -180,11 +178,8 @@ function fetchRoleByid(id: string) {
       formDetail.achievement4 = data.achievement4;
       formDetail.achievement5 = data.achievement5;
       formDetail.documentInfoEvidence = data.documentInfoEvidence;
-      if (data.startDate && data.endDate) {
-        formDetail.date = [];
-        formDetail.date[0] = data.startDate;
-        formDetail.date[1] = data.endDate;
-      }
+      formDetail.startDate = data.startDate
+      formDetail.endDate = data.endDate
 
       listCheckID.value = data.kpiRoleId;
       // clickList(data.kpiRoleId, true);
@@ -245,11 +240,8 @@ function fetchspecialByid(id: string) {
       formDetail.formula = data.formula;
       formDetail.meaning = data.meaning;
       formDetail.documentInfoEvidence = data.documentInfoEvidence;
-      if (data.startDate && data.endDate) {
-        formDetail.date = [];
-        formDetail.date[0] = data.startDate;
-        formDetail.date[1] = data.endDate;
-      }
+      formDetail.startDate = data.startDate
+      formDetail.endDate = data.endDate
     })
     .catch((err) => {
       messageError($q, err);
@@ -334,7 +326,8 @@ function closeDialog() {
   formDetail.strategy = "";
   formDetail.strategyId = "";
   formDetail.documentInfoEvidence = "";
-  formDetail.date = null;
+  formDetail.startDate = null
+  formDetail.endDate = null
 
   formFilter.isAll = false;
   formFilter.keyword = "";
@@ -368,8 +361,8 @@ function onSubmit() {
         achievement4: formDetail.achievement4,
         achievement5: formDetail.achievement5,
         documentInfoEvidence: formDetail.documentInfoEvidence,
-        startDate: formDetail.date ? formDetail.date[0] : undefined,
-        endDate: formDetail.date ? formDetail.date[1] : undefined,
+        startDate: formDetail.startDate ? formDetail.startDate : undefined,
+        endDate: formDetail.endDate ? formDetail.endDate: undefined,
         including: numpage.value === 3 ? formDetail.including : undefined,
         includingName:
           numpage.value === 3 ? formDetail.includingName : undefined,
@@ -863,14 +856,13 @@ const title = computed(() => {
                     lazy-rules
                   />
                 </div>
-                <div class="col-6">
+                <div class="col-3">
                   <datepicker
-                    v-model="formDetail.date"
+                    v-model="formDetail.startDate"
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
-                    range
                   >
                     <template #year="{ year }">{{ year + 543 }}</template>
                     <template #year-overlay-value="{ value }">{{
@@ -882,13 +874,9 @@ const title = computed(() => {
                         outlined
                         class="inputgreen"
                         :model-value="
-                          formDetail.date
-                            ? `${date2Thai(formDetail.date[0])} - ${date2Thai(
-                                formDetail.date[1]
-                              )}`
-                            : null
+                          formDetail.startDate ? date2Thai(formDetail.startDate) : null
                         "
-                        :label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
+                        :label="`${'ช่วงเวลาเริ่มต้น'}`"
                         hide-bottom-space
                       >
                         <template v-slot:prepend>
@@ -901,10 +889,53 @@ const title = computed(() => {
                         </template>
                         <template v-slot:append>
                           <q-icon
-                            v-if="formDetail.date !== null"
+                            v-if="formDetail.startDate !== null"
                             name="cancel"
                             class="cursor-pointer"
-                            @click="formDetail.date = null"
+                            @click="formDetail.startDate = null"
+                          />
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    v-model="formDetail.endDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formDetail.endDate ? date2Thai(formDetail.endDate) : null
+                        "
+                        :label="`${'ช่วงเวลาสิ้นสุด'}`"
+                        hide-bottom-space
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                        <template v-slot:append>
+                          <q-icon
+                            v-if="formDetail.endDate !== null"
+                            name="cancel"
+                            class="cursor-pointer"
+                            @click="formDetail.endDate = null"
                           />
                         </template>
                       </q-input>