แยกจัดทำคำขอ และบันทึกผลของเครื่องราช ของ ขรก. และลูกจ้าง

src/api/07_insignia/api.insignia.ts

@@ -23,9 +23,10 @@ export default {
     ocId: string,
     role: string,
     status: any,
-    isDeputy: boolean = false
+    isDeputy: boolean = false,
+    type: string = "officer"
   ) =>
-    `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}/${isDeputy}`,
+    `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}/${isDeputy}/${type}`,
   insigniaReject: (profileId: string) =>
     `${insignia}/request/status/reject/${profileId}`,
   insigniaDelete: (profileId: string) =>
@@ -39,7 +40,8 @@ export default {
   // record
   noteround: () => `${insignia}/request/note`,
   requestDocNote: (id: string) => `${insignia}/request/note/doc/${id}`,
-  noteSearch: () => `${insignia}/request/note/search`,
+  noteSearch: (type: string = "officer") =>
+    `${insignia}/request/note/search/${type}`,
   noteSearchList: () => `${insignia}/request/note-list/search`,
   noteAdd: (insigniaId: string) => `${insignia}/request/note/${insigniaId}`,
   noteByid: (id: string) => `${insignia}/request/note/${id}`,

src/api/manage/api.insignia.ts

@@ -49,4 +49,7 @@ export default {
 
   checkIsofficer: `${env.API_URI}/org/workflow/keycloak/isofficer/`,
   insigniaReclaim,
+
+  // update คุณสมบัติการจัดการเครื่องราชฯ
+  insigniaUpdateProperty: `${env.API_URI}/insignia/request/update`,
 };

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -144,15 +144,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
+  // {
-    name: "employeeType",
+  //   name: "employeeType",
-    align: "left",
+  //   align: "left",
-    label: "ประเภทตำแหน่ง",
+  //   label: "ประเภทตำแหน่ง",
-    sortable: true,
+  //   sortable: true,
-    field: "employeeType",
+  //   field: "employeeType",
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-  },
+  // },
   {
     name: "position",
     align: "left",
@@ -375,7 +375,7 @@ async function fecthlistperson() {
   http
     .get(
       config.API.registryNewOtherSystem(
-        employeeType.value == "officer" ? `` : `-employee`
+        DataStore.employeeClass == "officer" ? `` : `-employee`
       ),
       {
         params: { ...formFilter, nodeId: organization.value },
@@ -501,8 +501,7 @@ async function downloadFileexcel() {
     .put(
       config.API.insigniaDowanload(DataStore.requestId),
       {
-        profileType:
+        profileType: DataStore.employeeClass,
-          DataStore.employeeClass == "all" ? null : DataStore.employeeClass,
         InsigniaId:
           DataStore.typeinsignia == "all"
             ? null
@@ -842,10 +841,11 @@ function clearInsigniaFilters(name: string) {
   if (name === "typeinsigniaOptions") {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
-  } else if (name === "employeeClassOps") {
-    DataStore.employeeClass = "all";
-    employeeClassOps.value = DataStore.employeeClassOps;
   }
+  // else if (name === "employeeClassOps") {
+  //   DataStore.employeeClass = "all";
+  //   employeeClassOps.value = DataStore.employeeClassOps;
+  // }
 }
 
 watch(
@@ -1026,7 +1026,7 @@ onMounted(async () => {
               </q-item>
             </template>
           </q-select>
-          <q-select
+          <!-- <q-select
             v-model="DataStore.employeeClass"
             dense
             outlined
@@ -1072,15 +1072,12 @@ onMounted(async () => {
                 <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
               </q-item>
             </template>
-          </q-select>
+          </q-select> -->
           <q-space />
           <div>
             <q-btn
               v-if="checkPermission($route)?.attrIsGet"
-              :disable="
+              :disable="DataStore.typeinsignia === 'all'"
-                DataStore.employeeClass === 'all' ||
-                DataStore.typeinsignia === 'all'
-              "
               icon="mdi-download"
               flat
               round
@@ -1089,6 +1086,7 @@ onMounted(async () => {
             >
               <q-tooltip>ดาวน์โหลด</q-tooltip>
             </q-btn>
+
             <q-btn
               flat
               round
@@ -1096,10 +1094,10 @@ onMounted(async () => {
               icon="mdi-plus"
               @click="clickmodalAdd"
               v-if="
-                (DataStore.isLock == false &&
+                DataStore.isLock == false &&
-                  DataStore.requestStatus == 'st5' &&
+                checkPermission($route)?.attrIsCreate &&
-                  DataStore.isOfficer) ||
+                ((DataStore.requestStatus == 'st5' && DataStore.isOfficer) ||
-                (checkStatus == true && checkPermission($route)?.attrIsCreate)
+                  checkStatus == true)
               "
             >
               <q-tooltip>เพิ่ม</q-tooltip>
@@ -1330,11 +1328,14 @@ onMounted(async () => {
               </q-td> -->
               <q-td key="discipline" class="text-center">
                 <q-btn
-                  v-if="checkPermission($route)?.attrIsGet"
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    props.row.markDiscipline
+                  "
                   flat
                   dense
                   icon="info"
-                  color="info"
+                  color="red"
                   @click.pervent="
                     onClickViewInfo(
                       'discipline',
@@ -1344,14 +1345,17 @@ onMounted(async () => {
                   "
                 >
                 </q-btn>
+                <div v-else>-</div>
               </q-td>
               <q-td key="leave" class="text-center">
                 <q-btn
-                  v-if="checkPermission($route)?.attrIsGet"
+                  v-if="
+                    checkPermission($route)?.attrIsGet && props.row.markLeave
+                  "
                   flat
                   dense
                   icon="info"
-                  color="info"
+                  color="red"
                   @click.pervent="
                     onClickViewInfo(
                       'leave',
@@ -1361,11 +1365,14 @@ onMounted(async () => {
                   "
                 >
                 </q-btn>
+                <div v-else>-</div>
               </q-td>
               <q-td key="assessments" class="text-center">
                 <!-- ผลการประเมินการปฏิบัติราชการในรอบ 5 ปี ต่ำกว่าระดับดี (น้อยกว่าร้อยละ 70) -->
                 <q-btn
-                  v-if="checkPermission($route)?.attrIsGet"
+                  v-if="
+                    checkPermission($route)?.attrIsGet && props.row.markRate
+                  "
                   flat
                   dense
                   icon="info"
@@ -1379,10 +1386,13 @@ onMounted(async () => {
                   "
                 >
                 </q-btn>
+                <div v-else>-</div>
               </q-td>
               <q-td key="insignia" class="text-center">
                 <q-btn
-                  v-if="checkPermission($route)?.attrIsGet"
+                  v-if="
+                    checkPermission($route)?.attrIsGet && props.row.insignia
+                  "
                   flat
                   dense
                   icon="info"
@@ -1396,6 +1406,7 @@ onMounted(async () => {
                   "
                 >
                 </q-btn>
+                <div v-else>-</div>
               </q-td>
             </q-tr>
           </template>
@@ -1415,7 +1426,7 @@ onMounted(async () => {
           <div class="col-xs-12 col-sm-7">
             <q-card flat bordered class="fit q-pa-sm">
               <div class="row q-col-gutter-sm q-mb-sm">
-                <div class="col-3">
+                <!-- <div class="col-3">
                   <q-select
                     outlined
                     dense
@@ -1429,7 +1440,7 @@ onMounted(async () => {
                     @update:model-value="clearForm(), fecthlistperson()"
                   >
                   </q-select>
-                </div>
+                </div> -->
                 <div class="col-3">
                   <q-select
                     dense
@@ -1451,7 +1462,9 @@ onMounted(async () => {
                   dense
                   placeholder="ค้นหา"
                   v-model="formFilter.searchKeyword"
-                  @keydown.enter.prevent="(formFilter.page = 1), fecthlistperson()"
+                  @keydown.enter.prevent="
+                    (formFilter.page = 1), fecthlistperson()
+                  "
                 >
                   <template v-slot:append>
                     <q-icon name="search" />

src/modules/07_insignia/components/2_Manage/Tab2.vue

@@ -67,15 +67,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
+  // {
-    name: "employeeType",
+  //   name: "employeeType",
-    align: "left",
+  //   align: "left",
-    label: "ประเภทตำแหน่ง",
+  //   label: "ประเภทตำแหน่ง",
-    sortable: true,
+  //   sortable: true,
-    field: "employeeType",
+  //   field: "employeeType",
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-  },
+  // },
   {
     name: "position",
     align: "left",
@@ -253,7 +253,7 @@ function clearInsigniaFilters(name: string) {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
   } else if (name === "employeeClassOps") {
-    DataStore.employeeClass = "all";
+    // DataStore.employeeClass = "all";
     employeeClassOps.value = DataStore.employeeClassOps;
   }
 }
@@ -405,7 +405,7 @@ watch(
               </q-item>
             </template>
           </q-select>
-          <q-select
+          <!-- <q-select
             v-model="DataStore.employeeClass"
             dense
             outlined
@@ -451,7 +451,7 @@ watch(
                 <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
               </q-item>
             </template>
-          </q-select>
+          </q-select> -->
         </div>
       </q-card>
       <div class="col-12 q-pt-sm">

src/modules/07_insignia/components/2_Manage/Tab3.vue

@@ -68,15 +68,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
+  // {
-    name: "employeeType",
+  //   name: "employeeType",
-    align: "left",
+  //   align: "left",
-    label: "ประเภทตำแหน่ง",
+  //   label: "ประเภทตำแหน่ง",
-    sortable: true,
+  //   sortable: true,
-    field: "employeeType",
+  //   field: "employeeType",
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-  },
+  // },
   {
     name: "position",
     align: "left",
@@ -254,10 +254,11 @@ function clearInsigniaFilters(name: string) {
   if (name === "typeinsigniaOptions") {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
-  } else if (name === "employeeClassOps") {
-    DataStore.employeeClass = "all";
-    employeeClassOps.value = DataStore.employeeClassOps;
   }
+  // else if (name === "employeeClassOps") {
+  //   DataStore.employeeClass = "all";
+  //   employeeClassOps.value = DataStore.employeeClassOps;
+  // }
 }
 
 function onSearch() {
@@ -406,7 +407,7 @@ onMounted(async () => {
               </q-item>
             </template>
           </q-select>
-          <q-select
+          <!-- <q-select
             v-model="DataStore.employeeClass"
             dense
             outlined
@@ -450,7 +451,7 @@ onMounted(async () => {
                 <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
               </q-item>
             </template>
-          </q-select>
+          </q-select> -->
         </div>
       </q-card>
       <div class="col-12 q-pt-sm">

src/modules/07_insignia/components/3_result/DialogResults.vue

@@ -171,7 +171,7 @@ function findlist(id: string = "", idCard: string) {
 function fectDataByid(id: string) {
   showLoader();
   if (props.profileType !== undefined) {
-    employeeClass.value = "officer";
+    employeeClass.value = props.profileType;
   }
   http
     .get(config.API.noteByid(id))
@@ -291,7 +291,7 @@ function classInput(val: boolean) {
 watch(props, () => {
   if (props.modal === true) {
     filterinsigniaOp2.value = DataStore.insigniaOp2;
-    employeeClass.value = "";
+    employeeClass.value = props.profileType || "";
     cardid.value = "";
     fullName.value = "";
     position.value = "";
@@ -335,9 +335,6 @@ watch(props, () => {
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-4">
               <q-select
-                :rules="[
-                  (val:string) => !!val || 'กรุณาเลือก  ขรก.สามัญ/ลูกจ้างประจำ',
-                ]"
                 hide-bottom-space
                 :options="employeeClassOps"
                 dense
@@ -348,9 +345,9 @@ watch(props, () => {
                 map-options
                 outlined
                 v-model="employeeClass"
-                :label="`ขรก.สามัญ/ลูกจ้างประจำ`"
+                label="ประเภทตำแหน่ง"
                 @update:model-value="selectType"
-                :class="classInput(status !== '')"
+                disable
                 :readonly="status !== ''"
                 lazy-rules
               />
@@ -383,7 +380,7 @@ watch(props, () => {
                 label="เลขประจำตัวประชาชน"
                 maxlength="13"
                 mask="#############"
-                @keyup="searchcardid"
+                @change="searchcardid"
               />
             </div>
 

src/modules/07_insignia/router.ts

@@ -33,6 +33,8 @@ const ReclaimMain = () =>
 //  รายชื่อลูกจ้างประจำ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
 const ManageEmpMain = () =>
   import("@/modules/07_insignia/views/08_ManageEmpMain.vue");
+const RecordInsigniaEmp = () =>
+  import("@/modules/07_insignia/views/09_ResultMainEmp.vue");
 
 export default [
   {
@@ -128,7 +130,6 @@ export default [
       Role: "STAFF",
     },
   },
-
   {
     path: "/insignia/manage-emp/list-manage",
     name: "insigniaManageEmp",
@@ -139,4 +140,14 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/insignia/record-emp",
+    name: "insigniaRecordEmp",
+    component: RecordInsigniaEmp,
+    meta: {
+      Auth: true,
+      Key: "SYS_INSIGNIA_RECORD_EMP",
+      Role: "STAFF",
+    },
+  },
 ];

src/modules/07_insignia/views/!08_ManageEmpMain.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { onMounted, ref } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";
+
+/** import Type*/
+import type { DataStat } from "@/modules/07_insignia/interface/index/Main";
+import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";
+
+/**import Componrnts*/
+import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
+
+/**use  */
+const $q = useQuasar(); //ใช้ noti quasar
+const { fetchDataCheckIsoffice } = useRoleWorkflowDataStore();
+const { messageError, dialogConfirm, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+//การเจ้าหน้าที่
+const isStaff = ref<boolean>(false);
+const isOfficer = ref<boolean>(false);
+const isDirector = ref<boolean>(false);
+const isDeputy = ref<boolean>(false);
+
+//ข้อมูล สถิติ
+const stat = ref<DataStat>({
+  allUserUser: 0,
+  orgAllCount: 0,
+  orgNoSendCount: 0,
+  orgSendCount: 0,
+});
+
+//ข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+const round = ref<string>("");
+const optionRound = ref<
+  Array<{ id: number; year: string; name: string; period_revision: string }>
+>([]);
+
+/** ฟังก์ชันเรียกข้อมูลการเป็นเจ้าหน้าที่*/
+async function fetchCheckIsofficer() {
+  try {
+    const data = await fetchDataCheckIsoffice("SYS_INSIGNIA_MANAGE_EMP");
+    isStaff.value = data.isStaff;
+    // isStaff.value = true; // สำหรับการทดสอบ
+    isOfficer.value = data.isOfficer;
+    isDirector.value = data.isDirector;
+    isDeputy.value = data.isDeputy;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
+/** ฟังก์ชันเรียกข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์*/
+async function fecthRoundData() {
+  await http
+    .get(config.API.listRoundInsignia(), { params: { path: "MANAGE" } })
+    .then(async (res) => {
+      optionRound.value = await res.data.result.map((e: ResponsePeriod) => ({
+        id: e.period_id,
+        year: e.period_year,
+        name: e.period_name,
+        period_revision: e.period_revision,
+      }));
+      //มีรอบการเสนอขอพระราชทานเครื่อง
+      if (optionRound.value.length !== 0) {
+        // DataStore.optionRound = optionRound.value;
+        // const lastValue = optionRound.value[0];
+        // await fetchListOrg(lastValue.period_revision);
+        // await fecthAgency(lastValue.period_revision);
+        // if (DataStore.roundId) {
+        // round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
+        // } else {
+        // round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
+        // }
+        // await fecthStat(round.value);
+        // DataStore.roundId = round.value;
+        // roundName.value = lastValue.name;
+        // loadview.value = true;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** ฟังก์ชันยื่นยันการล็อกข้อมูล*/
+function onConfrimIsLockData() {
+  dialogConfirm(
+    $q,
+    () => {},
+    "ยืนยันการล็อกข้อมูล",
+    "คุณต้องการล็อกข้อมูลใช่หรือไม่"
+  );
+}
+
+onMounted(async () => {
+  showLoader();
+  try {
+    await fetchCheckIsofficer();
+    if (isStaff.value || isOfficer.value || isDirector.value) {
+      await Promise.all([fecthRoundData()]);
+    }
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อลูกจ้างประจำ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
+  </div>
+
+  <q-card
+    bordered
+    class="row col-12 q-mt-sm"
+    v-if="isDirector || isOfficer || isStaff"
+  >
+    <div class="row col-12 items-center bg-grey-1">
+      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
+      <q-select
+        borderless
+        dense
+        v-model="round"
+        :options="optionRound"
+        map-options
+        emit-value
+        option-value="id"
+        option-label="name"
+      />
+      <!-- @update:model-value="changround" -->
+
+      <q-space />
+      <!-- สกจ. Freez ข้อมูล -->
+      <q-btn
+        v-if="isOfficer && checkPermission($route)?.attrIsUpdate"
+        dense
+        unelevated
+        label="ล็อกข้อมูล"
+        color="public"
+        class="q-px-md q-ml-md"
+        @click="onConfrimIsLockData"
+      >
+        <q-tooltip>ล็อกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div v-if="isOfficer" class="col-12 row bg-white">
+      <div class="fit q-px-md q-py-sm">
+        <div class="row col-12 q-col-gutter-sm fit">
+          <cardTop
+            :amount="stat.orgAllCount"
+            label="หน่วยงานทั้งหมด"
+            color="#016987"
+          />
+          <cardTop
+            :amount="stat.orgSendCount"
+            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
+            color="#02A998"
+          />
+          <cardTop
+            :amount="stat.orgNoSendCount"
+            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
+            color="#2EA0FF"
+          />
+          <cardTop
+            :amount="stat.allUserUser"
+            label="จำนวนคนที่ยื่นขอ"
+            color="#4154B3"
+          />
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card v-else>
+    <div class="q-pa-md q-gutter-sm">
+      <q-banner inline-actions rounded class="bg-grey-1 text-center">
+        ไม่มีข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+      </q-banner>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/07_insignia/views/02_ManageMain.vue

@@ -242,6 +242,7 @@ async function fecthInsigniaByOc(
     await http
       .get(config.API.insigniaList(roundId, ocId, role, status, isDeputy))
       .then(async (res) => {
+        DataStore.isLock = res.data.result.isLock; // เช็คว่ามีการล็อกข้อมูลหรือไม่
         requestNote.value = res.data.result.requestNote;
         requestStatus.value = res.data.result.requestStatus;
         requestId.value = res.data.result.requestId;
@@ -422,6 +423,35 @@ function requestSendNote() {
   });
 }
 
+/**
+ * function อัพเดตข้อมูลคุณสมบัติ
+ */
+async function updateDataProperty() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.insigniaUpdateProperty, {
+        insigniaPeriodId: round.value,
+        agencyId: DataStore.agency,
+        type: "officer",
+      })
+      .then(async () => {
+        hideLoader();
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.agency,
+          "officer",
+          tab.value
+        );
+        success($q, "อัพเดตข้อมูลคุณสมบัติสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
 /**
  * function อัปโหลดไฟล์เจ้าหน้าที่
  * @param event file
@@ -455,6 +485,7 @@ async function uploadFile(event: any) {
  *  hook
  */
 onMounted(async () => {
+  DataStore.employeeClass = "officer"; // กำหนดประเภทข้าราชการสามัญฯ เป็น ขรก.
   tab.value = DataStore.mainTab ?? "";
   await Promise.all([fecthlistRound(), fecthInsignia(), fetchCheckIsofficer()]);
 });
@@ -507,6 +538,22 @@ onUnmounted(() => {
       >
         <q-tooltip>ล็อกข้อมูล</q-tooltip>
       </q-btn>
+      <!-- อัพเดตข้อมูลคุณสมบัติ -->
+      <q-btn
+        v-if="
+          DataStore.isStaff &&
+          DataStore.isLock !== true &&
+          checkPermission($route)?.attrIsUpdate
+        "
+        dense
+        unelevated
+        label="อัพเดตข้อมูลคุณสมบัติ"
+        color="public"
+        class="q-px-md q-ml-md"
+        @click="updateDataProperty"
+      >
+        <q-tooltip>อัพเดตข้อมูลคุณสมบัติ</q-tooltip>
+      </q-btn>
     </div>
     <div class="col-12"><q-separator /></div>
     <div v-if="DataStore.isOfficer" class="col-12 row bg-white">
@@ -642,7 +689,7 @@ onUnmounted(() => {
         dense
         v-model="fileUpload"
         accept=".pdf"
-        :style="fileUpload === null ? 'width: 150px' : 'width: auto'"
+        :style="fileUpload === null ? 'width: 250px' : 'width: auto'"
         label="อัปโหลดไฟล์"
       >
         <template v-slot:prepend>
@@ -688,6 +735,7 @@ onUnmounted(() => {
 
       <q-btn
         v-if="
+        !DataStore.isLock &&
           ((DataStore.isOfficer && DataStore.optionsTypeOc.findIndex(
           (v: OptionData) => v.id === DataStore.selectOrganization && v.isDeputy === true) > -1) || DataStore.isStaff) &&
           (requestStatus == 'st1' || requestStatus == 'st4') &&
@@ -701,6 +749,7 @@ onUnmounted(() => {
       />
       <q-btn
         v-if="
+          !DataStore.isLock &&
           DataStore.isDirector &&
           (requestStatus == 'st3' || requestStatus == 'st5') &&
           checkPermission($route)?.attrIsUpdate
@@ -713,6 +762,7 @@ onUnmounted(() => {
       />
       <q-btn
         v-if="
+          !DataStore.isLock &&
           DataStore.isDirector &&
           requestStatus == 'st3' &&
           checkPermission($route)?.attrIsUpdate

src/modules/07_insignia/views/03_ResultMain.vue

@@ -22,6 +22,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import Dialogbody from "@/modules/07_insignia/components/3_result/DialogReceive_Return.vue"; //รับ-คืนเครื่องราชฯ
 import DialogForm from "@/modules/07_insignia/components/3_result/DialogResults.vue"; //บันทึกผล
 import fileUploadview from "../components/3_result/TabDocuments.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -106,15 +107,15 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
+  // {
-    name: "employeeType",
+  //   name: "employeeType",
-    align: "left",
+  //   align: "left",
-    label: "ประเภทตำแหน่ง",
+  //   label: "ประเภทตำแหน่ง",
-    field: "employeeType",
+  //   field: "employeeType",
-    sortable: true,
+  //   sortable: true,
-    sort: (a: string, b: string) =>
+  //   sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  // },
   {
     name: "type",
     align: "left",
@@ -480,12 +481,13 @@ function filterSelector(val: string, update: Function, name: string) {
       filterInvoice.value = DataStore.invoiceTypeop.filter(
         (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
-    } else if (name === "filterEmployee") {
-      DataStore.employeeClass = val ? "" : DataStore.employeeClass;
-      filterEmployee.value = DataStore.employeeClassOps.filter(
-        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
-      );
     }
+    // else if (name === "filterEmployee") {
+    //   DataStore.employeeClass = val ? "" : DataStore.employeeClass;
+    //   filterEmployee.value = DataStore.employeeClassOps.filter(
+    //     (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
+    //   );
+    // }
   });
 }
 
@@ -501,7 +503,7 @@ function clearInsigniaFilters(name: string) {
     DataStore.invoiceType = "all";
     filterInvoice.value = DataStore.invoiceTypeop;
   } else if (name === "filterEmployee") {
-    DataStore.employeeClass = "all";
+    // DataStore.employeeClass = "all";
     filterEmployee.value = DataStore.employeeClassOps;
   }
 }
@@ -534,6 +536,21 @@ function serchDataTableDailog() {
   );
 }
 
+const modalPersonal = ref<boolean>(false); // popup ทะเบียนประวัติ
+/**
+ *  function redirect to ทะเบียนประวัติ
+ * @param id profileId
+ */
+function viewRegistry(id: string, type: string) {
+  modalPersonal.value = true;
+  personId.value = id;
+  profileType.value = type;
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
 /**
  * callback function จำทำงานเมื่อ tab มีการเปลี่ยนแปลง
  */
@@ -805,7 +822,7 @@ onMounted(() => {
                 </q-item>
               </template>
             </q-select>
-            <q-select
+            <!-- <q-select
               v-model="DataStore.employeeClass"
               dense
               outlined
@@ -851,7 +868,7 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
               </template>
-            </q-select>
+            </q-select> -->
             <div>
               <q-btn
                 v-if="checkPermission($route)?.attrIsCreate"
@@ -884,6 +901,23 @@ onMounted(() => {
             <template v-slot:body="props">
               <q-tr :props="props">
                 <q-td auto-width>
+                  <!-- ดูข้อมูลทะเบียนประวัติ -->
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsGet && props.row.profileId
+                    "
+                    flat
+                    round
+                    dense
+                    icon="info"
+                    color="info"
+                    @click.stop="
+                      viewRegistry(props.row.profileId, props.row.profileType)
+                    "
+                  >
+                    <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
+                  </q-btn>
+
                   <q-btn
                     v-if="
                       checkPermission($route)?.attrIsGet &&
@@ -962,7 +996,7 @@ onMounted(() => {
     :round-id="selectRound"
     :action="action"
     :person-id="personId"
-    :profile-type="profileType"
+    profile-type="officer"
     :fecthlist-insignia="fecthlistInsignia"
   />
 
@@ -1036,6 +1070,13 @@ onMounted(() => {
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    :type="profileType"
+    @update:modal="updatemodalPersonal"
+  />
 </template>
 <style lang="scss" scoped>
 .arrow {

src/modules/07_insignia/views/08_ManageEmpMain.vue

@@ -1,32 +1,53 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted, defineAsyncComponent, ref } from "vue";
 import { useQuasar } from "quasar";
-import { onMounted, ref } from "vue";
 
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { checkPermission } from "@/utils/permissions";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";
 
-/** import Type*/
+import type { DataStructureTree } from "@/interface/main";
-import type { DataStat } from "@/modules/07_insignia/interface/index/Main";
+import type {
+  OptionData,
+  OptionRound,
+  DataStat,
+} from "@/modules/07_insignia/interface/index/Main";
 import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";
 
 /**import Componrnts*/
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
+// import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
+import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue"; //คนไม่ที่ยืนขอ
+import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue"; //คนที่ถูกลบ
+import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue"; //หน่วยงานที่ไม่ได้ส่งชื่อ
+import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
+
+const tab1 = defineAsyncComponent(
+  () => import("@/modules/07_insignia/components/2_Manage/Tab1.vue")
+);
 
 /**use  */
 const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
+const DataStore = useInsigniaDataStore();
 const { fetchDataCheckIsoffice } = useRoleWorkflowDataStore();
-const { messageError, dialogConfirm, showLoader, hideLoader, success } =
+const mixin = useCounterMixin();
-  useCounterMixin();
+const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
-
-//การเจ้าหน้าที่
-const isStaff = ref<boolean>(false);
-const isOfficer = ref<boolean>(false);
-const isDirector = ref<boolean>(false);
-const isDeputy = ref<boolean>(false);
 
+/**
+ * ตัวแปร
+ */
+const loadview = ref<boolean>(false); //แสดง View
+// const hideBottom = ref<boolean>(false);
+const round = ref<string>(""); //รอยการเสนอขอ
+const roundName = ref<string>(""); //ชื่อรอบการเสนอ
+const optionRound = ref<OptionRound[]>([]);
+const optiontypeOc = ref<OptionData[]>([]);
+const tab = ref<string>(""); //tab รายชื่อ
 //ข้อมูล สถิติ
 const stat = ref<DataStat>({
   allUserUser: 0,
@@ -34,29 +55,20 @@ const stat = ref<DataStat>({
   orgNoSendCount: 0,
   orgSendCount: 0,
 });
+const requestNote = ref<string>(""); //หมายเหตุ ตีกลับ
+const requestStatus = ref<string>(""); //สถานะของรอบการเสนอขอ
+const requestId = ref<string>(""); //id ของรอบการเสนอขอ
+const document = ref<string>(""); //เอกสารดาวน์โหลด
+const fileUpload = ref<any>(null); //ไฟล์อัปโหลด
+const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
+const modalbackInsignia2Role = ref<boolean>(false); // popup หมายเหตุการตีกลับ
 
-//ข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+/**
-const round = ref<string>("");
+ * function เรียกรอบการเสนอขอพระราชทานเครื่อง
-const optionRound = ref<
+ */
-  Array<{ id: number; year: string; name: string; period_revision: string }>
+async function fecthlistRound() {
->([]);
+  showLoader();
-
+  loadview.value = false;
-/** ฟังก์ชันเรียกข้อมูลการเป็นเจ้าหน้าที่*/
-async function fetchCheckIsofficer() {
-  try {
-    const data = await fetchDataCheckIsoffice("SYS_INSIGNIA_MANAGE_EMP");
-    isStaff.value = data.isStaff;
-    // isStaff.value = true; // สำหรับการทดสอบ
-    isOfficer.value = data.isOfficer;
-    isDirector.value = data.isDirector;
-    isDeputy.value = data.isDeputy;
-  } catch (err) {
-    messageError($q, err);
-  }
-}
-
-/** ฟังก์ชันเรียกข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์*/
-async function fecthRoundData() {
   await http
     .get(config.API.listRoundInsignia(), { params: { path: "MANAGE" } })
     .then(async (res) => {
@@ -66,50 +78,401 @@ async function fecthRoundData() {
         name: e.period_name,
         period_revision: e.period_revision,
       }));
-      //มีรอบการเสนอขอพระราชทานเครื่อง
+
+      //มีรอบการเสนอขอพระราชทานเครื่องแสดง UI
       if (optionRound.value.length !== 0) {
-        // DataStore.optionRound = optionRound.value;
+        DataStore.optionRound = optionRound.value;
-        // const lastValue = optionRound.value[0];
+        const lastValue = optionRound.value[0];
-        // await fetchListOrg(lastValue.period_revision);
+        await fetchListOrg(lastValue.period_revision);
-        // await fecthAgency(lastValue.period_revision);
+        await fecthAgency(lastValue.period_revision);
-        // if (DataStore.roundId) {
+        if (DataStore.roundId) {
-        // round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
+          round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
-        // } else {
+        } else {
-        // round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
+          round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
-        // }
+        }
-        // await fecthStat(round.value);
+        await fecthStat(round.value);
-        // DataStore.roundId = round.value;
+        DataStore.roundId = round.value;
-        // roundName.value = lastValue.name;
+        roundName.value = lastValue.name;
-        // loadview.value = true;
+        loadview.value = true;
       }
     })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง
+ */
+async function fecthStat(id: string) {
+  if (DataStore.isOfficer) {
+    await http
+      .get(config.API.insigniaDashboard(id))
+      .then((res) => {
+        stat.value = res.data.result;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
+}
+
+/**
+ * function fetch ข้อมูลโครองสร้างปัจจุบัน
+ * @param id โครงสร้างปัจจุบัน
+ */
+async function fetchListOrg(id: string) {
+  if (DataStore.isOfficer) {
+    await http
+      .get(config.API.orgByIdSystemRoot(id, route.meta.Key as string))
+      .then(async (res) => {
+        const data = res.data.result;
+        if (data.length !== 0) {
+          optiontypeOc.value = await res.data.result.map(
+            (item: DataStructureTree) => ({
+              id: item.orgTreeId,
+              name: item.orgName,
+              isDeputy: item.isDeputy,
+            })
+          );
+
+          await DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่  DataStore
+        }
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
+}
+
+/**
+ * funcion เช็คหน่วยงาน
+ */
+async function fecthAgency(id: string) {
+  await http
+    .get(config.API.keycloakPosition(), {
+      params: {
+        revisionId: id,
+      },
+    })
+    .then((res) => {
+      DataStore.agency = res.data.result.rootId;
+      DataStore.selectOrganization = res.data.result.rootId;
+      DataStore.typeOc = DataStore.agency;
+    })
     .catch((err) => {
       messageError($q, err);
     });
 }
 
-/** ฟังก์ชันยื่นยันการล็อกข้อมูล*/
+/**
-function onConfrimIsLockData() {
+ * function เรียกประเภทเครื่องราช
+ */
+async function fecthInsignia() {
+  if (DataStore.dataInsigniaType.length === 0) {
+    await http
+      .get(config.API.insigniaOrg)
+      .then((res) => {
+        const data = res.data.result;
+        DataStore.fetchInsigniaType(data);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
+}
+
+async function fetchCheckIsofficer() {
+  try {
+    const data = await fetchDataCheckIsoffice("SYS_INSIGNIA_MANAGE");
+    DataStore.isStaff = data.isStaff;
+    DataStore.isOfficer = data.isOfficer;
+    DataStore.isDirector = data.isDirector;
+    DataStore.isDeputy = data.isDeputy;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
+/**
+ * function เปลี่ยนรอบการแสดง
+ */
+async function changround() {
+  DataStore.roundId = round.value;
+
+  // get round name
+  await fecthStat(round.value); //เรียกดู Stat รอบที่เลือก
+  const roundFilter = optionRound.value.find(
+    (x: OptionRound) => x.id === round.value
+  );
+  if (roundFilter) {
+    await fetchListOrg(roundFilter?.period_revision);
+    await fecthAgency(roundFilter?.period_revision);
+    roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชฯ ปี ${
+      roundFilter.year + 543
+    }`;
+  }
+  var organization =
+    DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency  ถ้าไม่มีเรียนตาม Oc ที่เลือก
+      ? DataStore.agency
+      : DataStore.typeOc;
+  await fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
+}
+
+/**
+ * function เรียกข้อมูลรายชื่อข้าราชการสามัญฯ  ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
+ * @param roundId id รอบการเสนอขอ
+ * @param ocId id หน่วยงาน
+ * @param role   ประเภท officer,employee
+ * @param status สถานะ
+ */
+async function fecthInsigniaByOc(
+  roundId: string,
+  ocId: string,
+  role: string,
+  status: string,
+  isDeputy: boolean = false
+) {
+  DataStore.rows = [];
+  if (roundId && ocId && role && status) {
+    showLoader();
+    await http
+      .get(
+        config.API.insigniaList(
+          roundId,
+          ocId,
+          role,
+          status,
+          isDeputy,
+          "employee"
+        )
+      )
+      .then(async (res) => {
+        requestNote.value = res.data.result.requestNote;
+        requestStatus.value = res.data.result.requestStatus;
+        requestId.value = res.data.result.requestId;
+        document.value = res.data.result.document;
+        await DataStore.fetchData(res.data.result.items); // ส่งรายชื่อข้าราชการสามัญฯ
+        await DataStore.fetchDataInsignia(res.data.result); // ส่งข้อมูลรอบบการแสดง
+        // แสดงปุมล็อกข้อมูล
+        // if (res.data.result.items !== null) {
+        //   if (res.data.result.items.length !== 0) {
+        //     hideBottom.value = true;
+        //   } else hideBottom.value = false;
+        // }
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * function ยืนยันการส่งรอบการเสนอขอต่อ เฉพาะ รอบที่ requestStatus st1 และ st4
+ */
+function sendToDirector() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
+      .then(async () => {
+        await fecthStat(round.value);
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.agency,
+          "officer",
+          tab.value
+        );
+        await success($q, "บันทึกสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function open popup แก้ไข*
+ */
+function popupBackToEdit() {
+  modalPopupBackToEdit.value = true;
+}
+
+/**
+ * function  open popup ตีกลับ admin
+ */
+function popupBackToInsignia2Role() {
+  modalbackInsignia2Role.value = true;
+}
+
+/**
+ * funtion ยืนยันการ ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
+ * @param reason หมายเหตุการตีกลับ
+ */
+function backToEdit(reason: string) {
   dialogConfirm(
     $q,
-    () => {},
+    () => {
-    "ยืนยันการล็อกข้อมูล",
+      showLoader();
-    "คุณต้องการล็อกข้อมูลใช่หรือไม่"
+      http
+        .put(
+          config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency),
+          {
+            reason: reason,
+          }
+        )
+        .then(async () => {
+          await fecthInsigniaByOc(
+            round.value,
+            DataStore.agency,
+            "officer",
+            tab.value
+          );
+          await success($q, "บันทึกสำเร็จ");
+          modalPopupBackToEdit.value = false;
+        })
+        .catch((err) => {
+          messageError($q, err);
+          hideLoader();
+        });
+    },
+    "ยืนยันการตีกลับ",
+    "ต้องการยืนยันการตีกลับใช่หรือไม่?"
   );
 }
 
+/**
+ * function ยืนยันการอนุมัติรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
+ */
+function directorApproved() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
+        .then(async () => {
+          await fecthInsigniaByOc(
+            round.value,
+            DataStore.agency,
+            "officer",
+            tab.value
+          );
+          await fecthStat(round.value);
+          await success($q, "บันทึกสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+          hideLoader();
+        });
+    },
+    "ยืนยันการอนุมัติ",
+    "ต้องการยืนยันการอนุมัติใช่หรือไม่?"
+  );
+}
+
+/**
+ * function ยืนยันการตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st5 และ adminRole
+ * @param reason หมายเหตุการตีกลับ
+ */
+function backToEditinsignia2Role(reason: string) {
+  dialogConfirm($q, () => {
+    http
+      .put(config.API.rejectRequest(round.value, DataStore.typeOc), {
+        reason: reason,
+      })
+      .then(async () => {
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.typeOc,
+          "officer",
+          tab.value
+        );
+        await success($q, "การตีกลับสำเร็จ");
+        modalbackInsignia2Role.value = false;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  });
+}
+
+/**
+ * function อัพเดตข้อมูลคุณสมบัติ
+ */
+async function updateDataProperty() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.insigniaUpdateProperty, {
+        insigniaPeriodId: round.value,
+        agencyId: DataStore.agency,
+        type: "employee",
+      })
+      .then(async () => {
+        hideLoader();
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.agency,
+          "officer",
+          tab.value
+        );
+        success($q, "อัพเดตข้อมูลคุณสมบัติสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function อัปโหลดไฟล์เจ้าหน้าที่
+ * @param event file
+ */
+async function uploadFile(event: any) {
+  dialogConfirm($q, async () => {
+    const selectedFile = event;
+    const formdata = new FormData();
+    formdata.append("Document", selectedFile);
+    await http
+      .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
+      .then(async () => {
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.agency,
+          "officer",
+          tab.value
+        );
+        success($q, "อัปโหลดไฟล์สำเร็จ");
+        fileUpload.value = null;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      }),
+      "ยืนยันการอัปโหลดไฟล์",
+      "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?";
+  });
+}
+
+/**
+ *  hook
+ */
 onMounted(async () => {
-  showLoader();
+  tab.value = DataStore.mainTab ?? "";
-  try {
+  DataStore.employeeClass = "employee"; // กำหนดประเภทตำแหน่งเป็นลูกจ้างประจำ
-    await fetchCheckIsofficer();
+  await Promise.all([fecthlistRound(), fecthInsignia(), fetchCheckIsofficer()]);
-    if (isStaff.value || isOfficer.value || isDirector.value) {
+});
-      await Promise.all([fecthRoundData()]);
+
-    }
+onUnmounted(() => {
-  } catch (error) {
+  DataStore.typeOc = "";
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
 });
 </script>
 
@@ -117,11 +480,13 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อลูกจ้างประจำ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
   </div>
-
   <q-card
     bordered
     class="row col-12 q-mt-sm"
-    v-if="isDirector || isOfficer || isStaff"
+    v-if="
+      loadview &&
+      (DataStore.isDirector || DataStore.isOfficer || DataStore.isStaff)
+    "
   >
     <div class="row col-12 items-center bg-grey-1">
       <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
@@ -134,27 +499,33 @@ onMounted(async () => {
         emit-value
         option-value="id"
         option-label="name"
+        @update:model-value="changround"
       />
-      <!-- @update:model-value="changround" -->
 
       <q-space />
-      <!-- สกจ. Freez ข้อมูล -->
+
+      <!-- อัพเดตข้อมูลคุณสมบัติ -->
       <q-btn
-        v-if="isOfficer && checkPermission($route)?.attrIsUpdate"
+        v-if="
+          DataStore.isStaff &&
+          DataStore.isLock !== true &&
+          checkPermission($route)?.attrIsUpdate
+        "
         dense
         unelevated
-        label="ล็อกข้อมูล"
+        label="อัพเดตข้อมูลคุณสมบัติ"
         color="public"
         class="q-px-md q-ml-md"
-        @click="onConfrimIsLockData"
+        @click="updateDataProperty"
       >
-        <q-tooltip>ล็อกข้อมูล</q-tooltip>
+        <q-tooltip>อัพเดตข้อมูลคุณสมบัติ</q-tooltip>
       </q-btn>
     </div>
     <div class="col-12"><q-separator /></div>
-    <div v-if="isOfficer" class="col-12 row bg-white">
+    <div v-if="DataStore.isOfficer" class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
         <div class="row col-12 q-col-gutter-sm fit">
+          <!-- stat -->
           <cardTop
             :amount="stat.orgAllCount"
             label="หน่วยงานทั้งหมด"
@@ -187,6 +558,222 @@ onMounted(async () => {
       </q-banner>
     </div>
   </q-card>
+
+  <q-card
+    flat
+    bordered
+    class="col-12 q-mt-sm"
+    v-if="
+      loadview &&
+      (DataStore.isDirector || DataStore.isOfficer || DataStore.isStaff)
+    "
+  >
+    <div
+      v-if="
+        (((DataStore.isOfficer && DataStore.optionsTypeOc.findIndex((v: OptionData) => v.id === DataStore.selectOrganization && v.isDeputy === true) > -1) || DataStore.isStaff) && requestStatus == 'st4') ||
+        (DataStore.isDirector && requestStatus == 'st5')
+      "
+      class="q-pa-md q-gutter-sm"
+    >
+      <q-banner
+        inline-actions
+        bordered
+        class="bg-orange-1 text-orange border-orange"
+      >
+        <q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ
+        {{ requestNote }}
+      </q-banner>
+    </div>
+
+    <q-tabs
+      v-model="tab"
+      dense
+      class="text-grey"
+      active-color="primary"
+      active-class="bg-teal-1"
+      indicator-color="primary"
+      align="left"
+    >
+      <q-tab name="pending" label="ผู้มีคุณสมบัติ" />
+      <q-tab name="delete" label="ผู้ขาดคุณสมบัติ" />
+      <q-tab name="reject" label="ผู้ไม่เสนอขอ" />
+      <q-tab
+        v-if="DataStore.isOfficer"
+        name="organization"
+        label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
+      />
+    </q-tabs>
+
+    <div class="col-12"><q-separator /></div>
+    <q-tab-panels v-model="tab" animated>
+      <!-- แทบคนที่ยื่นขอ -->
+      <q-tab-panel name="pending" class="q-pa-none">
+        <tab1
+          :tab="tab"
+          :round-id="round"
+          :round-name="roundName"
+          :fecth-insignia-by-oc="fecthInsigniaByOc"
+          :request-status="requestStatus"
+          :fecth-stat="fecthStat"
+        />
+      </q-tab-panel>
+
+      <!-- แทบคนที่ไม่ยื่นขอ -->
+      <q-tab-panel name="reject" class="q-pa-none">
+        <tab2
+          :tab="tab"
+          :round-id="round"
+          :fecth-insignia-by-oc="fecthInsigniaByOc"
+        />
+      </q-tab-panel>
+
+      <!-- แทบคนที่ถูกลบออก -->
+      <q-tab-panel name="delete" class="q-pa-none">
+        <tab3
+          :tab="tab"
+          :round-id="round"
+          :fecth-insignia-by-oc="fecthInsigniaByOc"
+        />
+      </q-tab-panel>
+
+      <!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
+      <q-tab-panel
+        v-if="DataStore.isOfficer"
+        name="organization"
+        class="q-pa-none"
+      >
+        <tab4 :tab="tab" :round-id="round" />
+      </q-tab-panel>
+    </q-tab-panels>
+
+    <q-toolbar class="q-py-md text-right">
+      <q-file
+        v-if="((DataStore.isOfficer && DataStore.optionsTypeOc.findIndex((v: OptionData) => v.id === DataStore.selectOrganization && v.isDeputy === true) > -1) || DataStore.isStaff) && checkPermission($route)?.attrIsUpdate"
+        bg-color="white"
+        clearable
+        outlined
+        dense
+        v-model="fileUpload"
+        accept=".pdf"
+        :style="fileUpload === null ? 'width: 250px' : 'width: auto'"
+        label="อัปโหลดไฟล์"
+      >
+        <template v-slot:prepend>
+          <q-icon color="light-blue" name="attach_file" />
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </template>
+      </q-file>
+
+      <q-btn
+        flat
+        round
+        color="light-blue"
+        icon="upload"
+        @click="uploadFile(fileUpload)"
+        v-if="fileUpload !== null"
+      />
+      <div v-if="document">
+        <q-btn
+          size="md"
+          icon="mdi-download"
+          flat
+          round
+          color="primary"
+          v-if="checkPermission($route)?.attrIsGet"
+          :href="document"
+          target="_blank"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-else-if="checkPermission($route)?.attrIsGet"
+          color="primary"
+          icon-right="mdi-download"
+          label="ดาวน์โหลดไฟล์"
+          outline
+          :href="document"
+          target="_blank"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+        >
+      </div>
+      <q-space />
+
+      <q-btn
+        v-if="
+        !DataStore.isLock &&
+          ((DataStore.isOfficer && DataStore.optionsTypeOc.findIndex(
+          (v: OptionData) => v.id === DataStore.selectOrganization && v.isDeputy === true) > -1) || DataStore.isStaff) &&
+          (requestStatus == 'st1' || requestStatus == 'st4') &&
+          checkPermission($route)?.attrIsUpdate
+        "
+        unelevated
+        label="บันทึกข้อมูล"
+        color="public"
+        class="q-px-md"
+        @click="sendToDirector"
+      />
+      <q-btn
+        v-if="
+          !DataStore.isLock &&
+          DataStore.isDirector &&
+          (requestStatus == 'st3' || requestStatus == 'st5') &&
+          checkPermission($route)?.attrIsUpdate
+        "
+        unelevated
+        label="ตีกลับ"
+        color="orange"
+        class="q-px-md"
+        @click="popupBackToEdit"
+      />
+      <q-btn
+        v-if="
+          !DataStore.isLock &&
+          DataStore.isDirector &&
+          requestStatus == 'st3' &&
+          checkPermission($route)?.attrIsUpdate
+        "
+        unelevated
+        label="อนุมัติ"
+        color="positive"
+        class="q-px-md q-ml-md"
+        @click="directorApproved"
+      />
+      <q-btn
+        v-if="
+          !DataStore.isLock &&
+          requestStatus == 'st6' &&
+          DataStore.isOfficer &&
+          !DataStore.isLock &&
+          checkPermission($route)?.attrIsUpdate
+        "
+        unelevated
+        label="ตีกลับ"
+        color="orange"
+        class="q-px-md"
+        @click="popupBackToInsignia2Role"
+      />
+    </q-toolbar>
+  </q-card>
+
+  <!-- popup หมายเหตุ -->
+  <DialogPopupReason
+    v-model:modal="modalPopupBackToEdit"
+    title="หมายเหตุการตีกลับ"
+    label="หมายเหตุ"
+    :savaForm="backToEdit"
+  />
+  <DialogPopupReason
+    v-model:modal="modalbackInsignia2Role"
+    title="หมายเหตุการตีกลับ"
+    label="หมายเหตุ"
+    :savaForm="backToEditinsignia2Role"
+  />
 </template>
 
-<style scoped></style>
+<style lang="scss" scope>
+.border-orange {
+  border: 1px solid #ffa800;
+  border-radius: 5px;
+}
+</style>