From 2852ac8026b2fc9edd2dd937661d7434b1b53870 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 14 Mar 2024 11:23:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B1=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=88=E0=B8=B3=20=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9F=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B9=80=E0=B8=81=E0=B8=93=E0=B8=91=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DialogEmployeeChart.vue                   |  16 +-
 .../DialogFormCriteria.vue                    | 304 ++++++++++++++++++
 .../salaryEmployeeChart/TabCriteria.vue       | 155 ++++++---
 .../salaryEmployeeChart/TabStructure.vue      |   6 +-
 .../13_salary/views/salaryEmployeeChart.vue   |   2 +-
 5 files changed, 430 insertions(+), 53 deletions(-)
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue

diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
index 0ccf1fb82..75fee022d 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/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>
 
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
new file mode 100644
index 000000000..db62795d3
--- /dev/null
+++ b/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>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
index 8f46b898a..8b82e75f6 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/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>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
index a8acc6c20..d2c45c331 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/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
diff --git a/src/modules/13_salary/views/salaryEmployeeChart.vue b/src/modules/13_salary/views/salaryEmployeeChart.vue
index add4984af..ffa47f32c 100644
--- a/src/modules/13_salary/views/salaryEmployeeChart.vue
+++ b/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 />