รอบการขึ้นเงินเดือน

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

@@ -14,7 +14,15 @@ import { useQuasar } from "quasar";
 const idRound = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogRemove, showLoader, hideLoader, messageError,date2Thai } = mixin;
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+} = mixin;
 const dataStore = useSalaryDataStore();
 const year = ref<number>(0);
 const filterKeyword = ref<string>("");
@@ -23,9 +31,10 @@ const editCheck = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const period = ref<string>("");
 const isActive = ref<boolean>(false);
+const isRead = ref<boolean>(false);
 const effectiveDate = ref<Date | null>(null);
 
-const yearData = ref<number|null>(0)
+const yearData = ref<number | null>(0);
 const maxPage = ref<number>(1);
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
@@ -95,7 +104,7 @@ const columns = ref<QTableProps["columns"]>([
 
 function clickAdd() {
   dialog.value = true;
-  editCheck.value = false
+  editCheck.value = false;
 }
 /** ดึงข้อมูลเริ่มต้น */
 function getData() {
@@ -151,17 +160,39 @@ function deleteData(id: string) {
     });
 }
 
-function editPopup(data:RowList) {
-  console.log(data)
+function editPopup(data: RowList, status: string) {
+  console.log(data);
+  if (status == "read") {
+    isRead.value = true;
+  }
   editCheck.value = true;
   dialog.value = true;
-  console.log(dialog.value)
+  console.log(dialog.value);
   idRound.value = data.id;
-  period.value = data.period ? data.period:'';
-  yearData.value = data.year ? data.year:0;
+  period.value = data.period ? data.period : "";
+  yearData.value = data.year ? data.year : 0;
   effectiveDate.value = data.effectiveDate as Date;
-  isActive.value = data.isActive ? data.isActive:false;
+  isActive.value = data.isActive ? data.isActive : false;
 }
+/** ปิดรอบ */
+function dialogClose(id: string) {
+  dialogConfirm(
+    $q,
+    () => {
+      // http
+      //   .put(config.API)
+      //   .then((res) => {})
+      //   .catch((e) => {
+      //     messageError($q, e);
+      //   })
+      //   .finally(() => {
+      //   });
+    },
+    "ยืนยันการปิดรอบ",
+    "หากปิดรอบแล้วจะไม่สามารถแก้ไขรายการเงินเดือนของรอบนี้ได้ ต้องการยืนยันการปิดรอบนี้ใช่หรือไม่?"
+  );
+}
+
 onMounted(async () => {
   year.value = new Date().getFullYear();
   getData();
@@ -324,13 +355,13 @@ onMounted(async () => {
                 }}
               </div>
               <div v-if="col.name == 'effectiveDate'">
-                {{ date2Thai(props.row.effectiveDate)}}
+                {{ date2Thai(props.row.effectiveDate) }}
               </div>
               <div v-else-if="col.name == 'year'">
-                {{ props.row.year ? props.row.year + 543:'-'}}
+                {{ props.row.year ? props.row.year + 543 : "-" }}
               </div>
               <div v-else-if="col.name == 'period'">
-                {{ dataStore.statusTothai(props.row.period)}}
+                {{ dataStore.statusTothai(props.row.period) }}
               </div>
               <div v-else-if="col.name === 'isActive'">
                 <q-icon
@@ -358,11 +389,23 @@ onMounted(async () => {
                 round
                 class="q-mr-xs"
                 size="12px"
-                icon="edit"
+                :icon="
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? 'mdi-eye-outline'
+                    : 'edit'
+                "
                 clickable
-                @click="editPopup(props.row)"
+                @click="
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? editPopup(props.row, 'read')
+                    : editPopup(props.row, 'edit')
+                "
               >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                <q-tooltip>{{
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? "ดูข้อมูล"
+                    : "แก้ไขข้อมูล"
+                }}</q-tooltip>
               </q-btn>
               <q-btn
                 color="red"
@@ -370,14 +413,27 @@ onMounted(async () => {
                 dense
                 round
                 size="12px"
-                icon="mdi-delete"
+                :icon="
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? 'mdi-close-box'
+                    : 'mdi-delete'
+                "
                 clickable
                 @click.stop="
-                  dialogRemove($q, async () => await deleteData(props.row.id))
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? dialogClose(props.row.id)
+                    : dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
                 "
                 v-close-popup
               >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
+                <q-tooltip>{{
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? "ปิดรอบ"
+                    : "ลบข้อมูล"
+                }}</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
@@ -394,6 +450,7 @@ onMounted(async () => {
     :period="period"
     v-model:effective="effectiveDate"
     :isActive="isActive"
+    v-model:is-read="isRead"
     v-model:year="yearData"
   />
 </template>