Merge branch 'develop' into devTee

src/api/12_evaluatePersonal/api.evaluate.ts

@@ -9,10 +9,10 @@ export default {
   evaluationMain: () => `${evaluation}`,
 
   evaluateGetDetail: (id: string) => `${evaluation}/admin/check-spec/${id}`,
-  evaluateGetReport: (id: string) => `${evaluation}/report/check-spec-report/${id}`,
+  evaluateGetReport: (id: string) =>
+    `${evaluation}/report/check-spec-report/${id}`,
   evaluateGetStep: (id: string) => `${evaluation}/check/admin/${id}`,
 
-  
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
   meetingFilebyId: (volume: string, id: string) =>
@@ -28,6 +28,9 @@ export default {
   evaluationNext5To6: (id: string) => `${evaluation}/announce/${id}`,
   evaluationNextFinish: (id: string) => `${evaluation}/wait-check-doc-v2/${id}`,
 
+  evaluationAnnounceTemplete: (type: string, id: string) =>
+    `${evaluation}/${type}-announce-template/${id}`,
+
   evaluationHistory: (id: string) => `${evaluation}/step-history/${id}`,
 
   evaluationDateAnnounce: (id: string) =>
@@ -47,7 +50,8 @@ export default {
     `${evaluation}/choose-meetings/${id}`,
 
   evaluationListData: (id: string) => `${evaluation}/director-meeting/${id}`,
-  evaluationReport:`${evaluation}/report`,
+  evaluationReport: `${evaluation}/report`,
 
-  updateEvaluationResult:(id:string) =>`${evaluation}/updateEvaluationResult/${id}`
+  updateEvaluationResult: (id: string) =>
+    `${evaluation}/updateEvaluationResult/${id}`,
 };

src/modules/02_organization/components/DialogFormAgency.vue

@@ -279,7 +279,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
           id: "MISSION",
         },
       ];
-
+      break;
     case "SECTION":
       orgLevelSubOptionMain.value = [
         { name: "ฝ่าย", id: "FACTION" },
@@ -328,7 +328,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
           id: "SECONDARYSCHOOL",
         },
       ];
-
+      break;
     default:
       break;
   }

src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue

@@ -240,20 +240,17 @@ async function uploadfile(subId: string) {
 
     //อัพโหลไฟล์
     await uploadFile(uploadUrl, fileUpload.value);
-    await updateIsUpload();
+    await updateIsUpload(subId);
   } catch (err) {
     messageError($q, err);
   }
 }
 
 /** ฟังก์ชันอัพเดทสถานะอัพโหลด*/
-async function updateIsUpload() {
+async function updateIsUpload(subId: string) {
   await http
     .patch(
-      config.API.profileNewCertificateByCertificateId(
+      config.API.profileNewCertificateByCertificateId(subId, empType.value),
-        editId.value,
-        empType.value
-      ),
       {
         isUpload: fileUpload.value ? true : false,
       }

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

@@ -400,21 +400,18 @@ async function uploadfile(id: string) {
 
     //อัพโหลไฟล์
     await uploadFile(uploadUrl, fileUpload.value);
-    await updateIsUpload();
+    await updateIsUpload(id);
   } catch (err) {
     messageError($q, err);
   }
 }
 
 /** ฟังก์ชันอัพเดทสถานะอัพโหลด*/
-async function updateIsUpload() {
+async function updateIsUpload(id: string) {
   await http
-    .patch(
+    .patch(config.API.profileNewDisciplineByDisciplineId(id, empType.value), {
-      config.API.profileNewDisciplineByDisciplineId(id.value, empType.value),
+      isUpload: fileUpload.value ? true : false,
-      {
+    })
-        isUpload: fileUpload.value ? true : false,
-      }
-    )
     .then(() => {
       fileUpload.value = null;
     });

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

@@ -618,7 +618,7 @@ onMounted(async () => {
                   <q-btn
                     v-if="scope.queuedFiles.length > 0"
                     icon="clear_all"
-                    @click="scope.removeQueuedFiles"
+                    @click="scope.removeQueuedFiles, (fileUpload = undefined)"
                     round
                     dense
                     flat
@@ -628,7 +628,7 @@ onMounted(async () => {
                   <q-btn
                     v-if="scope.uploadedFiles.length > 0"
                     icon="done_all"
-                    @click="scope.removeUploadedFiles"
+                    @click="scope.removeUploadedFiles, (fileUpload = undefined)"
                     round
                     dense
                     flat
@@ -663,7 +663,7 @@ onMounted(async () => {
                   <q-btn
                     v-if="scope.isUploading"
                     icon="clear"
-                    @click="scope.abort"
+                    @click="scope.abort, (fileUpload = undefined)"
                     round
                     dense
                     flat
@@ -672,6 +672,36 @@ onMounted(async () => {
                   </q-btn>
                 </div>
               </template>
+
+              <template v-slot:list="scope">
+                <q-list separator>
+                  <q-item v-for="file in scope.files" :key="file.__key">
+                    <q-item-section>
+                      <q-item-label class="full-width ellipsis">
+                        {{ file.name }}
+                      </q-item-label>
+
+                      <q-item-label caption>
+                        {{ file.__sizeLabel }} / {{ file.__progressLabel }}
+                      </q-item-label>
+                    </q-item-section>
+
+                    <q-item-section top side>
+                      <q-btn
+                        class="gt-xs"
+                        size="12px"
+                        flat
+                        dense
+                        round
+                        icon="delete"
+                        @click="
+                          scope.removeFile(file), (fileUpload = undefined)
+                        "
+                      />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </template>
             </q-uploader>
             <div
               v-if="alertUpload && dialogStatus === 'create'"

src/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue

@@ -307,7 +307,7 @@ watch(modal, async () => {
               <q-tr :props="props">
                 <q-td>
                   <q-checkbox
-                    :disable="props.rowIndex === 0"
+                    :disable="props.rowIndex === 0 && rows.length > 1"
                     keep-color
                     color="primary"
                     dense

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

@@ -679,6 +679,7 @@ function onSubmit() {
         ...formData,
         commandDateAffect: convertDateToAPI(formData.commandDateAffect),
         commandDateSign: convertDateToAPI(formData.commandDateSign),
+        commandName: store.convertCommandCodeName(formData.commandCode),
         amount: Number(String(formData.amount)?.replace(/,/g, "")),
         amountSpecial: Number(
           String(formData.amountSpecial)?.replace(/,/g, "")
@@ -690,6 +691,7 @@ function onSubmit() {
           String(formData.mouthSalaryAmount)?.replace(/,/g, "")
         ),
       });
+
       await fetchListSalary();
       onClickCloseDialog();
       success($q, "บันทึกข้อมูลสำเร็จ");

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

@@ -233,16 +233,16 @@ async function uploadfile(id: string) {
 
     //อัพโหลไฟล์
     await uploadFile(uploadUrl, fileUpload.value);
-    await updateIsUpload();
+    await updateIsUpload(id);
   } catch (err) {
     messageError($q, err);
   }
 }
 
 /** ฟังก์ชันอัพเดทสถานะอัพโหลด*/
-async function updateIsUpload() {
+async function updateIsUpload(id: string) {
   await http
-    .patch(config.API.profileNewNoPaidById(id.value, empType.value), {
+    .patch(config.API.profileNewNoPaidById(id, empType.value), {
       isUpload: fileUpload.value ? true : false,
     })
     .then(() => {

src/modules/04_registryPerson/stores/RequestEdit.ts

@@ -3,16 +3,20 @@ import { ref } from "vue";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
 export const useRequestEditStore = defineStore("requestEditStore", () => {
-  const profileId = ref<string>('')
+  const profileId = ref<string>("");
   const optionTopic = ref<string[]>([
-    "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+    "ขอปรับปรุงข้อมูลจากกรมการปกครอง",
     "ขอแก้ไขรูปภาพประจำตัว",
-    "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+    "ขอแก้ไขข้อมูล คู่สมรส",
-    "ขอแก้ไขชื่อ - นามสกุล บิดา",
+    "ขอแก้ไขข้อมูล บิดา",
-    "ขอแก้ไขชื่อ - นามสกุล มารดา",
+    "ขอแก้ไขข้อมูล มารดา",
-    "ขอแก้ไขข้อมูลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/เหรียญจักรพรรดิมาลา",
+    "ขอแก้ไขข้อมูลบุตร",
-    "ขอแก้ไขประกาศเกียรติคุณ",
+    "ขอแก้ไขข้อมูลเครื่องราชฯ เหรียญจักรพรรดิมาลา",
     "ขอแก้ไขข้อมูลประวัติการศึกษา",
+    "ขอแก้ไขข้อมูลประวัติการฝึกอบรม",
+    "ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
+    "ขอแก้ไขที่อยู่ปัจจุบัน",
+    "ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
   ]);
   const optionStatus = ref<DataOption[]>([
     { id: "", name: "ทั้งหมด" },
@@ -59,6 +63,6 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
     optionStatus,
     optionStatusIDP,
     convertStatusIDP,
-    profileId
+    profileId,
   };
 });

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

@@ -362,7 +362,9 @@ onMounted(async () => {
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">{{ organization }}</div>
+            <div class="col-12 text-detail text-html">
+              {{ organization.replace("\\n", "\n") }}
+            </div>
           </div>
         </div>
 

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

@@ -715,13 +715,15 @@ async function fecthInsignia() {
 }
 
 const personId = ref<string>("");
+const profileType = ref<string>("");
 /**
  *  function redirect to ทะเบียนประวัติ
  * @param id profileId
  */
-function nextPage(id: string) {
+function nextPage(id: string, type: string) {
   modalPersonal.value = true;
   personId.value = id;
+  profileType.value = type;
 }
 
 function updatemodalPersonal(modal: boolean) {
@@ -1148,7 +1150,9 @@ onMounted(async () => {
                       <q-item
                         v-if="checkPermission($route)?.attrIsGet"
                         clickable
-                        @click.stop="nextPage(props.row.profileId)"
+                        @click.stop="
+                          nextPage(props.row.profileId, props.row.employeeClass)
+                        "
                         v-close-popup
                       >
                         <q-item-section style="min-width: 0px" avatar>
@@ -1217,7 +1221,9 @@ onMounted(async () => {
                   flat
                   round
                   dense
-                  @click.stop="nextPage(props.row.profileId)"
+                  @click.stop="
+                    nextPage(props.row.profileId, props.row.employeeClass)
+                  "
                 >
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn>
@@ -1698,6 +1704,7 @@ onMounted(async () => {
   <PopupPersonal
     :modal="modalPersonal"
     :id="personId"
+    :type="profileType"
     @update:modal="updatemodalPersonal"
   />
 

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

@@ -170,14 +170,15 @@ function changtypeOc() {
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
-
+const profileType = ref<string>("");
 /**
  *  function redirect ทะเบียนประวัติิ
  * @param id profileId
  */
-function nextPage(id: string) {
+function nextPage(id: string, type: string) {
   modalPersonal.value = true;
   personId.value = id;
+  profileType.value = type;
 }
 
 function updatemodalPersonal(modal: boolean) {
@@ -474,7 +475,9 @@ watch(
                   flat
                   round
                   color="info"
-                  @click="nextPage(props.row.profileId)"
+                  @click="
+                    nextPage(props.row.profileId, props.row.employeeClass)
+                  "
                   icon="mdi-eye"
                 >
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
@@ -545,6 +548,7 @@ watch(
   <PopupPersonal
     :modal="modalPersonal"
     :id="personId"
+    :type="profileType"
     @update:modal="updatemodalPersonal"
   />
 </template>

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

@@ -170,14 +170,15 @@ async function changtypeOc() {
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
-
+const profileType = ref<string>("");
 /**
  *  function redirect ทะเบียนประวัติิ
  * @param id profileId
  */
-function nextPage(id: string) {
+function nextPage(id: string, type: string) {
   modalPersonal.value = true;
   personId.value = id;
+  profileType.value = type;
 }
 
 function updatemodalPersonal(modal: boolean) {
@@ -472,7 +473,9 @@ onMounted(async () => {
                   flat
                   round
                   color="info"
-                  @click="nextPage(props.row.profileId)"
+                  @click="
+                    nextPage(props.row.profileId, props.row.employeeClass)
+                  "
                   icon="mdi-eye"
                 >
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
@@ -542,6 +545,7 @@ onMounted(async () => {
   <PopupPersonal
     :modal="modalPersonal"
     :id="personId"
+    :type="profileType"
     @update:modal="updatemodalPersonal"
   />
 </template>

src/modules/12_evaluatePersonal/components/Detail/step/step2.vue

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
@@ -16,13 +17,19 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const id = ref<string>(route.params.id as string); //id ประเมิน
 /** ฟรอมจัดเตรียมเอกสารเล่ม 1*/
-const subject = ref<string>(""); //ชื่อผลงาน
+const subject = ref<string[]>([""]); //ชื่อผลงาน
 const author = ref<string>(""); //เจ้าของผลงาน
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
   elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
+  elementaryPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาชั้นต้น
+  elementaryOrg: "", //สังกัดผู้บังคับบัญชาชั้นต้น
+  elementaryOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาชั้นต้น
   abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
   abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrg: "", //สังกัดผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 
 /**
@@ -35,26 +42,25 @@ async function fetchSigner() {
     .then((res) => {
       const data = res.data.result;
       if (data) {
-        formCommand.elementaryFullName =
+        formCommand.elementaryFullName = data.commanderFullname;
-          data == null ? "" : data.commanderFullname;
+        formCommand.elementaryPosition = data.commanderPosition;
-        formCommand.elementaryPosition =
+        formCommand.elementaryPositionOld = data.commanderPositionOld;
-          data == null ? "" : data.commanderPosition;
+        formCommand.elementaryOrg = data.commanderOrg;
-        formCommand.abovelevelFullname =
+        formCommand.elementaryOrgOld = data.commanderOrgOld;
-          data == null ? "" : data.commanderAboveFullname;
+        formCommand.abovelevelFullname = data.commanderAboveFullname;
-        formCommand.abovelevelPosition =
+        formCommand.abovelevelPosition = data.commanderAbovePosition;
-          data == null ? "" : data.commanderAbovePosition;
+        formCommand.abovelevelPositionOld = data.commanderAbovePositionOld;
+        formCommand.abovelevelOrg = data.commanderAboveOrg;
+        formCommand.abovelevelOrgOld = data.commanderAboveOrgOld;
         author.value = data.author;
         subject.value = data.subject;
       }
     })
     .catch((e) => {
-      // messageError($q, e);
       console.log(e);
     })
     .finally(() => {
-      setTimeout(() => {
+      hideLoader();
-        hideLoader();
-      }, 1000);
     });
 }
 
@@ -74,34 +80,32 @@ onMounted(async () => {
         <q-card bordered style="border: 1px solid #d6dee1">
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
-          <div class="row">
+
-            <div class="col-12 q-pa-sm">
+          <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-sm col-12">
+            <div class="row q-col-gutter-sm">
-                <div class="col-xs-12 col-sm-12 row">
+              <div class="col-12">
-                  <div class="row col-12 q-col-gutter-sm">
+                <q-input
-                    <q-input
+                  readonly
-                      readonly
+                  dense
-                      dense
+                  outlined
-                      class="col-xs-12 col-sm-6"
+                  v-model="author"
-                      outlined
+                  label="เจ้าของผลงาน"
-                      label="ชื่อผลงาน"
+                  lazy-rules
-                      v-model="subject"
+                  hide-bottom-space
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                />
-                      lazy-rules
+              </div>
-                      hide-bottom-space
+              <div class="col-12" v-for="(item, index) in subject" :key="index">
-                    />
+                <div class="row col-12 q-col-gutter-sm">
-                    <q-input
+                  <q-input
-                      readonly
+                    readonly
-                      class="col-xs-12 col-sm-6"
+                    dense
-                      dense
+                    class="col-xs-12 col-sm-12"
-                      outlined
+                    outlined
-                      v-model="author"
+                    label="ชื่อผลงาน"
-                      label="เจ้าของผลงาน"
+                    v-model="subject[index]"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                    lazy-rules
-                      lazy-rules
+                    hide-bottom-space
-                      hide-bottom-space
+                  />
-                    />
-                  </div>
                 </div>
               </div>
             </div>
@@ -123,31 +127,63 @@ onMounted(async () => {
                   <div class="text-weight-medium q-py-xs q-pl-sm">
                     ผู้บังคับบัญชาชั้นต้น
                   </div>
+
                   <div class="row col-12 q-col-gutter-sm">
                     <q-input
                       readonly
-                      ref="elementaryFullNameRef"
                       dense
                       class="col-xs-12 col-sm-6"
                       outlined
-                      label="ชื่อ-นามสกุล"
                       v-model="formCommand.elementaryFullName"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                      label="ชื่อ-นามสกุล"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                    <q-input
-                      readonly
-                      ref="elementaryPositonRef"
-                      class="col-xs-12 col-sm-6"
-                      dense
-                      outlined
-                      v-model="formCommand.elementaryPosition"
-                      label="ตำแหน่ง"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                       lazy-rules
                       hide-bottom-space
                     />
+
+                    <div class="col-12">
+                      <div class="row col-12 q-col-gutter-sm">
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryPosition"
+                          label="ตำแหน่ง"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryPositionOld"
+                          label="ตำแหน่งเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryOrg"
+                          label="สังกัด"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryOrgOld"
+                          label="สังกัดเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -170,18 +206,50 @@ onMounted(async () => {
                       lazy-rules
                       hide-bottom-space
                     />
-                    <q-input
+                    <div class="col-12">
-                      ref="abovelevelPositionRef"
+                      <div class="row col-12 q-col-gutter-sm">
-                      class="col-xs-12 col-sm-6"
+                        <q-input
-                      dense
+                          readonly
-                      readonly
+                          class="col-xs-6 col-sm-3"
-                      outlined
+                          dense
-                      v-model="formCommand.abovelevelPosition"
+                          outlined
-                      label="ตำแหน่ง"
+                          v-model="formCommand.abovelevelPosition"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          label="ตำแหน่ง"
-                      lazy-rules
+                          lazy-rules
-                      hide-bottom-space
+                          hide-bottom-space
-                    />
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelPositionOld"
+                          label="ตำแหน่งเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelOrg"
+                          label="สังกัด"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelOrgOld"
+                          label="สังกัดเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>

src/modules/12_evaluatePersonal/components/Detail/step/step3.vue

@@ -22,6 +22,25 @@ const { showLoader, hideLoader, messageError } = mixin;
 const id = ref<string>(route.params.id as string); //id ประเมิน
 const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
 
+const formTemplates = ref([
+  {
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
+]);
+
 /**
  * funtion เลือกไฟล์
  * @param itemNumber indexItems
@@ -29,29 +48,30 @@ const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-  getFile(itemNumber);
+  store.pdfSrcStore = undefined;
+  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
 }
 
 /**
- * function เรียกไฟล์
+ * function เรีกยเอกสาร
- * @param volume index item
+ * @param fileName ชื่อเอกสาร
  */
-async function getFile(volume: number) {
+async function fetchDocument(fileName: string) {
   showLoader();
-  const fileText = numToThai(volume);
+  id.value &&
-  await http
+    (await http
-    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
+      .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileName))
-    .then(async (res) => {
+      .then(async (res) => {
-      const link = res.data.downloadUrl;
+        const link = res.data.downloadUrl;
-      const type = res.data.fileType;
+        const type = res.data.fileType;
-      await getPDF(link, type);
+        await getPDF(link, type);
-    })
+      })
-    .catch((e) => {
+      .catch((err) => {
-      messageError($q, e);
+        messageError($q, err);
-      hideLoader();
+      })
-
+      .finally(() => {
-      store.pdfSrcStore = undefined;
+        hideLoader();
-    });
+      }));
 }
 
 /**
@@ -80,111 +100,33 @@ async function getPDF(url: string, type: string) {
         store.log = 1;
         store.pdfSrcStore = pdfData.pdf.value;
         store.numOfPagesStore = pdfData.pages.value;
-        hideLoader();
       }, 1500);
     })
-    .catch(() => {
-      hideLoader();
-    })
     .finally(() => {
+      hideLoader();
       store.log = 0;
     });
 }
 
-/**
+/** HooK lifecycle*/
- * function Convert ชื่อไฟล์
- * @param val indexItems
- */
-function numToThai(val: number) {
-  switch (val) {
-    case 1:
-      return "1-แบบพิจารณาคุณสมบัติบุคคล";
-    case 2:
-      return "2-แบบแสดงรายละเอียดการเสนอผลงาน";
-    case 3:
-      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)";
-    case 4:
-      return "4-แบบประเมินคุณลักษณะบุคคล";
-    case 5:
-      return "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)";
-    case 6:
-      return "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)";
-    default:
-      return "1-แบบพิจารณาคุณสมบัติบุคคล";
-  }
-}
-
 onMounted(async () => {
-  await getFile(selectedItem.value);
+  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
 });
 </script>
 
 <template>
-  <q-list separator dense>
+  <q-list separator>
     <q-item
+      v-for="(item, index) in formTemplates"
+      :key="index"
       clickable
       v-ripple
-      :active="selectedItem === 1 ? true : false"
+      :active="selectedItem === index + 1 ? true : false"
       active-class="text-primary"
-      @click="handleItemClick(1)"
+      @click="handleItemClick(index + 1)"
+      class="cursor-pointer"
     >
-      <q-item-section class="q-py-sm">แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
+      <q-item-section>{{ item.title }}</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 2 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(2)"
-    >
-      <q-item-section class="q-py-sm"
-        >แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 3 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(3)"
-    >
-      <q-item-section class="q-py-sm"
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        (เอกสารแบบ ก)</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 4 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(4)"
-    >
-      <q-item-section class="q-py-sm">
-        แบบประเมินคุณลักษณะบุคคล
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 5 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(5)"
-    >
-      <q-item-section class="q-py-sm">
-        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 6 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(6)"
-    >
-      <q-item-section class="q-py-sm">
-        ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)
-      </q-item-section>
     </q-item>
   </q-list>
 </template>

src/modules/12_evaluatePersonal/components/Detail/step/step4.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -11,6 +11,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 /** use*/
 const route = useRoute();
 const $q = useQuasar();
@@ -40,23 +42,23 @@ const files = [
     fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
     pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
   },
-  {
+  // {
-    id: "file3",
+  //   id: "file3",
-    fileName:
+  //   fileName:
-      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+  //     "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-    pathName:
+  //   pathName:
-      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+  //     "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-  },
+  // },
   {
     id: "file4",
     fileName: "แบบประเมินคุณลักษณะบุคคล",
     pathName: "4-แบบประเมินคุณลักษณะบุคคล",
   },
-  {
+  // {
-    id: "file5",
+  //   id: "file5",
-    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  //   fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  //   pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-  },
+  // },
   {
     id: "file6",
     fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
@@ -64,6 +66,72 @@ const files = [
   },
 ];
 
+const download10Url = ref<string>("");
+
+const modalTemplates = ref<boolean>(false);
+const formBodyTemplates = reactive({
+  detailFooter: "",
+  detailBody: "",
+});
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+]);
+
+const fileEvaluatioRef = ref<any>();
+const formEvaluation = ref<any[]>([
+  {
+    code: "EV1_007",
+    templateName: "template-3",
+    title:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล(เอกสารแบบ ก)",
+    fileName:
+      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    downloadFile: "",
+    fileType: "",
+    file: null,
+  },
+  {
+    code: "EV1_009",
+    templateName: "template-5",
+    title: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก(เอกสารหมายเลข 9)",
+    fileName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    downloadFile: "",
+    fileType: "",
+    file: null,
+  },
+]);
+
 /**
  * function ดาวน์โหลดไฟล์ต้นแบบ
  */
@@ -83,12 +151,13 @@ async function onClickDowloadFile(
         data: data,
       };
       await genReport(body, fileName);
-      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -106,13 +175,15 @@ async function downloadFile(name: string) {
   showLoader();
   await http
     .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
-    .then((res) => {
+    .then(async (res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
       const fileName = res.data.fileName;
-      getPDF(link, type, fileName);
+      await getPDF(link, type, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -148,14 +219,26 @@ async function getPDF(url: string, type: string, fileName: string) {
 
 /** function ส่งไปประกาศบนเว็บไซต์ */
 function onWebSite() {
-  download10Url.value === ""
+  const downloadArray = [
-    ? (fileEvaluationUpload.value = "")
+    download10Url.value,
-    : fileEvaluationUpload.value;
+    formEvaluation.value[0].downloadFile,
-  fileEvaluationUploadRef.value.validate();
+    formEvaluation.value[1].downloadFile,
-  if (
+  ];
-    fileEvaluationUploadRef.value.hasError === false &&
+
-    download10Url.value !== ""
+  if (downloadArray.some((e: any) => e === "")) {
-  ) {
+    for (let i = 0; i < downloadArray.length; i++) {
+      if (downloadArray[i] === "") {
+        if (i == 0) {
+          fileEvaluationUploadRef.value.validate();
+          fileEvaluationUpload.value = null;
+        } else {
+          fileEvaluatioRef.value[0].validate();
+          fileEvaluatioRef.value[1].validate();
+          formEvaluation.value[i - 1].file = null;
+        }
+      }
+    }
+  } else {
     dialogConfirm(
       $q,
       () => {
@@ -164,16 +247,48 @@ function onWebSite() {
           .put(config.API.evaluationApproveDoc1(id.value))
           .then(() => {
             success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
-          })
-          .catch(() => {})
-          .finally(() => {
             getStep();
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
           });
       },
       "ยืนยันการส่งไปประกาศบนเว็บไซต์",
       "ยืนยันการส่งไปประกาศบนเว็บไซต์ใช่หรือไม่?"
     );
   }
+
+  // download10Url.value === ""
+  //   ? (fileEvaluationUpload.value = "")
+  //   : fileEvaluationUpload.value;
+
+  // fileEvaluatioRef.value[0].validate();
+  // fileEvaluatioRef.value[1].validate();
+  // if (
+  //   fileEvaluationUploadRef.value.hasError === false &&
+  //   download10Url.value !== ""
+  // ) {
+  //   dialogConfirm(
+  //     $q,
+  //     () => {
+  //       showLoader();
+  //       http
+  //         .put(config.API.evaluationApproveDoc1(id.value))
+  //         .then(() => {
+  //           success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
+  //         })
+  //         .catch(() => {})
+  //         .finally(() => {
+  //           getStep();
+  //         });
+  //     },
+  //     "ยืนยันการส่งไปประกาศบนเว็บไซต์",
+  //     "ยืนยันการส่งไปประกาศบนเว็บไซต์ใช่หรือไม่?"
+  //   );
+  // }
 }
 
 /** function เช็คขั้นตอน*/
@@ -220,13 +335,13 @@ async function getStep() {
  * function เรียก link อัปโหลด
  * @param file ไฟล์
  */
-async function upLoadFile(file: any) {
+async function upLoadFile(file: any, fileName: string) {
   if (file) {
     showLoader();
     await http
       .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
         fileList: {
-          fileName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
+          fileName: fileName,
           metadata: {
             tag: "value",
             subject: subject.value,
@@ -241,7 +356,8 @@ async function upLoadFile(file: any) {
             res.data[key]?.fileName !== ""
         );
         const link = res.data[foundKey]?.uploadUrl;
-        await fileUpLoad(link);
+        await uploadfile(link, file);
+        await fetchCheckFile(fileName);
       })
       .catch((e) => {
         messageError($q, e);
@@ -253,31 +369,26 @@ async function upLoadFile(file: any) {
 }
 
 /**
- * function อัปโหลดไฟล์
+ *  functoin อัปโหลดไฟล์
- * @param url link อัปโหลด
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
  */
-async function fileUpLoad(url: string) {
+async function uploadfile(uploadUrl: string, file: any) {
-  showLoader();
+  await axios
-  axios
+    .put(uploadUrl, file, {
-    .put(url, fileEvaluationUpload.value, {
+      headers: {
-      headers: { "Content-Type": fileEvaluationUpload.value?.type },
+        "Content-Type": file.type,
-      onUploadProgress: (e) => console.log(e),
+      },
     })
-    .then(async () => {
+    .then(() => {
-      await checkDoc10();
+      success($q, "อัปโหลไฟล์สำเร็จ");
-      success($q, "อัปโหลดไฟล์สำเร็จ");
     })
-    .catch((e) => {
+    .catch((err) => {
-      messageError($q, e);
+      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-/**
+/**  fiunction ส่งข้อความ*/
- *  fiunction ส่งข้อความ
- */
 async function sentMessenger() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -303,33 +414,8 @@ async function sentMessenger() {
   });
 }
 
-const download10Url = ref<string>("");
+/** function เรียกข้อมูลผลงาน*/
-/**
- *  function เช็คไฟล์อัปโหลด
- */
-async function checkDoc10() {
-  showLoader();
-  await http
-    .get(
-      config.API.evaluationPatchData(
-        "เล่ม 1",
-        id.value,
-        "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
-      )
-    )
-    .then(async (res) => {
-      download10Url.value = await res.data.downloadUrl;
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function เรียกข้อมูลผลงาน
- */
 async function fetchDataSigner() {
-  showLoader();
   await http
     .get(config.API.evaluationSigner(id.value, 1))
     .then((res) => {
@@ -339,16 +425,100 @@ async function fetchDataSigner() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+async function fetchCheckFile(fileName: string) {
+  await http
+    .get(config.API.evaluationPatchData("เล่ม 1", id.value, fileName))
+    .then((res) => {
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
+        formTemplates.value[index].fileType = res.data.fileType;
+      }
+
+      const index2 = formEvaluation.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index2 !== -1) {
+        formEvaluation.value[index2].downloadFile = res.data.downloadUrl;
+      }
+
+      if (fileName === "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)") {
+        download10Url.value = res.data.downloadUrl;
+      }
+    });
+}
+
+function onOpenDialogTemplates() {
+  modalTemplates.value = true;
+  fetchDataAnnounceTemplete();
+}
+
+async function fetchDataAnnounceTemplete() {
+  showLoader();
+  await http
+    .get(config.API.evaluationAnnounceTemplete("get", id.value))
+    .then((res) => {
+      const data = res.data.result;
+      formBodyTemplates.detailBody = data.detailAnnounceStep5Body;
+      formBodyTemplates.detailFooter = data.detailAnnounceStep5Footer;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmitBodyTemplates() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(
+        config.API.evaluationAnnounceTemplete("edit", id.value),
+        formBodyTemplates
+      )
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modalTemplates.value = false;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
 onMounted(async () => {
-  await Promise.all([checkDoc10(), fetchDataSigner()]);
+  try {
+    showLoader();
+    await Promise.all([
+      fetchDataSigner(),
+      formTemplates.value.forEach((e) => {
+        fetchCheckFile(e.fileName);
+      }),
+      formEvaluation.value.forEach((e) => {
+        fetchCheckFile(e.fileName);
+      }),
+
+      fetchCheckFile("10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -394,6 +564,124 @@ onMounted(async () => {
       </q-card>
     </div>
 
+    <!-- เอกสารเล่มที่ 1 (ฉบับแก้ไข)-->
+    <div
+      class="col-12"
+      v-if="formTemplates.some((e:any) => e.downloadFile !== '')"
+    >
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เอกสารเล่มที่ 1 (ฉบับแก้ไข)
+        </div>
+        <div class="col-12"><q-separator /></div>
+
+        <q-list v-for="file in formTemplates" :key="file.id" class="full-width">
+          <q-item clickable v-ripple v-if="file.downloadFile !== ''">
+            <q-item-section class="text-grey-9">
+              {{ file.title }}
+            </q-item-section>
+            <q-item-section avatar>
+              <div class="row">
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="blue"
+                    icon="mdi-download"
+                    @click="getPDF(file.downloadFile, file.type, file.fileName)"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <div
+      class="col-6"
+      v-if="store.currentStep === 4"
+      v-for="(item, index) in formEvaluation"
+      :key="index"
+    >
+      <q-card bordered class="cardSp1">
+        <div
+          class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+        >
+          <div>{{ item.title }}</div>
+          <q-space />
+          <div>
+            <q-btn
+              flat
+              dense
+              icon="download"
+              color="indigo"
+              @click="
+                onClickDowloadFile(item.code, item.templateName, item.title)
+              "
+            >
+              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+            >
+          </div>
+          <div>
+            <q-btn
+              v-if="item.downloadFile != ''"
+              :href="item.downloadFile"
+              target="_blank"
+              class="q-ml-sm"
+              color="blue"
+              flat
+              dense
+              icon="visibility"
+            >
+              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+            >
+          </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <q-file
+                ref="fileEvaluatioRef"
+                v-model="item.file"
+                class="col-xs-12 col-sm-12"
+                label="อัปโหลดไฟล์"
+                outlined
+                dense
+                lazy-rules
+                hide-bottom-space
+                accept=".pdf"
+                :rules="
+                item.downloadFile === '' ? [(val:string) => !!val || 'กรุณาเลือกไฟล์'] : []
+              "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    flat
+                    round
+                    dense
+                    color="primary"
+                    icon="mdi-upload"
+                    @click="upLoadFile(item.file, item.fileName)"
+                  >
+                    <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+                  </q-btn>
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
     <!-- ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10) -->
     <div class="col-12" v-if="store.currentStep == 4">
       <q-card bordered style="border: 1px solid #d6dee1">
@@ -401,6 +689,17 @@ onMounted(async () => {
           class="text-weight-medium row col-12 bg-grey-1 q-py-sm q-px-md items-center"
         >
           <div>ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)</div>
+
+          <q-btn
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onOpenDialogTemplates"
+          >
+            <q-tooltip>แก้ไขประกาศ</q-tooltip>
+          </q-btn>
           <q-space />
           <div>
             <q-btn
@@ -468,7 +767,12 @@ onMounted(async () => {
                   dense
                   color="primary"
                   icon="mdi-upload "
-                  @click="upLoadFile(fileEvaluationUpload)"
+                  @click="
+                    upLoadFile(
+                      fileEvaluationUpload,
+                      '10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)'
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </template>
@@ -498,22 +802,15 @@ onMounted(async () => {
   <!--  popup ติดต่อผู้ขอประเมิน -->
   <q-dialog v-model="modalEvaluation" persistent>
     <q-card style="min-width: 60vw">
-      <q-toolbar>
+      <q-form ref="myForm">
-        <q-toolbar-title class="text-subtitle2 text-bold">
+        <DialogHeader
-          ติดต่อผู้ขอประเมิน
+          tittle="ติดต่อผู้ขอประเมิน"
-        </q-toolbar-title>
+          :close="
-        <q-btn
+            () => ((modalEvaluation = false), (title = ''), (messenger = ''))
-          icon="close"
+          "
-          unelevated
-          round
-          dense
-          @click="modalEvaluation = false"
-          style="color: #ff8080; background-color: #ffdede"
         />
-      </q-toolbar>
+        <q-separator />
-      <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
-      <q-card-section class="q-pa-md bg-grey-1">
-        <q-form ref="myForm">
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <q-input
@@ -537,21 +834,69 @@ onMounted(async () => {
               />
             </div>
           </div>
-        </q-form>
+        </q-card-section>
-      </q-card-section>
+        <q-separator />
-      <q-separator />
 
-      <div class="row justify-end q-px-md q-py-sm items-center">
+        <div class="row justify-end q-px-md q-py-sm items-center">
-        <q-btn
+          <q-btn
-          dense
+            dense
-          color="public"
+            color="public"
-          id="onSubmit"
+            id="onSubmit"
-          class="q-px-md q-py-xs"
+            class="q-px-md q-py-xs"
-          label="ส่งข้อความ"
+            label="ส่งข้อความ"
-          @click="sentMessenger"
+            @click="sentMessenger"
-        >
+          >
-        </q-btn>
+          </q-btn>
-      </div>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!--  popup แก้ไขประกาศ -->
+  <q-dialog v-model="modalTemplates" persistent>
+    <q-card style="min-width: 60vw">
+      <q-form
+        greedy
+        @submit.prevent
+        @validation-success="onSubmitBodyTemplates"
+      >
+        <DialogHeader
+          tittle="แก้ไขประกาศ"
+          :close="() => (modalTemplates = false)"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="formBodyTemplates.detailBody"
+                label="เนื้อหาประกาศผลการคัดเลือกบุคคลส่วนที่ 1"
+                type="textarea"
+                outlined
+                dense
+                bg-color="white"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formBodyTemplates.detailFooter"
+                label="เนื้อหาประกาศผลการคัดเลือกบุคคลส่วนที่ 2"
+                type="textarea"
+                outlined
+                dense
+                bg-color="white"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn type="submit" color="public" label="บันทึก">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/12_evaluatePersonal/components/Detail/step/step6.vue

@@ -21,19 +21,22 @@ const id = ref<string>(route.params.id as string); //id ประเมิน
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
   elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
+  elementaryPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาชั้นต้น
+  elementaryOrg: "", //สังกัดผู้บังคับบัญชาชั้นต้น
+  elementaryOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาชั้นต้น
   abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
   abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrg: "", //สังกัดผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 const author = ref<string>(""); //เจ้าของผลงาน
-const subject = ref<string>(""); //ชื่อผลงาน
+const subject = ref<string[]>([""]); //ชื่อผลงาน
 const assignedPosition = ref<string>(""); //ตำแหน่งที่ได้รับ
 const dateEndPrepareDoc2 = ref<string | null>(); //วันสุดท้ายของการส่งผลงาน
 
-/**
+/** function เรียกข้อมูลวันที่ประกาศ*/
- * function เรียกข้อมูลวันที่ประกาศ
- */
 async function getDate() {
-  showLoader();
   await http
     .get(config.API.evaluationDateAnnounce(id.value))
     .then((res) => {
@@ -44,11 +47,6 @@ async function getDate() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
@@ -56,7 +54,6 @@ async function getDate() {
  * function เรียกข้อมูลผลงาน
  */
 async function getSigner() {
-  showLoader();
   await http
     .get(config.API.evaluationSigner(id.value, 2))
     .then((res) => {
@@ -64,8 +61,14 @@ async function getSigner() {
       if (data) {
         formCommand.elementaryFullName = data.commanderFullnameDoc2;
         formCommand.elementaryPosition = data.commanderPositionDoc2;
+        formCommand.elementaryPositionOld = data.commanderPositionOldDoc2;
+        formCommand.elementaryOrg = data.commanderOrgDoc2;
+        formCommand.elementaryOrgOld = data.commanderOrgOldDoc2;
         formCommand.abovelevelFullname = data.commanderAboveFullnameDoc2;
         formCommand.abovelevelPosition = data.commanderAbovePositionDoc2;
+        formCommand.abovelevelPositionOld = data.commanderAbovePositionOldDoc2;
+        formCommand.abovelevelOrg = data.commanderAboveOrgDoc2;
+        formCommand.abovelevelOrgOld = data.commanderAboveOrgOldDoc2;
         author.value = data.authorDoc2;
         subject.value = data.subjectDoc2;
         assignedPosition.value = data.assignedPosition;
@@ -73,16 +76,18 @@ async function getSigner() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
 onMounted(async () => {
-  await Promise.all([getSigner(), getDate()]);
+  try {
+    showLoader();
+    await Promise.all([getSigner(), getDate()]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -104,47 +109,47 @@ onMounted(async () => {
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
         <div class="col-12"><q-separator /></div>
-        <div class="row">
+
-          <div class="col-12 q-pa-sm">
+        <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-sm col-12">
+          <div class="row q-col-gutter-sm">
-              <div class="col-xs-12 col-sm-12 row">
+            <div class="col-12 row q-col-gutter-sm">
-                <div class="row col-12 q-col-gutter-sm">
+              <q-input
-                  <q-input
+                readonly
-                    readonly
+                class="col-xs-12 col-sm-6"
-                    dense
+                dense
-                    class="col-xs-12 col-sm-6"
+                outlined
-                    outlined
+                v-model="author"
-                    label="ชื่อผลงาน"
+                label="เจ้าของผลงาน"
-                    v-model="subject"
+                lazy-rules
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                hide-bottom-space
-                    lazy-rules
+              />
-                    hide-bottom-space
+              <q-input
-                  />
+                readonly
-                  <q-input
+                class="col-xs-12 col-sm-6"
-                    readonly
+                dense
-                    class="col-xs-12 col-sm-6"
+                outlined
-                    dense
+                v-model="assignedPosition"
-                    outlined
+                label="ตำแหน่งที่ได้รับ"
-                    v-model="author"
+                lazy-rules
-                    label="เจ้าของผลงาน"
+                hide-bottom-space
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+              />
-                    lazy-rules
+            </div>
-                    hide-bottom-space
+
-                  />
+            <div
-                  <q-input
+              class="row col-12 q-col-gutter-sm"
-                    readonly
+              v-for="(item, index) in subject"
-                    class="col-xs-12 col-sm-6"
+              :key="index"
-                    dense
+            >
-                    outlined
+              <div class="col-12">
-                    v-model="assignedPosition"
+                <q-input
-                    label="ตำแหน่งที่ได้รับ"
+                  readonly
-                    :rules="[
+                  dense
-                      (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
+                  outlined
-                    ]"
+                  label="ชื่อผลงาน"
-                    lazy-rules
+                  v-model="subject[index]"
-                    hide-bottom-space
+                  hide-bottom-space
-                  />
+                  lazy-rules
-                </div>
+                />
               </div>
             </div>
           </div>
@@ -159,48 +164,81 @@ onMounted(async () => {
           เลือกผู้เซ็นเอกสาร
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="row">
+        <div class="col-12 q-pa-sm">
-          <div class="col-12 q-pa-sm">
+          <div class="row q-col-gutter-sm">
-            <div class="row q-col-gutter-sm col-12">
+            <div class="col-xs-12 col-sm-12 row">
               <div class="col-xs-12 col-sm-12 row">
                 <div class="text-weight-medium q-pl-sm q-py-sm">
                   ผู้บังคับบัญชาชั้นต้น
                 </div>
-                <div class="row col-12 q-col-gutter-sm">
+                <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
                     readonly
-                    ref="elementaryFullNameRef"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
                     label="ชื่อ-นามสกุล"
                     v-model="formCommand.elementaryFullName"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                  <q-input
-                    readonly
-                    ref="elementaryPositonRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.elementaryPosition"
-                    label="ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                     lazy-rules
                     hide-bottom-space
                   />
+                  <div class="col-12">
+                    <div class="row col-12 q-col-gutter-sm">
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryPosition"
+                        label="ตำแหน่ง"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryPositionOld"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryOrg"
+                        label="สังกัด"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryOrgOld"
+                        label="สังกัดเดิม"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div class="row q-col-gutter-sm col-12">
+            <div class="row q-col-gutter-sm">
               <div class="col-xs-12 col-sm-12 row">
                 <div class="text-weight-medium q-pl-sm q-pt-md q-mb-xs">
                   ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                 </div>
-                <div class="row col-12 q-col-gutter-sm">
+                <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
                     readonly
                     ref="abovelevelFullnameRef"
@@ -213,18 +251,54 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                   />
-                  <q-input
+
-                    ref="abovelevelPositionRef"
+                  <div class="col-12">
-                    class="col-xs-12 col-sm-6"
+                    <div class="row col-12 q-col-gutter-sm">
-                    dense
+                      <q-input
-                    readonly
+                        readonly
-                    outlined
+                        class="col-xs-6 col-sm-3"
-                    v-model="formCommand.abovelevelPosition"
+                        dense
-                    label="ตำแหน่ง"
+                        outlined
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        v-model="formCommand.abovelevelPosition"
-                    lazy-rules
+                        label="ตำแหน่ง"
-                    hide-bottom-space
+                        lazy-rules
-                  />
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelPositionOld"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelOrg"
+                        label="สังกัด"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelOrgOld"
+                        label="สังกัดเดิม"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

src/modules/12_evaluatePersonal/components/Detail/step/step7.vue

@@ -39,13 +39,10 @@ async function getFile(volume: number) {
   showLoader();
   await http
     .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileText))
-    .then((res) => {
+    .then(async (res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
-      getPDF(link, type);
+      await getPDF(link, type);
-    })
-    .catch(() => {
-      // messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -57,9 +54,8 @@ async function getFile(volume: number) {
  * @param url linkLoadFile
  * @param type ประเภทไฟล์
  */
-function getPDF(url: string, type: string) {
+async function getPDF(url: string, type: string) {
-  showLoader();
+  await axios
-  axios
     .get(url, {
       method: "GET",
       responseType: "blob",
@@ -80,7 +76,6 @@ function getPDF(url: string, type: string) {
         store.log = 1;
         store.pdfSrcStore = pdfData.pdf.value;
         store.numOfPagesStore = pdfData.pages.value;
-        hideLoader();
       }, 1500);
     })
     .catch(async (e) => {

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue

@@ -21,6 +21,7 @@ const {
   columnSalaries,
   columnTraining,
   columnAssessments,
+  columnExperience,
 } = store;
 const { date2Thai, showLoader, hideLoader } = mixin;
 
@@ -51,6 +52,7 @@ const formDetail = reactive({
   salaries: [], //ประวัติการรับราชการ
   trainings: [], //ประวัติการฝึกอบรมดูงาน
   assessments: [], //ประสบการณ์ในการปฏิบัติงาน
+  experience: [],
 });
 
 function formattedNumber(x: number) {
@@ -60,6 +62,7 @@ function formattedNumber(x: number) {
 onMounted(() => {
   if (props.data) {
     showLoader();
+    console.log("props.data :>> ", props.data);
     formDetail.prefix = props.data.prefix ?? "-";
     formDetail.fullName = props.data.fullName ?? "-";
     formDetail.position = props.data.position ?? "-";
@@ -99,7 +102,8 @@ onMounted(() => {
           yearly: e.yearly,
         }))
       : [];
-    formDetail.assessments = props.data.assessments;
+    formDetail.assessments = props.data.performances;
+    formDetail.experience = props.data.portfolios;
     setTimeout(() => {
       hideLoader();
     }, 1000);
@@ -382,7 +386,11 @@ onMounted(() => {
           <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
+        <TableData
+          class="col-12"
+          :columns="columnExperience"
+          :row="formDetail.experience"
+        />
       </q-card>
 
       <q-card class="col-12 cardSp1" bordered>
@@ -390,13 +398,12 @@ onMounted(() => {
           <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
+
-        <!-- <div class="col-10">
+        <TableData
-          <TableData
+          class="col-12"
-            :columns="columnAssessments"
+          :columns="columnAssessments"
-            :row="formDetail.assessments"
+          :row="formDetail.assessments"
-          />
+        />
-        </div> -->
       </q-card>
     </div>
   </q-card>

src/modules/12_evaluatePersonal/interface/index/evalute.ts

@@ -1,8 +1,14 @@
 interface FormCommand {
   elementaryFullName: string;
   elementaryPosition: string;
+  elementaryPositionOld: string;
+  elementaryOrg: string;
+  elementaryOrgOld: string;
   abovelevelFullname: string;
   abovelevelPosition: string;
+  abovelevelPositionOld: string;
+  abovelevelOrg: string;
+  abovelevelOrgOld: string;
 }
 
 interface FormCommandRef {

src/modules/12_evaluatePersonal/store/EvaluateDetail.ts

@@ -328,97 +328,65 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
-  /** คอลัมน์ ผลงานที่เคยเสนอขอประเมิน*/
+  //ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)
   const columnAssessments = ref<QTableProps["columns"]>([
     {
-      name: "date",
+      name: "year",
       align: "left",
-      label: "วันที่ได้รับ",
+      label: "ปี พ.ศ.",
       sortable: true,
-      field: "date",
+      field: "year",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      format: (v) => date2Thai(v),
     },
     {
-      name: "point1Total",
+      name: "type",
       align: "left",
-      label: "ส่วนที่1 (น้ำหนัก)",
+      label: "ระดับตอนที่ยื่นขอ",
       sortable: true,
-      field: "point1Total",
+      field: "type",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point1",
+      name: "subject",
       align: "left",
-      label: "ผลประเมินส่วนที่1 (คะแนน)",
+      label: "เรื่อง/ชื่อเรื่อง",
       sortable: true,
-      field: "point1",
+      field: "subject",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point2Total",
+      name: "evaluationResult",
       align: "left",
-      label: "ส่วนที่2 (น้ำหนัก)",
+      label: "ผลการประเมิน (ผ่าน/ไม่ผ่าน)",
       sortable: true,
-      field: "point2Total",
+      field: "evaluationResult",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "point2",
-      align: "left",
-      label: "ผลประเมินส่วนที่2 (คะแนน)",
-      sortable: true,
-      field: "point2",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSumTotal",
-      align: "left",
-      label: "ผลรวม (น้ำหนัก)",
-      sortable: true,
-      field: "pointSumTotal",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSum",
-      align: "left",
-      label: "ผลประเมินรวม (คะแนน)",
-      sortable: true,
-      field: "pointSum",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
+  ]);
+
+  //ประสบการณ์ในการปฏิบัติงาน
+  const columnExperience = ref<QTableProps["columns"]>([
     {
       name: "name",
       align: "left",
-      label: "ผลประเมิน",
+      label: "ชื่อผลงาน",
       sortable: true,
       field: "name",
-      format(val, row) {
-        return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
-      },
       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",
     },
   ]);
 
@@ -452,6 +420,8 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     columnSalaries,
     columnTraining,
     columnAssessments,
+    columnExperience,
+
     pdfSrcStore,
     urlDownloadFile,
     numOfPagesStore,

src/modules/14_KPI/views/mainDetail.vue

@@ -35,7 +35,6 @@ const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
-
 const idEva = ref<string>(route.params.id as string);
 const formData = reactive<any>({
   prefix: "",
@@ -119,7 +118,7 @@ function onResize(size: any) {
  * fetch ข้แมูลส่วนตัว
  */
 
- // เส้นเก่าที่เคยใช้     .get(config.API.kpiEvaluationUser + `/admin/${id.value}`)
+// เส้นเก่าที่เคยใช้     .get(config.API.kpiEvaluationUser + `/admin/${id.value}`)
 async function getMain() {
   showLoader();
   await http
@@ -303,7 +302,7 @@ onMounted(async () => {
                   }}
                 </div>
                 <div class="col-4 text-html">
-                  {{ formData.org ? formData.org : "-" }}
+                  {{ formData.org ? formData.org.replace("\\n", "\n") : "-" }}
                 </div>
               </div>
             </div>