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

src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

@@ -49,7 +49,7 @@ const props = defineProps({
 
 const salaryId = ref<string>("");
 const formData = reactive<FormData>({
-  salaryType: "", //*ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
+  name: "", //*ชื่อผังบัญชีอัตราเงินเดือน
   posTypeId: "", //*ประเภทของตำแหน่ง
   posLevelId: "", //*ระดับของตำแหน่ง
   isActive: false, //*สถานะการใช้งาน
@@ -61,21 +61,16 @@ const formData = reactive<FormData>({
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const salaryTypeRef = ref<Object | null>(null);
+const nameRef = ref<Object | null>(null);
 const posTypeRef = ref<Object | null>(null);
 const posLevelRef = ref<Object | null>(null);
 
 const ObjectRef: ObjectSalaryRef = {
-  salaryType: salaryTypeRef,
+  name: nameRef,
   posTypId: posTypeRef,
   posLevelId: posLevelRef,
 };
 
-const salaryTypeOption = ref<DataOption[]>([
-  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
-  { id: "EMPLOYEE", name: "ลูกจ้างประจำกรุงเทพมหานคร" },
-]);
-
 const posType = ref<SalaryPosType[]>([]);
 const salaryPosTypeOption = ref<DataOption[]>([]);
 const salaryPosLevelOption = ref<DataOption[]>([]);
@@ -130,7 +125,7 @@ async function fetchSalaryDetail(id: string) {
     .get(config.API.salaryChartByid(id))
     .then((res) => {
       const data = res.data.result;
-      formData.salaryType = data.salaryType;
+      formData.name = data.name;
       formData.posTypeId = data.posTypeId;
       formData.posLevelId = data.posLevelId;
       formData.isActive = data.isActive;
@@ -191,7 +186,7 @@ function closeDialog() {
 }
 
 function clearFormData() {
-  formData.salaryType = "";
+  formData.name = "";
   formData.posTypeId = "";
   formData.posLevelId = "";
   formData.isSpecial = false;
@@ -263,21 +258,17 @@ function checkEndDate() {
             <div class="col-md-12">
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
-                  <q-select
+                  <q-input
                     :readonly="isReadonly"
-                    ref="salaryTypeRef"
+                    ref="nameRef"
                     dense
                     hide-bottom-space
                     outlined
-                    option-label="name"
-                    option-value="id"
-                    emit-value
-                    map-options
-                    v-model="formData.salaryType"
-                    :options="salaryTypeOption"
-                    label="ประเภทผังบัญชีเงินเดือน"
+                    v-model="formData.name"
+                    label="ชื่อผังบัญชีอัตราเงินเดือน"
+                    la
                     :rules="[
-                      (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
+                      (val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราเงินเดือน',
                     ]"
                     lazy-rules
                   />

src/modules/13_salary/interface/index/Main.ts

@@ -23,7 +23,7 @@ interface ItemsMenu {
   type: string;
 }
 interface ObjectSalaryRef {
-  salaryType: object | null;
+  name: object | null;
   posTypId: object | null;
   posLevelId: object | null;
 
@@ -43,7 +43,7 @@ interface ObjectSalaryRateRef {
 }
 
 interface FormData{
-  salaryType:string
+  name:string
   posTypeId:string
   posLevelId:string
   isActive:boolean

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>