datepick => test

src/modules/14_KPI/views/round.vue

@@ -137,6 +137,7 @@ const formQuery = reactive<FormQueryRound>({
   keyword: "",
 });
 const totalList = ref<number>(1);
+const year = ref<number | null>(null);
 const formData = reactive<FormRound>({
   durationKPI: "",
   year: null,
@@ -153,7 +154,7 @@ function fetchList() {
   http
     .get(
       config.API.kpiPeriod +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${year.value}`
     )
     .then((res) => {
       const data: ResRound[] = res.data.result.data;
@@ -365,8 +366,7 @@ onMounted(() => {
     <q-toolbar style="padding: 0px">
       <div class="row q-gutter-sm">
         <datepicker
-          menu-class-name="modalfix"
+          v-model="year"
-          v-model="formQuery.year"
           :locale="'th'"
           autoApply
           year-picker
@@ -381,9 +381,7 @@ onMounted(() => {
             <q-input
               dense
               outlined
-              :model-value="
+              :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
-                formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
-              "
               :label="`${'ปีงบประมาณ'}`"
             >
               <template v-slot:prepend>
@@ -394,11 +392,11 @@ onMounted(() => {
                 >
                 </q-icon>
               </template>
-              <template v-if="formQuery.year" v-slot:append>
+              <template v-if="year" v-slot:append>
                 <q-icon
                   name="cancel"
                   @click.stop.prevent="
-                    (formQuery.year = 0), (formQuery.page = 1), fetchList()
+                    (year = 0), (formQuery.page = 1), fetchList()
                   "
                   class="cursor-pointer"
                 />