From 62b06973e29b7ff92ff1ba99d381bd166bae6279 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 12 Mar 2024 18:04:47 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B1=E0=B8=87=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3=20=3D>=20=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DialogEmployeeRate.vue                    | 190 ++++++++++++++++++
 .../salaryEmployeeChart/TabStructure.vue      |   2 +-
 .../13_salary/views/salaryEmployeeRate.vue    |  93 ++++++++-
 3 files changed, 283 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue

diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
new file mode 100644
index 000000000..c26eb4779
--- /dev/null
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed, ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+const salaryId = ref<string>(route.params.id.toString());
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  isStatusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  data: {
+    type: Object,
+    defult: [],
+  },
+});
+
+const formData = reactive<any>({
+  salaryNo: null,
+  salaryMonth: null,
+  salaryDay: null,
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const salaryNoRef = ref<Object | null>(null);
+const salaryMonthRef = ref<Object | null>(null);
+const salaryDayRef = ref<Object | null>(null);
+
+const ObjectRef: any = {
+  salaryNo: salaryNoRef,
+  salaryMonth: salaryMonthRef,
+  salaryDay: salaryDayRef,
+};
+
+function closeDialog() {
+  modal.value = !modal.value;
+  clearFormData();
+}
+
+function clearFormData() {
+  formData.salaryNo = null;
+  formData.salaryMonth = null;
+  formData.salaryDay = null;
+}
+
+function onClickSubmit() {
+  console.log(formData.salaryHalfSpecial);
+  const hasError = [];
+  for (const key in ObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
+      const property = ObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+}
+
+// watch(
+//   () => modal.value,
+//   () => {
+//     if (modal.value && props.typeAction === "edit") {
+//       if (props.data) {
+//         const data = props.data;
+//         formData.salaryId = data.id;
+//         formData.salary = data.salary;
+//         formData.salaryHalf = data.salaryHalf;
+//         formData.salaryHalfSpecial = data.salaryHalfSpecial;
+//         formData.salaryFull = data.salaryFull;
+//         formData.salaryFullSpecial = data.salaryFullSpecial;
+//         formData.salaryFullHalf = data.salaryFullHalf;
+//         formData.salaryFullHalfSpecial = data.salaryFullHalfSpecial;
+//         formData.isNext = data.isNext;
+//       }
+//     }
+//   }
+// );
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 500px">
+      <Header
+        :tittle="props.isStatusEdit ? 'แก้ไขอัตราค่าจ้าง' : 'เพิ่มอัตราค่าจ้าง'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-gutter-sm q-pa-sm">
+          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ลำดับชั้น"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกลำดับชั้น',
+                  (val) =>
+                    Number(val) === Math.floor(val) ||
+                    Number(val) === Math.floor(val) + 0.5 ||
+                    `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="salaryDayRef"
+                dense
+                outlined
+                v-model="formData.salaryDay"
+                label="อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)'}`,
+                ]"
+              />
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
index 3f57da830..b2e146bf3 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
@@ -128,7 +128,7 @@ function onClickAction(type: string, data: any) {
       onUpload();
       break;
     case "salaryRate":
-      onSalaryRate(data);
+      onSalaryRate(data.id);
       break;
     case "coppy":
       onCoppy(data.id);
diff --git a/src/modules/13_salary/views/salaryEmployeeRate.vue b/src/modules/13_salary/views/salaryEmployeeRate.vue
index 8e81fac1c..288726d0c 100644
--- a/src/modules/13_salary/views/salaryEmployeeRate.vue
+++ b/src/modules/13_salary/views/salaryEmployeeRate.vue
@@ -5,6 +5,10 @@ import { useRouter } from "vue-router";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+
+/** importComponts*/
+import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -54,6 +58,23 @@ const rows = ref<any>([
 ]);
 const visibleColumns = ref<string[]>(["no", "month", "day"]);
 
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+
+  {
+    label: "ลบ",
+    icon: "delete",
+    color: "red",
+    type: "delete",
+  },
+]);
+
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -63,6 +84,37 @@ const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
+
+const modalDialogEmployeeRate = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+
+function onClickAction(type: string, data: any) {
+  switch (type) {
+    case "edit":
+      onEdit();
+      break;
+    case "delete":
+      onDelete();
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onEdit() {
+  modalDialogEmployeeRate.value = true;
+  isStatusEdit.value = true;
+}
+
+function onDelete() {
+  dialogRemove($q, () => {});
+}
+
+function onClickAdd() {
+  modalDialogEmployeeRate.value = true;
+  isStatusEdit.value = false;
+}
 </script>
 <template>
   <div class="row items-center">
@@ -82,7 +134,7 @@ const pagination = ref({
   </div>
   <q-card flat bordered class="q-pa-md">
     <q-toolbar class="text-primary" style="padding: 0px">
-      <q-btn flat round dense icon="add">
+      <q-btn flat round dense icon="add" @click="onClickAdd">
         <q-tooltip>เพิ่ม </q-tooltip>
       </q-btn>
       <q-space />
@@ -132,6 +184,7 @@ const pagination = ref({
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
+            <q-th auto-width />
           </q-tr>
           <q-separator />
         </template>
@@ -146,6 +199,39 @@ const pagination = ref({
               </div>
               <div v-else>{{ col.value ? col.value : "-" }}</div>
             </q-td>
+            <q-td>
+              <q-btn
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+              >
+                <q-menu>
+                  <q-list dense style="min-width: 200px">
+                    <q-item
+                      v-for="(item, index) in itemMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="onClickAction(item.type, props.row)"
+                    >
+                      <q-item-section>
+                        <div class="row items-center">
+                          <q-icon
+                            :color="item.color"
+                            size="17px"
+                            :name="item.icon"
+                          />
+                          <div class="q-pl-md">{{ item.label }}</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
@@ -163,6 +249,11 @@ const pagination = ref({
       </d-table>
     </div>
   </q-card>
+
+  <DialogEmployeeRate
+    v-model:modal="modalDialogEmployeeRate"
+    :isStatusEdit="isStatusEdit"
+  />
 </template>
 
 <style scoped></style>