Merge commit 'd499781409' into warunee-dev

src/components/DialogHeader.vue

@@ -1,27 +1,29 @@
 <template>
-	<q-toolbar>
-		<q-toolbar-title class="text-subtitle2 text-bold">{{ tittle }}</q-toolbar-title>
-		<q-btn
-		icon="close"
-		unelevated
-		round
-		dense
-		@click="close"
-		style="color: #ff8080; background-color: #ffdede"
-		/>
-  	</q-toolbar>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{
+      tittle
+    }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 
 const props = defineProps({
-	tittle: String,
-	close: {
-		type: Function,
-		default: () => console.log("not function"),
-	},
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
 const close = async () => {
-	props.close();
+  props.close();
 };
 </script>

src/interface/main.ts

@@ -0,0 +1,6 @@
+interface DataOption {
+  id: string;
+  label: string;
+}
+
+export type { DataOption };

src/interface/request/main/main.ts

@@ -66,16 +66,21 @@ const menuList = readonly<any[]>([
       },
       {
         key: 3.2,
-        label: "ข้อมูลตำแหน่ง",
+        label: "ข้อมูลตำแหน่งข้าราชการฯ",
         path: "masterPosition",
       },
       {
         key: 3.3,
+        label: "ข้อมูลตำแหน่งลูกจ้างประจำ",
+        path: "masterPositionEmployee",
+      },
+      {
+        key: 3.4,
         label: "ข้อมูลปฏิทินวันหยุด",
         path: "masterCalendarWork",
       },
       {
-        key: 3.4,
+        key: 3.5,
         label: "ข้อมูลเครื่องราชอิสริยาภรณ์",
         path: "masterInsignia",
       },
@@ -623,13 +628,13 @@ const menuList = readonly<any[]>([
     children: [
       {
         key: 12.1,
-        label: "ผังบัญชีเงินเดือนข้าราชการ",
+        label: "ผังบัญชีเงินเดือนข้าราชการฯ",
         path: "salaryChart",
         role: "salary",
       },
       {
         key: 12.2,
-        label: "ผังบัญชีค่าจ้างลูกจ้าง",
+        label: "ผังบัญชีค่าจ้างลูกจ้างประจำ",
         path: "salaryEmployeeChart",
         role: "salary",
       },
@@ -641,7 +646,7 @@ const menuList = readonly<any[]>([
       },
       {
         key: 12.4,
-        label: "เลื่อนเงินเดือนข้าราชการ",
+        label: "เลื่อนเงินเดือนข้าราชการฯ",
         path: "salaryLists",
         role: "salary",
       },

src/modules/01_metadataNew/components/position-employee/01ListPosition.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import type {
+  DataOption,
+  FormPositionSelect,
+  ListMenu,
+  RowDetailPositions,
+} from "@/modules/01_metadataNew/interface/request/position/index";
+import type { QTableProps } from "quasar";
+import DialogAddPosition from "@/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue";
+
+const editPosition = ref<boolean>(false);
+const modalAddPosition = ref<boolean>(false);
+const levelOpsMain = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const levelOps = ref<DataOption[]>([]);
+
+const isSpecial = ref<boolean>(false);
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  posTypeId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+  isSpecial: false,
+});
+
+const rows = ref<RowDetailPositions[]>([]);
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "blue-6",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+const $q = useQuasar();
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
+
+/** input ค้นหา */
+const searchRef = ref<any>(null);
+const search = ref<string>("");
+const type = ref<string>("positionName");
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const optionFilter = ref<DataOption[]>([
+  { id: "positionName", name: "ชื่อตำแหน่ง" },
+  { id: "positionType", name: "กลุ่มงาน" },
+  { id: "positionLevel", name: "ระดับชั้นงาน" },
+]);
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  formPositionSelect.positionId = data.id;
+  formPositionSelect.posTypeId = data.posTypeId;
+  formPositionSelect.positionName = data.positionName;
+  formPositionSelect.positionType = data.posTypeId;
+  formPositionSelect.positionLevel = data.posLevelId;
+  modalAddPosition.value = true;
+}
+/**
+ * แก้ไขข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function editDetiail(data: RowDetailPositions) {
+  formPositionSelect.positionId = data.id;
+  formPositionSelect.posTypeId = data.posTypeId;
+  formPositionSelect.positionName = data.positionName;
+  formPositionSelect.positionType = data.posTypeId;
+  formPositionSelect.positionLevel = data.posLevelId;
+  modalAddPosition.value = true;
+  editPosition.value = true;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+async function searchInput() {
+  // showLoader();
+  // await http
+  //   .get(
+  //     config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+  //   )
+  //   .then((res) => {
+  //     rowsPositionSelect.value = res.data.result;
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function addPosition(data: RowDetailPositions) {
+  const isIdExist = rows.value.some((item: any) => item.id === data.id);
+
+  if (!isIdExist) {
+    rows.value = [data, ...rows.value];
+  }
+}
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    // showLoader();
+    // http
+    //   .delete(config.API.orgPosPositionById(id))
+    //   .then(() => {
+    //     success($q, "ลบข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(() => {
+    //     searchInput();
+    //     hideLoader();
+    //   });
+  });
+}
+
+function popupAdd() {
+  modalAddPosition.value = true;
+}
+
+async function fetchData() {
+  // search.value = "";
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+  //   .then((res) => {
+  //     rowsPositionSelect.value = res.data.result;
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+<template>
+  <div class="row col-12 q-mb-sm">
+    <div class="col-md-2">
+      <q-btn
+        id="addComplaints"
+        for="addComplaints"
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="popupAdd()"
+        ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
+      >
+    </div>
+
+    <div class="row col-md-10 q-col-gutter-sm">
+      <div class="col-md-4">
+        <q-select
+          label="ค้นหาจาก"
+          v-model="type"
+          :options="optionFilter"
+          emit-value
+          dense
+          map-options
+          outlined
+          option-label="name"
+          option-value="id"
+        />
+      </div>
+
+      <div class="col-md-6">
+        <q-input
+          ref="searchRef"
+          :class="inputEdit(isReadonly)"
+          v-model="search"
+          outlined
+          dense
+          lazy-rules
+          label="คำค้น"
+          hide-bottom-space
+        >
+          <template v-slot:append>
+            <q-icon
+              v-if="search"
+              name="cancel"
+              @click="fetchData()"
+              class="cursor-pointer"
+            ></q-icon>
+          </template>
+        </q-input>
+      </div>
+
+      <div class="row col-md-2">
+        <q-btn
+          color="primary"
+          icon="search"
+          label="ค้นหา"
+          class="full-width"
+          @click="searchInput()"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="full-width q-mt-sm">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rowsPositionSelect"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            style="color: #000000; font-weight: 500"
+          >
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width></q-th>
+        </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.name"
+            :props="props"
+            @click="addPosition(props.row)"
+          >
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name === 'posLevelName'">
+              {{
+                props.row.posLevelName
+                  ? props.row.isSpecial == true
+                    ? `${props.row.posLevelName} (ฉ)`
+                    : props.row.posLevelName
+                  : "-"
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="blue-6"
+              flat
+              dense
+              round
+              class="q-mr-xs"
+              size="12px"
+              icon="mdi-content-copy"
+              clickable
+              @click.stop="
+                () => {
+                  copyDetiail(props.row);
+                }
+              "
+            >
+              <q-tooltip>คัดลอกข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="edit"
+              flat
+              dense
+              round
+              size="12px"
+              icon="mdi-pencil"
+              clickable
+              @click.stop="editDetiail(props.row)"
+              v-close-popup
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="12px"
+              icon="mdi-delete"
+              clickable
+              @click.stop="deletePos(props.row.id)"
+              v-close-popup
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+  <DialogAddPosition
+    v-model:add-position="modalAddPosition"
+    v-model:form-data="formPositionSelect"
+    v-model:edit-check="editPosition"
+    :get-data="searchInput"
+  />
+</template>

src/modules/01_metadataNew/components/position-employee/02ListType.vue

@@ -0,0 +1,450 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QInput, QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = usePositionTypeDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const columns = [
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeRank",
+    align: "left",
+    label: "ระดับกลุ่มงาน",
+    sortable: true,
+    field: "posTypeRank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+
+const $q = useQuasar();
+
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const posTypeName = ref<string>("");
+const posTypeNameRef = ref<QInput | null>(null);
+const posTypeShortName = ref<string>("");
+const posTypeShortNameRef = ref<QInput | null>(null);
+const posTypeRank = ref<number | undefined>();
+const posTypeRankRef = ref<QInput | null>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "posTypeName",
+  "posTypeShortName",
+  "posTypeRank",
+  // "createdAt",
+  // "lastUpdatedAt",
+  // "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      store.save(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http
+    .post(config.API.orgPosType, {
+      posTypeName: posTypeName.value,
+      posTypeShortName: posTypeShortName.value,
+      posTypeRank: posTypeRank.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function editData(id: string) {
+  await http
+    .put(config.API.orgPosTypeId(id), {
+      posTypeName: posTypeName.value,
+      posTypeShortName: posTypeShortName.value,
+      posTypeRank: posTypeRank.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function deleteData(id: string) {
+  await http
+    .delete(config.API.orgPosTypeId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function onclickDetail(id: string) {
+  router.push(`/master-data/position-employee/level/${id}`);
+}
+
+function validateForm() {
+  posTypeNameRef.value?.validate();
+  posTypeRankRef.value?.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (posTypeName.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
+        closeDialog();
+        posTypeName.value = "";
+        posTypeRank.value = undefined;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
+<template>
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          {{ col.value }}
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="12px"
+            icon="edit"
+            clickable
+            @click.stop="
+              () => {
+                dialogStatus = 'edit';
+                dialog = true;
+                editId = props.row.id;
+                posTypeName = props.row.posTypeName;
+                posTypeRank = props.row.posTypeRank;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="
+              dialogStatus === 'edit'
+                ? 'แก้ไขข้อมูลกลุ่มงาน'
+                : 'เพิ่มข้อมูลกลุ่มงาน'
+            "
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              ref="posTypeNameRef"
+              outlined
+              v-model="posTypeName"
+              label="ชื่อกลุ่มงาน"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
+              hide-bottom-space
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posTypeShortNameRef"
+              v-model="posTypeShortName"
+              dense
+              outlined
+              for="#positionShortName"
+              label="อักษรย่อกลุ่มงาน"
+              lazy-rules
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อกลุ่มงาน'}`]"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posTypeRankRef"
+              outlined
+              v-model="posTypeRank"
+              label="ระดับกลุ่มงาน"
+              dense
+              type="number"
+              lazy-rules
+              borderless
+              min="1"
+              bg-color="white"
+              :rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
+              hide-bottom-space
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>

src/modules/01_metadataNew/components/position-employee/03ListLevel.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import ListLevelDetail from "@/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue";
+
+const router = useRouter();
+const posName = ref<string>("");
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายการระดับชั้นงาน{{ posName }}
+  </div>
+
+  <q-card flat bordered>
+    <ListLevelDetail v-model:posName="posName" />
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue

@@ -0,0 +1,513 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QInput, QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
+import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const store = usePositionEmployeeDataStore();
+const storeName = usePositionTypeDataStore();
+const storeOption = useMainOptionDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const posName = defineModel<string>("posName", {
+  required: true,
+});
+
+const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
+  mixin;
+const $q = useQuasar();
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  // {
+  //   name: "posLevelRank",
+  //   align: "left",
+  //   label: "ระดับของระดับตำแหน่ง",
+  //   sortable: true,
+  //   field: "posLevelRank",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
+  {
+    name: "posLevelAuthority",
+    align: "left",
+    label: "ผู้มีอำนาจสั่งบรรจุ",
+    sortable: true,
+    field: "posLevelAuthority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "createdAt",
+    align: "center",
+    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: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<string>("");
+const editId = ref<string>("");
+const posLevelName = ref<string>("");
+// const posLevelRank = ref<number>();
+const posLevelAuthority = ref<string>("");
+// const posTypeId = ref<null>();
+const posLevelNameRef = ref<QInput | null>(null);
+// const posLevelRankRef = ref<QInput | null>(null);
+const posTypeIdRef = ref<QInput | null>(null);
+// const name = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "no",
+  "posTypeName",
+  "posLevelName",
+  // "posLevelRank",
+  "posLevelAuthority",
+  //   "createdAt",
+  //   "lastUpdatedAt",
+  //   "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosLevel)
+  //   .then(async (res) => {
+  //     store.save(res.data.result, id.value);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function addData() {
+  await http.post(config.API.orgPosLevel, {
+    posLevelName: posLevelName.value,
+    // posLevelRank: posLevelRank.value,
+    posLevelAuthority:
+      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+    posTypeId: id.value,
+  });
+  fetchData();
+}
+
+async function editData(editId: string) {
+  await http.put(config.API.orgPosLevelId(editId), {
+    posLevelName: posLevelName.value,
+    // posLevelRank: posLevelRank.value,
+    posLevelAuthority:
+      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+    posTypeId: id.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgPosLevelId(id));
+  fetchData();
+}
+
+onMounted(async () => {
+  fetchName();
+  storeName.row.forEach((e) => {
+    if (e.id === id.value) {
+      posName.value = e.posTypeName ? e.posTypeName : "";
+    }
+  });
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  posLevelNameRef.value?.validate();
+  // posLevelRankRef.value?.validate();
+  posTypeIdRef.value?.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (posLevelName.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
+        closeDialog();
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+
+async function fetchName() {
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosType)
+  //   .then(async (res) => {
+  //     storeName.save(res.data.result);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+</script>
+
+<template>
+  <div class="q-pa-md">
+    <q-toolbar style="padding: 0">
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="add"
+        @click.stop="
+          () => {
+            dialogStatus = 'create';
+            dialog = true;
+            posLevelName = '';
+            // posLevelRank = undefined;
+            posLevelAuthority = '';
+          }
+        "
+      >
+        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+        <q-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"
+        />
+      </div>
+    </q-toolbar>
+
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="store.row"
+      :filter="filterKeyword"
+      row-key="name"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-bold">{{ 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, index) in props.cols" :key="col.id">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="edit"
+              flat
+              dense
+              round
+              class="q-mr-xs"
+              size="12px"
+              icon="edit"
+              clickable
+              @click.stop="
+                () => {
+                  dialogStatus = 'edit';
+                  dialog = true;
+                  editId = props.row.id;
+                  posLevelName = props.row.posLevelName;
+                  // posLevelRank = props.row.posLevelRank;
+                  posLevelAuthority = props.row.posLevelAuthority;
+                }
+              "
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="12px"
+              icon="mdi-delete"
+              clickable
+              @click.stop="
+                dialogRemove($q, async () => await deleteData(props.row.id))
+              "
+              v-close-popup
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+
+    <q-dialog v-model="dialog" class="dialog" persistent>
+      <q-card style="width: 350px">
+        <form @submit.prevent="validateForm">
+          <q-card-section class="flex justify-between" style="padding: 0">
+            <dialog-header
+              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+              :close="closeDialog"
+            />
+          </q-card-section>
+
+          <q-separator color="grey-4" />
+          <q-card-section class="row q-gutter-y-md">
+            <div class="col-12">
+              <q-input
+                outlined
+                ref="posLevelNameRef"
+                v-model="posLevelName"
+                label="ระดับชั้นงาน"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
+              />
+            </div>
+
+            <!-- <div class="col-12">
+              <q-input
+                ref="posLevelRankRef"
+                outlined
+                v-model="posLevelRank"
+                label="ระดับ"
+                dense
+                type="number"
+                lazy-rules
+                borderless
+                min="1"
+                bg-color="white"
+                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+                hide-bottom-space
+              />
+            </div> -->
+
+            <div class="col-12">
+              <q-select
+                outlined
+                v-model="posLevelAuthority"
+                emit-value
+                map-options
+                :options="storeOption.posLevelAuthorityOption"
+                option-value="label"
+                label="ผู้มีอำนาจสั่งบรรจุ"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-select
+                ref="posTypeIdRef"
+                v-model="posName"
+                label="กลุ่มงาน"
+                outlined
+                dense
+                bg-color="white"
+                options-cover
+                hide-bottom-space
+                readonly
+              />
+            </div>
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn
+              id="onSubmit"
+              type="submit"
+              dense
+              unelevated
+              label="บันทึก"
+              color="public"
+              class="q-px-md"
+            >
+              <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>

src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { ref, reactive, watch, defineProps } 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 type {
+  DataOption,
+  FormPositionEmployeeSelectDialog,
+  FormPositionEmployeeSelectRef,
+  OptionType,
+  OptionLevel,
+} from "@/modules/01_metadataNew/interface/request/position/index";
+import { useCounterMixin } from "@/stores/mixin";
+const levelOps = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const formPositionSelect = reactive<FormPositionEmployeeSelectDialog>({
+  positionId: "",
+  positionName: "",
+  positionType: "",
+  positionLevel: "",
+});
+const $q = useQuasar();
+const isSpecial = ref<boolean>(false);
+const props = defineProps({
+  getData: Function,
+});
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const modal = defineModel<boolean>("addPosition", { required: true });
+const formData = defineModel<any>("formData", { required: true });
+const editCheck = defineModel<boolean>("editCheck", { required: true });
+
+const positionNameRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+
+const objectPositionSelectRef: FormPositionEmployeeSelectRef = {
+  positionName: positionNameRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  const hasError = [];
+  for (const key in objectPositionSelectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+      const property = objectPositionSelectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    if (editCheck.value == true) {
+      saveSelectEdit();
+    } else {
+      onSubmitSelectEdit();
+    }
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function saveSelectEdit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      // showLoader();
+      // const body = {
+      //   posDictName: formPositionSelect.positionName,
+      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      // };
+      // await http
+      //   .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
+      //   .then(() => {
+      //     success($q, "เพิ่มข้อมูลสำเร็จ");
+      //     clearFormPositionSelect();
+      //     modal.value = false;
+      //     editCheck.value = false;
+      //     props.getData?.();
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(() => {
+      //     hideLoader();
+      //   });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+/** ฟังชั่น บันทึก */
+function onSubmitSelectEdit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      // showLoader();
+      // const body = {
+      //   posDictName: formPositionSelect.positionName,
+      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      // };
+      // await http
+      //   .post(config.API.orgPosPosition, body)
+      //   .then(() => {
+      //     success($q, "เพิ่มข้อมูลสำเร็จ");
+      //     clearFormPositionSelect();
+      //     modal.value = false;
+      //     editCheck.value = false;
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(() => {
+      //     hideLoader();
+      //   });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+async function clearFormPositionSelect() {
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/** function เรียกรายการประเภทตำแหน่ง */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      const data = res.data.result;
+      dataLevel.value = data;
+      typeOpsMain.value = data.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      fetchType();
+      if (formData.value) {
+        const dataList = formData.value;
+        setTimeout(() => {
+          updateSelectType(dataList.posTypeId);
+        }, 1000);
+        formPositionSelect.positionId = dataList.positionId;
+        formPositionSelect.positionName = dataList.positionName;
+        formPositionSelect.positionType = dataList.positionType;
+        formPositionSelect.positionLevel = dataList.positionLevel;
+      }
+    }
+  }
+);
+
+function updateSelectType(val: string) {
+  const listLevel = dataLevel.value.find((e: any) => e.id === val);
+  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+}
+
+function close() {
+  modal.value = false;
+  editCheck.value = false;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <form @submit.prevent="validateFormPositionEdit">
+        <DialogHeader
+          :tittle="`${
+            editCheck
+              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
+              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
+          }`"
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-12">
+              <q-input
+                ref="positionNameRef"
+                v-model="formPositionSelect.positionName"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="positionTypeRef"
+                :class="inputEdit(isReadonly)"
+                label="กลุ่มงาน"
+                v-model="formPositionSelect.positionType"
+                :options="typeOps"
+                emit-value
+                dense
+                @update:model-value="updateSelectType"
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="positionLevelRef"
+                :class="inputEdit(isReadonly)"
+                label="ระดับชั้นงาน"
+                v-model="formPositionSelect.positionLevel"
+                :disable="formPositionSelect.positionType === ''"
+                :options="levelOps"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/01_metadataNew/components/position/01ListPosition.vue

@@ -19,7 +19,7 @@ const levelOpsMain = ref<DataOption[]>([]);
 const dataLevel = ref<any>();
 const levelOps = ref<DataOption[]>([]);
 
-const isSpecial = ref<boolean>(false)
+const isSpecial = ref<boolean>(false);
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
   posTypeId: "",
@@ -181,7 +181,7 @@ function copyDetiail(data: RowDetailPositions) {
  * @param data ข้อมูลตำแหน่ง
  */
 function editDetiail(data: RowDetailPositions) {
-  console.log(data)
+  console.log(data);
   formPositionSelect.positionId = data.id;
   formPositionSelect.posTypeId = data.posTypeId;
   formPositionSelect.positionName = data.positionName;
@@ -386,7 +386,7 @@ onMounted(() => {
               }}
             </div>
             <div v-else>
-              {{ col.value ? col.value:'-' }}
+              {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
           <q-td auto-width>

src/modules/01_metadataNew/components/position/05ListLevelDetail.vue

@@ -4,12 +4,14 @@ import type { QInput, QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import { usePositionDataStore } from "@/modules/01_metadataNew/stores/positionListStore";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
 import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 const store = usePositionDataStore();
+const storeOption = useMainOptionDataStore();
 const storeName = usePositionTypeDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -153,30 +155,48 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgPosLevel, {
-    posLevelName: posLevelName.value,
-    posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
+  await http
+    .post(config.API.orgPosLevel, {
+      posLevelName: posLevelName.value,
+      posLevelRank: posLevelRank.value,
+      posLevelAuthority:
+        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+      posTypeId: id.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 async function editData(editId: string) {
-  await http.put(config.API.orgPosLevelId(editId), {
-    posLevelName: posLevelName.value,
-    posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
+  await http
+    .put(config.API.orgPosLevelId(editId), {
+      posLevelName: posLevelName.value,
+      posLevelRank: posLevelRank.value,
+      posLevelAuthority:
+        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+      posTypeId: id.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgPosLevelId(id));
-  fetchData();
+  await http
+    .delete(config.API.orgPosLevelId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 onMounted(async () => {
@@ -345,7 +365,7 @@ async function fetchName() {
     </d-table>
 
     <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="min-width: 350px" class="bg-grey-11">
+      <q-card style="width: 350px">
         <form @submit.prevent="validateForm">
           <q-card-section class="flex justify-between" style="padding: 0">
             <dialog-header
@@ -355,54 +375,69 @@ async function fetchName() {
           </q-card-section>
 
           <q-separator color="grey-4" />
-          <q-card-section class="q-pa-none">
-            <q-input
-              outlined
-              ref="posLevelNameRef"
-              v-model="posLevelName"
-              label="ชื่อระดับตำแหน่ง"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              hide-bottom-space
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
-            />
-            <q-input
-              ref="posLevelRankRef"
-              outlined
-              v-model="posLevelRank"
-              label="ระดับ"
-              dense
-              type="number"
-              lazy-rules
-              borderless
-              min="1"
-              class="col-12 bg-white q-ma-md"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-              hide-bottom-space
-            />
-            <q-input
-              outlined
-              v-model="posLevelAuthority"
-              label="ผู้มีอำนาจสั่งบรรจุ"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              hide-bottom-space
-            />
-            <q-select
-              ref="posTypeIdRef"
-              v-model="posName"
-              label="ประเภทตำแหน่ง"
-              outlined
-              dense
-              class="col-12 bg-white q-ma-md"
-              options-cover
-              hide-bottom-space
-              readonly
-            />
+          <q-card-section class="row q-gutter-y-md">
+            <div class="col-12">
+              <q-input
+                outlined
+                ref="posLevelNameRef"
+                v-model="posLevelName"
+                label="ชื่อระดับตำแหน่ง"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                ref="posLevelRankRef"
+                outlined
+                v-model="posLevelRank"
+                label="ระดับ"
+                dense
+                type="number"
+                lazy-rules
+                borderless
+                min="1"
+                bg-color="white"
+                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-select
+                outlined
+                v-model="posLevelAuthority"
+                emit-value
+                map-options
+                :options="storeOption.posLevelAuthorityOption"
+                option-value="id"
+                label="ผู้มีอำนาจสั่งบรรจุ"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-select
+                ref="posTypeIdRef"
+                v-model="posName"
+                label="ประเภทตำแหน่ง"
+                outlined
+                dense
+                bg-color="white"
+                options-cover
+                hide-bottom-space
+                readonly
+              />
+            </div>
           </q-card-section>
 
           <q-card-actions align="right">

src/modules/01_metadataNew/interface/request/position/index.ts

@@ -13,11 +13,18 @@ interface FormPositionSelectDialog {
   positionField: string;
   positionType: string;
   positionLevel: string;
-  positionExecutive: string|null;
+  positionExecutive: string | null;
   positionExecutiveField: string;
   positionArea: string;
 }
 
+interface FormPositionEmployeeSelectDialog {
+  positionId: string;
+  positionName: string;
+  positionType: string;
+  positionLevel: string;
+}
+
 interface FormPositionSelectRef {
   positionName: object | null;
   positionField: object | null;
@@ -28,6 +35,12 @@ interface FormPositionSelectRef {
   positionArea: object | null;
   [key: string]: any;
 }
+interface FormPositionEmployeeSelectRef {
+  positionName: object | null;
+  positionType: object | null;
+  positionLevel: object | null;
+  [key: string]: any;
+}
 interface FormExecutiveRef {
   posExecutiveName: object | null;
   posExecutivePriority: object | null;
@@ -86,17 +99,24 @@ interface RowDetailPositions {
 }
 
 interface RowListForm {
-  id:string
-  posExecutiveName: string
-  posExecutivePriority: number|null
+  id: string;
+  posExecutiveName: string;
+  posExecutivePriority: number | null;
 }
 
 export type {
-  Pagination, DataOption, FormPositionSelect, FormPositionSelectRef, OptionType, OptionLevel,
+  Pagination,
+  DataOption,
+  FormPositionSelect,
+  FormPositionSelectRef,
+  OptionType,
+  OptionLevel,
   OptionExecutive,
   ListMenu,
   RowDetailPositions,
   RowListForm,
   FormPositionSelectDialog,
-  FormExecutiveRef
+  FormExecutiveRef,
+  FormPositionEmployeeSelectDialog,
+  FormPositionEmployeeSelectRef,
 };

src/modules/01_metadataNew/router.ts

@@ -10,6 +10,12 @@ const positionPage = () =>
   import("@/modules/01_metadataNew/views/position.vue");
 const positionLevelPage = () =>
   import("@/modules/01_metadataNew/components/position/03ListLevel.vue");
+const positionEmployeePage = () =>
+  import("@/modules/01_metadataNew/views/positionEmployee.vue");
+const positionEmployeeLevelPage = () =>
+  import(
+    "@/modules/01_metadataNew/components/position-employee/03ListLevel.vue"
+  );
 
 export default [
   {
@@ -68,7 +74,27 @@ export default [
     component: positionLevelPage,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [9],
+      Role: "metadata",
+    },
+  },
+  {
+    path: "/master-data/position-employee",
+    name: "masterPositionEmployee",
+    component: positionEmployeePage,
+    meta: {
+      Auth: true,
+      Key: [8],
+      Role: "metadata",
+    },
+  },
+  {
+    path: "/master-data/position-employee/level/:id",
+    name: "masterPositionEmployeeLevel",
+    component: positionEmployeeLevelPage,
+    meta: {
+      Auth: true,
+      Key: [9],
       Role: "metadata",
     },
   },

src/modules/01_metadataNew/stores/main.ts

@@ -0,0 +1,30 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/interface/main";
+
+export const useMainOptionDataStore = defineStore("MainOptionData", () => {
+  const posLevelAuthorityOption = ref<DataOption[]>([
+    {
+      id: "HEAD",
+      label: "หัวหน้าหน่วยงาน",
+    },
+    {
+      id: "DEPUTY",
+      label: "ปลัด",
+    },
+    {
+      id: "GOVERNOR",
+      label: "ผู้ว่าฯ",
+    },
+  ]);
+
+  function posLevelAuthorityConvert(val: string) {
+    return posLevelAuthorityOption.value.find((x: DataOption) => x.id === val)
+      ?.label;
+  }
+
+  return {
+    posLevelAuthorityOption,
+    posLevelAuthorityConvert,
+  };
+});

src/modules/01_metadataNew/stores/positionEmployeeStore.ts

@@ -0,0 +1,39 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type {
+  DataResponse,
+  DataRow,
+} from "../interface/response/position/ListType";
+import { useCounterMixin } from "@/stores/mixin";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+const storeOption = useMainOptionDataStore();
+
+const { date2Thai } = useCounterMixin();
+
+export const usePositionEmployeeDataStore = defineStore(
+  "positionEmployeeStore",
+  () => {
+    const pathLocation = ref<string>("list_position");
+    const row = ref<DataRow[]>([]);
+    function save(data: DataResponse[], id: string) {
+      const list = data.map((e) => ({
+        ...e,
+        posTypes: undefined,
+        posTypeId: e.posTypes?.id,
+        posTypeName: e.posTypes?.posTypeName,
+        posTypeRank: e.posTypes?.posTypeRank,
+        createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+        posLevelAuthority: e.posLevelAuthority
+          ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
+          : "-",
+      })) satisfies DataRow[];
+      row.value = list.filter((e) => e.posTypeId === id);
+    }
+    return {
+      save,
+      row,
+      pathLocation,
+    };
+  }
+);

src/modules/01_metadataNew/stores/positionListStore.ts

@@ -4,7 +4,9 @@ import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
 import { useCounterMixin } from "@/stores/mixin";
+const storeOption = useMainOptionDataStore();
 
 const { date2Thai } = useCounterMixin();
 
@@ -20,9 +22,13 @@ export const usePositionDataStore = defineStore("PositionData", () => {
       posTypeRank: e.posTypes?.posTypeRank,
       createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
       lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+      posLevelAuthority: e.posLevelAuthority
+        ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
+        : "-",
     })) satisfies DataRow[];
     row.value = list.filter((e) => e.posTypeId === id);
   }
+
   return {
     save,
     row,

src/modules/01_metadataNew/views/position.vue

@@ -20,7 +20,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">ข้อมูลตำแหน่ง</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลตำแหน่งข้าราชการฯ
+  </div>
 
   <q-card flat bordered>
     <q-tabs

src/modules/01_metadataNew/views/positionEmployee.vue

@@ -0,0 +1,62 @@
+div
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import ListPosition from "@/modules/01_metadataNew/components/position-employee/01ListPosition.vue";
+import ListType from "@/modules/01_metadataNew/components/position-employee/02ListType.vue";
+import { usePositionEmployeeDataStore } from "../stores/positionEmployeeStore";
+// const store.pathLocation = ref<string>("list_position");
+const tabs = ref<Array<any>>([]);
+const store = usePositionEmployeeDataStore();
+
+onMounted(() => {
+  const tabsPerson = [
+    { label: "ตำแหน่ง", value: "list_position" },
+    { label: "รายการกลุ่มงาน", value: "list_type" },
+  ];
+  tabs.value = tabsPerson;
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลตำแหน่งลูกจ้างประจำ
+  </div>
+
+  <q-card flat bordered>
+    <q-tabs
+      dense
+      v-model="store.pathLocation"
+      align="left"
+      indicator-color="primary"
+      active-color="primary bg-teal-1"
+      inline-label
+      class="text-body2 text-grey-7"
+    >
+      <q-tab
+        v-for="tab in tabs"
+        :key="tab.value"
+        v-on:click="store.pathLocation = tab.value"
+        :label="tab.label"
+        :name="tab.value"
+        class="q-py-xs"
+      />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="store.pathLocation" animated>
+      <q-tab-panel name="list_position">
+        <ListPosition v-if="store.pathLocation == 'list_position'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_type">
+        <ListType v-if="store.pathLocation == 'list_type'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_executive">
+        <ListExecutive v-if="store.pathLocation == 'list_executive'" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/04_registry/components/Insignia.vue

@@ -1356,6 +1356,7 @@ const selectData = async (props: DataProps) => {
   refCommandDateInput.value = props.row.refCommandDate
     ? convertDateDisplay(props.row.refCommandDate as Date)
     : "";
+  note.value = props.row.note;
   await checkRowPage();
 };
 

src/modules/04_registry/components/Leave.vue

@@ -221,6 +221,7 @@
                 :label="`${'ปี'}`"
                 mask="####"
                 dense
+                hide-bottom-space
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
                 :class="getClass(edit)"
                 :readonly="!edit"

src/modules/04_registry/components/Salary.vue

@@ -281,7 +281,9 @@
                         map-options
                         option-label="name"
                         :options="opLevel"
+                        @input-value="inputPositionLevel"
                         @new-value="createValue"
+                        @blur.stop="inputPositionLevelBlur"
                         option-value="name"
                         hide-bottom-space
                         use-input
@@ -1268,6 +1270,33 @@ const formDataSalary = reactive<FormSalaryNew>({
   doc: "",
 });
 
+const tempPositionLevelInput = ref("");
+
+function inputPositionLevel(v: string) {
+  if (!!v) tempPositionLevelInput.value = v;
+}
+
+function inputPositionLevelBlur() {
+  if (
+    !tempPositionLevelInput.value ||
+    tempPositionLevelInput.value === formDataSalary.levelPosition
+  ) {
+    tempPositionLevelInput.value = "";
+    return;
+  }
+
+  if (
+    !optionStore.optipnLevel.some(
+      (v) => v.name === tempPositionLevelInput.value
+    )
+  ) {
+    createValue(tempPositionLevelInput.value);
+  }
+
+  formDataSalary.levelPosition = tempPositionLevelInput.value;
+  tempPositionLevelInput.value = "";
+}
+
 const opPos = ref<any>([]);
 const opType = ref<any>([]);
 const opLevel = ref<any>([]);
@@ -2115,7 +2144,7 @@ function coppyForm() {
   formDataSalary.doc = formDataSalary.doc;
 }
 
-function createValue(val: any, done: any) {
+function createValue(val: any, done?: any) {
   if (val.length > 0) {
     const maxId = optionStore.optipnLevel.reduce((max: any, item: any) => {
       const itemId = typeof item.id === "number" ? item.id : parseInt(item.id);
@@ -2130,7 +2159,7 @@ function createValue(val: any, done: any) {
       optionStore.optipnLevel.push(newObj);
     }
 
-    done(newObj, "toggle");
+    done?.(newObj, "toggle");
   }
 }
 </script>

src/modules/04_registry/components/salaryNew/Salary.vue

@@ -671,7 +671,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-  
+
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"

src/modules/04_registryNew/components/TableView.vue

@@ -329,10 +329,10 @@ watch(
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-lg">
+      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-md">
         <q-card flat bordered>
           <q-card-section class="text-center">
-            <q-avatar size="82px">
+            <q-avatar size="100px">
               <img src="@/assets/avatar_user.jpg" />
             </q-avatar>
 
@@ -346,8 +346,8 @@ watch(
             </div>
           </q-card-section>
 
-          <q-card-section class="q-pa-lg">
-            <q-card bordered class="bg-grey-12">
+          <q-card-section class="q-px-md">
+            <q-card bordered class="bg-grey-13">
               <q-list>
                 <q-item>
                   <q-item-section>
@@ -371,7 +371,7 @@ watch(
 
                 <q-item>
                   <q-item-section>
-                    <q-item-label caption>ประเภท</q-item-label>
+                    <q-item-label caption>ประเภทตำแหน่ง</q-item-label>
                     <q-item-label>
                       {{
                         props.row.posType ? props.row.posType : "-"
@@ -381,7 +381,9 @@ watch(
                 </q-item>
                 <q-item>
                   <q-item-section>
-                    <q-item-label caption>ระดับชั้นงาน</q-item-label>
+                    <q-item-label caption
+                      >ระดับตำแหน่ง/ระดับชั้นงาน</q-item-label
+                    >
                     <q-item-label>
                       {{
                         props.row.posLevel ? props.row.posLevel : "-"
@@ -457,4 +459,8 @@ watch(
   width: 100%;
   height: 100%;
 }
+
+.bg-grey-13 {
+  background: #f1f2f4 !important;
+}
 </style>

src/modules/04_registryNew/components/detail/Achievement/Main.vue

@@ -11,21 +11,20 @@ import ResultsPerformance from "@/modules/04_registryNew/components/detail/Achie
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-medal" class="q-mr-md" />
-      <span>ข้อมูลผลงานและเครื่องราชฯ</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-medal" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลผลงานและเครื่องราชฯ</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >

src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue

@@ -1,6 +1,794 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  MyObjectRef,
+  RequestItemsHistoryObject,
+  FormMain,
+} from "@/modules/04_registryNew/interface/index/government";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** ฟังชั่นกลาง */
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+
+/** ตัวแปรข้อมูลหลัก */
+const formMain = reactive<FormMain>({
+  ocId: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", //สังกัด
+  positionId: "ผู้อำนวยการ", //ตำแหน่ง
+  positionLine: "อำนวยการ", //สายงาน
+  positionLevel: "ต้น", //ระดับ
+  numberId: "กทข.1", //เลขที่ตำแหน่ง
+  positionExecutive: "ผู้อำนวยการกอง", //ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
+  positionType: "ทั่วไป", //ประเภท
+  positionPathSide: "", //ด้าน/สาขา
+
+  containDate: new Date("2024-01-22T02:43:00"), //วันที่สั่งบรรจุ
+  workDate: new Date("2024-01-22T02:43:00"), //วันที่เริ่มปฏิบัติราชการ
+  reasonSameDate: "เนื่องจากเป็นวันหยุด",
+  retireDate: new Date("2024-01-22T02:43:00"), //วันเกษียณอายุ
+  ageAll: "0 ปี 2 เดือน 10 วัน", //อายุราชการ
+  absent: 0, //ขาดราชการ
+  age: 0, //อายุราชการเกื้อกูล
+});
+
+/** dialog */
+const modalEdit = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+
+const filterKeyword = ref<string>("");
+
+const containDate = ref<Date | null>(null);
+const workDate = ref<Date | null>(null);
+const reasonSameDate = ref<string | null>(null);
+const containDateRef = ref<object | null>(null);
+const workDateRef = ref<object | null>(null);
+const reasonSameDateRef = ref<object | null>(null);
+
+const objectRef: MyObjectRef = {
+  containDate: containDateRef,
+  workDate: workDateRef,
+  reasonSameDate: reasonSameDateRef,
+};
+
+const visibleColumnsHistory = ref<String[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    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: "positionPathSide",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionPathSide",
+    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",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    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",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    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",
+    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: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    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",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    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",
+    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: "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: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    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: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    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",
+    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" }),
+  },
+]);
+
+/** เปิด dialog */
+function openDialogEdit() {
+  modalEdit.value = true;
+}
+
+function openDialogHistory() {
+  modalHistory.value = true;
+}
+/** ปิด dialog */
+function closeDialog() {
+  modalEdit.value = false;
+  containDate.value = null;
+  workDate.value = null;
+  reasonSameDate.value = null;
+}
+
+/** validate check*/
+function validateForm() {
+  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, () => {
+    // showLoader()
+    // http
+    // .put(config.API.???)
+    // .then((res)=>{
+    //   closeDialog()
+    //   getData()
+    // }).catch((e)=>{
+    //   messageError($q,e)
+    // }).finally(()=>{
+    //   hideLoader()
+    // })
+
+    closeDialog();
+  });
+}
+
+/** ดึงข้อมูลประวัติ */
+function getDataHistory() {
+  // showLoader();
+  // http
+  //   .get(config.API.profileGovHisId(route.params.id.toString()))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: RequestItemsHistoryObject) => {
+  //       rowsHistory.value.push({
+  //         oc: e.oc,
+  //         position: e.position,
+  //         positionPathSide: e.positionPathSide,
+  //         posNo: e.posNo,
+  //         positionLine: e.positionLine,
+  //         positionType: e.positionType,
+  //         positionLevel: e.positionLevel,
+  //         positionExecutive: e.positionExecutive,
+  //         positionExecutiveSide: e.positionExecutiveSide,
+  //         dateAppoint: new Date(e.dateAppoint),
+  //         dateStart: new Date(e.dateStart),
+  //         retireDate: e.retireDate,
+  //         govAge: e.govAge,
+  //         govAgeAbsent: e.govAgeAbsent,
+  //         govAgePlus: e.govAgePlus,
+  //         reasonSameDate: e.reasonSameDate,
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+watch(
+  () => modalHistory.value,
+  (isOpen) => {
+    if (isOpen === true) {
+      filterKeyword.value = "";
+      getDataHistory();
+    }
+  }
+);
+
+const fieldLabels = {
+  ocId: "สังกัด",
+  positionId: "ตำแหน่ง",
+  numberId: "เลขที่ตำแหน่ง",
+  positionExecutive: "ตำแหน่งทางการบริหาร",
+  positionExecutiveSide: "ด้านตำแหน่งทางการบริหาร",
+  positionLine: "สายงาน",
+  positionLevel: "ระดับ",
+  positionType: "ประเภท",
+  positionPathSide: "ด้าน/สาขา",
+};
+</script>
 <template>
-  <div>ข้อมูลราชการ</div>
+  <div class="row">
+    <div class="text-weight-bold text-subtitle1">ประวัติราชการ</div>
+    <q-space />
+    <div class="q-gutter-x-sm">
+      <q-btn
+        color="teal-5"
+        icon="mdi-pencil-outline"
+        flat
+        round
+        @click="openDialogEdit()"
+        ><q-tooltip>แก้ไข</q-tooltip></q-btn
+      >
+      <q-btn
+        color="edit"
+        icon="mdi-history"
+        flat
+        round
+        @click="openDialogHistory()"
+        ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
+      >
+    </div>
+  </div>
+
+  <q-card bordered class="bg-grey-1 q-pa-md">
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+        <div
+          class="row"
+          v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)"
+          :key="index"
+        >
+          <div class="col-12 col-sm-12 col-md-4">
+            <span class="text-grey-7">{{
+              fieldLabels[field as keyof typeof fieldLabels]
+            }}</span>
+          </div>
+          <div class="col-12 col-sm-12 col-md-8">
+            <span>{{ formMain[field] !== "" ? formMain[field] : "-" }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+        <div
+          class="row"
+          v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)"
+          :key="index"
+        >
+          <div class="col-12 col-sm-12 col-md-4">
+            <span class="text-grey-7">{{
+              fieldLabels[field as keyof typeof fieldLabels]
+            }}</span>
+          </div>
+          <div class="col-12 col-sm-12 col-md-8">
+            <span>{{ formMain[field] !== "" ? formMain[field] : "-" }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator inset color="grey-5" class="q-my-md" />
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">วันที่สั่งบรรจุ</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{
+                formMain.containDate ? date2Thai(formMain.containDate) : "-"
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">วันที่เริ่มปฏิบัติราชการ</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{
+                formMain.workDate !== null
+                  ? date2Thai(formMain.workDate as Date)
+                  : "-"
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
+          class="col-12 col-sm-6 col-md-6"
+        >
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">เหตุผลที่วันที่ไม่ตรงกัน</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{
+                formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">วันเกษียณอายุ</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{
+                formMain.retireDate !== null
+                  ? date2Thai(formMain.retireDate as Date)
+                  : "-"
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">อายุราชการ</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMain.ageAll !== "" ? formMain.ageAll : "-" }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">ขาดราชการ</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMain.absent ? formMain.absent : 0 }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-7">อายุราชการเกื้อกูล</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMain.age ? formMain.age : 0 }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- dialog edit -->
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card style="min-width: 600px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader tittle="แก้ไขข้อมูล" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section class="q-pa-md">
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                v-model="containDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="containDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="
+                  containDate !== null
+                    ? date2Thai(containDate as Date)
+                    : null
+                "
+                    :rules="[
+                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+                    ]"
+                    label="วัน/เดือน/ปี ที่บรรจุ"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <datepicker
+                v-model="workDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="workDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="
+                  workDate !== null
+                    ? date2Thai(workDate as Date)
+                    : null
+                "
+                    :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
+                    label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div
+              class="col-12"
+              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date):false"
+            >
+              <q-input
+                ref="reasonSameDateRef"
+                class="full-width inputgreen cursor-pointer"
+                label="เหตุผลกรณีไม่ตรงกัน"
+                type="textarea"
+                outlined
+                dense
+                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                v-model="reasonSameDate"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <!-- dialog History -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <DialogHeader
+          tittle="ประวัติแก้ไขข้อมูลราชการ"
+          :close="() => (modalHistory = !modalHistory)"
+        />
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section class="q-pa-sm">
+        <div class="row q-pb-sm q-gutter-x-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            class="col-2"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :filter="filterKeyword"
+          :visible-columns="visibleColumnsHistory"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width></q-th>
+            </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.name" :props="props">
+                <div
+                  v-if="
+                    col.name == 'dateStart' ||
+                    col.name == 'dateAppoint' ||
+                    col.name == 'createdAt'
+                  "
+                  class="table_ellipsis"
+                >
+                  {{ date2Thai(col.value) }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue

@@ -1,6 +1,871 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import type { QTableProps } from "quasar";
+import type {
+  RequestItemsObject,
+  FormFilter,
+  DataOption,
+  DisciplineOps,
+  MyObjectRef,
+} from "@/modules/04_registryNew/interface/index/discipline";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogHistory from "@/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dateToISO,
+} = mixin;
+
+const rows = ref<RequestItemsObject[]>([]);
+const mode = ref<string>("card");
+const filterKeyword = ref<string>("");
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+
+const visibleColumns = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const dateRef = ref<object | null>(null);
+const detailRef = ref<object | null>(null);
+const refCommandNoRef = ref<object | null>(null);
+
+const objectRef: MyObjectRef = {
+  date: dateRef,
+  detail: detailRef,
+  refCommandNo: refCommandNoRef,
+};
+
+/** dialog */
+const edit = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+
+const id = ref<string>("");
+const date = ref<Date | null>(null);
+const detail = ref<string>();
+const level = ref<string>();
+const unStigma = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(null);
+
+const Ops = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const OpsFilter = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "levelOptions":
+      update(() => {
+        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  edit.value = false;
+
+  date.value = null;
+  detail.value = "";
+  level.value = "";
+  unStigma.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+}
+
+function openDialogAdd() {
+  modal.value = true;
+}
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+function openDialogEdit(props: RequestItemsObject) {
+  modal.value = true;
+  edit.value = true;
+
+  console.log(props);
+  id.value = props.id;
+  date.value = props.date;
+  detail.value = props.detail;
+  level.value = props.level;
+  unStigma.value = props.unStigma;
+  refCommandNo.value = props.refCommandNo;
+  refCommandDate.value = props.refCommandDate;
+}
+
+/** validate check*/
+function validateForm() {
+  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)) {
+    if ((edit.value = false)) {
+      saveData();
+    } else {
+      editData();
+    }
+  }
+}
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+function saveData() {
+  // showLoader();
+  // await http
+  //   .post(config.API.profileDisId(profileId.value), {
+  //     id: id.value,
+  //     level: level.value,
+  //     detail: detail.value,
+  //     unStigma: unStigma.value,
+  //     refCommandNo: refCommandNo.value,
+  //     refCommandDate:
+  //       refCommandDate.value == null
+  //         ? null
+  //         : dateToISO(refCommandDate.value as Date),
+  //     date: dateToISO(date.value),
+  //   })
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //     closeDialog()
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await fetchData();
+  //   });
+  closeDialog();
+}
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  // showLoader();
+  // await http
+  //   .put(config.API.profileDisId(id.value), {
+  //     id: id.value,
+  //     level: level.value,
+  //     detail: detail.value,
+  //     unStigma: unStigma.value,
+  //     refCommandNo: refCommandNo.value,
+  //     refCommandDate:
+  //       refCommandDate.value == null
+  //         ? null
+  //         : dateToISO(refCommandDate.value as Date),
+  //     date: dateToISO(date.value as Date),
+  //   })
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //     modal.value = false;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await fetchData();
+  //   });
+  closeDialog();
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+function openDialogHistory(idOrder: string) {
+  modalHistory.value = true;
+  id.value = idOrder;
+}
+
+function getData() {
+  // showLoader();
+  // http
+  //   .get(config.API.profileDisId(profileId.value))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     console.log(data);
+  //     rows.value = [];
+  //     data.map((e: RequestItemsObject) => {
+  //       rows.value.push({
+  //         id: e.id,
+  //         level: e.level,
+  //         detail: e.detail,
+  //         unStigma: e.unStigma,
+  //         refCommandNo: e.refCommandNo,
+  //         refCommandDate: e.refCommandDate ? new Date(e.refCommandDate) : null,
+  //         date: e.date,
+  //         createdFullName: e.createdFullName,
+  //         createdAt: e.createdAt,
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {});
+
+  const data: RequestItemsObject[] = [
+    {
+      level: "ภาคทัณฑ์",
+      detail: "1",
+      refCommandNo: "1",
+      refCommandDate: null,
+      date: new Date("2024-03-19T00:00:00"),
+      unStigma: "1",
+      id: "08dc2e0f-5631-4a7c-8ac4-0f7c99156c2e",
+      createdAt: new Date("2024-02-15T17:17:38.524861"),
+      createdFullName: "สาวิตรี ศรีสมัย",
+    },
+    {
+      level: "ภาคทัณฑ์",
+      detail: "11",
+      refCommandNo: "11",
+      refCommandDate: new Date("2024-03-11T00:00:00"),
+      date: new Date("2024-02-20T00:00:00"),
+      unStigma: "",
+      id: "08dc2e11-3588-44ea-8c1a-99109a4c4fe0",
+      createdAt: new Date("2024-02-20T12:59:47.193103"),
+      createdFullName: "สาวิตรี ศรีสมัย",
+    },
+    {
+      level: "ตัดเงินเดือน",
+      detail: "115",
+      refCommandNo: "1",
+      refCommandDate: new Date("2024-03-11T00:00:00"),
+      date: new Date("2024-02-20T00:00:00"),
+      unStigma: "11",
+      id: "08dc2e11-8054-416c-8299-81005d739a25",
+      createdAt: new Date("2024-02-20T12:59:47.193103"),
+      createdFullName: "สาวิตรี ศรีสมัย",
+    },
+    {
+      level: "",
+      detail: "test",
+      refCommandNo: "12",
+      refCommandDate: new Date("2024-03-11T00:00:00"),
+      date: new Date("2024-02-20T00:00:00"),
+      unStigma: "",
+      id: "08dc31d9-24a0-4870-896c-4c4ea8f7b104",
+      createdAt: new Date("2024-02-20T12:59:47.193103"),
+      createdFullName: "สาวิตรี ศรีสมัย",
+    },
+  ];
+  rows.value = data;
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
 <template>
-  <div>วินัย</div>
+  <div class="row items-center q-gutter-x-sm q-py-sm">
+    <div class="text-weight-bold text-subtitle1">วินัย</div>
+
+    <q-btn color="teal-5" icon="add" flat round @click="openDialogAdd()"
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-input
+      standout
+      dense
+      v-model="filterKeyword"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
+    >
+      <template v-slot:append>
+        <q-icon
+          v-if="filterKeyword == ''"
+          name="search"
+          @click.stop.prevent="filterKeyword = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="filterKeyword"
+          name="cancel"
+          @click.stop.prevent="filterKeyword = ''"
+          class="cursor-pointer"
+        />
+      </template>
+    </q-input>
+    <q-select
+      v-if="mode == 'table'"
+      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"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </div>
+
+  <d-table
+    ref="table"
+    flat
+    bordered
+    dense
+    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
+    :columns="columns"
+    :rows="rows"
+    :grid="mode === 'card'"
+    :paging="true"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    :filter="filterKeyword"
+  >
+    >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="openDialogEdit(props.row)"
+        >
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
+          </div>
+          <div
+            v-else-if="col.name == 'refCommandDate' || col.name == 'date'"
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="openDialogHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div class="col-xs-12 col-sm-6 col-md-4">
+        <q-card flat bordered class="q-pa-md">
+          <div class="row q-pb-sm">
+            <div class="column">
+              <div class="text-weight-bold">
+                {{ props.row.level !== "" ? props.row.level : "-" }}
+              </div>
+              <div class="text-weight-light full-width text-left text-grey-9">
+                {{ date2Thai(props.row.date) }}
+              </div>
+            </div>
+            <q-space />
+            <div class="q-gutter-x-sm">
+              <q-btn
+                color="teal-5"
+                icon="mdi-pencil-outline"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไข</q-tooltip></q-btn
+              >
+              <q-btn
+                color="edit"
+                icon="mdi-history"
+                flat
+                round
+                @click="openDialogHistory(props.row.id)"
+                ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <q-separator />
+          <q-card-section class="q-pa-none">
+            <q-list>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>รายละเอียด</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>{{
+                    props.row.detail !== "" ? props.row.detail : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>ล้างมลทิน</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.unStigma !== "" ? props.row.unStigma : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>เลขที่คำสั่ง</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.refCommandNo !== ""
+                        ? props.row.refCommandNo
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >เอกสารอ้างอิง (ลงวันที่)</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.refCommandDate
+                        ? date2Thai(props.row.refCommandDate)
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
+  </d-table>
+
+  <!-- dialog add edit -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 600px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader tittle="วินัย" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    ref="dateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    :model-value="date2Thai(date)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน/เดือน/ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="detailRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="level"
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                v-model="unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="refCommandNoRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    :model-value="
+                      (refCommandDate && date2Thai(refCommandDate as Date)) || null
+                    "
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                    <template v-if="refCommandDate && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="refCommandDate = null"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  RequestItemsObject,
+  FormFilter,
+} from "@/modules/04_registryNew/interface/index/discipline";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const filterKeyword = ref<string>("");
+const rows = ref<RequestItemsObject[]>([]); //select data history
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const visibleColumns = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    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",
+    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" }),
+  },
+]);
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.profileDisHisId(id.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: RequestItemsObject) => {
+        rows.value.push({
+          id: e.id,
+          level: e.level,
+          detail: e.detail,
+          unStigma: e.unStigma,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          date: new Date(e.date),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(modal, (status) => {
+  if (status == true) {
+    getHistory();
+    filterKeyword.value = "";
+  } else {
+    filterKeyword.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <DialogHeader
+          tittle="ประวัติแก้ไขวินัย"
+          :close="() => (modal = false)"
+        />
+      </q-card-section>
+
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-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"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterKeyword"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </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">
+                <div v-if="col.name === 'no'">
+                  {{
+                    (formFilter.page - 1) * formFilter.pageSize +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'refCommandDate' ||
+                    col.name == 'date' ||
+                    col.name == 'createdAt'
+                  "
+                >
+                  {{ col.value == null ? null : date2Thai(col.value) }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPage"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue

@@ -1,6 +1,928 @@
-<script setup lang="ts"></script>
+div
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  DetailData,
+  FormFilter,
+  DataOptionLeave,
+  DataOption,
+  ResponseTotalObject,
+  MyObjectRef,
+} from "@/modules/04_registryNew/interface/index/leave";
+
+import DialogHistory from "@/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+const rowsTotal = ref<ResponseTotalObject[]>([]);
+const id = ref<string>("");
+const route = useRoute();
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  date2Thai,
+  dateToISO,
+} = mixin;
+
+const mode = ref<string>("card");
+const filterKeyword = ref<string>("");
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const rows = ref<DetailData[]>([]);
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const formData = reactive<DetailData>({
+  id: "",
+  typeLeave: "",
+  dateStartLeave: null,
+  dateEndLeave: null,
+  numLeave: 0,
+  sumLeave: 0,
+  totalLeave: 0,
+  status: "",
+  reason: "",
+  typeLeaveId: "",
+});
+
+const modal = ref<boolean>(false);
+const edit = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+
+const reason = ref<string>(""); //เหตุผล
+const numLeave = ref<number>(0);
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]);
+const numUsedLeave = ref<number>(0);
+const typeLeave = ref<string>("");
+const typeLeaveOption = ref<DataOptionLeave[]>([]);
+const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
+
+const statLeave = ref<string>("");
+const statLeaveOption = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const statLeaveOptionFilter = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+
+const statusLeave = (val: string) => {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+};
+
+const clickEditRowType = () => {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+};
+
+const typeLeaveRef = ref<object | null>(null);
+const dateRangeRef = ref<object | null>(null);
+const numLeaveRef = ref<object | null>(null);
+const statLeaveRef = ref<object | null>(null);
+const reasonRef = ref<object | null>(null);
+const objectRef: MyObjectRef = {
+  typeLeave: typeLeaveRef,
+  dateRange: dateRangeRef,
+  numLeave: numLeaveRef,
+  statLeave: statLeaveRef,
+  reason: reasonRef,
+};
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "left",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "left",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "left",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function openDialogAdd() {
+  modal.value = true;
+
+  showLoader();
+  http
+    .get(config.API.profileLeaveTotalId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      typeLeaveOption.value = data;
+      typeLeaveOptionFilter.value = data;
+      data.map((e: ResponseTotalObject) => {
+        rowsTotal.value.push({
+          typeLeaveId: e.typeLeaveId,
+          totalLeave: e.totalLeave,
+          limitLeave: e.limitLeave,
+          remainLeave: e.remainLeave,
+          typeLeave: e.typeLeave,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+function clickTotal() {
+  rowsTotal.value = [];
+  showLoader();
+  http
+    .get(config.API.profileLeaveTotalId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      typeLeaveOption.value = data;
+      typeLeaveOptionFilter.value = data;
+      data.map((e: ResponseTotalObject) => {
+        rowsTotal.value.push({
+          typeLeaveId: e.typeLeaveId,
+          totalLeave: e.totalLeave,
+          limitLeave: e.limitLeave,
+          remainLeave: e.remainLeave,
+          typeLeave: e.typeLeave,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function openDialogEdit(props: DetailData) {
+  modal.value = true;
+  formData.id = props.id;
+  id.value = props.id;
+  typeLeave.value = props.typeLeave;
+  statLeave.value = props.status;
+  reason.value = props.reason;
+  dateRange.value = [
+    new Date(props.dateStartLeave as Date),
+    new Date(props.dateEndLeave as Date),
+  ];
+  numLeave.value = props.numLeave;
+  numUsedLeave.value = props.sumLeave;
+  clickTotal();
+  if (rowsTotal.value.length > 0) {
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  edit.value = false;
+
+  id.value = "";
+  typeLeave.value = "";
+  statLeave.value = "";
+  reason.value = "";
+  dateRange.value = [new Date(), new Date()];
+  numLeave.value = 0;
+  numUsedLeave.value = 0;
+}
+
+function filterSelector(val: any, update: Function, filtername: string) {
+  switch (filtername) {
+    case "typeLeaveOption":
+      update(() => {
+        typeLeaveOption.value = typeLeaveOptionFilter.value.filter(
+          (v: DataOptionLeave) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    case "statLeaveOption":
+      update(() => {
+        statLeaveOption.value = statLeaveOptionFilter.value.filter(
+          (v: DataOption) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+function dateThaiRange(val: [Date, Date]) {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+}
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+function openDialogHistory(idOrder: string) {
+  modalHistory.value = true;
+  id.value = idOrder;
+}
+
+/** validate check*/
+function validateForm() {
+  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)) {
+    if ((edit.value = false)) {
+      saveData();
+    } else {
+      editData();
+    }
+  }
+}
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+function saveData() {
+  // showLoader();
+  //   await http
+  //     .post(config.API.profileLeaveId(profileId.value), {
+  //       dateStartLeave: dateToISO(dateRange.value[0]),
+  //       dateEndLeave: dateToISO(dateRange.value[1]),
+  //       numLeave: numLeave.value,
+  //       sumLeave: numUsedLeave.value,
+  //       totalLeave: sum,
+  //       status: statLeave.value,
+  //       reason: reason.value,
+  //       typeLeaveId: typeLeave.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //       modalAdd.value = false;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       await fetchData();
+  //     });
+  closeDialog();
+}
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  // showLoader();
+  // await http
+  //   .put(config.API.profileLeaveId(id.value), {
+  //     dateStartLeave: dateToISO(dateRange.value[0]),
+  //     dateEndLeave: dateToISO(dateRange.value[1]),
+  //     numLeave: numLeave.value,
+  //     sumLeave: numUsedLeave.value,
+  //     totalLeave: sum,
+  //     status: statLeave.value,
+  //     reason: reason.value,
+  //     typeLeaveId: typeLeave.value,
+  //   })
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //     modalAdd.value = false;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await fetchData();
+  //   });
+  closeDialog();
+};
+
+onMounted(() => {
+  const data = [
+    {
+      id: "test",
+      typeLeave: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
+      typeLeaveId: "08db52ec-d1c1-4ecc-868c-ff2a3bcdb32a",
+      dateStartLeave: new Date("2024-02-20T12:59:47.193103"),
+      dateEndLeave: new Date("2024-02-25T12:59:47.193103"),
+      numLeave: 0,
+      sumLeave: 0,
+      totalLeave: 0,
+      status: "reject",
+      reason: "test",
+    },
+  ];
+  rows.value = data;
+});
+</script>
 <template>
-  <div>การลา</div>
+  <div class="row items-center q-gutter-x-sm q-py-sm">
+    <div class="text-weight-bold text-subtitle1">การลา</div>
+
+    <q-btn color="teal-5" icon="add" flat round @click="openDialogAdd()"
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-input
+      standout
+      dense
+      v-model="filterKeyword"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
+    >
+      <template v-slot:append>
+        <q-icon
+          v-if="filterKeyword == ''"
+          name="search"
+          @click.stop.prevent="filterKeyword = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="filterKeyword"
+          name="cancel"
+          @click.stop.prevent="filterKeyword = ''"
+          class="cursor-pointer"
+        />
+      </template>
+    </q-input>
+    <q-select
+      v-if="mode == 'table'"
+      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"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    bordered
+    dense
+    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
+    :columns="columns"
+    :rows="rows"
+    :grid="mode === 'card'"
+    :paging="true"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    :filter="filterKeyword"
+  >
+    >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="openDialogEdit(props.row)"
+        >
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
+          </div>
+          <div v-else-if="col.name == 'dateStartLeave'">
+            {{
+              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+            }}
+          </div>
+          <div v-else-if="col.name == 'status'">
+            {{ statusLeave(col.value) }}
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="openDialogHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
+        <q-card flat bordered class="q-pa-md">
+          <div class="row q-pb-sm items-center">
+            <div class="column">
+              <div class="text-weight-bold">
+                {{ props.row.typeLeave !== "" ? props.row.typeLeave : "-" }}
+              </div>
+            </div>
+            <q-space />
+            <div class="q-gutter-x-sm">
+              <q-btn
+                color="teal-5"
+                icon="mdi-pencil-outline"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไข</q-tooltip></q-btn
+              >
+              <q-btn
+                color="edit"
+                icon="mdi-history"
+                flat
+                round
+                @click="openDialogHistory(props.row.id)"
+                ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <q-separator />
+          <q-card-section class="q-pa-none">
+            <q-list>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>วัน/เดือน/ปี ที่ลา</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>{{
+                    dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>จำนวนวันลา</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.numLeave ? props.row.numLeave : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>ลามาเเล้ว</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.sumLeave
+                        ? props.row.sumLeave
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >รวมเป็น</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.totalLeave
+                        ? props.row.totalLeave
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >สถานะ</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.status
+                        ? statusLeave(props.row.status)
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >เหตุผล</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.reason
+                        !== ''? props.row.reason
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
+  </d-table>
+
+  <!-- dialog add edit -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 600px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader tittle="การลา" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                ref="typeLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="typeLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลา'}`"
+                @update:modelValue="clickEditRowType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="typeLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateRange"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                range
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    ref="dateRangeRef"
+                    :model-value="dateThaiRange(dateRange)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปีที่ลา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="numLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="numLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลา'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                ref="statLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="statLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
+                hide-bottom-space
+                :label="`${'สถานะการลา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="statLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                ref="reasonRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="reason"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                hide-bottom-space
+                :label="`${'เหตุผล'}`"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
 </template>
 
-<style scoped></style>
+<style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DetailData,
+  FormFilter,
+} from "@/modules/04_registryNew/interface/index/leave";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const filterKeyword = ref<string>("");
+const rows = ref<DetailData[]>([]); //select data history
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+function getHistory() {
+  showLoader();
+http
+    .get(config.API.profileLeaveHisId(id.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: DetailData) => {
+        rows.value.push({
+          id: e.id,
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave as Date),
+          dateEndLeave: new Date(e.dateEndLeave as Date),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId:
+            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
+              ? e.typeLeaveId
+              : "",
+        });
+      });
+    })
+    .catch((e) => {
+    //   messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(modal, (status) => {
+  if (status == true) {
+    getHistory();
+    filterKeyword.value = "";
+  } else {
+    filterKeyword.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <DialogHeader
+          tittle="ประวัติแก้ไขการลา"
+          :close="() => (modal = false)"
+        />
+      </q-card-section>
+
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-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"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterKeyword"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </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">
+                <div v-if="col.name === 'no'">
+                  {{
+                    (formFilter.page - 1) * formFilter.pageSize +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'refCommandDate' ||
+                    col.name == 'date' ||
+                    col.name == 'createdAt'
+                  "
+                >
+                  {{ col.value == null ? null : date2Thai(col.value) }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPage"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue

@@ -10,21 +10,20 @@ import PerformSpecialWork from "@/modules/04_registryNew/components/detail/Gover
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-account-tie" class="q-mr-md" />
-      <span>ข้อมูลราชการ</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-account-tie" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลราชการ</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >

src/modules/04_registryNew/components/detail/Other/Main.vue

@@ -8,21 +8,20 @@ import Documentipline from "@/modules/04_registryNew/components/detail/Other/02_
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-bookmark" class="q-mr-md" />
-      <span>เอกสารหลักฐานและอื่นๆ</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-bookmark" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">เอกสารหลักฐานและอื่นๆ</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -1,6 +1,891 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableColumn, QForm } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type {
+  RequestItemsHistoryObject,
+  Columns,
+} from "@/modules/04_registry/interface/request/Information";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import HistoryTable from "@/components/TableHistory.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const profileStore = useProfileDataStore();
+const { showLoader, hideLoader, date2Thai, messageError } = mixin;
+
+const modal = ref<boolean>(false);
+const myForm = ref<any>();
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
+
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+// mock data
+const resultData = ref({
+  citizenId: "3101502080439",
+  prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+  prefix: "นางสาว",
+  firstName: "อรัญญาสาร",
+  lastName: "พรไชยะสิทธฺ์",
+  birthDate: new Date("1968-11-24T00:00:00"),
+  age: "55 ปี 3 เดือน 16 วัน",
+  genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
+  gender: "หญิง",
+  relationshipId: null,
+  bloodGroupId: null,
+  nationality: "ไทย",
+  race: "ไทย",
+  religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
+  telephoneNumber: null,
+  profileType: "officer",
+  employeeType: null,
+  employeeClass: null,
+  changeName: true,
+  isVerified: true,
+  isSendVerified: false,
+});
+
+const dataLabel = {
+  citizenId: "เลขบัตรประจำตัวประชาชน",
+  name: "ชื่อ - สกุล",
+  birthDate: "วัน/เดือน/ปีเกิด",
+  age: "อายุ",
+  gender: "เพศ",
+  relationship: "สถานภาพ",
+  nationality: "สัญชาติ",
+  race: "เชื้อชาติ",
+  religion: "ศาสนา",
+  bloodGroup: "หมู่เลือด",
+  telephoneNumber: "เบอร์โทร",
+
+  prefix: "คำนำหน้าชื่อ",
+  firstName: "ชื่อ",
+  lastName: "นามสกุล",
+};
+
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    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",
+    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" }),
+  },
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
+// get person detail list
+async function fetchPerson() {
+  // showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      // hideLoader();
+      profileStore.isLoad++;
+    });
+}
+
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+async function clickHistory() {
+  modalHistory.value = true;
+  // showLoader();
+  // await http
+  //   .get(config.API.profileInforHisId(route.params.id.toString()))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: RequestItemsHistoryObject) => {
+  //       rowsHistory.value.push({
+  //         citizenId: e.citizenId,
+  //         prefix: e.prefix,
+  //         firstName: e.firstName,
+  //         lastName: e.lastName,
+  //         birthDate: new Date(e.birthDate),
+  //         gender: e.gender,
+  //         relationship: e.relationship,
+  //         bloodGroup: e.bloodGroup,
+  //         nationality: e.nationality,
+  //         race: e.race,
+  //         religion: e.religion,
+  //         telephoneNumber: e.telephoneNumber,
+  //         employeeType:
+  //           e.employeeType == "gov"
+  //             ? "งบประมาณเงินอุดหนุนรัฐบาล"
+  //             : e.employeeType == "bkk"
+  //             ? "งบประมาณกรุงเทพมหานคร"
+  //             : "-",
+  //         employeeClass:
+  //           e.employeeClass == "perm"
+  //             ? "ลูกจ้างประจำ"
+  //             : e.employeeClass == "temp"
+  //             ? "ลูกจ้างชั่วคราว"
+  //             : "-",
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      console.log("Hello");
+      modal.value = false;
+    }
+  });
+}
+
+onMounted(async () => {
+  await fetchPerson();
+});
+</script>
 <template>
-  <div>1</div>
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-dark">ประวัติส่วนตัว</div>
+
+    <div class="toptitle col text-right">
+      <q-btn
+        flat
+        round
+        icon="mdi-pencil-outline"
+        color="primary"
+        @click="modal = true"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
+        <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+      <div class="col-md-7 col-12 row">
+        <!-- column 1 -->
+        <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(0, 6)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-md-8 col-7">
+          <div class="q-py-xs">
+            {{ resultData.citizenId }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              `${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ date2Thai(resultData.birthDate) }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.age ? resultData.age : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.gender ? resultData.gender : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.relationshipId
+                ? (
+                    Ops.statusOps.find(
+                      (r) => r.id === resultData.relationshipId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+        </div>
+      </div>
+      <!-- column 2 -->
+      <div class="col-md-5 col-12 row">
+        <div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(6, 11)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-md-8 col-7">
+          <div class="q-py-xs">
+            {{ resultData.nationality ? resultData.nationality : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.race ? resultData.race : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.religionId
+                ? (
+                    Ops.religionOps.find(
+                      (r) => r.id === resultData.religionId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.bloodGroupId
+                ? (
+                    Ops.bloodOps.find(
+                      (b) => b.id === resultData.bloodGroupId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Edit Dialog -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm" @submit="onSubmit">
+        <DialogHeader
+          tittle="แก้ไขประวัติส่วนตัว"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                maxlength="13"
+                mask="#############"
+                v-model="resultData.citizenId"
+                :label="dataLabel.citizenId"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                (val: string) =>
+                  val.length >= 13 ||
+                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.prefixId"
+                :options="Ops.prefixOps"
+                :label="dataLabel.prefix"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.firstName"
+                :label="dataLabel.firstName"
+                :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.lastName"
+                :label="dataLabel.lastName"
+                :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="resultData.birthDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    :model-value="
+                      resultData.birthDate != null
+                        ? date2Thai(resultData.birthDate)
+                        : null
+                    "
+                    :label="dataLabel.birthDate"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                    ]"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                readonly
+                v-model="resultData.age"
+                :label="dataLabel.age"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.genderId"
+                :options="Ops.genderOps"
+                :label="dataLabel.gender"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.relationshipId"
+                :options="Ops.statusOps"
+                :label="dataLabel.relationship"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.nationality"
+                :label="dataLabel.nationality"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.race"
+                :label="dataLabel.race"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.religionId"
+                :options="Ops.religionOps"
+                :label="dataLabel.religion"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.bloodGroupId"
+                :options="Ops.bloodOps"
+                :label="dataLabel.bloodGroup"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="##########"
+                v-model="resultData.telephoneNumber"
+                :label="dataLabel.telephoneNumber"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            flat
+            round
+            type="submit"
+            icon="mdi-content-save-outline"
+            color="secondary"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <history-table
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
-<style scoped></style>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -1,6 +1,457 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, useAttrs } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import type { ResponseObject } from "@/components/information/interface/response/OldName";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/OldName";
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const attrs = ref<any>(useAttrs());
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+const profileId = ref<string>(route.params.id.toString());
+
+const filterSearch = ref("");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล");
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+// mock data
+const rows = ref<RequestItemsObject[]>([
+  {
+    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+    prefix: "นางสาว",
+    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+    firstName: "อรัญญาวินัย",
+    lastName: "พรไชยะสาร",
+    status: "all",
+    file: null,
+    createdFullName: "",
+    createdAt: new Date("2024-02-13T14:31:11.959404"),
+  },
+  {
+    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+    prefix: "นางสาว",
+    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+    firstName: "อรัญญาวินัย",
+    lastName: "พรไชยะสาร",
+    status: "lastName",
+    file: null,
+    createdFullName: "",
+    createdAt: new Date("2024-02-13T14:30:34.660735"),
+  },
+  {
+    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+    prefix: "นางสาว",
+    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+    firstName: "อรัญญาวินัย",
+    lastName: "พรไชยะสาร",
+    status: "lastName",
+    file: null,
+    createdFullName: "",
+    createdAt: new Date("2024-02-13T14:30:14.562741"),
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    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",
+    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" }),
+  },
+]);
+
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+async function openFile(val: string | null) {
+  if (val != null) window.open(val);
+}
+
+async function clickHistory(row: RequestItemsObject) {
+  modalHistory.value = true;
+  // showLoader();
+  // await http
+  //   .get(config.API.profileChangeNameHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: ResponseObject) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         prefix: e.prefix,
+  //         prefixId: e.prefixId,
+  //         firstName: e.firstName,
+  //         lastName: e.lastName,
+  //         status: e.status,
+  //         file: e.file,
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  // await fetchData();
+});
+</script>
 <template>
-  <div>2</div>
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-dark">ประวัติการเปลี่ยนชื่อ-นามสกุล</div>
+
+    <div class="toptitle row">
+      <q-input
+        dense
+        outlined
+        debounce="300"
+        class="q-ml-sm"
+        ref="filterRef"
+        v-model="filterSearch"
+        placeholder="ค้นหา"
+        style="max-width: 150px"
+      >
+        <template v-slot:append>
+          <q-icon name="search" v-if="filterSearch == ''" />
+          <q-icon
+            name="clear"
+            v-if="filterSearch !== ''"
+            @click="filterSearch = ''"
+            class="cursor-pointer"
+          />
+        </template>
+      </q-input>
+      <q-select
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-dense
+        option-value="name"
+        v-model="visibleColumns"
+        :options="columns"
+        class="gt-xs q-ml-sm"
+        style="min-width: 150px"
+        :display-value="$q.lang.table.columns"
+      />
+    </div>
+  </div>
+
+  <div>
+    <q-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      ref="table"
+      v-bind="attrs"
+      class="custom-header-table"
+      :rows="rows"
+      :columns="columns"
+      :filter="filterSearch"
+      :rows-per-page-options="[0]"
+      :pagination="initialPagination"
+      :visible-columns="visibleColumns"
+      :pagination-label="paginationLabel"
+      :virtual-scroll-sticky-size-start="48"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <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, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'status'" class="table_ellipsis">
+              {{ typeChangeName(col.value) }}
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.file != null"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(props.row.file)"
+            />
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="clickHistory(props.row)"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
+
+  <history-table
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    :history="true"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
-<style scoped></style>
+<style scoped>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -1,6 +1,944 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import moment from "moment";
+import dialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { dialogConfirm, date2Thai } = mixin;
+
+const addDataDialog = ref<boolean>(false);
+const mode = ref<string>("table");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "finishDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "graduateDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "graduateDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const isDate = ref<string>("false");
+const educationOption = ["ใช่", "ไม่ใช่"];
+const historyDialog = ref<boolean>(false);
+const educationData = reactive({
+  level: "",
+  institute: "",
+  startYear: new Date().getFullYear(),
+  finishYear: new Date().getFullYear(),
+  graduateDate: new Date(),
+  startDate: new Date(),
+  finishDate: new Date(),
+  isEducation: "",
+  degree: "",
+  field: "",
+  fundName: "",
+  gpa: null,
+  country: "",
+  other: "",
+  duration: "",
+  durationYear: "",
+  note: "",
+});
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
+const row = [
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "เชียงใหม่วิทย์",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "4.5",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โปลิวิทยาคม",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โรงเรียนวัฒโน",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โรงเรียนวัฒโน",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+];
+
+const visibleColumns = ref<string[]>([
+  "level",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "finishDate",
+  "startDate",
+  "graduateDate",
+]);
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+function closeDialog() {
+  addDataDialog.value = false;
+}
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+watch(
+  () => isDate.value,
+  () => {
+    if (isDate.value === "true") {
+      educationData.startDate = new Date(`${educationData.startYear}`);
+      educationData.finishDate = new Date(`${educationData.finishYear}`);
+    } else {
+      educationData.startYear = parseInt(
+        moment(educationData.startDate).format("YYYY")
+      );
+      educationData.finishYear = parseInt(
+        moment(educationData.finishDate).format("YYYY")
+      );
+    }
+  }
+);
+</script>
+
 <template>
-  <div>5</div>
+  <div class="toptitle col text-dark">ประวัติการศึกษา</div>
+  <q-toolbar style="padding: 0px">
+    <q-btn
+      round
+      flat
+      color="primary"
+      icon="add"
+      size="16px"
+      @click="addDataDialog = true"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-select
+      v-if="mode === 'table'"
+      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="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    :columns="columns"
+    :rows="row"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[20, 50, 100]"
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="addDataDialog = true"
+        >
+          <div
+            v-if="
+              col.name === 'startDate' ||
+              col.name === 'finishDate' ||
+              col.name === 'graduateDate'
+            "
+          >
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="() => (historyDialog = true)"
+          >
+            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="edit"
+              @click="addDataDialog = true"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="blue"
+              icon="history"
+              @click="historyDialog = true"
+            >
+              <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label
+                  caption
+                  v-if="
+                    col.name === 'startDate' ||
+                    col.name === 'finishDate' ||
+                    col.name === 'graduateDate'
+                  "
+                >
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+
+                <q-item-label caption v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+    <q-card style="min-width: 40%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <div class="col">
+          <q-card-section class="row q-gutter-sm">
+            <q-input
+              outlined
+              v-model="educationData.level"
+              label="ระดับการศึกษา"
+              bg-color="white"
+              class="col"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
+              hide-bottom-space
+            />
+            <q-input
+              outlined
+              v-model="educationData.institute"
+              label="สถานศึกษา"
+              bg-color="white"
+              class="col"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+              hide-bottom-space
+            />
+          </q-card-section>
+          <q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
+            <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div v-if="isDate === 'false'" class="row q-gutter-sm">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.startYear"
+                :locale="'th'"
+                autoApply
+                class="col"
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="educationData.startYear"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    hide-bottom-space
+                    :model-value="educationData.startYear + 543"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                    ]"
+                    :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.finishYear"
+                :locale="'th'"
+                autoApply
+                class="col"
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="educationData.finishYear"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    hide-bottom-space
+                    :model-value="educationData.finishYear + 543"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                    ]"
+                    :label="`${'ปีที่จบการศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div v-if="isDate === 'true'" class="row q-gutter-sm">
+              <datepicker
+                class="col"
+                menu-class-name="modalfix"
+                v-model="educationData.startDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    :model-value="date2Thai(educationData.startDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.finishDate"
+                :locale="'th'"
+                class="col"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    :model-value="date2Thai(educationData.finishDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </q-card>
+          <q-card-section class="row q-gutter-sm q-pt-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="educationData.graduateDate"
+              :locale="'th'"
+              class="col"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  bg-color="white"
+                  dense
+                  lazy-rules
+                  :model-value="date2Thai(educationData.graduateDate)"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                  hide-bottom-space
+                  :label="`${'วันที่ได้รับ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              outlined
+              dense
+              bg-color="white"
+              class="col"
+              v-model="educationData.isEducation"
+              :options="educationOption"
+              label="เป็นวุฒิการศึกษาในตำแหน่ง"
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-py-none">
+            <q-input
+              outlined
+              v-model="educationData.degree"
+              label="วุฒิการศึกษา"
+              bg-color="white"
+              class="col"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+              hide-bottom-space
+            />
+            <q-input
+              outlined
+              v-model="educationData.field"
+              label="สาขาวิชา/ทาง"
+              bg-color="white"
+              class="col"
+              dense
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <q-input
+              outlined
+              v-model="educationData.fundName"
+              label="ทุน"
+              bg-color="white"
+              class="col"
+              dense
+            />
+            <q-input
+              outlined
+              v-model="educationData.gpa"
+              label="เกรดเฉลี่ย"
+              bg-color="white"
+              class="col"
+              dense
+              mask="#.##"
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <q-input
+              outlined
+              v-model="educationData.country"
+              label="ประเทศ"
+              bg-color="white"
+              class="col"
+              dense
+            />
+            <q-input
+              outlined
+              v-model="educationData.other"
+              label="ข้อมูลติดต่อ"
+              bg-color="white"
+              class="col"
+              dense
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <q-input
+              outlined
+              v-model="educationData.duration"
+              label="ระยะเวลา"
+              bg-color="white"
+              class="col"
+              dense
+            />
+            <q-input
+              outlined
+              v-model="educationData.durationYear"
+              label="ระยะเวลาหลักสูตร"
+              bg-color="white"
+              class="col"
+              type="number"
+              dense
+            />
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm">
+            <q-input
+              outlined
+              v-model="educationData.note"
+              label="หมายเหตุ"
+              bg-color="white"
+              class="col"
+              dense
+              type="textarea"
+            />
+          </q-card-section>
+        </div>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              bg-color="white"
+              v-model="formFilter.keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              bg-color="white"
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="row"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[20, 50, 100]"
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <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">
+                  <div
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'finishDate' ||
+                      col.name === 'graduateDate'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
+</style>

src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -1,6 +1,433 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { QForm, useQuasar } from "quasar";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const mode = ref<string>("table");
+const { dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const historyDialog = ref<boolean>(false);
+const rows = [
+  {
+    field: "กีต้าร์",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+  {
+    field: "ว่ายน้ำ",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+  {
+    field: "กีฬา",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+  {
+    field: "การเรียน",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+];
+const dialog = ref<boolean>(false);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const specialSkill = reactive({
+  field: "",
+  detail: "",
+  remark: "",
+  reference: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
+const visibleColumns = ref<string[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+]);
+function closeDialog() {
+  dialog.value = false;
+}
+
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+</script>
 <template>
-  <div>6</div>
+  <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ความสามารถพิเศษ
+    </div>
+  </div>
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="() => (dialog = true)">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      v-if="mode === 'table'"
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      v-if="mode === 'table'"
+      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="q-mr-sm"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id" @click="dialog = true">
+          <div>{{ col.value ? col.value : "-" }}</div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="historyDialog = true"
+          >
+            <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="edit"
+              @click="dialog = true"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="blue"
+              icon="history"
+              @click="historyDialog = true"
+            >
+              <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 40%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section class="col q-gutter-sm q-pr-md">
+          <div class="row q-gutter-sm q-ml-none">
+            <q-input
+              outlined
+              class="col"
+              dense
+              bg-color="white"
+              v-model="specialSkill.field"
+              label="ด้าน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
+            />
+            <q-input
+              outlined
+              class="col"
+              dense
+              bg-color="white"
+              v-model="specialSkill.detail"
+              label="รายละเอียด"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+            />
+          </div>
+          <q-input
+            class="col-12"
+            outlined
+            dense
+            bg-color="white"
+            v-model="specialSkill.remark"
+            label="หมายเหตุ"
+          />
+          <q-input
+            outlined
+            dense
+            class="col-12"
+            bg-color="white"
+            v-model="specialSkill.reference"
+            label="เอกสารอ้างอิง"
+          />
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              bg-color="white"
+              v-model="formFilter.keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              bg-color="white"
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[20, 50, 100]"
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <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">
+                  <div>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue

@@ -12,25 +12,24 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-account" class="q-mr-md" />
-      <span>ข้อมูลส่วนตัว</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-account" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >
-    <q-tab name="1" label="ข้อมูลส่วนตัว" />
+    <q-tab name="1" label="ประวัติส่วนตัว" />
     <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
     <q-tab name="3" label="ข้อมูลที่อยู่" />
     <q-tab name="4" label="ข้อมูลครอบครัว" />

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

@@ -1,6 +1,772 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type { DataOption2 } 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";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/04_registryNew/stores/salary";
+
+const $q = useQuasar();
+const store = useSalaryDataStore();
+const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    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: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "postionTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    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",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    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",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    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[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "postionTypeName",
+  "positionLevelName",
+  "salaryRef",
+  "refCommandNo",
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const maxPage = ref<number>(1);
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const rows = ref<any>([
+  {
+    date: new Date(),
+    amount: 20000,
+    positionSalaryAmount: 20000,
+    mouthSalaryAmount: 20000,
+    posNo: "1",
+    postionTypeName: "คำแหน่งประเภท",
+    positionLevelName: "ระดับ",
+    salaryRef: "เอกสารอ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+  },
+  {
+    date: new Date(),
+    amount: 20000,
+    positionSalaryAmount: 20000,
+    mouthSalaryAmount: 20000,
+    posNo: "1",
+    postionTypeName: "คำแหน่งประเภท",
+    positionLevelName: "ระดับ",
+    salaryRef: "เอกสารอ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+  },
+  {
+    date: new Date(),
+    amount: 20000,
+    positionSalaryAmount: 20000,
+    mouthSalaryAmount: 20000,
+    posNo: "1",
+    postionTypeName: "คำแหน่งประเภท",
+    positionLevelName: "ระดับ",
+    salaryRef: "เอกสารอ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+  },
+]);
+
+const formDataSalary = reactive<FormSalaryNew>({
+  date: null,
+  posNo: "",
+  templatePos: "",
+  position: "",
+  positionLineName: "",
+  typePosition: "",
+  levelPosition: "",
+  positionPathSideName: "",
+  positionExecutiveName: "",
+  salaryCompensation: null,
+  salary: null,
+  salaryPos: null,
+  refCommandNo: "",
+  templateDoc: "",
+  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 posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const positionLineOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
+const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
+
+function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+  modalDialogSalary.value = true;
+  formDataSalary.date = statusEdit ? data.date : null;
+  formDataSalary.posNo = statusEdit ? data.posNo : "";
+  // formDataSalary.templatePos = statusEdit ? data.templatePos : "";
+  // formDataSalary.position = statusEdit ? data.position : "";
+  // formDataSalary.positionLineName = statusEdit ? data.positionLineName : "";
+  // formDataSalary.typePosition = statusEdit ? data.postionTypeName : "";
+  // formDataSalary.levelPosition = statusEdit ? data.levelPosition : "";
+  // formDataSalary.positionPathSideName = statusEdit
+  //   ? data.positionPathSideName
+  //   : "";
+  // 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.templateDoc = statusEdit ? data.templateDoc : "";
+  formDataSalary.doc = statusEdit ? data.salaryRef : "";
+}
+function onClickCloseDialog() {
+  modalDialogSalary.value = false;
+}
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "pos":
+      update(() => {
+        posNoOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionLineName":
+      update(() => {
+        positionLineOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posType":
+      update(() => {
+        posTypeOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posLevel":
+      update(() => {
+        posLevelOption.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "doc":
+      update(() => {
+        docOption.value = store.optionTemplateDoc.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+function updatePos(val: string) {
+  formDataSalary.position = val;
+}
+
+function updateDoc(val: string) {
+  formDataSalary.doc = val;
+}
+
+function onSubmit() {
+  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)) {
+    dialogConfirm($q, () => {
+      onClickCloseDialog();
+    });
+  }
+}
+
+const modalHistory = ref<boolean>(false);
+function ocClikcHistory() {
+  modalHistory.value = true;
+}
+</script>
 <template>
-  <div>ตำแหน่ง/เงินเดือน</div>
+  <!-- <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ตำแหน่งเงินเดือน
+    </div>
+  </div> -->
+
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-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"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[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 auto-width>
+          <q-btn
+            dense
+            size="12px"
+            flat
+            round
+            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+            :disable="props.rowIndex + 1 == 1"
+            icon="mdi-arrow-up-bold"
+          >
+            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+          </q-btn>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            dense
+            size="12px"
+            flat
+            round
+            :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+            :disable="rows.length == props.rowIndex + 1"
+            icon="mdi-arrow-down-bold"
+          >
+            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+          </q-btn>
+        </q-td>
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="onClickOpenDialog(true, props.row)"
+        >
+          <div v-if="col.name === 'date'">
+            {{ col.value ? date2Thai(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
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="ocClikcHistory"
+          >
+            <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+          </q-btn>
+        </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-dialog v-model="modalDialogSalary" persistent full-width>
+    <q-card>
+      <form @submit.prevent.stop="onSubmit">
+        <DialogHeader
+          :tittle="
+            isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
+          "
+          :close="onClickCloseDialog"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  v-model="formDataSalary.date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateRef"
+                      outlined
+                      dense
+                      borderless
+                      :model-value="date2Thai(formDataSalary.date)"
+                      :rules="[
+                            (val: string) =>
+                              !!val ||
+                              `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                          ]"
+                      :label="`${'วัน/เดือน/ปี'}`"
+                      hide-bottom-space
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="event" class="cursor-pointer"> </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="posNoRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.posNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่ตำแหน่ง'}`"
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-select
+                  ref="templatePosRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.templatePos"
+                  :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                  option-label="name"
+                  :options="posNoOptions"
+                  option-value="name"
+                  hide-bottom-space
+                  emit-value
+                  use-input
+                  input-debounce="0"
+                  @update:modelValue="updatePos"
+                  @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                        )"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="positionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.position"
+                  :label="`${'ตำแหน่ง'}`"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionLineName"
+                  :label="`${'สายงาน'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionLineOptions"
+                  option-value="id"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
+                        )"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="formDataSalary.positionPathSideName"
+                  hide-bottom-space
+                  :label="`${'ด้าน/สาขา'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionExecutiveName"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งทางการบริหาร'}`"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  ref="typePositionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.typePosition"
+                  :label="`${'ตำแหน่งประเภท'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="posTypeOptions"
+                  option-value="id"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                  @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                        )"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  ref="levelPositionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.levelPosition"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                  :label="`${'ระดับตำแหน่ง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="posLevelOption"
+                  option-value="name"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
+                          )"
+                />
+              </div>
+              <div class="col-md-4"></div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="salaryRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salary"
+                  label="เงินเดือน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="amountRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salaryPos"
+                  label="เงินประจำตำแหน่ง"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="amountRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salaryCompensation"
+                  label="เงินค่าตอบแทนรายเดือน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-12">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.refCommandNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่คำสั่ง'}`"
+                  mask="#####################"
+                >
+                  <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-select
+                  ref="templateDocRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.templateDoc"
+                  :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                  option-label="name"
+                  :options="docOption"
+                  option-value="name"
+                  emit-value
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @update:modelValue="updateDoc"
+                  @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
+                          )"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="docRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.doc"
+                  :label="`${'เอกสารอ้างอิง'}`"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                />
+              </div>
+            </q-card>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-section align="right">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-section>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" />
 </template>
 
 <style scoped></style>

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

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    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: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    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: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    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",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    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",
+    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: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    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",
+    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: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    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",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    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",
+    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: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    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",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    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",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    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",
+    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" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "position",
+  "posNo",
+  "positionLine",
+  "positionPathSide",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+const rows = ref<any>([]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const filter = ref<string>("");
+
+function closeDialog() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <q-toolbar style="padding: 0px" class="text-primary">
+          <q-space />
+          <q-input
+            dense
+            outlined
+            v-model="filter"
+            label="ค้นหา"
+            class="q-mr-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-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"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :filter="filter"
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[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">
+                <template>
+                  {{ col.value ? col.value : "-" }}
+                </template>
+              </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>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue

@@ -1,6 +1,518 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type { ObjectReceiveRef } from "@/modules/04_registryNew/interface/index/salary";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHisotory from "@/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    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[]>([
+  "date",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+]);
+const rows = ref<any>([
+  {
+    date: new Date(),
+    detail: "รายละเอีียด",
+    reference: "อ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+    refCommandDate: new Date(),
+  },
+  {
+    date: new Date(),
+    detail: "รายละเอีียด",
+    reference: "อ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+    refCommandDate: new Date(),
+  },
+  {
+    date: new Date(),
+    detail: "รายละเอีียด",
+    reference: "อ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+    refCommandDate: new Date(),
+  },
+  {
+    date: new Date(),
+    detail: "รายละเอีียด",
+    reference: "อ้างอิง",
+    refCommandNo: "เลขที่คำสั่ง",
+    refCommandDate: new Date(),
+  },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const formData = reactive({
+  date: null,
+  reference: "",
+  detail: "",
+  refCommandNo: "",
+  refCommandDate: null,
+});
+
+const dateRef = ref<Object | null>(null);
+const referenceRef = ref<Object | null>(null);
+const detailRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectReceiveRef = {
+  date: dateRef,
+  reference: referenceRef,
+  detail: detailRef,
+};
+
+const modelView = ref<string>("table");
+const maxPage = ref<number>(1);
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
+const modalDialog = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+
+function onSubmit() {
+  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)) {
+    dialogConfirm($q, () => {
+      onClickCloseDialog();
+    });
+  }
+}
+
+function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
+  isStatusEdit.value = StatusEdit;
+  modalDialog.value = true;
+
+  formData.date = StatusEdit ? data.date : null;
+  formData.reference = StatusEdit ? data.reference : "";
+  formData.detail = StatusEdit ? data.detail : "";
+  formData.refCommandNo = StatusEdit ? data.refCommandNo : "";
+  formData.refCommandDate = StatusEdit ? data.refCommandDate : null;
+}
+function onClickCloseDialog() {
+  modalDialog.value = false;
+}
+
+const modalHistory = ref<boolean>(false);
+function ocClikcHistory() {
+  modalHistory.value = true;
+}
+</script>
 <template>
-  <div>บันทึกวันที่ไม่ได้รับเงินเดือนฯ</div>
+  <!-- <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      บันทึกวันที่ไม่ได้รับเงินเดือนฯ
+    </div>
+  </div> -->
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-if="modelView === 'table'"
+      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="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="modelView"
+      toggle-color="grey-4"
+      class="no-shadow toggle-borderd"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="sm"
+          :style="{
+            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="sm"
+          :style="{
+            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :visible-columns="visibleColumns"
+    :grid="modelView === 'card'"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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" v-if="modelView === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click.stop.prevent="onClickOpenDialog(true, props.row)"
+        >
+          <div v-if="col.name === 'date'">
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else-if="col.name === 'refCommandDate'">
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else>{{ col.value ? col.value : "-" }}</div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click.stop.prevent="ocClikcHistory"
+          >
+            <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click.stop.prevent="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="history"
+              @click.stop.prevent="ocClikcHistory"
+            >
+              <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption v-if="col.name === 'date'">
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+                <q-item-label caption v-else-if="col.name === 'refCommandDate'">
+                  {{ col.value ? date2Thai(col.value) : "-" }}</q-item-label
+                >
+                <q-item-label caption v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </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-dialog v-model="modalDialog" persistent>
+    <q-card style="width: 600px">
+      <form @submit.prevent.stop="onSubmit">
+        <DialogHeader
+          tittle="บันทึกวันที่ไม่ได้รับเงินเดือนฯ"
+          :close="onClickCloseDialog"
+        />
+        <!-- วันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็ม หรือวันที่มิได้ประจำปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก -->
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-12">
+              <q-card flat bordered class="fit q-pa-sm">
+                <div class="row col-12 q-col-gutter-xs">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          ref="dateRef"
+                          outlined
+                          dense
+                          borderless
+                          :model-value="date2Thai(formData.date)"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน/เดือน/ปี'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      ref="referenceRef"
+                      outlined
+                      dense
+                      autogrow
+                      lazy-rules
+                      borderless
+                      v-model="formData.reference"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                      hide-bottom-space
+                      :label="`${'เอกสารอ้างอิง'}`"
+                    />
+                  </div>
+                  <div class="col-12">
+                    <q-input
+                      ref="detailRef"
+                      outlined
+                      dense
+                      autogrow
+                      lazy-rules
+                      borderless
+                      v-model="formData.detail"
+                      :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                      hide-bottom-space
+                      :label="`${'รายละเอียด'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.refCommandNo"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="mdi-file" class="cursor-pointer" />
+                      </template>
+                    </q-input>
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-model="formData.refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          dense
+                          borderless
+                          :model-value="
+                        formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
+                        "
+                          hide-bottom-space
+                          :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section align="right">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-section>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHisotory v-model:modal="modalHistory" />
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    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",
+    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" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "date",
+  "reference",
+  "detail",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+const rows = ref<any>([]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const filter = ref<string>("");
+
+function closeDialog() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <q-toolbar style="padding: 0px" class="text-primary">
+          <q-space />
+          <q-input
+            dense
+            outlined
+            v-model="filter"
+            label="ค้นหา"
+            class="q-mr-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-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"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :filter="filter"
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[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">
+                <template>
+                  {{ col.value ? col.value : "-" }}
+                </template>
+              </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>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/Salary/Main.vue

@@ -8,21 +8,20 @@ import NotReceiveSalary from "@/modules/04_registryNew/components/detail/Salary/
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-cash" class="q-mr-md" />
-      <span>ข้อมูลเงินเดือน/ค่าจ้าง</span>
+  <div class="row items-center q-mb-md">
+    <div class="text-dark row items-center text-weight-bold">
+      <q-icon name="mdi-cash" class="q-mr-md" size="sm" />
+      <h3 class="resigtry-tab-title">ข้อมูลเงินเดือน/ค่าจ้าง</h3>
     </div>
   </div>
 
   <q-separator />
   <q-tabs
     v-model="tab"
-    dense
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >

src/modules/04_registryNew/components/detail/TabMain.vue

@@ -25,27 +25,29 @@ const itemsTab = ref<any>([
   {
     name: "3",
     icon: "mdi-cash",
-    label: "ข้อมูลเงินเดือน/ค่าจ้าง",
+    label: "เงินเดือน/ค่าจ้าง",
   },
   {
     name: "4",
     icon: "mdi-medal",
-    label: "ข้อมูลผลงานและเครื่องราชฯ",
+    label: "ข้อมูลผลงาน",
   },
   {
     name: "5",
     icon: "mdi-bookmark",
-    label: "เอกสารหลักฐานและอื่นๆ",
+    label: "ข้อมูลอื่นๆ",
   },
 ]);
 
 const splitterModel = ref<number>(12);
 </script>
+
 <template>
   <q-splitter v-model="splitterModel" disable>
     <template v-slot:before>
       <q-tabs v-model="store.tabMain" vertical class="text-blue">
         <q-tab
+          class="hover-tab"
           v-for="(tab, index) in itemsTab"
           :key="index"
           :name="tab.name"
@@ -63,6 +65,7 @@ const splitterModel = ref<number>(12);
         vertical
         transition-prev="jump-up"
         transition-next="jump-up"
+        class="q-px-md"
       >
         <q-tab-panel
           v-for="(tab, index) in itemsTab"
@@ -80,4 +83,10 @@ const splitterModel = ref<number>(12);
   </q-splitter>
 </template>
 
-<style scoped></style>
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+  opacity: 1 !important;
+}
+</style>

src/modules/04_registryNew/interface/index/Main.ts

@@ -6,5 +6,9 @@ interface DataOption {
   id: string;
   name: string;
 }
+interface DataOption2 {
+  id: number;
+  name: string;
+}
 
-export type { Pagination, DataOption };
+export type { Pagination, DataOption, DataOption2 };

src/modules/04_registryNew/interface/index/discipline.ts

@@ -0,0 +1,41 @@
+interface RequestItemsObject {
+    id: string;
+    level: string;
+    detail: string;
+    unStigma: string;
+    refCommandNo: string;
+    refCommandDate: Date | null;
+    date: Date;
+    createdFullName: string;
+    createdAt: Date;
+  }
+
+  interface FormFilter {
+    page: number;
+    pageSize: number;
+    keyword: string;
+    type: string;
+    posType: string;
+    posLevel: string;
+    retireYear: string | null;
+    rangeYear: { min: number; max: number };
+    isShowRetire: boolean;
+    isProbation: boolean;
+  }
+
+  interface DataOption {
+    id: string;
+    name: string;
+  }
+
+  interface DisciplineOps {
+    levelOptions: DataOption[];
+  }
+  interface MyObjectRef {
+    date: object | null;
+    detail: object | null;
+    refCommandNo: object | null;
+    [key: string]: any;
+}
+
+  export type { RequestItemsObject,FormFilter,DataOption,DisciplineOps,MyObjectRef };

src/modules/04_registryNew/interface/index/government.ts

@@ -0,0 +1,48 @@
+interface FormMain {
+  ocId:string
+  positionId:string
+  positionLine:string
+  positionLevel:string
+  numberId:string
+  positionExecutive:string
+  positionExecutiveSide:string
+  positionType:string
+  positionPathSide:string
+
+  containDate:Date
+  workDate:Date
+  reasonSameDate:string
+  retireDate:Date
+  ageAll:string
+  absent:number
+  age:number
+  [key: string]: any;
+}
+interface MyObjectRef {
+  containDate: object | null;
+  workDate: object | null;
+  reasonSameDate: object | null;
+  [key: string]: any;
+}
+
+interface RequestItemsHistoryObject {
+  oc: string | null;
+  position: string | null;
+  positionPathSide: string | null;
+  posNo: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  dateAppoint: Date;
+  dateStart: Date;
+  retireDate: string | null;
+  govAge: string | null;
+  govAgeAbsent: string | null;
+  govAgePlus: string | null;
+  reasonSameDate: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+export type { MyObjectRef, RequestItemsHistoryObject, FormMain };

src/modules/04_registryNew/interface/index/leave.ts

@@ -0,0 +1,52 @@
+interface DetailData{
+  id: string;
+  typeLeave: string;
+  dateStartLeave: Date|null;
+  dateEndLeave: Date|null;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+interface FormFilter {
+    page: number;
+    pageSize: number;
+    keyword: string;
+    type: string;
+    posType: string;
+    posLevel: string;
+    retireYear: string | null;
+    rangeYear: { min: number; max: number };
+    isShowRetire: boolean;
+    isProbation: boolean;
+  }
+  interface DataOptionLeave {
+    id: string;
+    name: string;
+    totalLeave: number;
+  }
+  interface DataOption {
+    id: string;
+    name: string;
+    disable?: boolean;
+  }
+  interface ResponseTotalObject {
+    typeLeaveId: string;
+    typeLeave: string;
+    totalLeave: number;
+    limitLeave: string;
+    remainLeave: string;
+  }
+  
+  interface MyObjectRef {
+    typeLeave: object | null;
+    dateRange: object | null;
+    numLeave: object | null;
+    statLeave: object | null;
+    reason: object | null;
+    [key: string]: any;
+}
+  export type { DetailData,FormFilter,DataOptionLeave,DataOption,ResponseTotalObject,MyObjectRef };
+  

src/modules/04_registryNew/interface/index/salary.ts

@@ -0,0 +1,20 @@
+interface ObjectSalaryRef {
+  date: object | null;
+  posNo: object | null;
+  position: object | null;
+  typePosition: object | null;
+  levelPosition: object | null;
+  salary: object | null;
+  doc: object | null;
+
+  [key: string]: any;
+}
+
+interface ObjectReceiveRef {
+  date: object | null;
+  reference: object | null;
+  detail: object | null;
+
+  [key: string]: any;
+}
+export type { ObjectSalaryRef,ObjectReceiveRef };

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

@@ -0,0 +1,19 @@
+interface FormSalaryNew {
+  date: Date | null;
+  posNo: string;
+  templatePos: string;
+  position: string;
+  positionLineName: string;
+  typePosition: string;
+  levelPosition: string;
+  positionPathSideName: string;
+  positionExecutiveName: string;
+  salary: number | null;
+  salaryPos: number | null;
+  salaryCompensation: number | null;
+  refCommandNo: string;
+  templateDoc: string;
+  doc: string;
+}
+
+export type { FormSalaryNew };

src/modules/04_registryNew/router.ts

@@ -1,4 +1,3 @@
-const mainPage = () => import("@/modules/04_registryNew/views/main.vue");
 const listPage = () => import("@/modules/04_registryNew/views/list.vue");
 const detailPage = () =>
   import("@/modules/04_registryNew/views/detailView.vue");

src/modules/04_registryNew/stores/salary.ts

@@ -0,0 +1,187 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
+
+export const useSalaryDataStore = defineStore("salatyDataStore", () => {
+  const optionTemplatePos = ref<DataOption2[]>([
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "โปรดเกล้าฯ {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 13,
+      name: "ช่วยราชการที่{หน่วยงานและรายละเอียดต่างๆ}",
+    },
+
+    {
+      id: 14,
+      name: "ปฏิบัติหน้าที่ในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 15,
+      name: "รักษาการในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 16,
+      name: "พ้นจากการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+
+    {
+      id: 17,
+      name: "งดเลื่อนขั้นเงินเดือน",
+    },
+    {
+      id: 18,
+      name: "แก้ไขคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 19,
+      name: "ยกเลิกคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 20,
+      name: "กลับไปปฏิบัติงานทางต้นสังกัดเดิม",
+    },
+    {
+      id: 21,
+      name: "โปรดเกล้าฯ แต่งตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
+    },
+  ]);
+
+  const optionTemplateDoc = ref<DataOption2[]>([
+    {
+      id: 1,
+      name: "บรรจุและแต่งตั้งผู้สอบแข่งขันได้ คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 2,
+      name: "ปรับเงินเดือนตาม{รายละเอียดของบัญชี เช่นชื่อ ฉบับที่ ปี พ.ศ.}",
+    },
+    {
+      id: 3,
+      name: "เลื่อนขั้นเงินเดือนตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 4,
+      name: "เลื่อนขั้นเงินเดือน คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 5,
+      name: "เลื่อนขั้นเงินเดือน (1 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 6,
+      name: "เลื่อนขั้นเงินเดือน (1.5 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 7,
+      name: "แต่งตั้งตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 8,
+      name: "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 9,
+      name: "ปรับเงินเดือนตาม{รายละเอียดข้อมูล}",
+    },
+    {
+      id: 10,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม} ตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 11,
+      name: "เลื่อนระดับและแต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "แต่งตั้งดำรงตำแหน่ง{ชื่อตำแหน่ง} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 13,
+      name: "แต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 14,
+      name: "เลื่อนและแต่งตั้งโดยการสอบคัดเลือก คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 15,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งของ{รายละเอียดของตำแหน่งและหน่วยงาน} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 16,
+      name: "ย้ายตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 17,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 18,
+      name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกาการปรับอัตราเงินเดือนของข้าราชการ พ.ศ. (.............)",
+    },
+  ]);
+
+  return {
+    optionTemplatePos,
+    optionTemplateDoc,
+  };
+});

src/modules/04_registryNew/views/detailView.vue

@@ -1,13 +1,44 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
 import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
 
 import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
 const router = useRouter();
+const route = useRoute();
 
+const profileId = ref<string>(route.params.id.toString());
 const formDetail = ref<DataPerson>();
+const itemsMenu = ref<DataOption[]>([
+  {
+    id: "1",
+    name: "ช่วยราชการ",
+  },
+  {
+    id: "2",
+    name: "ส่งตัวกลับ",
+  },
+  {
+    id: "3",
+    name: "แต่งตั้ง-เลื่อน-ย้าย",
+  },
+  {
+    id: "4",
+    name: "ถึงแก่กรรม",
+  },
+  {
+    id: "5",
+    name: "ให้ออกจากราชการ",
+  },
+  {
+    id: "6",
+    name: "อื่นๆ",
+  },
+]);
 
 function fetchDataPersonal() {
   const data = {
@@ -23,12 +54,20 @@ function fetchDataPersonal() {
 
   formDetail.value = data;
 }
+
+function onClickDownloadKp7(type: string) {
+  if (type === "FULL") {
+    window.open(config.API.profileReportId(profileId.value));
+  } else if (type === "SHORT") {
+    window.open(config.API.profileKp7ShortId(profileId.value));
+  }
+}
 onMounted(() => {
   fetchDataPersonal();
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-sm">
+  <div class="row items-center q-gutter-sm q-mb-xs">
     <div class="toptitle text-dark row items-center q-py-xs">
       <q-btn
         icon="mdi-arrow-left"
@@ -44,7 +83,7 @@ onMounted(() => {
     </div>
     <q-space />
     <q-btn-dropdown
-      size="16px"
+      size="md"
       rounded
       unelevated
       color="grey-4"
@@ -52,55 +91,49 @@ onMounted(() => {
       icon="mdi-home-export-outline"
       dropdown-icon="mdi-chevron-down"
     >
-      <q-list>
+      <q-list v-for="(item, index) in itemsMenu" key="index">
         <q-item clickable v-close-popup>
-          <q-item-section avatar>
-            <q-avatar icon="folder" color="primary" text-color="white" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Photos</q-item-label>
-            <q-item-label caption>February 22, 2016</q-item-label>
-          </q-item-section>
-          <q-item-section side>
-            <q-icon name="info" color="amber" />
-          </q-item-section>
-        </q-item>
-
-        <q-item clickable v-close-popup>
-          <q-item-section avatar>
-            <q-avatar icon="assignment" color="secondary" text-color="white" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Vacation</q-item-label>
-            <q-item-label caption>February 22, 2016</q-item-label>
-          </q-item-section>
-          <q-item-section side>
-            <q-icon name="info" color="amber" />
-          </q-item-section>
+          <q-item-section>{{ item.name }}</q-item-section>
         </q-item>
       </q-list>
     </q-btn-dropdown>
+
     <q-btn
       unelevated
       round
       color="grey-4"
       text-color="primary"
       icon="mdi-file-eye-outline"
-    />
+      size="md"
+    >
+      <q-tooltip>ดาวน์ไฟล์</q-tooltip>
+      <q-menu>
+        <q-list style="min-width: 120px">
+          <q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
+            <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
+          </q-item>
+          <q-item clickable v-close-popup @click="onClickDownloadKp7('SHORT')">
+            <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
   </div>
 
   <q-card>
-    <div class="column" style="height: 170px">
+    <div class="column" style="height: 160px">
       <div class="col row items-center">
         <div class="row col-12">
           <div class="col-sm-3 col-md-2"></div>
           <div class="col">
-            <div class="col-12 text-primary" style="font-size: 20px">
-              {{
-                `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
-              }}
+            <div class="col-12 text-primary">
+              <h2 class="title q-ma-none q-pa-none">
+                {{
+                  `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
+                }}
+              </h2>
             </div>
-            <div class="col-12">{{ formDetail?.position }}</div>
+            <div class="col-12 subtitle">{{ formDetail?.position }}</div>
           </div>
         </div>
       </div>
@@ -123,20 +156,20 @@ onMounted(() => {
           <div class="col-sm-3 col-md-2"></div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-5">ตำแหน่งในสายงาน</div>
+              <div class="col text-grey-6">ตำแหน่งในสายงาน</div>
               <div class="col">หัวหน้าสำนักงาน</div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-5">ประเภทตำแหน่ง</div>
+              <div class="col text-grey-6">ประเภทตำแหน่ง</div>
               <div class="col">บริหาร</div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-5">ระดับตำแหน่งง</div>
-              <div class="col">สำนาญการพิเศษ</div>
+              <div class="col text-grey-6">ระดับตำแหน่งง</div>
+              <div class="col">ชำนาญการพิเศษ</div>
             </div>
           </div>
         </div>
@@ -144,15 +177,27 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <q-card class="q-mt-md">
+  <q-card class="q-mt-md rounded">
     <TabMain />
   </q-card>
 </template>
 
 <style scoped>
+h2.title {
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+  font-weight: 500;
+}
+.subtitle {
+  font-size: 1rem;
+  color: #34373c;
+}
 .absolute-center-left {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
+.rounded {
+  border-radius: 10px;
+}
 </style>

src/modules/04_registryNew/views/list.vue

@@ -27,7 +27,7 @@ const isShowFilter = ref<boolean>(false);
 const isShowBtnFilter = ref<boolean>(true);
 
 const labelOption = reactive({
-  type: "ข้าราชการทั้งหมด",
+  type: "ประเภททั้งหมด",
   posType: "ทั้งหมด",
   posLevel: "ทั้งหมด",
   retireYear: "",
@@ -141,6 +141,13 @@ function onClickShowFilter() {
 }
 
 function onclickSearch() {
+  isShowFilter.value = true;
+  isShowBtnFilter.value = false;
+  if (isShowFilter.value) {
+    fetchType();
+    fetchLevel();
+    fetchYearOption();
+  }
   formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
   fetchDataPerson();
 }
@@ -163,7 +170,7 @@ function selectRetireYear(item: DataOption) {
 
 function clearSelect(t: string) {
   if (t === "type") {
-    labelOption.type = "ข้าราชการทั้งหมด";
+    labelOption.type = "ประเภททั้งหมด";
   } else if (t === "posType") {
     labelOption.posType = "ทั้งหมด";
   } else if (t === "posLevel") {
@@ -252,7 +259,7 @@ onMounted(async () => {
                   round
                   color="white"
                   icon="close"
-                  v-if="labelOption.type !== 'ข้าราชการทั้งหมด'"
+                  v-if="labelOption.type !== 'ประเภททั้งหมด'"
                   @click.stop.prevent="clearSelect('type')"
                 />
               </template>
@@ -278,7 +285,11 @@ onMounted(async () => {
               class="custom-btn"
             >
               <template v-slot:label>
-                {{ `ประเภทตำแหน่ง${labelOption.posType}` }}
+                {{
+                  labelOption.posType !== "ทั้งหมด"
+                    ? labelOption.posType
+                    : `ประเภทตำแหน่ง${labelOption.posType}`
+                }}
                 <q-btn
                   size="10px"
                   flat
@@ -311,7 +322,11 @@ onMounted(async () => {
               label-color="white"
             >
               <template v-slot:label>
-                {{ `ระดับตำแหน่ง${labelOption.posLevel}` }}
+                {{
+                  labelOption.posLevel !== "ทั้งหมด"
+                    ? labelOption.posLevel
+                    : `ระดับตำแหน่ง${labelOption.posLevel}`
+                }}
                 <q-btn
                   size="10px"
                   flat

src/modules/04_registryNew/views/main.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Registry from "@/modules/04_registryNew/components/registry/registry.vue";
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    ข้อมูลทะเบียนประวัติ
-  </div>
-
-  <q-card flat bordered class="q-pa-md"> <Registry /> </q-card>
-</template>
-
-<style scoped></style>

src/modules/05_placement/components/probation/FormAssign.vue

@@ -1080,7 +1080,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-6">
-
                   <q-input
                     :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                     hide-bottom-space
@@ -1090,11 +1089,10 @@ onMounted(async () => {
                     outlined
                     v-model="fullname"
                     label="ชื่อ-นามสกุล"
+                    bg-color="white"
                   />
-
                 </div>
                 <div class="col-xs-12 col-sm-6">
-
                   <q-input
                     :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
                     hide-bottom-space
@@ -1104,8 +1102,8 @@ onMounted(async () => {
                     outlined
                     v-model="position"
                     label="ตำแหน่ง"
+                    bg-color="white"
                   />
-
                 </div>
                 <div class="col-12 row">
                   <div class="col-12 text-top0 items-center">
@@ -1126,8 +1124,8 @@ onMounted(async () => {
                         :outlined="status == true"
                         v-model="monthSelect"
                         :label="`ระยะเวลา (เดือน)`"
+                        bg-color="white"
                       />
-
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
@@ -1162,12 +1160,12 @@ onMounted(async () => {
                             "
                             :label="`${'ตั้งเเต่วันที่'}`"
                             clearable
+                            bg-color="white"
                             @clear="clearDateExam"
                           >
                           </q-input>
                         </template>
                       </datepicker>
-
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
@@ -1201,12 +1199,12 @@ onMounted(async () => {
                             "
                             :label="`${'ถึงวันที่'}`"
                             clearable
+                            bg-color="white"
                             @clear="clearDateExam2"
                           >
                           </q-input>
                         </template>
                       </datepicker>
-
                     </div>
                   </div>
                 </div>
@@ -1237,6 +1235,7 @@ onMounted(async () => {
                   @filter="filterFnCaretaker"
                   use-input
                   behavior="menu"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -1245,7 +1244,7 @@ onMounted(async () => {
                       </q-item-section>
                     </q-item>
                   </template>
-                  </q-select>
+                </q-select>
 
                 <q-select
                   clearable
@@ -1263,6 +1262,7 @@ onMounted(async () => {
                   @filter="filterFnCaretaker2"
                   use-input
                   behavior="menu"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -1304,7 +1304,6 @@ onMounted(async () => {
                   v-model="caretaker2"
                   :label="`ผู้ดูแลคนที่ 2`"
                 />
-
               </div>
             </div>
             <div class="col-12">
@@ -1329,7 +1328,6 @@ onMounted(async () => {
                   class="q-ml-sm"
                   @click="addActivity"
                 />
-
               </div>
               <div class="col-12 row q-gutter-sm">
                 <q-card
@@ -1341,7 +1339,6 @@ onMounted(async () => {
                 >
                   <div class="col-12 row q-col-gutter-sm">
                     <div class="col-xs-12 col-sm-6">
-
                       <q-input
                         :rules="
                           index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
@@ -1356,10 +1353,8 @@ onMounted(async () => {
                         v-model="activity_desc[index]"
                         label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                       />
-
                     </div>
                     <div class="col-xs-12 col-sm-5">
-
                       <q-input
                         :rules="
                           index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
@@ -1374,14 +1369,12 @@ onMounted(async () => {
                         v-model="goal_desc[index]"
                         label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                       />
-
                     </div>
                     <!-- delete -->
                     <div
                       v-if="index > 1"
                       class="col-xs-12 col-sm-1 flex justify-center items-center"
                     >
-
                       <q-btn
                         flat
                         round
@@ -1390,7 +1383,6 @@ onMounted(async () => {
                         @click="deleteactivity(index)"
                         v-if="status == true"
                       />
-
                     </div>
                   </div>
                 </q-card>
@@ -1417,7 +1409,6 @@ onMounted(async () => {
                         class="q-ml-sm"
                         @click="addKnowledge"
                       />
-
                     </div>
                     <div
                       v-for="(item, index) in knowledgeArray"
@@ -1425,7 +1416,6 @@ onMounted(async () => {
                       class="col-12 row q-col-gutter-sm"
                     >
                       <div class="col-11 q-my-xs">
-
                         <q-select
                           :option-label="
                             (item) => `${item.title}-${item.description}`
@@ -1449,13 +1439,11 @@ onMounted(async () => {
                             index + 1
                           }`"
                         />
-
                       </div>
                       <div
                         v-if="index > 2"
                         class="col-xs-12 col-sm-1 flex justify-center items-center"
                       >
-
                         <q-btn
                           v-if="status == true"
                           flat
@@ -1464,7 +1452,6 @@ onMounted(async () => {
                           icon="mdi-trash-can-outline"
                           @click="deleteknowledge(index)"
                         />
-                        
                       </div>
                     </div>
                   </div>
@@ -2119,6 +2106,7 @@ onMounted(async () => {
                     borderless
                     :outlined="status == true"
                     v-model="Other"
+                    bg-color="white"
                   />
                 </div>
               </div>
@@ -2153,7 +2141,6 @@ onMounted(async () => {
                         :rules="
                           index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                         "
-                        class="bg-white"
                         type="textarea"
                         :readonly="status != true"
                         dense
@@ -2161,6 +2148,7 @@ onMounted(async () => {
                         :outlined="status == true"
                         v-model="output_desc[index]"
                         label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                        bg-color="white"
                       />
                     </div>
 
@@ -2170,7 +2158,7 @@ onMounted(async () => {
                           index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                         "
                         hide-bottom-space
-                        class="bg-white"
+                        bg-color="white"
                         type="textarea"
                         :readonly="status != true"
                         dense
@@ -2269,6 +2257,7 @@ onMounted(async () => {
                           :outlined="status == true"
                           v-model="Other5"
                           label="กรอกอื่นๆ"
+                          bg-color="white"
                         />
                       </li>
                     </div>
@@ -2351,7 +2340,6 @@ onMounted(async () => {
                 </div>
               </div>
               <div class="col-12 row q-col-gutter-md">
-
                 <div class="col-xs-12 col-sm-4">
                   <q-input
                     :readonly="status != true"
@@ -2360,6 +2348,7 @@ onMounted(async () => {
                     :outlined="status == true"
                     v-model="fullname"
                     label="ชื่อ-นามสกุล"
+                    bg-color="white"
                   />
                 </div>
 
@@ -2371,6 +2360,7 @@ onMounted(async () => {
                     :outlined="status == true"
                     v-model="position"
                     label="ตำแหน่ง"
+                    bg-color="white"
                   />
                 </div>
 
@@ -2402,6 +2392,7 @@ onMounted(async () => {
                         class="full-width datepicker"
                         :model-value="date1 != null ? date2Thai(date1) : null"
                         label="ลงวันที่"
+                        bg-color="white"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -2440,6 +2431,7 @@ onMounted(async () => {
                   @filter="filterFnCaretaker"
                   use-input
                   behavior="menu"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -2465,6 +2457,7 @@ onMounted(async () => {
                   @filter="filterFnCaretaker"
                   use-input
                   behavior="menu"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -2503,6 +2496,7 @@ onMounted(async () => {
                         class="full-width datepicker"
                         :model-value="date2 != null ? date2Thai(date2) : null"
                         label="ลงวันที่"
+                        bg-color="white"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -2533,6 +2527,7 @@ onMounted(async () => {
                   @filter="filterFnCaretaker2"
                   use-input
                   behavior="menu"
+                  bg-color="white"
                   ><template v-slot:no-option>
                     <q-item>
                       <q-item-section class="text-grey">
@@ -2558,6 +2553,7 @@ onMounted(async () => {
                   @filter="filterFnCaretaker2"
                   use-input
                   behavior="menu"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -2603,6 +2599,7 @@ onMounted(async () => {
                           caretaker2 != null ? date2Thai(date3) : null
                         "
                         label="ลงวันที่"
+                        bg-color="white"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -2641,6 +2638,7 @@ onMounted(async () => {
                   use-input
                   behavior="menu"
                   @filter="filterFnCommander"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -2667,6 +2665,7 @@ onMounted(async () => {
                   use-input
                   behavior="menu"
                   @filter="filterFnCommander"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -2705,6 +2704,7 @@ onMounted(async () => {
                         class="full-width datepicker"
                         :model-value="date4 != null ? date2Thai(date4) : null"
                         label="ลงวันที่"
+                        bg-color="white"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -2743,6 +2743,7 @@ onMounted(async () => {
                   use-input
                   behavior="menu"
                   @filter="filterFnChairman"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>
@@ -2752,7 +2753,7 @@ onMounted(async () => {
                     </q-item>
                   </template>
                 </q-select>
-                
+
                 <q-select
                   v-else
                   :options="OPchairmanFn"
@@ -2769,6 +2770,7 @@ onMounted(async () => {
                   use-input
                   behavior="menu"
                   @filter="filterFnChairman"
+                  bg-color="white"
                 >
                   <template v-slot:no-option>
                     <q-item>

src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue

@@ -97,6 +97,8 @@ const formFilter = reactive<DataFilterPerson>({
   pageSize: 10,
   keyword: "",
   rootId: "",
+  year: 0,
+  period: "",
 });
 const maxPage = ref<number>(1);
 
@@ -111,6 +113,8 @@ function closeModal() {
 function fetchListPerson() {
   showLoader();
   formFilter.rootId = store.rootId;
+  formFilter.period = store.roundMainCode;
+  formFilter.year = store.roundYear;
   http
     .post(config.API.salaryListPerson, formFilter)
     .then((res) => {

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { computed, ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  isStatusEdit: { type: Boolean, required: true },
+  data: { type: Object, required: true },
+});
+const formData = reactive<FormDataChar>({
+  name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
+  group: "", //*กลุ่มบัญชีค่าจ้าง
+  isActive: false, //*สถานะการใช้งาน
+  date: null, //ให้ไว้ ณ วันที่
+  startDate: null, //วันที่มีผลบังคับใช้
+  endDate: null, //วันที่สิ้นสุดบังคับใช้
+  details: "", //คำอธิบาย
+});
+
+const nameRef = ref<Object | null>(null);
+const groupRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectCharRef = {
+  name: nameRef,
+  group: groupRef,
+};
+
+const isReadonly = ref<boolean>(false);
+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)) {
+    dialogConfirm($q, () => {
+      onSubmit();
+    });
+  }
+}
+
+function onSubmit() {
+  console.log(props.isStatusEdit);
+}
+
+function closeDialog() {
+  modal.value = false;
+  clearFormData();
+}
+
+function clearFormData() {
+  formData.name = "";
+  formData.group = "";
+  formData.isActive = false;
+  formData.date = null;
+  formData.startDate = null;
+  formData.endDate = null;
+  formData.details = "";
+}
+
+/** function checkEndDate*/
+function checkEndDate() {
+  if (formData.endDate !== null && formData.startDate !== null) {
+    if (formData.endDate < formData.startDate) {
+      formData.endDate = null;
+    }
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value && props.isStatusEdit) {
+      console.log(props.data);
+      const data = props.data;
+      formData.name = data.name;
+      formData.group = data.group;
+      formData.isActive = data.isActive;
+      formData.date = data.date;
+      formData.startDate = null;
+      formData.endDate = null;
+      formData.details = "";
+      isReadonly.value = data.isActive ? true : false;
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <form @submit.prevent.stop="onClickSubmit">
+        <Header tittle="test" :close="closeDialog" />
+        <q-separator />
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-md-12">
+              <div class="row col-12 q-col-gutter-sm">
+                <div class="col-xs-12 col-md-4">
+                  <q-input
+                    :readonly="isReadonly"
+                    ref="nameRef"
+                    dense
+                    hide-bottom-space
+                    outlined
+                    v-model="formData.name"
+                    label="ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง"
+                    :rules="[
+                      (val) =>
+                        !!val ||
+                        'กรุณากรอกชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง',
+                    ]"
+                    lazy-rules
+                  />
+                </div>
+
+                <div class="col-xs-12 col-md-4">
+                  <q-input
+                    ref="groupRef"
+                    week-start="0"
+                    :readonly="isReadonly"
+                    dense
+                    outlined
+                    v-model="formData.group"
+                    label="กลุ่มบัญชีค่าจ้าง"
+                    hide-bottom-space
+                    mask="########"
+                    :rules="[(val) => !!val || 'กรุณากรอกกลุ่มบัญชีค่าจ้าง']"
+                  />
+                </div>
+
+                <div
+                  class="col-xs-12 col-md-4"
+                  style="display: flex; justify-content: flex-start"
+                >
+                  <q-toggle
+                    week-start="0"
+                    :disable="isReadonly"
+                    color="primary"
+                    label="สถานะการใช้งาน"
+                    v-model="formData.isActive"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-md-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.date"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :readonly="isReadonly"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :readonly="isReadonly"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        :model-value="
+                          formData.date != null
+                            ? date2Thai(formData.date)
+                            : null
+                        "
+                        label="ให้ไว้ ณ วันที่"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <div class="col-xs-12 col-md-4">
+                  <datepicker
+                    :readonly="isReadonly"
+                    menu-class-name="modalfix"
+                    v-model="formData.startDate"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="checkEndDate"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :readonly="isReadonly"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        :model-value="
+                          formData.startDate != null
+                            ? date2Thai(formData.startDate)
+                            : null
+                        "
+                        label="วันที่มีผลบังคับใช้"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <div class="col-xs-12 col-md-4">
+                  <datepicker
+                    :readonly="isReadonly"
+                    menu-class-name="modalfix"
+                    v-model="formData.endDate"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formData.startDate"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :readonly="isReadonly"
+                        outlined
+                        dense
+                        :model-value="
+                          formData.endDate != null
+                            ? date2Thai(formData.endDate)
+                            : null
+                        "
+                        label="วันที่สิ้นสุดบังคับใช้"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    :readonly="isReadonly"
+                    v-model="formData.details"
+                    outlined
+                    dense
+                    type="textarea"
+                    label="คำอธิบาย"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-ma-sm">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>2</div>
+</template>
+
+<style scoped></style>

src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+
+/** importComponents*/
+import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const router = useRouter();
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "group",
+    align: "left",
+    label: "กลุ่มบัญชีค่าจ้าง",
+    sortable: true,
+    field: "group",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่มีผลบังคับใช้",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะการใช้งาน",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([
+  {
+    id: "1",
+    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
+    group: 1,
+    date: new Date(),
+    isActive: true,
+  },
+  {
+    id: "2",
+    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
+    group: 2,
+    date: new Date(),
+    isActive: false,
+  },
+]);
+const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+/** List Mune*/
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    color: "edit",
+    type: "edit",
+  },
+  {
+    label: "เอกสารอ้างอิง",
+    icon: "mdi-file-document-outline",
+    color: "teal",
+    type: "upload",
+  },
+  {
+    label: "อัตราเงินเดือน",
+    icon: "mdi-format-list-bulleted-triangle",
+    color: "secondary",
+    type: "salaryRate",
+  },
+  {
+    label: "คัดลอก",
+    icon: "content_copy",
+    color: "blue-6",
+    type: "copy",
+  },
+]);
+
+function onClickAction(type: string, data: any) {
+  switch (type) {
+    case "edit":
+      onEdit(data);
+      break;
+    case "upload":
+      onUpload();
+      break;
+    case "salaryRate":
+      onSalaryRate(data);
+      break;
+    case "coppy":
+      onCoppy(data.id);
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onEdit(data: any) {
+  modalDialogEmployeeChart.value = true;
+  isStatusEdit.value = true;
+  dataRow.value = data;
+}
+
+function onUpload() {}
+
+function onSalaryRate(id: string) {
+  router.push(`/salary-employee/rate/${id}`);
+}
+
+function onCoppy(id: string) {}
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {});
+}
+
+const modalDialogEmployeeChart = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const dataRow = ref<any>();
+function onClickAdd() {
+  modalDialogEmployeeChart.value = true;
+  isStatusEdit.value = false;
+}
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn flat round dense icon="add" @click="onClickAdd()">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+    >
+      <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
+    dense
+    :rows="rows"
+    :columns="columns"
+    row-key="name"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[10, 20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <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>
+      <q-separator />
+    </template>
+    <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>
+          <div v-else-if="col.name === 'group'">
+            {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
+          </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>
+        </q-td>
+        <q-td>
+          <q-btn
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <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-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>
+                  </q-item-section>
+                </q-item>
+                <q-item
+                  v-if="props.row.isActive == false"
+                  clickable
+                  v-close-popup
+                  @click.stop="onClickDelete(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="red" size="17px" name="delete" />
+                      <div class="q-pl-md">ลบ</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="1"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogEmployeeChart
+    v-model:modal="modalDialogEmployeeChart"
+    :isStatusEdit="isStatusEdit"
+    :data="dataRow"
+  />
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,7 @@
+interface ObjectCharRef {
+  name: object | null;
+  group: object | null;
+
+  [key: string]: any;
+}
+export type { ObjectCharRef };

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

@@ -10,6 +10,8 @@ interface DataFilterPerson {
   pageSize: number;
   keyword: string;
   rootId: string;
+  year: number;
+  period: string;
 }
 
 export type { DataFilter, DataFilterPerson };

src/modules/13_salary/interface/request/EmployeeChart.ts

@@ -0,0 +1,10 @@
+interface FormDataChar {
+  name: string; //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
+  group: string; //*กลุ่มบัญชีค่าจ้าง
+  isActive: boolean; //*สถานะการใช้งาน
+  date: Date | null; //ให้ไว้ ณ วันที่
+  startDate: Date | null; //วันที่มีผลบังคับใช้
+  endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
+  details: string; //คำอธิบาย
+}
+export type { FormDataChar };

src/modules/13_salary/router.ts

@@ -1,7 +1,13 @@
 const salaryChart = () => import("@/modules/13_salary/views/salaryChart.vue");
+const salaryEmployeeChart = () =>
+  import("@/modules/13_salary/views/salaryEmployeeChart.vue");
+const salaryEmployeeRate = () =>
+  import("@/modules/13_salary/views/salaryEmployeeRate.vue");
 const salaryRate = () => import("@/modules/13_salary/views/salaryRate.vue");
 const salaryRound = () => import("@/modules/13_salary/views/salaryRound.vue");
 const salaryLists = () => import("@/modules/13_salary/views/salaryLists.vue");
+const salaryEmployeeLists = () =>
+  import("@/modules/13_salary/views/salaryEmployeeLists.vue");
 
 export default [
   {
@@ -14,6 +20,26 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary-employee",
+    name: "salaryEmployeeChart",
+    component: salaryEmployeeChart,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "salary",
+    },
+  },
+  {
+    path: "/salary-employee/rate/:id",
+    name: "salaryEmployeeRate",
+    component: salaryEmployeeRate,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "salary",
+    },
+  },
   {
     path: "/salary/rate/:id",
     name: "salaryRate",
@@ -44,4 +70,14 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary-employee/lists",
+    name: "salaryEmployeeLists",
+    component: salaryEmployeeLists,
+    meta: {
+      Auth: true,
+      Key: [1.4],
+      Role: "salary",
+    },
+  },
 ];

src/modules/13_salary/store/SalaryEmployeeChart.ts

@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+
+import { ref } from "vue";
+
+export const useSalaryEmployeeChartDataStore = defineStore(
+  "salaryEmployeeChart",
+  () => {
+    const mainTab = ref<string>("structure");
+    return {
+      mainTab,
+    };
+  }
+);

src/modules/13_salary/store/SalaryListsStore.ts

@@ -21,6 +21,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
   const groupId = ref<string>("");
   const rootId = ref<string>("");
   const roundMainCode = ref<string>("");
+  const roundYear = ref<number>(0);
   const roundCode = ref<string>("");
   const isClosedRound = ref<boolean>(false); // การปิดรอบ
   /** List Menu*/
@@ -152,6 +153,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
     groupOp,
     roundMainCode,
     remaining,
-    isClosedRound
+    isClosedRound,
+    roundYear,
   };
 });

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

@@ -296,18 +296,17 @@ async function filterFn(page: number) {
               </div>
               <div v-else-if="col.name === 'posList'" class="row">
                 <div class="column text-weight-light">
-                    <span>ประเภทตำแหน่ง</span>
-                    <span>ระดับตำแหน่ง</span>
-
-    
-                  </div>
+                  <span>ประเภทตำแหน่ง</span>
+                  <span>ระดับตำแหน่ง</span>
+                </div>
                 <div class="column q-ml-sm">
-                    <span>{{ props.row.posType }}</span>
-                    <span>{{ props.row.isSpecial ? `${props.row.posLevel} (ฉ)` : `${props.row.posLevel}` }}</span>
-                    
-                    
-          
-                  </div>
+                  <span>{{ props.row.posType }}</span>
+                  <span>{{
+                    props.row.isSpecial
+                      ? `${props.row.posLevel} (ฉ)`
+                      : `${props.row.posLevel}`
+                  }}</span>
+                </div>
               </div>
               <div v-else-if="col.name === 'salaryType'">
                 {{

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import TabStructure from "@/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue";
+import TabCriteris from "@/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue";
+
+import { useSalaryEmployeeChartDataStore } from "@/modules/13_salary/store/SalaryEmployeeChart";
+
+const store = useSalaryEmployeeChartDataStore();
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ผังบัญชีค่าจ้างลูกจ้างประจำ
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <q-tabs
+      v-model="store.mainTab"
+      dense
+      align="left"
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="structure" label="บัญชีโครงสร้างอัตราค่าจ้าง" />
+      <q-tab name="criteria" label="หลักเกณฑ์" />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="store.mainTab" animated>
+      <q-tab-panel name="structure">
+        <TabStructure />
+      </q-tab-panel>
+
+      <q-tab-panel name="criteria">
+        <TabCriteris />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>

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

@@ -0,0 +1,412 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, nextTick } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
+import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
+/** importType*/
+import type {
+  DataOption,
+  DataOptionShort,
+} from "@/modules/13_salary/interface/index/Main";
+import type {
+  DataRound,
+  DataAgency,
+  DataPeriodLatest,
+} from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+
+/** importStore*/
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const store = useSalaryListSDataStore();
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+/** ตัวแปร*/
+const roundFilter = ref<any>();
+const roundOptions = ref<DataOptionShort[]>([]);
+const agencyFilter = ref<string>("");
+const agencyOptions = ref<DataOption[]>();
+const snapFilter = ref<string>("");
+const snapOptions = ref<DataOption[]>();
+const periodLatest = ref<DataPeriodLatest>();
+
+const isLoad = ref<boolean>(false);
+
+/** ตัวแปร select*/
+const page = ref<number>(1);
+const pageSize = ref<number>(50);
+const lastPage = ref<number>(0);
+const loading = ref(false);
+const nextPage = ref<number>(1);
+
+/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
+function getRound() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryPeriod() +
+        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
+    )
+    .then(async (res) => {
+      const data = res.data.result.data;
+      lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+
+      const optionMain = await data.map((x: DataRound) => ({
+        id: x.id,
+        revisionId: x.revisionId,
+        shortCode: x.period,
+        isClose: x.isClose,
+        name:
+          (x.period === "OCT"
+            ? "รอบตุลาคม "
+            : x.period === "SPECIAL"
+            ? "รอบพิเศษ "
+            : "รอบเมษายน ") +
+          (Number(x.year) + 543),
+      }));
+      roundOptions.value.push(...optionMain);
+
+      roundFilter.value = await (roundOptions.value
+        ? roundOptions.value[0]
+        : "");
+
+      store.roundMainCode = roundFilter.value.shortCode;
+      store.isClosedRound = roundFilter.value.isClose;
+
+      await getSnap(roundFilter.value.shortCode);
+      await getAgency(roundFilter.value.revisionId);
+      await getAgencyPosition(roundFilter.value.revisionId);
+
+      //   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+      //     await fetchSalalyPeriod(
+      //       agencyFilter.value,
+      //       roundFilter.value.id,
+      //       snapFilter.value
+      //     );
+      //   }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรอบ*/
+function getSnap(code: string) {
+  snapOptions.value =
+    code == "OCT"
+      ? [
+          {
+            id: "SNAP1",
+            name: "1 กันยายน",
+          },
+          {
+            id: "SNAP2",
+            name: "1 ตุลาคม",
+          },
+        ]
+      : code === "APR"
+      ? [
+          {
+            id: "SNAP1",
+            name: "1 มีนาคม",
+          },
+          {
+            id: "SNAP2",
+            name: "1 เมษายน",
+          },
+        ]
+      : [
+          {
+            id: "SNAP1",
+            name: "พิเศษ 1",
+          },
+          {
+            id: "SNAP2",
+            name: "พิเศษ 2",
+          },
+        ];
+  snapFilter.value = snapOptions.value[0].id;
+}
+
+/**
+ * function เรียกข้อมูลหน่ยวงาน
+ * @param id  revisionId
+ */
+async function getAgency(id: string) {
+  id &&
+    (await http
+      .get(config.API.activeOrganizationRootById(id))
+      .then(async (res) => {
+        const data = res.data.result;
+        agencyOptions.value = await [
+          {
+            id: "ALL",
+            name: "ทั้งหมด",
+          },
+        ].concat(
+          data.map((x: DataAgency) => ({
+            id: x.id,
+            name: x.orgRootName,
+          }))
+        );
+        // agencyFilter.value = store.rootId;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      }));
+}
+
+/**
+ * function เรียกข้อมูลหน่ยวงานปจุบัน
+ * @param id  revisionId
+ */
+async function getAgencyPosition(id: string) {
+  if (id) {
+    await http
+      .get(config.API.keycloakPositionByid(id))
+      .then(async (res) => {
+        const data = await res.data.result;
+
+        store.rootId = data.rootId;
+        const position = agencyOptions.value?.find(
+          (e: DataOption) => e.id === data.rootId
+        );
+
+        agencyFilter.value = position ? position.id : "";
+
+        if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+          fetchSalalyPeriod(
+            agencyFilter.value,
+            roundFilter.value.id,
+            snapFilter.value
+          );
+        }
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  } else agencyFilter.value = "";
+}
+
+/**
+ *
+ * @param rootId id หน่วยงาน
+ * @param periodId id รอบการขึ้นเงินเดือน
+ * @param snap id รอบ
+ */
+function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
+  showLoader();
+  isLoad.value = false;
+  const body = {
+    rootId: rootId,
+    salaryPeriodId: periodId,
+    snapshot: snap,
+  };
+
+  http
+    .post(config.API.salaryListPeriodLatest, body)
+    .then(async (res) => {
+      const data = res.data.result;
+      if (Object.values(data).includes(null)) {
+        isLoad.value = false;
+      } else {
+        data && store.fetchPeriodLatest(data, store.tabGroup);
+        periodLatest.value = data;
+        isLoad.value = true;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 800);
+    });
+}
+
+/** function เปลี่ยนรอบการขั้นเงินเดือน*/
+async function onChangeRound() {
+  // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
+  store.isClosedRound = roundFilter.value.isClose;
+
+  await getSnap(roundFilter.value.shortCode);
+  await getAgency(roundFilter.value.revisionId);
+  await getAgencyPosition(roundFilter.value.revisionId);
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    // await fetchSalalyPeriod(
+    //   agencyFilter.value,
+    //   roundFilter.value.id,
+    //   snapFilter.value
+    // );
+    store.tabType = "PENDING";
+    store.roundMainCode = roundFilter.value.shortCode;
+  } else {
+    isLoad.value = false;
+  }
+}
+
+/** function เปลี่ยนรอบ*/
+async function onChangeSnap() {
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
+}
+
+/** function เปลี่ยนหน่วยงาน*/
+async function onChangeAgency() {
+  store.rootId = agencyFilter.value;
+
+  if (
+    agencyFilter.value !== "ALL" &&
+    roundFilter.value.id &&
+    snapFilter.value
+  ) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
+}
+
+/** function onScrollSelect รอบการขึ้นเงินเดือน*/
+function onScroll({ to, ref }: { to: number; ref: any }) {
+  const lastIndex = roundOptions.value.length - 1;
+
+  if (
+    loading.value !== true &&
+    nextPage.value < lastPage.value &&
+    to === lastIndex
+  ) {
+    loading.value = true;
+
+    setTimeout(() => {
+      nextPage.value++;
+      page.value = nextPage.value;
+      getRound();
+      nextTick(() => {
+        ref.refresh();
+        loading.value = false;
+      });
+    }, 500);
+  }
+}
+
+onMounted(async () => {
+  await getRound();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายการเลื่อนเงินเดือนลูกจ้างประจำ
+    </div>
+    <q-space />
+
+    <q-select
+      v-model="roundFilter"
+      label="รอบการขึ้นเงินเดือน"
+      dense
+      outlined
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="roundOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeRound"
+      :loading="loading"
+      @virtual-scroll="onScroll"
+    >
+      <template v-slot:option="scope">
+        <q-item v-bind="scope.itemProps">
+          <q-item-section>
+            <q-item-label>{{ scope.opt.name }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+    <q-select
+      class="q-ml-xs"
+      v-model="snapFilter"
+      label="รอบ"
+      dense
+      outlined
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="snapOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeSnap"
+    />
+    <q-select
+      class="q-ml-xs"
+      v-model="agencyFilter"
+      label="หน่วยงาน"
+      dense
+      outlined
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="agencyOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeAgency"
+    />
+  </div>
+
+  <q-card flat bordered>
+    <div v-if="agencyFilter !== 'ALL'">
+      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <q-card v-else class="q-pa-sm">
+        <div class="q-pa-sm">
+          <q-banner inline-actions rounded class="bg-grey-1 text-center">
+            ไม่มีข้อมูล
+          </q-banner>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <PageDashBoard />
+    </div>
+  </q-card>
+
+  <q-card
+    v-if="isLoad && !store.isClosedRound"
+    flat
+    bordered
+    class="row col-12 q-mt-xs"
+  >
+    <ProcessStep />
+  </q-card>
+
+  <!-- </q-card> -->
+</template>
+
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 200px
+</style>

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const router = useRouter();
+const $q = useQuasar();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับขั้น",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "month",
+    align: "left",
+    label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
+    sortable: true,
+    field: "month",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "day",
+    align: "left",
+    label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
+    sortable: true,
+    field: "day",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    month: 100000,
+    day: 5000,
+  },
+]);
+const visibleColumns = ref<string[]>(["no", "month", "day"]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+</script>
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      อัตราค่าจ้าง
+    </div>
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar class="text-primary" style="padding: 0px">
+      <q-btn flat round dense icon="add">
+        <q-tooltip>เพิ่ม </q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        outlined
+        v-model="formFilter.keyword"
+        placeholder="ค้นหา"
+      >
+        <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>
+    <div class="col-12">
+      <d-table
+        flat
+        bordered
+        dense
+        :rows="rows"
+        :columns="columns"
+        row-key="name"
+        v-model:pagination="pagination"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+          <q-separator />
+        </template>
+        <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 === 'month'">
+                {{ col.value ? col.value.toLocaleString() : "-" }}
+              </div>
+              <div v-else-if="col.name === 'day'">
+                {{ col.value ? col.value.toLocaleString() : "-" }}
+              </div>
+              <div v-else>{{ col.value ? col.value : "-" }}</div>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="1"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>

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

@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from '@/modules/13_salary/components/SalaryLists/Dashboard.vue'
+import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
 /** importType*/
 import type {
   DataOption,
@@ -63,6 +63,7 @@ function getRound() {
         revisionId: x.revisionId,
         shortCode: x.period,
         isClose: x.isClose,
+        year: x.year,
         name:
           (x.period === "OCT"
             ? "รอบตุลาคม "
@@ -78,6 +79,7 @@ function getRound() {
         : "");
 
       store.roundMainCode = roundFilter.value.shortCode;
+      store.roundYear = roundFilter.value.year;
       store.isClosedRound = roundFilter.value.isClose;
 
       await getSnap(roundFilter.value.shortCode);
@@ -239,6 +241,7 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
 async function onChangeRound() {
   // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
   store.isClosedRound = roundFilter.value.isClose;
+  console.log(roundFilter.value);
 
   await getSnap(roundFilter.value.shortCode);
   await getAgency(roundFilter.value.revisionId);
@@ -251,6 +254,7 @@ async function onChangeRound() {
     // );
     store.tabType = "PENDING";
     store.roundMainCode = roundFilter.value.shortCode;
+    store.roundYear = roundFilter.value.year;
   } else {
     isLoad.value = false;
   }
@@ -271,7 +275,11 @@ async function onChangeSnap() {
 async function onChangeAgency() {
   store.rootId = agencyFilter.value;
 
-  if (agencyFilter.value !== 'ALL' && roundFilter.value.id && snapFilter.value) {
+  if (
+    agencyFilter.value !== "ALL" &&
+    roundFilter.value.id &&
+    snapFilter.value
+  ) {
     await fetchSalalyPeriod(
       agencyFilter.value,
       roundFilter.value.id,
@@ -311,7 +319,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      รายการเลื่อนเงินเดือนข้าราชการ
+      รายการเลื่อนเงินเดือนข้าราชการฯ
     </div>
     <q-space />
 
@@ -394,20 +402,18 @@ onMounted(async () => {
     <q-separator /> -->
   <q-card flat bordered>
     <div v-if="agencyFilter !== 'ALL'">
-
-
-    <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
-    <q-card v-else class="q-pa-sm">
-      <div class="q-pa-sm">
-        <q-banner inline-actions rounded class="bg-grey-1 text-center">
-          ไม่มีข้อมูล
-        </q-banner>
-      </div>
-    </q-card>
-  </div>
-  <div v-else>
-    <PageDashBoard/>
-  </div>
+      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <q-card v-else class="q-pa-sm">
+        <div class="q-pa-sm">
+          <q-banner inline-actions rounded class="bg-grey-1 text-center">
+            ไม่มีข้อมูล
+          </q-banner>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <PageDashBoard />
+    </div>
   </q-card>
 
   <q-card

src/style/quasar-variables.sass

@@ -145,3 +145,13 @@ $muti-tab: #87d4cc
 
 .input-alert i.text-primary
     color: #f00 !important
+
+/* registry common style */
+.toggle-borderd 
+  border: 1px solid #ecebeb
+
+h3.resigtry-tab-title 
+  font-size: 1.2rem
+  font-weight: 600
+  margin: 0 0
+  padding: 0 0