ทะเบียนประวัติ => ตำแหน่งเงืนเดืน

src/api/registry/api.registry.ts

@@ -2,6 +2,7 @@ import env from "../index";
 
 const registryNew = `${env.API_URI}/org/profile/`;
 const metadata = `${env.API_URI}/org/metadata/`;
+const salaryNew = `${env.API_URI}/org/profile/salary`;
 
 export default {
   registryNew,
@@ -115,30 +116,30 @@ export default {
   profileNewDisciplineHisByDisciplineId: (disciplineId: string) =>
     `${registryNew}discipline/history/${disciplineId}`,
 
-    // ปฏิบัติราชการพิเศษ
+  // ปฏิบัติราชการพิเศษ
-profileNewDuty: `${registryNew}duty`,
+  profileNewDuty: `${registryNew}duty`,
-profileNewDutyByProfileId: (profileId: string) =>
+  profileNewDutyByProfileId: (profileId: string) =>
-`${registryNew}duty/${profileId}`,
+    `${registryNew}duty/${profileId}`,
-profileNewDutyByDutyId: (dutyId: string) =>
+  profileNewDutyByDutyId: (dutyId: string) => `${registryNew}duty/${dutyId}`,
-`${registryNew}duty/${dutyId}`,
+  profileNewDutyHisByDutyId: (dutyId: string) =>
-profileNewDutyHisByDutyId: (dutyId: string) =>
+    `${registryNew}duty/history/${dutyId}`,
-`${registryNew}duty/history/${dutyId}`,
 
+  //ข้อมูลราชการ
+  profileNewGovernment: () => `${registryNew}government`,
+  profileNewGovernmentById: (id: string) => `${registryNew}government/${id}`,
+  profileNewGovernmentHistory: (id: string) =>
+    `${registryNew}government/history/${id}`,
 
-//ข้อมูลราชการ
+  //การลา
-profileNewGovernment:()=>`${registryNew}government`,
+  profileNewLeave: () => `${registryNew}leave`,
-profileNewGovernmentById:(id:string)=>`${registryNew}government/${id}`,
+  profileNewLeaveById: (id: string) => `${registryNew}leave/${id}`,
-profileNewGovernmentHistory:(id:string)=>`${registryNew}government/history/${id}`,
+  profileNewLeaveHistory: (id: string) => `${registryNew}leave/history/${id}`,
-
+  profileCheckDate: () => `${env.API_URI}/leave/user/check`,
-//การลา
+  profileNewLeaveType: () => `${env.API_URI}/leave/type`,
-profileNewLeave:()=>`${registryNew}leave`,
-profileNewLeaveById:(id:string)=>`${registryNew}leave/${id}`,
-profileNewLeaveHistory:(id:string)=>`${registryNew}leave/history/${id}`,
-profileCheckDate:()=>`${env.API_URI}/leave/user/check`,
-profileNewLeaveType:()=>`${env.API_URI}/leave/type`,
 
   /** ตำแหน่งเงินเดือน*/
-  profileSalaryNew: `${env.API_URI}/org/profileSalary`,
+  profileSalaryNew: `${salaryNew}`,
-  profileSalaryNewById: (id: string) =>
+  profileListSalaryNew: (id: string) => `${salaryNew}/${id}`,
-    `${env.API_URI}/org/profileSalary/${id}`,
+  profileListSalaryHistoryNew: (profileId: string) =>
+    `${salaryNew}/history/${profileId}`,
 };

src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue

@@ -6,7 +6,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
+import type {
+  DataOption2,
+  DataOption,
+} from "@/modules/04_registryNew/interface/index/Main";
 import type { ObjectSalaryRef } from "@/modules/04_registryNew/interface/index/salary";
 import type { FormSalaryNew } from "@/modules/04_registryNew/interface/request/Salary";
 
@@ -40,8 +43,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => date2Thai(v),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -51,8 +53,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => Number(v).toLocaleString(),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionSalaryAmount",
@@ -62,8 +63,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionSalaryAmount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => Number(v).toLocaleString(),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -73,8 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "mouthSalaryAmount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => Number(v).toLocaleString(),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
@@ -85,8 +84,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
@@ -97,8 +94,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "postionTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevelName",
@@ -108,20 +103,16 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
-    name: "salaryRef",
+    name: "templateDoc",
     align: "left",
     label: "เอกสารอ้างอิง",
     sortable: true,
-    field: "salaryRef",
+    field: "templateDoc",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -131,8 +122,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
@@ -143,7 +132,7 @@ const visibleColumns = ref<string[]>([
   "posNo",
   "postionTypeName",
   "positionLevelName",
-  "salaryRef",
+  "templateDoc",
   "refCommandNo",
 ]);
 const formFilter = reactive({
@@ -159,39 +148,39 @@ const pagination = ref({
 });
 
 const rows = ref<any>([
-  {
+  // {
-    date: new Date(),
+  //   date: new Date(),
-    amount: 20000,
+  //   amount: 20000,
-    positionSalaryAmount: 20000,
+  //   positionSalaryAmount: 20000,
-    mouthSalaryAmount: 20000,
+  //   mouthSalaryAmount: 20000,
-    posNo: "1",
+  //   posNo: "1",
-    postionTypeName: "คำแหน่งประเภท",
+  //   postionTypeName: "คำแหน่งประเภท",
-    positionLevelName: "ระดับ",
+  //   positionLevelName: "ระดับ",
-    salaryRef: "เอกสารอ้างอิง",
+  //   salaryRef: "เอกสารอ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
+  //   refCommandNo: "เลขที่คำสั่ง",
-  },
+  // },
-  {
+  // {
-    date: new Date(),
+  //   date: new Date(),
-    amount: 20000,
+  //   amount: 20000,
-    positionSalaryAmount: 20000,
+  //   positionSalaryAmount: 20000,
-    mouthSalaryAmount: 20000,
+  //   mouthSalaryAmount: 20000,
-    posNo: "1",
+  //   posNo: "1",
-    postionTypeName: "คำแหน่งประเภท",
+  //   postionTypeName: "คำแหน่งประเภท",
-    positionLevelName: "ระดับ",
+  //   positionLevelName: "ระดับ",
-    salaryRef: "เอกสารอ้างอิง",
+  //   salaryRef: "เอกสารอ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
+  //   refCommandNo: "เลขที่คำสั่ง",
-  },
+  // },
-  {
+  // {
-    date: new Date(),
+  //   date: new Date(),
-    amount: 20000,
+  //   amount: 20000,
-    positionSalaryAmount: 20000,
+  //   positionSalaryAmount: 20000,
-    mouthSalaryAmount: 20000,
+  //   mouthSalaryAmount: 20000,
-    posNo: "1",
+  //   posNo: "1",
-    postionTypeName: "คำแหน่งประเภท",
+  //   postionTypeName: "คำแหน่งประเภท",
-    positionLevelName: "ระดับ",
+  //   positionLevelName: "ระดับ",
-    salaryRef: "เอกสารอ้างอิง",
+  //   salaryRef: "เอกสารอ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
+  //   refCommandNo: "เลขที่คำสั่ง",
-  },
+  // },
 ]);
 
 const formDataSalary = reactive<FormSalaryNew>({
@@ -199,11 +188,11 @@ const formDataSalary = reactive<FormSalaryNew>({
   posNo: "",
   templatePos: "",
   position: "",
-  positionLineName: "",
+  positionLine: "",
-  typePosition: "",
+  positionPathSide: "",
-  levelPosition: "",
+  positionType: "",
-  positionPathSideName: "",
+  positionLevel: "",
-  positionExecutiveName: "",
+  positionExecutive: "",
   salaryCompensation: null,
   salary: null,
   salaryPos: null,
@@ -212,42 +201,25 @@ const formDataSalary = reactive<FormSalaryNew>({
   doc: "",
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const dateRef = ref<Object | null>(null);
-const posNoRef = ref<Object | null>(null);
-const positionRef = ref<Object | null>(null);
-const typePositionRef = ref<Object | null>(null);
-const levelPositionRef = ref<Object | null>(null);
-const salaryRef = ref<Object | null>(null);
-const docRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectSalaryRef = {
-  date: dateRef,
-  posNo: posNoRef,
-  position: positionRef,
-  typePosition: typePositionRef,
-  levelPosition: levelPositionRef,
-  salary: salaryRef,
-  doc: docRef,
-};
-
 const modalDialogSalary = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
+const salaryId = ref<string>("");
+const dataLevel = ref<any[]>([]);
 
 const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
 const positionLineOptions = ref<DataOption2[]>(store.optionTemplatePos);
-const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posTypeOptions = ref<DataOption[]>([]);
-const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
+const posTypeOptionsMain = ref<DataOption[]>([]);
+const posLevelOption = ref<DataOption[]>([]);
+const posLevelOptionMain = ref<DataOption[]>([]);
+
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
 function fetchListSalary() {
   showLoader();
   http
-    .get(
+    .get(config.API.profileListSalaryNew(profileId.value))
-      config.API.profileSalaryNewById("59134ef9-9e62-41d0-aac5-339be727f2b1")
-    )
     .then((res) => {
-      // console.log(res);
       rows.value = res.data.result;
     })
     .catch((err) => {
@@ -258,29 +230,58 @@ function fetchListSalary() {
     });
 }
 
-function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+function fetchType() {
-  isStatusEdit.value = statusEdit;
+  http
-  modalDialogSalary.value = true;
+    .get(config.API.orgPosType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      posTypeOptionsMain.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = posTypeOptionsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
 
+async function updateSelectType(val: string, status: boolean = false) {
+  const listLevel = await dataLevel.value.find((e: any) => e.id === val);
+  if (listLevel) {
+    posLevelOptionMain.value = listLevel.posLevels.map((e: any) => ({
+      id: e.id,
+      name: e.posLevelName,
+    }));
+    posLevelOption.value = posLevelOptionMain.value;
+    formDataSalary.positionLevel = !status ? "" : formDataSalary.positionLevel;
+  }
+}
+
+async function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+  dataLevel.value.length === 0 && (await fetchType());
+  setTimeout(async () => {
+    statusEdit && (await updateSelectType(data.positionType, true));
+    isStatusEdit.value = statusEdit;
+  }, 500);
+  posLevelOptionMain.value = !statusEdit ? [] : posLevelOptionMain.value;
+  modalDialogSalary.value = true;
+  salaryId.value = data.id;
   formDataSalary.date = statusEdit ? data.date : null;
   formDataSalary.posNo = statusEdit ? data.posNo : "";
-  // formDataSalary.templatePos = statusEdit ? data.templatePos : "";
+  formDataSalary.templatePos = "";
-  // formDataSalary.position = statusEdit ? data.position : "";
+  formDataSalary.position = statusEdit ? data.position : "";
-  // formDataSalary.positionLineName = statusEdit ? data.positionLineName : "";
+  formDataSalary.positionLine = statusEdit ? data.positionLine : "";
-  // formDataSalary.typePosition = statusEdit ? data.postionTypeName : "";
+  formDataSalary.positionType = statusEdit ? data.positionType : "";
-  // formDataSalary.levelPosition = statusEdit ? data.levelPosition : "";
+  formDataSalary.positionLevel = statusEdit ? data.positionLevel : "";
-  // formDataSalary.positionPathSideName = statusEdit
+  formDataSalary.positionPathSide = statusEdit ? data.positionPathSide : "";
-  //   ? data.positionPathSideName
+  formDataSalary.positionExecutive = statusEdit ? data.positionExecutive : "";
-  //   : "";
-  // formDataSalary.positionExecutiveName = statusEdit
-  //   ? data.positionExecutiveName
-  //   : "";
   formDataSalary.salaryCompensation = statusEdit ? data.mouthSalaryAmount : "";
   formDataSalary.salary = statusEdit ? data.amount : "";
   formDataSalary.salaryPos = statusEdit ? data.positionSalaryAmount : "";
-  // formDataSalary.refCommandNo = statusEdit ? data.refCommandNo : "";
+  formDataSalary.refCommandNo = statusEdit ? data.refCommandNo : "";
-  // formDataSalary.templateDoc = statusEdit ? data.templateDoc : "";
+  formDataSalary.templateDoc = "";
-  formDataSalary.doc = statusEdit ? data.salaryRef : "";
+  formDataSalary.doc = statusEdit ? data.templateDoc : "";
 }
 
 function onClickCloseDialog() {
@@ -296,7 +297,7 @@ function filterSelector(val: any, update: Function, filtername: string) {
         );
       });
       break;
-    case "positionLineName":
+    case "positionLine":
       update(() => {
         positionLineOptions.value = store.optionTemplatePos.filter(
           (v: DataOption2) => v.name.indexOf(val) > -1
@@ -305,15 +306,15 @@ function filterSelector(val: any, update: Function, filtername: string) {
       break;
     case "posType":
       update(() => {
-        posTypeOptions.value = store.optionTemplatePos.filter(
+        posTypeOptions.value = posTypeOptionsMain.value.filter(
-          (v: DataOption2) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "posLevel":
       update(() => {
-        posLevelOption.value = store.optionTemplatePos.filter(
+        posLevelOption.value = posLevelOptionMain.value.filter(
-          (v: DataOption2) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -339,30 +340,46 @@ function updateDoc(val: string) {
 }
 
 function onSubmit() {
-  const hasError = [];
+  dialogConfirm($q, () => {
-  for (const key in ObjectRef) {
+    submit();
-    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)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
 }
 
 async function submit() {
+  console.log(formDataSalary);
+  const formData = {
+    profileId: isStatusEdit.value ? undefined : profileId.value,
+    date: formDataSalary.date, // วันที่
+    posNo: formDataSalary.posNo, //เลขที่ตำแหน่ง
+    position: formDataSalary.position, //ตำแหน่ง
+    positionLine: formDataSalary.positionLine, //สายงาน
+    positionPathSide: formDataSalary.positionPathSide, // ด้าน/สาขา
+    positionExecutive: formDataSalary.positionExecutive, //ตำแหน่งทางการบริหาร
+    positionType: formDataSalary.positionType, // ประเภทตำแหน่ง
+    positionLevel: formDataSalary.positionLevel, // ระดับตำแหน่ง
+    amount:
+      typeof formDataSalary.salary === "number"
+        ? formDataSalary.salary
+        : Number(formDataSalary?.salary?.replace(/,/g, "")), //เงินเดือนฐาน
+    positionSalaryAmount:
+      typeof formDataSalary.salaryPos === "number"
+        ? formDataSalary.salaryPos
+        : Number(formDataSalary?.salaryPos?.replace(/,/g, "")), // เงินประจำตำแหน่ง
+    mouthSalaryAmount:
+      typeof formDataSalary.salaryCompensation === "number"
+        ? formDataSalary.salaryCompensation
+        : Number(formDataSalary?.salaryCompensation?.replace(/,/g, "")), //เงินค่าตอบแทนรายเดือน
+    refCommandNo: formDataSalary.refCommandNo, // เลขที่คำสั่ง
+    templateDoc: formDataSalary.doc, // เอกสารอ้างอิง
+  };
+  console.log(formData);
+
   try {
     const url = isStatusEdit.value
-      ? config.API.profileSalaryNewById("12312")
+      ? config.API.profileListSalaryNew(salaryId.value)
       : config.API.profileSalaryNew;
-    const method = isStatusEdit.value ? "put" : "post";
+    const method = isStatusEdit.value ? "patch" : "post";
-    await http[method](url, formDataSalary);
+    await http[method](url, formData);
     fetchListSalary();
     onClickCloseDialog();
     success($q, "บันทึกข้อมูลสำเร็จ");
@@ -374,7 +391,8 @@ async function submit() {
 }
 
 const modalHistory = ref<boolean>(false);
-function ocClikcHistory() {
+function onClikcHistory(id: string) {
+  salaryId.value = id;
   modalHistory.value = true;
 }
 
@@ -396,7 +414,13 @@ onMounted(() => {
       class="q-mr-sm"
     >
       <template v-slot:append>
-        <q-icon name="search" />
+        <q-icon v-if="formFilter.keyword == ''" name="search" />
+        <q-icon
+          v-else
+          name="clear"
+          class="cursor-pointer"
+          @click="formFilter.keyword = ''"
+        />
       </template>
     </q-input>
 
@@ -421,6 +445,7 @@ onMounted(() => {
     flat
     bordered
     dense
+    :filter="formFilter.keyword"
     :columns="columns"
     :rows="rows"
     :paging="true"
@@ -471,20 +496,9 @@ onMounted(() => {
           :key="col.id"
           @click="onClickOpenDialog(true, props.row)"
         >
-          <div v-if="col.name === 'date'">
+          <div class="table_ellipsis">
-            {{ col.value ? date2Thai(col.value) : "-" }}
+            {{ col.value ? col.value : "-" }}
           </div>
-          <div v-else-if="col.name === 'amount'">
-            {{ col.value ? col.value.toLocaleString() : "-" }}
-          </div>
-
-          <div v-else-if="col.name === 'positionSalaryAmount'">
-            {{ col.value ? col.value.toLocaleString() : "-" }}
-          </div>
-          <div v-else-if="col.name === 'mouthSalaryAmount'">
-            {{ col.value ? col.value.toLocaleString() : "-" }}
-          </div>
-          <div v-else>{{ col.value ? col.value : "-" }}</div>
         </q-td>
         <q-td auto-width>
           <q-btn
@@ -494,7 +508,7 @@ onMounted(() => {
             round
             size="14px"
             icon="mdi-history"
-            @click="ocClikcHistory"
+            @click="onClikcHistory(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
           </q-btn>
@@ -517,7 +531,7 @@ onMounted(() => {
 
   <q-dialog v-model="modalDialogSalary" persistent full-width>
     <q-card>
-      <form @submit.prevent.stop="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="
             isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
@@ -542,7 +556,6 @@ onMounted(() => {
                   }}</template>
                   <template #trigger>
                     <q-input
-                      ref="dateRef"
                       outlined
                       dense
                       borderless
@@ -622,7 +635,7 @@ onMounted(() => {
                   dense
                   lazy-rules
                   borderless
-                  v-model="formDataSalary.positionLineName"
+                  v-model="formDataSalary.positionLine"
                   :label="`${'สายงาน'}`"
                   emit-value
                   map-options
@@ -633,7 +646,7 @@ onMounted(() => {
                   use-input
                   input-debounce="0"
                   @filter="(inputValue: any,
-                        doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
                         )"
                 />
               </div>
@@ -643,7 +656,7 @@ onMounted(() => {
                   outlined
                   dense
                   lazy-rules
-                  v-model="formDataSalary.positionPathSideName"
+                  v-model="formDataSalary.positionPathSide"
                   hide-bottom-space
                   :label="`${'ด้าน/สาขา'}`"
                 />
@@ -654,7 +667,7 @@ onMounted(() => {
                   dense
                   lazy-rules
                   borderless
-                  v-model="formDataSalary.positionExecutiveName"
+                  v-model="formDataSalary.positionExecutive"
                   hide-bottom-space
                   :label="`${'ตำแหน่งทางการบริหาร'}`"
                 >
@@ -663,12 +676,12 @@ onMounted(() => {
 
               <div class="col-xs-6 col-sm-6 col-md-4">
                 <q-select
-                  ref="typePositionRef"
+                  ref="positionType Ref"
                   outlined
                   dense
                   lazy-rules
                   borderless
-                  v-model="formDataSalary.typePosition"
+                  v-model="formDataSalary.positionType"
                   :label="`${'ตำแหน่งประเภท'}`"
                   emit-value
                   map-options
@@ -678,6 +691,7 @@ onMounted(() => {
                   hide-bottom-space
                   use-input
                   input-debounce="0"
+                  @update:model-value="updateSelectType"
                   :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
                   @filter="(inputValue: any,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
@@ -687,19 +701,19 @@ onMounted(() => {
 
               <div class="col-xs-6 col-sm-6 col-md-4">
                 <q-select
-                  ref="levelPositionRef"
+                  ref="positionLevel Ref"
                   outlined
                   dense
                   lazy-rules
                   borderless
-                  v-model="formDataSalary.levelPosition"
+                  v-model="formDataSalary.positionLevel"
                   :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
                   :label="`${'ระดับตำแหน่ง'}`"
                   emit-value
                   map-options
                   option-label="name"
                   :options="posLevelOption"
-                  option-value="name"
+                  option-value="id"
                   hide-bottom-space
                   use-input
                   input-debounce="0"
@@ -730,6 +744,7 @@ onMounted(() => {
                   dense
                   outlined
                   v-model="formDataSalary.salaryPos"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]"
                   label="เงินประจำตำแหน่ง"
                   mask="###,###,###,###"
                   reverse-fill-mask
@@ -812,11 +827,11 @@ onMounted(() => {
             <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
         </q-card-section>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" />
+  <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue

@@ -1,12 +1,27 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
 const modal = defineModel<boolean>("modal", { required: true });
+const salaryId = defineModel<string>("salaryId", { required: true });
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -17,8 +32,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => date2Thai(v),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -28,8 +42,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => Number(v).toLocaleString(),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionSalaryAmount",
@@ -38,9 +51,8 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "positionSalaryAmount",
     headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -49,9 +61,8 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "mouthSalaryAmount",
     headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "oc",
@@ -61,8 +72,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "oc",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -72,8 +81,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
@@ -83,8 +90,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLine",
@@ -94,8 +99,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLine",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionPathSide",
@@ -105,8 +108,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionPathSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
@@ -116,8 +117,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -127,8 +126,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutive",
@@ -138,8 +135,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutiveSide",
@@ -149,8 +144,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionExecutiveSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "salaryClass",
@@ -160,19 +153,15 @@ const columns = ref<QTableProps["columns"]>([
     field: "salaryClass",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "salaryRef",
+    name: "templateDoc",
     align: "left",
     label: "เอกสารอ้างอิง",
     sortable: true,
-    field: "salaryRef",
+    field: "templateDoc",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -182,8 +171,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdFullName",
@@ -193,8 +180,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdAt",
@@ -204,8 +189,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+    format: (v) => date2Thai(v),
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
@@ -223,7 +207,7 @@ const visibleColumns = ref<string[]>([
   "positionExecutive",
   "positionExecutiveSide",
   "salaryClass",
-  "salaryRef",
+  "templateDoc",
   "refCommandNo",
   "createdFullName",
   "createdAt",
@@ -234,11 +218,33 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const filter = ref<string>("");
+const keyword = ref<string>("");
 
 function closeDialog() {
   modal.value = false;
 }
+
+function fetchListHistory() {
+  showLoader();
+  http
+    .get(config.API.profileListSalaryHistoryNew(salaryId.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchListHistory();
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent full-width>
@@ -254,12 +260,18 @@ function closeDialog() {
           <q-input
             dense
             outlined
-            v-model="filter"
+            v-model="keyword"
             label="ค้นหา"
             class="q-mr-sm"
           >
             <template v-slot:append>
-              <q-icon name="search" />
+              <q-icon v-if="keyword === ''" name="search" />
+              <q-icon
+                v-else
+                name="clear"
+                class="cursor-pointer"
+                @click="keyword = ''"
+              />
             </template>
           </q-input>
 
@@ -278,51 +290,37 @@ function closeDialog() {
             style="min-width: 150px"
           />
         </q-toolbar>
+
         <d-table
           ref="table"
           row-key="id"
           flat
           bordered
           dense
-          :filter="filter"
+          :filter="keyword"
           :columns="columns"
           :rows="rows"
           :paging="true"
           v-model:pagination="pagination"
-          :rows-per-page-options="[20, 50, 100]"
+          :rows-per-page-options="[10, 20, 50, 100]"
           :visible-columns="visibleColumns"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th auto-width />
-              <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
+              <q-td v-for="col in props.cols">
-                <template>
+                <div class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
-                </template>
+                </div>
               </q-td>
             </q-tr>
           </template>
-          <!-- <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template> -->
         </d-table>
       </q-card-section>
     </q-card>

src/modules/04_registryNew/interface/request/Salary.ts

@@ -3,14 +3,14 @@ interface FormSalaryNew {
   posNo: string;
   templatePos: string;
   position: string;
-  positionLineName: string;
+  positionLine: string;
-  typePosition: string;
+  positionPathSide: string;
-  levelPosition: string;
+  positionType: string;
-  positionPathSideName: string;
+  positionLevel: string;
-  positionExecutiveName: string;
+  positionExecutive: string;
-  salary: number | null;
+  salary: number | string | null;
-  salaryPos: number | null;
+  salaryPos: number | string | null;
-  salaryCompensation: number | null;
+  salaryCompensation: number | string | null;
   refCommandNo: string;
   templateDoc: string;
   doc: string;