no message

src/modules/13_salary/components/SalaryRound/DialogForm.vue

@@ -15,6 +15,7 @@ const $q = useQuasar();
 const isActive = ref<boolean>(false);
 const period = ref<string>("");
 const modal = defineModel<boolean>("modal", { required: true });
+const effective = defineModel<Date|null|string>("effective", { required: true });
 const mixin = useCounterMixin();
 const { dialogConfirm, date2Thai, messageError } = mixin;
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
@@ -66,7 +67,7 @@ function saveData() {}
 function clearForm() {
   isActive.value = false;
   period.value = "";
-  effectiveDate.value = null;
+  effective.value = null;
 }
 
 function close() {
@@ -79,7 +80,7 @@ function editSummit(){
     const body = {
       period: period.value,
       isActive: isActive.value,
-      effectiveDate: effectiveDate.value,
+      effectiveDate: effective.value,
     };
     http
       .put(config.API.salaryPeriod()+`/${props.idRound}`, body)
@@ -100,7 +101,7 @@ function onSubmit() {
     const body = {
       period: period.value,
       isActive: isActive.value,
-      effectiveDate: effectiveDate.value,
+      effectiveDate: effective.value,
     };
     http
       .post(config.API.salaryPeriod(), body)
@@ -124,12 +125,17 @@ function inputEdit(val: boolean) {
 }
 
 watch(
-  () => props.edit,
+  () => modal.value,
   () => {
+    console.log(props.edit)
     if (props.edit == true) {
       period.value = props.period ? props.period :'';
       effectiveDate.value = props.effectiveDate ? props.effectiveDate:null;
       isActive.value = props.isActive;
+    }else{
+      effective.value = null
+      period.value = ''
+      isActive.value = false
     }
   }
 );
@@ -166,7 +172,7 @@ watch(
           />
           <datepicker
             menu-class-name="modalfix"
-            v-model="effectiveDate"
+            v-model="effective"
             :locale="'th'"
             autoApply
             borderless
@@ -190,7 +196,7 @@ watch(
                 :readonly="isReadonly"
                 hide-bottom-space
                 :model-value="
-                  effectiveDate != null ? date2Thai(effectiveDate) : null
+                  effective != null ? date2Thai(effective as Date) : null
                 "
                 label="วันที่มีผลบังคับใช้งาน"
                 :rules="[

src/modules/13_salary/store/SalaryStore.ts

@@ -18,7 +18,7 @@ export const useSalaryDataStore = defineStore("salaryDataStore", () => {
       id: i.id,
       period: i.period !== null ? statusTothai(i.period) : null,
       isActive: i.isActive !== null ? i.isActive : null,
-      effectiveDate: i.effectiveDate !== null ? date2Thai(i.effectiveDate as Date) : null,
+      effectiveDate: i.effectiveDate !== null ? i.effectiveDate : null,
       status: i.status !== null ? i.status : null,
     }));
   }

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

@@ -14,7 +14,7 @@ import { useQuasar } from "quasar";
 const idRound = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogRemove, showLoader, hideLoader, messageError } = mixin;
+const { dialogRemove, showLoader, hideLoader, messageError,date2Thai } = mixin;
 const dataStore = useSalaryDataStore();
 const year = ref<number>(0);
 const filterKeyword = ref<string>("");
@@ -84,6 +84,7 @@ const columns = ref<QTableProps["columns"]>([
 
 function clickAdd() {
   dialog.value = true;
+  editCheck.value = false
 }
 /** ดึงข้อมูลเริ่มต้น */
 function getData() {
@@ -94,10 +95,8 @@ function getData() {
         `?page=${page.value}&pageSise=${rowsPerPage.value}&keyword=${filterKeyword.value}&year=${year.value}`
     )
     .then((res) => {
-      // maxPage.value = Math.ceil(dataList[0].total / rowsPerPage.value);
+      dataStore.fetchDataMap(res.data.result.data);
-      // dataStore.fetchDataMap(dataList[0].data);
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      // fetchAppealComplain(res.data.result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -140,6 +139,17 @@ function deleteData(id: string) {
       hideLoader();
     });
 }
+
+function editPopup(data:RowList) {
+  console.log(data)
+  editCheck.value = true;
+  dialog.value = true;
+  console.log(dialog.value)
+  idRound.value = data.id;
+  period.value = data.period ? data.period:'';
+  effectiveDate.value = data.effectiveDate as Date;
+  isActive.value = data.isActive ? data.isActive:false;
+}
 onMounted(async () => {
   year.value = new Date().getFullYear();
   getData();
@@ -301,6 +311,9 @@ onMounted(async () => {
                   1
                 }}
               </div>
+              <div v-if="col.name == 'effectiveDate'">
+                {{ date2Thai(props.row.effectiveDate)}}
+              </div>
               <div v-else-if="col.name === 'isActive'">
                 <q-icon
                   v-if="col.value == false"
@@ -329,16 +342,7 @@ onMounted(async () => {
                 size="12px"
                 icon="edit"
                 clickable
-                @click.stop="
+                @click="editPopup(props.row)"
-                  () => {
-                    editCheck = true;
-                    dialog = true;
-                    idRound = props.row.id;
-                    period = props.row.period;
-                    effectiveDate = props.row.effectiveDate;
-                    isActive = props.row.isActive;
-                  }
-                "
               >
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip>
               </q-btn>
@@ -370,7 +374,7 @@ onMounted(async () => {
     :get-data="getData"
     :idRound="idRound"
     :period="period"
-    :effectiveDate?="effectiveDate"
+    v-model:effective="effectiveDate"
     :isActive="isActive"
   />
 </template>