ปรับรายการผังบัญชีเงินเดือนข้าราชการ

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

@@ -13,13 +13,13 @@ import type {
 } from "@/modules/13_salary/interface/index/Main";
 import type { Salary } from "@/modules/13_salary/interface/response/Main";
 import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main";
-import DialogFormUpload from '@/modules/13_salary/components/SalaryChart/DialogUpload.vue'
+import DialogFormUpload from "@/modules/13_salary/components/SalaryChart/DialogUpload.vue";
 import DialogFormMain from "@/modules/13_salary/components/SalaryChart/DialogFormMain.vue";
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const isActive = ref<boolean>(false)
+const isActive = ref<boolean>(false);
 const $q = useQuasar();
 const router = useRouter();
 const {
@@ -31,38 +31,29 @@ const {
   success,
 } = useCounterMixin();
 
-const total = ref<number>()
+const total = ref<number>();
 /** modalDialog*/
 const modalDialogFormMain = ref<boolean>(false);
 const modalUpload = ref<boolean>(false);
-const rowId = ref<string>('')
+const rowId = ref<string>("");
 /** Table*/
 const rows = ref<Salary[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "salaryType",
+    name: "name",
     align: "left",
-    label: "ประเภทผัง",
+    label: "ชื่อผังบัญชีอัตราเงินเดือน",
     sortable: true,
-    field: "salaryType",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posType",
+    name: "posList",
     align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับ",
-    field: "posLevel",
+    label: "ประเภทผังบัญชีเงินเดือน",
     sortable: true,
+    field: "posList",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -86,9 +77,8 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>([
-  "salaryType",
-  "posType",
-  "posLevel",
+  "name",
+  "posList",
   "startDate",
   "isActive",
 ]);
@@ -102,8 +92,8 @@ const itemMenu = ref<ItemsMenu[]>([
     type: "edit",
   },
   {
-    label: "อัปโหลดเอกสารอ้างอิง",
-    icon: "mdi-upload",
+    label: "เอกสารอ้างอิง",
+    icon: "mdi-file-document-outline",
     color: "teal",
     type: "upload",
   },
@@ -149,11 +139,10 @@ async function fetchListSalaly() {
         `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
     )
     .then((res) => {
-      total.value = res.data.result.total
+      total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
       const data = res.data.result.data;
       rows.value = data;
-
     })
     .catch((err) => {
       messageError($q, err);
@@ -168,7 +157,7 @@ const dataRow = ref<Salary>();
 async function onClickSalary(type: string, data: Salary | null) {
   modalDialogFormMain.value = !modalDialogFormMain.value;
   typeAction.value = type;
-  
+
   if (data) {
     dataRow.value = data;
   }
@@ -208,11 +197,11 @@ async function onClickDelete(id: string) {
   });
 }
 
-async function onClickUpload(type: string,id: string,active:boolean) {
-  modalUpload.value = true
+async function onClickUpload(type: string, id: string, active: boolean) {
+  modalUpload.value = true;
   typeAction.value = type;
-  rowId.value = id
-  isActive.value = active
+  rowId.value = id;
+  isActive.value = active;
 }
 
 onMounted(async () => {
@@ -305,6 +294,10 @@ async function filterFn(page: number) {
                   size="24px"
                 />
               </div>
+              <div v-else-if="col.name === 'posList'" class="column">
+                <div class="col text-weight-medium">{{ props.row.posType }}</div>
+                <div class="col text-weight-light">{{ props.row.isSpecial ? `${props.row.posLevel} (ฉ)` : `${props.row.posLevel}` }}</div>
+              </div>
               <div v-else-if="col.name === 'salaryType'">
                 {{
                   col.value === "OFFICER"
@@ -315,9 +308,6 @@ async function filterFn(page: number) {
               <div v-else-if="col.name === 'startDate'">
                 {{ col.value ? date2Thai(col.value) : "" }}
               </div>
-              <div v-else-if="col.name === 'posLevel'">
-                {{ props.row.isSpecial ? `${col.value} (ฉ)` : `${col.value}` }}
-              </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
@@ -344,7 +334,11 @@ async function filterFn(page: number) {
                           : item.type === 'salaryRate'
                           ? onClickSalaryRate(props.row.id)
                           : item.type === 'upload'
-                          ? onClickUpload('edit',props.row.id,props.row.isActive)
+                          ? onClickUpload(
+                              'edit',
+                              props.row.id,
+                              props.row.isActive
+                            )
                           : item.type === 'copy'
                           ? onClickCoppy(props.row.id)
                           : null
@@ -369,11 +363,7 @@ async function filterFn(page: number) {
                     >
                       <q-item-section>
                         <div class="row items-center">
-                          <q-icon
-                            color="red"
-                            size="17px"
-                            name="delete"
-                          />
+                          <q-icon color="red" size="17px" name="delete" />
                           <div class="q-pl-md">ลบ</div>
                         </div>
                       </q-item-section>
@@ -414,7 +404,6 @@ async function filterFn(page: number) {
     :fetchData="fetchListSalaly"
     :isActive="isActive"
   />
-
 </template>
 
 <style scoped></style>