ปรับ fe sprint2

src/modules/04_registry/views/Main.vue

@@ -52,17 +52,21 @@
           <ProfileTable
             style="height: 77vh"
             :rows="rows"
-            :columns="columns"
+            :columns="
+              profileType == 'employee' || profileType == 'all'
+                ? columnsEmployee
+                : columns
+            "
             :filter="filter"
             :visible-columns="visibleColumns"
             v-model:inputfilter="filter"
             v-model:inputvisible="visibleColumns"
             :pagination="initialPagination"
             v-model:profileId="profileId"
+            v-model:employeeClass="employeeClass"
             v-model:fullName="fullName"
             v-model:oldFullName="oldFullName"
             v-model:isShowRetire="isShowRetire"
-            v-model:profileType="profileType"
             v-model:retireYear="retireYear"
             v-model:govAge="govAge"
             v-model:isProbation="isProbation"
@@ -103,17 +107,6 @@
                       </div>
                     </div>
                   </div>
-                  <div
-                    v-else-if="
-                      col.name == 'dateAppoint' ||
-                      col.name == 'dateStart' ||
-                      col.name == 'createdAt' ||
-                      col.name == 'salaryDate'
-                    "
-                    class="table_ellipsis"
-                  >
-                    {{ col.value == null ? "-" : date2Thai(col.value) }}
-                  </div>
                   <div v-else class="table_ellipsis">
                     {{ col.value ?? "-" }}
                   </div>
@@ -151,11 +144,12 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, typeRetire } = mixin;
 const router = useRouter();
 const isDrawer = ref<boolean>(true);
 const filter = ref<string>(""); //search data table
 const profileId = ref<string>("");
+const employeeClass = ref<string>("officer");
 const fullName = ref<string>("");
 const oldFullName = ref<string>("");
 const isShowRetire = ref<boolean>(false);
@@ -173,34 +167,56 @@ const visibleColumns = ref<String[]>([]);
 visibleColumns.value = [
   "no",
   "fullname",
+  "fullnameOld",
+  "oc",
   "position",
+  "positionPathSide",
   "numberPosition",
   "positionLine",
   "positionType",
   "govAge",
   "positionLevel",
   "positionExecutive",
+  "positionExecutiveSide",
   "dateAppoint",
+  "refSalary",
   "dateStart",
   "createdAt",
   "salaryDate",
+  "age",
+  "amount",
+  "insignia",
+  "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
+];
+const visibleColumnsOfficer = ref<String[]>([]);
+visibleColumnsOfficer.value = [
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "position",
+  "positionPathSide",
+  "numberPosition",
+  "positionLine",
+  "positionType",
+  "govAge",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  "insignia",
+  "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
 ];
-// profileData.main.columns.length == 0
-//   ? (visibleColumns.value = [
-//       "no",
-//       "fullname",
-//       "position",
-//       "numberPosition",
-//       "positionLine",
-//       "positionType",
-//       "positionLevel",
-//       "positionExecutive",
-//       "dateAppoint",
-//       "dateStart",
-//       "createdAt",
-//       "salaryDate",
-//     ])
-//   : (visibleColumns.value = profileData.main.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -225,6 +241,20 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
+  {
+    name: "numberPosition",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "numberPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
   {
     name: "position",
     align: "left",
@@ -240,11 +270,11 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
   {
-    name: "numberPosition",
+    name: "positionPathSide",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ด้าน/สาขา",
     sortable: true,
-    field: "numberPosition",
+    field: "positionPathSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -267,20 +297,6 @@ const columns = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
-  {
-    name: "govAge",
-    align: "left",
-    label: "อายุราชการ(ปี)",
-    sortable: true,
-    field: "govAge",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
   {
     name: "positionType",
     align: "left",
@@ -323,10 +339,94 @@ const columns = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "เครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insigniaLast",
+    align: "left",
+    label: "เครื่องราชฯ(เดิม)",
+    sortable: true,
+    field: "insigniaLast",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
   {
     name: "dateAppoint",
     align: "left",
-    label: "วันที่สั่งบรรจุ",
+    label: "วันที่บรรจุ",
     sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
@@ -345,6 +445,49 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่เข้าสู่ตำแหน่ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
   {
     name: "createdAt",
     align: "left",
@@ -356,6 +499,270 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<RequestItemsObject[]>([]);
+const visibleColumnsEmployee = ref<String[]>([]);
+visibleColumnsEmployee.value = [
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "positionEmployeePosition",
+  "positionEmployeePositionSide",
+  "numberPosition",
+  "positionLine",
+  "positionType",
+  "govAge",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  "insignia",
+  "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
+];
+const columnsEmployee = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "numberPosition",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "numberPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "เครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insigniaLast",
+    align: "left",
+    label: "เครื่องราชฯ(เดิม)",
+    sortable: true,
+    field: "insigniaLast",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "salaryDate",
     align: "left",
@@ -367,8 +774,72 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่เข้าสู่ระบบ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const rows = ref<RequestItemsObject[]>([]);
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeProfileColumns("main", count);
@@ -392,7 +863,7 @@ const clickTree = () => {
 };
 
 const nodeTree = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -468,8 +939,27 @@ const doSearch = async () => {
     });
   }
 
+  if (employeeClass.value == "officer" || employeeClass.value == "employee") {
+    profileType.value = employeeClass.value;
+    if (employeeClass.value == "employee") {
+      visibleColumns.value = visibleColumnsEmployee.value;
+    }
+    if (employeeClass.value == "officer") {
+      visibleColumns.value = visibleColumnsOfficer.value;
+    }
+  }
+
+  if (employeeClass.value == "perm" || employeeClass.value == "temp") {
+    profileType.value = "all";
+    cirteria.push({
+      criteriaType: "employee_class",
+      criteriaValue: employeeClass.value,
+    });
+    visibleColumns.value = visibleColumnsEmployee.value;
+  }
+
   if (selected.value == null || selected.value == "") return;
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.searchProfileByOcId(selected.value, profileType.value), {
       criterias: cirteria,
@@ -481,19 +971,44 @@ const doSearch = async () => {
         rows.value.push({
           id: e.id,
           fullname: e.fullname,
+          fullnameOld: e.fullnameOld,
           avatar: e.avatar,
           citizenId: e.citizenId,
           position: e.position,
-          numberPosition: e.posNo,
+          positionPathSide: e.positionPathSide,
+          numberPosition:
+            profileType.value == "officer" ? e.posNo : e.posNoEmployee,
           positionLine: e.positionLine,
           positionType: e.positionType,
           govAge: e.govAge,
           positionLevel: e.positionLevel,
           positionExecutive: e.positionExecutive,
-          dateAppoint: e.dateAppoint == null ? null : new Date(e.dateAppoint),
-          dateStart: e.dateStart == null ? null : new Date(e.dateStart),
-          createdAt: e.createdAt == null ? null : new Date(e.createdAt),
-          salaryDate: e.salaryDate == null ? null : new Date(e.salaryDate),
+          positionExecutiveSide: e.positionExecutiveSide,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          oc: e.oc,
+          dateAppoint:
+            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
+          dateStart:
+            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
+          createdAt:
+            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
+          salaryDate:
+            e.salaryDate == null ? null : date2Thai(new Date(e.salaryDate)),
+          leaveReason: e.leaveReason,
+          age: e.age,
+          amount: e.amount == null ? "" : e.amount.toLocaleString(),
+          insignia: e.insignia,
+          insigniaLast: e.insigniaLast,
+          isLeave:
+            e.isLeave == false ? "ถือครอง" : `${typeRetire(e.leaveReason)}`,
+          leaveDateOrder:
+            e.leaveDateOrder == null
+              ? null
+              : date2Thai(new Date(e.leaveDateOrder)),
+          refSalary: e.refSalary,
         });
       });
     })
@@ -501,7 +1016,7 @@ const doSearch = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -515,7 +1030,7 @@ const onExport = () => {
     "ระดับ",
     "ตำแหน่งทางการบริหาร",
     "ตำแหน่งการบริหาร",
-    "เลขที่ตำแหน่ง",
+    "ตำแหน่งเลขที่",
     "หน่วยงาน/ส่วนราชการ",
   ];
   const data = rows.value.map((val, index) => ({