Merge branch 'develop' into devTee

src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue

@@ -268,10 +268,10 @@ function closeHistoryDialog() {
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -293,24 +293,26 @@ function closeHistoryDialog() {
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
               :key="col.name"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
+              <div></div>
+              <div class="col label-color">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div
                   v-if="col.name === 'issueDate' || col.name === 'expireDate'"
                 >
                   {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
+                </div>
 
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+                <div v-else>{{ col.value }}</div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -552,4 +554,12 @@ function closeHistoryDialog() {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.bg-color {
+  background-color: #fafafa;
+}
+
+.label-color {
+  color: #747474cc;
+}
+</style>

src/modules/04_registryNew/components/detail/Achievement/02_Train.vue

@@ -434,7 +434,7 @@ watch(
         class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -456,28 +456,29 @@ watch(
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              v-for="(col, index) in props.cols"
               :key="col.name"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
-                  v-if="
-                    col.name === 'startDate' ||
-                    col.name === 'endDate' ||
-                    col.name === 'graduateDate'
-                  "
-                >
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
-
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+              <div class="row q-pa-sm">
+                <div class="col-7 label-color">
+                  <div>{{ col.label }}</div>
+                </div>
+                <div class="col">
+                  <div
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'endDate' ||
+                      col.name === 'dateOrder'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>{{ col.value }}</div>
+                </div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -928,4 +929,12 @@ watch(
 .borderCard {
   border: 1px solid #d0d0d0;
 }
+
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
 </style>

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -168,6 +168,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const backgroundColor = "grey-2";
 const isDate = ref<string>("false");
 const educationOption = ["ใช่", "ไม่ใช่"];
 const historyDialog = ref<boolean>(false);
@@ -483,32 +484,60 @@ watch(
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <q-list>
-            <div
-              class="q-pa-md"
-              v-for="(col, index) in props.cols"
-              :key="col.name"
-            >
-              <div class="row">
-                <div class="col-5">
-                  <div>{{ col.label }}</div>
+          <div class="row">
+            <div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
+            <div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[1].value }}</div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-3 q-pa-sm label-color">ตั้งแต่</div>
+                <div class="col-4 q-pa-sm">
+                  {{ date2Thai(props.cols[2].value) }}
                 </div>
-                <div class="col-7">
-                  <div
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'finishDate' ||
-                      col.name === 'graduateDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-
-                  <div v-else>{{ col.value }}</div>
+                <div class="col-2 q-pa-sm label-color">ถึง</div>
+                <div class="col-3 q-pa-sm">
+                  {{ date2Thai(props.cols[3].value) }}
                 </div>
               </div>
             </div>
-          </q-list>
+            <div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div>
+            <div class="col-9 q-pa-sm">
+              {{ date2Thai(props.cols[4].value) }}
+            </div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-4 q-pa-sm label-color">
+                  เป็นวุฒิการศึกษาในตำแหน่ง
+                </div>
+                <div class="col-3 q-pa-sm">{{ props.cols[5].value }}</div>
+                <div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
+                <div class="col-3 q-pa-sm">{{ props.cols[6].value }}</div>
+              </div>
+            </div>
+            <div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[7].value }}</div>
+            <div class="col-2 q-pa-sm label-color">ทุน</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[8].value }}</div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
+                <div class="col-4 q-pa-sm">{{ props.cols[9].value }}</div>
+                <div class="col-2 q-pa-sm label-color">ประเทศ</div>
+                <div class="col-3 q-pa-sm">{{ props.cols[10].value }}</div>
+              </div>
+            </div>
+            <div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[11].value }}</div>
+            <div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[12].value }}</div>
+          </div>
+          <div class="col-12">
+            <div :class="`row bg-color`">
+              <div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร</div>
+              <div class="col-4 q-pa-sm">{{ props.cols[13].value }}</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </template>
@@ -974,4 +1003,12 @@ watch(
 .borderCard {
   border: 1px solid #d0d0d0;
 }
+
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
 </style>

src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -84,7 +84,7 @@ const rows = [
   },
 ];
 const dialog = ref<boolean>(false);
-
+const backgroundColor = "grey-2";
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -242,10 +242,10 @@ async function onSubmit() {
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -267,16 +267,18 @@ async function onSubmit() {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <q-list>
-            <q-item v-for="col in props.cols" :key="col.name">
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label caption>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
+          <div class="row">
+            <div class="col q-pa-sm label-color">ด้าน</div>
+            <div class="col q-pa-sm">{{ props.cols[0].value }}</div>
+            <div class="col q-pa-sm label-color">รายละเอียด</div>
+            <div class="col q-pa-sm">{{ props.cols[1].value }}</div>
+          </div>
+          <div :class="`row bg-color`">
+            <div class="col q-pa-sm label-color">หมายเหตุ</div>
+            <div class="col q-pa-sm">{{ props.cols[2].value }}</div>
+            <div class="col q-pa-sm label-color">เอกสารอ้างอิง</div>
+            <div class="col q-pa-sm">{{ props.cols[3].value }}</div>
+          </div>
         </q-card>
       </div>
     </template>
@@ -350,6 +352,7 @@ async function onSubmit() {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
+      console.log("🚀 ~ bg-white:", bg-white)
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
@@ -427,4 +430,12 @@ async function onSubmit() {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
+</style>

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -32,8 +32,8 @@ const props = defineProps({
   },
 });
 const formData = reactive<FormDataChar>({
-  name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
-  group: "", //*กลุ่มบัญชีค่าจ้าง
+  name: "", //ชื่อผังบัญชีอัตราค่าจ้าง
+  group: "", //*กลุ่มของผังบัญชีอัตราค่าจ้าง
   isActive: false, //*สถานะการใช้งาน
   date: null, //ให้ไว้ ณ วันที่
   startDate: null, //วันที่มีผลบังคับใช้
@@ -166,11 +166,9 @@ watch(
                     hide-bottom-space
                     outlined
                     v-model="formData.name"
-                    label="ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง"
+                    label="ชื่อผังบัญชีอัตราค่าจ้าง"
                     :rules="[
-                      (val) =>
-                        !!val ||
-                        'กรุณากรอกชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง',
+                      (val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง',
                     ]"
                     lazy-rules
                   />
@@ -184,10 +182,12 @@ watch(
                     dense
                     outlined
                     v-model="formData.group"
-                    label="กลุ่มบัญชีค่าจ้าง"
+                    label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                     hide-bottom-space
                     mask="########"
-                    :rules="[(val) => !!val || 'กรุณากรอกกลุ่มบัญชีค่าจ้าง']"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
+                    ]"
                   />
                 </div>
 
@@ -197,6 +197,7 @@ watch(
                 >
                   <q-toggle
                     week-start="0"
+                    :disable="isReadonly"
                     color="primary"
                     label="สถานะการใช้งาน"
                     v-model="formData.isActive"
@@ -349,7 +350,12 @@ watch(
         </q-card-section>
         <q-separator />
         <div class="text-right q-ma-sm">
-          <q-btn label="บันทึก" type="submit" color="secondary">
+          <q-btn
+            label="บันทึก"
+            type="submit"
+            color="secondary"
+            :disable="isReadonly"
+          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>

src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { 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 { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+// import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
+
+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 salaryEmployeeId = 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: [],
+  },
+  // fetchData: {
+  //   type: Function,
+  //   required: true,
+  // },
+});
+
+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: ObjectReteRef = {
+  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() {
+  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, async () => {
+  //   showLoader();
+  //   const body: FormDataRate = {
+  //     salaryEmployeeId: !props.isStatusEdit
+  //       ? salaryEmployeeId.value
+  //       : undefined,
+  //     step:
+  //       typeof formData.salaryNo === "number"
+  //         ? formData.salaryNo
+  //         : Number(formData.salaryNo.replace(/,/g, "")),
+  //     salaryMonth:
+  //       typeof formData.salaryMonth === "number"
+  //         ? formData.salaryMonth
+  //         : Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
+  //     salaryDay:
+  //       typeof formData.salaryDay === "number"
+  //         ? formData.salaryDay
+  //         : Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
+  //   };
+  //   try {
+  //     const url = !props.isStatusEdit
+  //       ? config.API.salaryEmployeeRateList
+  //       : config.API.salaryEmployeeRateListByid(props?.data?.id);
+  //     await http[!props.isStatusEdit ? "post" : "put"](url, body);
+  //     success($q, "บันทีกข้อมูลสำเร็จ");
+  //     props.fetchData?.();
+  //   } catch (err) {
+  //     messageError($q, err);
+  //     hideLoader();
+  //   } finally {
+  //     closeDialog();
+  //   }
+  // });
+}
+
+// watch(
+//   () => modal.value,
+//   () => {
+//     if (modal.value && props.isStatusEdit) {
+//       if (props.data) {
+//         const data = props.data;
+//         console.log(data);
+//         formData.salaryNo = data.step;
+//         formData.salaryMonth = data.salaryMonth;
+//         formData.salaryDay = data.salaryDay;
+//       }
+//     }
+//   }
+// );
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <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-4">
+              <q-select
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="กลุ่มงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-4">
+              <q-select
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ตำแหน่ง"
+                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-4">
+              <q-select
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ระดับชั้นงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-8">
+              <q-input
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="หมายเหตุ"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
+            <div class="col-4">
+              <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-4">
+              <q-select
+                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-4">
+              <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 text-bold">
+              อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
+            </div>
+            <div class="col-4">
+              <q-select
+                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-4">
+              <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>
+        </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/TabCriteria.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 
+import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
+
 /** importType*/
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
 const {
   date2Thai,
   dialogRemove,
@@ -30,16 +34,25 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "groupPos",
     align: "left",
-    label: "กลุ่มงานช่างตำแหน่ง",
+    label: "กลุ่มงาน",
     sortable: true,
     field: "groupPos",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "posName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "posName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "level",
     align: "left",
-    label: "ระดับ",
+    label: "ระดับชั้นงาน",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",
@@ -57,7 +70,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "groupOld",
     align: "left",
-    label: "อัตราค่าจ้าง กลุ่มกบัญชีค่าจ่าง",
+    label: "อัตราค่าจ้าง กลุ่มบัญชีค่าจ่าง",
     sortable: true,
     field: "groupOld",
     headerStyle: "font-size: 14px",
@@ -75,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "groupHigher",
     align: "left",
-    label: "อัตราค่าจ้างสูงกว่า กลุ่มกบัญชีค่าจ่าง",
+    label: "อัตราค่าจ้างสูงกว่าฯ กลุ่มบัญชีค่าจ่าง",
     sortable: true,
     field: "groupHigher",
     headerStyle: "font-size: 14px",
@@ -84,7 +97,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "maximumNew",
     align: "left",
-    label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
+    label: "อัตราค่าจ้างสูงกว่าฯ ขั้นสูงใหม่",
     sortable: true,
     field: "maximumNew",
     headerStyle: "font-size: 14px",
@@ -93,9 +106,9 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "reson",
     align: "left",
-    label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
+    label: "หมายเหตุ",
     sortable: true,
-    field: "maximumNew",
+    field: "reson",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -104,28 +117,30 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>([
   "no",
   "groupPos",
+  "posName",
   "level",
   "minimumOld",
   "groupOld",
   "maximumOld",
   "groupHigher",
+  "maximumNew",
+  "reson",
 ]);
 
 const rows = ref<any>([
   {
     id: "1",
-    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
-    group: 1,
-    date: new Date(),
+    groupPos: "ช่าง",
+    posName: "ผู้ช่วยช่างทั่วไป",
+    level: "ช 1",
+    minimumOld: (7690).toLocaleString(),
+    groupOld: "กลุ่มที่ 1",
+    maximumOld: (17880).toLocaleString(),
+    groupHigher: "กลุ่มที่ 1",
+    maximumNew: (20000).toLocaleString(),
+    reson: "",
     isActive: true,
   },
-  {
-    id: "2",
-    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
-    group: 2,
-    date: new Date(),
-    isActive: false,
-  },
 ]);
 
 const formFilter = reactive({
@@ -134,12 +149,75 @@ const formFilter = reactive({
   keyword: "",
 });
 
+function filterFn() {
+  formFilter.page = 1;
+  // fetchListData();
+}
+
 const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
+
+const modalForm = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const dataRow = ref<any>({});
+function editPopup(params: any) {
+  modalForm.value = true;
+  isStatusEdit.value = true;
+}
+
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    // http
+    //   .delete(config.API.salaryEmployeeChartByid(id))
+    //   .then(() => {
+    //     fetchListChart();
+    //     success($q, "ลบข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   });
+  });
+}
 </script>
+
 <template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn flat round dense icon="add" @click="() => (modalForm = true)">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.pervrnt="filterFn"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+
   <d-table
     flat
     bordered
@@ -163,22 +241,22 @@ const pagination = ref({
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name === 'date'">
-            {{ col.value ? date2Thai(col.value) : "-" }}
+          <div v-if="col.name === 'no'">
+            {{ props.rowIndex + 1 }}
           </div>
-          <div v-else-if="col.name === 'group'">
+          <!-- <div v-else-if="col.name === 'group'">
             {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
-          </div>
-          <div v-else-if="col.name === 'isActive'">
+          </div> -->
+          <!-- <div v-else-if="col.name === 'isActive'">
             <q-icon
               :name="col.value ? 'done' : 'close'"
               :color="col.value ? 'primary' : 'grey'"
               size="24px"
             ></q-icon>
-          </div>
-          <div v-else>{{ col.value ? col.value : "-" }}</div>
+          </div> -->
+          <div v-else>{{ col.value != "" ? col.value : "-" }}</div>
         </q-td>
-        <!-- <q-td>
+        <q-td>
           <q-btn
             flat
             dense
@@ -189,26 +267,15 @@ const pagination = ref({
           >
             <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 clickable v-close-popup>
                   <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 class="row items-center" @click="editPopup(props.row)">
+                      <q-icon color="edit" size="17px" name="edit" />
+                      <div class="q-pl-md">แก้ไขข้อมูล</div>
                     </div>
                   </q-item-section>
                 </q-item>
                 <q-item
-                  v-if="props.row.isActive == false"
                   clickable
                   v-close-popup
                   @click.stop="onClickDelete(props.row.id)"
@@ -223,7 +290,7 @@ const pagination = ref({
               </q-list>
             </q-menu>
           </q-btn>
-        </q-td> -->
+        </q-td>
       </q-tr>
     </template>
     <!-- <template v-slot:pagination="scope">
@@ -239,6 +306,12 @@ const pagination = ref({
       ></q-pagination>
     </template> -->
   </d-table>
+
+  <DialogFormCriteria
+    v-model:modal="modalForm"
+    :isStatusEdit="isStatusEdit"
+    :data="dataRow"
+  />
 </template>
 
 <style scoped></style>

src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue

@@ -45,7 +45,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง",
+    label: "ชื่อผังบัญชีอัตราค่าจ้าง",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -54,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "group",
     align: "left",
-    label: "กลุ่มบัญชีค่าจ้าง",
+    label: "กลุ่มของผังบัญชีอัตราค่าจ้าง",
     sortable: true,
     field: "group",
     headerStyle: "font-size: 14px",
@@ -289,7 +289,7 @@ onMounted(() => {
             {{ col.value ? date2Thai(col.value) : "-" }}
           </div>
           <div v-else-if="col.name === 'group'">
-            {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
+            {{ col.value ? `กลุ่มที่ ${col.value}` : "-" }}
           </div>
           <div v-else-if="col.name === 'isActive'">
             <q-icon

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

@@ -23,7 +23,7 @@ const store = useSalaryEmployeeChartDataStore();
       active-color="primary"
       indicator-color="primary"
     >
-      <q-tab name="structure" label="บัญชีโครงสร้างอัตราค่าจ้าง" />
+      <q-tab name="structure" label="ชื่อผังบัญชีอัตราค่าจ้าง" />
       <q-tab name="criteria" label="หลักเกณฑ์" />
     </q-tabs>
     <q-separator />