ผังบัญชีค่าจ้างลูกจ้างประจำ => อัตราค่าจ้าง

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>

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);