diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index 8ad1a24..8705ab9 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -54,6 +54,8 @@ export default {
   dataUserSalary: `${profileOrg}/salary/user`,
   dataUserSalaryByType: (type: string) => `${org}/profile${type}/salary/user`,
   dataUserAssessments: `${profileOrg}/assessments/user`,
+  dataUserPortfolio: `${env.API_URI}/development/portfolio/user`,
+  dataUserPerformance: `${env.API_URI}/evaluation/performance/user`,
   dataUserNopaid: `${profileOrg}/nopaid/user`,
   dataUserNopaidByType: (type: string) => `${org}/profile${type}/nopaid/user`,
 
@@ -61,8 +63,7 @@ export default {
   dataUserCertificateByType: (emType: string, type: string) =>
     `${org}/profile${emType}/${type}/user`,
 
-  dataUserEvaByType: (type: string) =>
-    `${org}/profile/${type}/user`,
+  dataUserEvaByType: (type: string) => `${org}/profile/${type}/user`,
 
   dataUserOther: `${profileOrg}/other/user`,
   dataUserOtherByType: (type: string) => `${org}/profile${type}/other/user`,
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 0cdf723..d207626 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -71,7 +71,7 @@ async function onCilckNextStep() {
   store.step === 1
     ? checkSelectForm()
     : store.step === 2 || store.step === 6
-    ? validateForm()
+    ? onSubmitFormData()
     : store.step == 3 || store.step == 7
     ? dialogConfirm(
         $q,
@@ -85,35 +85,44 @@ async function onCilckNextStep() {
 }
 
 /** function validateForm Step 2,4*/
-async function validateForm() {
+async function onSubmitFormData() {
   store.checkFileupload = !store.checkFileupload;
-  const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
-  const hasError = [];
-  for (const key in formCommandRef) {
-    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
-      const property = formCommandRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (emptyValues.length > 0 && store.statusUpload === true) {
-    } else if (store.step === 2) {
-      if (store.statusUpload === false) {
-        saveStep2();
-      } else {
+  console.log(store.statusUpload6);
+
+  if (store.step === 2) {
+    if (!store.statusUpload) {
+      saveStep2();
+    } else {
+      if (!downloadFile.value.some((e: string) => e === "")) {
         nextTostep3();
       }
+    }
+  } else {
+    if (!store.statusUpload6) {
+      saveStep6();
     } else {
-      if (store.statusUpload6 === false) {
-        saveStep6();
-      } else {
+      if (!downloadFile.value.some((e: string) => e === "")) {
         nextTostep7();
       }
     }
   }
+
+  // const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
+  // const hasError = [];
+  // for (const key in formCommandRef) {
+  //   if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+  //     const property = formCommandRef[key];
+
+  //     if (property.value && typeof property.value.validate === "function") {
+  //       const isValid = property.value.validate();
+  //       hasError.push(isValid);
+  //     }
+  //   }
+  // }
+  // if (hasError.every((result) => result === true)) {
+  //   if (emptyValues.length > 0 && store.statusUpload === true) {
+  // }
+  // }
 }
 
 const pdfSrc = ref<any>();
@@ -250,19 +259,7 @@ function checkSelectForm() {
 /** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
   showLoader();
-
   const salaries = formDetail.value.salaries.map((e: any) => ({
-    // amount: e.amount,
-    // date: e.date,
-    // mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-    // posNo: e.posNo,
-    // position: e.position,
-    // positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-    // refCommandDate: e.refCommandDate,
-    // refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-    // salaryClass: e.salaryClass ? e.salaryClass : "",
-    // salaryRef: e.salaryRef ? e.salaryRef : "",
-    // salaryStatus: e.salaryStatus ? e.salariesStatus : "",
     profileId: e.profileId,
     commandCode: e.commandCode,
     commandNo: e.commandNo,
@@ -317,16 +314,32 @@ async function saveStep1() {
     startDate: e.startDate,
   }));
 
-  const assessments = formDetail.value.assessments.map((e: any) => ({
-    date: e.date,
-    point1: e.point1,
-    point1Total: e.point1Total,
-    point2: e.point2,
-    point2Total: e.point2Total,
-    pointSum: e.pointSum,
-    pointSumTotal: e.pointSumTotal,
+  const certificates = formDetail.value.certificates.map((e: any) => ({
+    ...e,
   }));
 
+  const trainings = formDetail.value.trainings.map((e: any) => ({
+    ...e,
+  }));
+
+  const performances = formDetail.value.assessments.map(
+    ({ id, ...rest }: any) => ({
+      ...rest,
+    })
+  );
+  const portfolios = formDetail.value.experience.map(
+    ({
+      id,
+      lastUpdatedAt,
+      lastUpdateFullName,
+      createdFullName,
+      createdAt,
+      ...rest
+    }: any) => ({
+      ...rest,
+    })
+  );
+
   const evaluateType = route.params.type.toString();
   const form = {
     root: formDetail.value.root,
@@ -353,10 +366,11 @@ async function saveStep1() {
     isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
     reason: "",
     educations: [...educations],
-    certificates: [...formDetail.value.certificates],
+    certificates: [...certificates],
     salaries: [...salaries],
-    trainings: [...formDetail.value.trainings],
-    assessments: [...assessments],
+    trainings: [...trainings],
+    performances: [...performances],
+    portfolios: [...portfolios],
   };
 
   await http
@@ -378,41 +392,20 @@ const statusUpload = ref<boolean>(false);
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [],
   assignedPosition: "",
 });
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const fileEvaluation2Ref = ref<object | null>(null);
-const fileEvaluation3Ref = ref<object | null>(null);
-const fileEvaluation4Ref = ref<object | null>(null);
-const fileEvaluation5Ref = ref<object | null>(null);
-const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
-const formCommandRef: FormCommandRef = {
-  commanderFullname: commanderFullnameRef,
-  commanderPosition: commanderPositionRef,
-  commanderAboveFullname: commanderAboveFullnameRef,
-  commanderAbovePosition: commanderAbovePositionRef,
-  fileEvaluation1: fileEvaluation1Ref,
-  fileEvaluation2: fileEvaluation2Ref,
-  fileEvaluation3: fileEvaluation3Ref,
-  fileEvaluation4: fileEvaluation4Ref,
-  fileEvaluation5: fileEvaluation5Ref,
-  fileEvaluation6: fileEvaluation6Ref,
-  performance: performanceRef,
-  performanceOwner: performanceOwnerRef,
-  assignedPosition: assignedPositionRef,
-};
-const downloadFileRef = ref<any>();
+const downloadFile = ref<string[]>([]);
+
 /**
  * function  อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
  * @param val ผู้เซ็นเอกสาร
@@ -421,38 +414,22 @@ const downloadFileRef = ref<any>();
 function updateformCommand(val: any, ref: any) {
   formCommand.commanderFullname = val.commanderFullname;
   formCommand.commanderPosition = val.commanderPosition;
+  formCommand.commanderPositionOld = val.commanderPositionOld;
+  formCommand.commanderOrg = val.commanderOrg;
+  formCommand.commanderOrgOld = val.commanderOrgOld;
   formCommand.commanderAboveFullname = val.commanderAboveFullname;
   formCommand.commanderAbovePosition = val.commanderAbovePosition;
+  formCommand.commanderAbovePositionOld = val.commanderAbovePositionOld;
+  formCommand.commanderAboveOrgOld = val.commanderAboveOrgOld;
+  formCommand.commanderAboveOrg = val.commanderAboveOrg;
   formCommand.author = val.author;
   formCommand.subject = val.subject;
   formCommand.assignedPosition = val.assignedPosition;
-  commanderFullnameRef.value = ref.commanderFullnameRef;
-  commanderPositionRef.value = ref.commanderPositionRef;
-  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
-  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
-  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
-  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
-  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
-  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
-  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
-  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
-  downloadFileRef.value = ref.downloadFile;
-  performanceRef.value = ref.performance;
-  performanceOwnerRef.value = ref.performanceOwner;
-  assignedPositionRef.value = ref.assignedPosition;
+  downloadFile.value = ref.downloadFile;
   statusUpload.value = ref.statusUpload;
 }
 /** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep2() {
-  const body = {
-    commanderFullname: formCommand.commanderFullname,
-    commanderPosition: formCommand.commanderPosition,
-    commanderAboveFullname: formCommand.commanderAboveFullname,
-    commanderAbovePosition: formCommand.commanderAbovePosition,
-    author: formCommand.author,
-    subject: formCommand.subject,
-  };
-
   dialogConfirm(
     $q,
     async () => {
@@ -465,7 +442,7 @@ async function saveStep2() {
             route.params.id.toString(),
             "director"
           ),
-          body
+          { ...formCommand, assignedPosition: undefined }
         )
         .then(() => {
           route.params.id && fetchCheckStep(route.params.id.toString());
@@ -530,8 +507,14 @@ async function saveStep6() {
   const body = {
     commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
     commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
+    commanderAbovePositionOldDoc2: formCommand.commanderAbovePositionOld,
+    commanderAboveOrgOldDoc2: formCommand.commanderAboveOrgOld,
+    commanderAboveOrgDoc2: formCommand.commanderAboveOrg,
     commanderFullnameDoc2: formCommand.commanderFullname,
     commanderPositionDoc2: formCommand.commanderPosition,
+    commanderPositionOldDoc2: formCommand.commanderPositionOld,
+    commanderOrgDoc2: formCommand.commanderOrg,
+    commanderOrgOldDoc2: formCommand.commanderOrgOld,
     authorDoc2: formCommand.author,
     subjectDoc2: formCommand.subject,
     assignedPosition: formCommand.assignedPosition,
@@ -679,164 +662,172 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-
-          <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
-            <div class="col-12 row items-center">
-              <div class="toptitle2">
-                {{ store.step }}.{{ store.title[store.step - 1] }}
+          <q-form
+            class="col-xs-12 col-sm-9"
+            greedy
+            @submit.prevent
+            @validation-success="onCilckNextStep"
+          >
+            <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
+              <div class="col-12 row items-center">
+                <div class="toptitle2">
+                  {{ store.step }}.{{ store.title[store.step - 1] }}
+                </div>
+                <q-space />
+                <div>
+                  <q-btn
+                    v-if="store.step === 1"
+                    :href="externalLink"
+                    target="_blank"
+                    outline
+                    color="blue"
+                    dense
+                    class="q-px-md"
+                    no-caps
+                  >
+                    ตรวจสอบคุณสมบัติกับ ก.พ.
+                  </q-btn>
+                </div>
               </div>
-              <q-space />
-              <div>
-                <q-btn
-                  v-if="store.step === 1"
-                  :href="externalLink"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  dense
-                  class="q-px-md"
-                  no-caps
-                >
-                  ตรวจสอบคุณสมบัติกับ ก.พ.
-                </q-btn>
-              </div>
-            </div>
-            <div class="col-12 q-pt-sm">
-              <div class="q-col-gutter-md col-12 row">
-                <div
-                  :class="
-                    store.step === 2 ||
-                    store.step === 4 ||
-                    store.step === 5 ||
-                    store.step === 6 ||
-                    store.step === 8 ||
-                    store.step === 9
-                      ? 'col-12 row'
-                      : 'col-xs-12 col-sm-5 row'
-                  "
-                >
-                  <q-card
-                    flat
-                    bordered
-                    class="col-12 shadow-0"
-                    :style="
-                      $q.screen.lt.sm
-                        ? ''
-                        : 'max-height: 60vh; overflow: scroll;'
+              <div class="col-12 q-pt-sm">
+                <div class="q-col-gutter-md col-12 row">
+                  <div
+                    :class="
+                      store.step === 2 ||
+                      store.step === 4 ||
+                      store.step === 5 ||
+                      store.step === 6 ||
+                      store.step === 8 ||
+                      store.step === 9
+                        ? 'col-12 row'
+                        : 'col-xs-12 col-sm-5 row'
                     "
                   >
-                    <Step1
-                      v-if="store.step === 1"
-                      @update:spec="updateCheckSpec"
-                      :data="formDataStep1"
-                      :educations="formDetail?.educations"
-                    />
-                    <Step2
-                      v-if="store.step === 2"
-                      @update:form="updateformCommand"
-                    />
-                    <Step3
-                      v-if="store.step === 3"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step4 v-if="store.step === 4" />
-                    <Step5 v-if="store.step === 5" />
-                    <Step6
-                      v-if="store.step === 6"
-                      @update:form="updateformCommand"
-                    />
-                    <Step7
-                      v-if="store.step === 7"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step8 v-if="store.step === 8" />
-                    <Step9 v-if="store.step === 9" />
-                  </q-card>
-                </div>
-                <div
-                  class="col-xs-12 col-sm-7"
-                  v-if="
-                    store.step === 1 || store.step === 3 || store.step === 7
-                  "
-                >
-                  <div class="col-12">
-                    <ViewStep1
-                      v-if="store.step === 1"
-                      @update:formDeital="updateFormDetail"
-                      :data="formDataStep1"
-                    />
-                    <ViewStep3
-                      v-if="store.step === 3 && pdfSrc"
-                      :pdfSrc="pdfSrc"
-                      :urlDownloadFile="urlDownloadFile"
-                    />
-                    <ViewStep7
-                      v-if="store.step === 7 && pdfSrc"
-                      :pdfSrc="pdfSrc"
-                      :urlDownloadFile="urlDownloadFile"
-                    />
+                    <q-card
+                      flat
+                      bordered
+                      class="col-12 shadow-0"
+                      :style="
+                        $q.screen.lt.sm
+                          ? ''
+                          : 'max-height: 60vh; overflow: scroll;'
+                      "
+                    >
+                      <Step1
+                        v-if="store.step === 1"
+                        @update:spec="updateCheckSpec"
+                        :data="formDataStep1"
+                        :educations="formDetail?.educations"
+                      />
+                      <Step2
+                        v-if="store.step === 2"
+                        @update:form="updateformCommand"
+                      />
+                      <Step3
+                        v-if="store.step === 3"
+                        @update:file="updateFilePDF"
+                      />
+                      <Step4 v-if="store.step === 4" />
+                      <Step5 v-if="store.step === 5" />
+                      <Step6
+                        v-if="store.step === 6"
+                        @update:form="updateformCommand"
+                      />
+                      <Step7
+                        v-if="store.step === 7"
+                        @update:file="updateFilePDF"
+                      />
+                      <Step8 v-if="store.step === 8" />
+                      <Step9 v-if="store.step === 9" />
+                    </q-card>
+                  </div>
+                  <div
+                    class="col-xs-12 col-sm-7"
+                    v-if="
+                      store.step === 1 || store.step === 3 || store.step === 7
+                    "
+                  >
+                    <div class="col-12">
+                      <ViewStep1
+                        v-if="store.step === 1"
+                        @update:formDeital="updateFormDetail"
+                        :data="formDataStep1"
+                      />
+                      <ViewStep3
+                        v-if="store.step === 3 && pdfSrc"
+                        :pdfSrc="pdfSrc"
+                        :urlDownloadFile="urlDownloadFile"
+                      />
+                      <ViewStep7
+                        v-if="store.step === 7 && pdfSrc"
+                        :pdfSrc="pdfSrc"
+                        :urlDownloadFile="urlDownloadFile"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
+              <q-card-actions
+                class="q-pt-sm q-pa-none q-gutter-sm"
+                align="right"
+              >
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.statusUpload === false &&
+                    store.step !== 3 &&
+                    store.step !== 4 &&
+                    store.step !== 5 &&
+                    store.step !== 7 &&
+                    store.step !== 8 &&
+                    store.step !== 9
+                  "
+                  unelevated
+                  :label="
+                    store.step === 2 || store.step === 6
+                      ? 'บันทึกข้อมูล'
+                      : 'ดำเนินการต่อ'
+                  "
+                  color="public"
+                  type="submit"
+                />
+
+                <q-btn
+                  v-else-if="
+                    store.step >= store.currentStep &&
+                    (store.step == 3 || store.step == 7)
+                  "
+                  unelevated
+                  label="ยื่นเอกสาร"
+                  color="public"
+                  type="submit"
+                />
+
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.step == 2 &&
+                    store.statusUpload
+                  "
+                  unelevated
+                  label="ดำเนินการต่อ"
+                  color="public"
+                  type="submit"
+                />
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.step == 6 &&
+                    store.statusUpload
+                  "
+                  unelevated
+                  label="ดำเนินการต่อ"
+                  color="public"
+                  type="submit"
+                />
+              </q-card-actions>
             </div>
-            <q-card-actions class="q-pt-sm q-pa-none q-gutter-sm" align="right">
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.statusUpload === false &&
-                  store.step !== 3 &&
-                  store.step !== 4 &&
-                  store.step !== 5 &&
-                  store.step !== 7 &&
-                  store.step !== 8 &&
-                  store.step !== 9
-                "
-                unelevated
-                :label="
-                  store.step === 2 || store.step === 6
-                    ? 'บันทึกข้อมูล'
-                    : 'ดำเนินการต่อ'
-                "
-                color="public"
-                @click="onCilckNextStep()"
-              />
-
-              <q-btn
-                v-else-if="
-                  store.step >= store.currentStep &&
-                  (store.step == 3 || store.step == 7)
-                "
-                unelevated
-                label="ยื่นเอกสาร"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 2 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-              <q-btn
-                v-if="
-                  downloadFileRef &&
-                  store.step >= store.currentStep &&
-                  store.step == 6 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-            </q-card-actions>
-          </div>
+          </q-form>
         </q-card>
       </div>
     </div>
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index ec64486..3050195 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -31,26 +31,53 @@ const emit = defineEmits(["update:form"]);
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [""],
   assignedPosition: "",
 });
 
-/** formRef */
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const fileEvaluation2Ref = ref<object | null>(null);
-const fileEvaluation3Ref = ref<object | null>(null);
-const fileEvaluation4Ref = ref<object | null>(null);
-const fileEvaluation5Ref = ref<object | null>(null);
-const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    downloadFile: "",
+    file: null,
+  },
+]);
 
 /**
  * function updateFormref
@@ -58,39 +85,12 @@ const performanceOwnerRef = ref<object | null>(null);
  */
 function updateInput(val: any) {
   const ref = {
-    commanderFullnameRef: commanderFullnameRef.value,
-    commanderPositionRef: commanderPositionRef.value,
-    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-    commanderAbovePositionRef: commanderAbovePositionRef.value,
-    fileEvaluation1Ref: fileEvaluation1Ref.value,
-    fileEvaluation2Ref: fileEvaluation2Ref.value,
-    fileEvaluation3Ref: fileEvaluation3Ref.value,
-    fileEvaluation4Ref: fileEvaluation4Ref.value,
-    fileEvaluation5Ref: fileEvaluation5Ref.value,
-    fileEvaluation6Ref: fileEvaluation6Ref.value,
-    downloadFile: [
-      downloadFile1.value,
-      downloadFile2.value,
-      downloadFile3.value,
-      downloadFile4.value,
-      downloadFile5.value,
-      downloadFile6.value,
-    ],
-    performance: performanceRef.value,
-    performanceOwner: performanceOwnerRef.value,
-    statusUpload: store.statusUpload,
+    statusUpload: false,
+    downloadFile: formTemplates.value.map((e) => e.downloadFile),
   };
   emit("update:form", val, ref); // ส่งข้อมูลไปอัปเดท
 }
 
-/** ตัวแปร file*/
-const fileEvaluation1 = ref<File | null>();
-const fileEvaluation2 = ref<File | null>();
-const fileEvaluation3 = ref<File | null>();
-const fileEvaluation4 = ref<File | null>();
-const fileEvaluation5 = ref<File | null>();
-const fileEvaluation6 = ref<File | null>();
-
 const modalView = ref<boolean>(false);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
@@ -123,13 +123,13 @@ async function onClickDowloadFile(
   fileName: string
 ) {
   showLoader();
-
   const body = {
     template: tp,
     reportName: templateName,
     data: profile.value,
   };
   await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  hideLoader();
 }
 
 /**
@@ -170,10 +170,9 @@ async function fetchPathUpload(
       })
       .catch((err) => {
         messageError($q, err);
-        hideLoader();
       })
       .finally(() => {
-        // hideLoader();
+        hideLoader();
       });
   }
 }
@@ -195,9 +194,6 @@ async function uploadfile(uploadUrl: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -206,16 +202,20 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param id evaluate ID
  */
 function fetcheSigner(id: string) {
-  showLoader();
   http
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
-
       formCommand.commanderFullname = data.commanderFullname;
       formCommand.commanderPosition = data.commanderPosition;
+      formCommand.commanderPositionOld = data.commanderPositionOld;
+      formCommand.commanderOrg = data.commanderOrg;
+      formCommand.commanderOrgOld = data.commanderOrgOld;
       formCommand.commanderAboveFullname = data.commanderAboveFullname;
       formCommand.commanderAbovePosition = data.commanderAbovePosition;
+      formCommand.commanderAbovePositionOld = data.commanderAbovePositionOld;
+      formCommand.commanderAboveOrgOld = data.commanderAboveOrgOld;
+      formCommand.commanderAboveOrg = data.commanderAboveOrg;
       formCommand.author = data.author;
       formCommand.subject = data.subject;
       store.statusUpload = true;
@@ -223,11 +223,6 @@ function fetcheSigner(id: string) {
     .catch(() => {
       store.statusUpload = false;
       getCommander();
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -236,7 +231,6 @@ function fetcheSigner(id: string) {
  * @param id  evaluate ID
  */
 async function fetchCheckSpec(id: string) {
-  showLoader();
   await http
     .get(config.API.evaluationReportCheckspecByid(id))
     .then((res) => {
@@ -245,85 +239,31 @@ async function fetchCheckSpec(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-const downloadFile1 = ref<string>("");
-const downloadFile2 = ref<string>("");
-const downloadFile3 = ref<string>("");
-const downloadFile4 = ref<string>("");
-const downloadFile5 = ref<string>("");
-const downloadFile6 = ref<string>("");
-
 /**
  * function ดาวน์โหลดไฟล์
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
-  // showLoader();
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
-      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
-        downloadFile1.value = res.data.downloadUrl;
-        // fileEvaluation1.value = res.data.upload;
-      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
-        downloadFile2.value = res.data.downloadUrl;
-        // fileEvaluation2.value = res.data.upload;
-      } else if (
-        fileName ===
-        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      ) {
-        downloadFile3.value = res.data.downloadUrl;
-        // fileEvaluation3.value = res.data.upload;
-      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
-        downloadFile4.value = res.data.downloadUrl;
-        // fileEvaluation4.value = res.data.upload;
-      } else if (
-        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
-      ) {
-        downloadFile5.value = res.data.downloadUrl;
-        // fileEvaluation5.value = res.data.upload;
-      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
-        downloadFile6.value = res.data.downloadUrl;
-        // fileEvaluation6.value = res.data.upload;
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
       }
     })
     .finally(() => {
       const ref = {
-        commanderFullnameRef: commanderFullnameRef.value,
-        commanderPositionRef: commanderPositionRef.value,
-        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-        commanderAbovePositionRef: commanderAbovePositionRef.value,
-        fileEvaluation1Ref: fileEvaluation1Ref.value,
-        fileEvaluation2Ref: fileEvaluation2Ref.value,
-        fileEvaluation3Ref: fileEvaluation3Ref.value,
-        fileEvaluation4Ref: fileEvaluation4Ref.value,
-        fileEvaluation5Ref: fileEvaluation5Ref.value,
-        fileEvaluation6Ref: fileEvaluation6Ref.value,
-        performance: performanceRef.value,
-        performanceOwner: performanceOwnerRef.value,
-        downloadFile: [
-          downloadFile1.value,
-          downloadFile2.value,
-          downloadFile3.value,
-          downloadFile4.value,
-          downloadFile5.value,
-          downloadFile6.value,
-        ],
         statusUpload: false,
+        downloadFile: formTemplates.value.map((e) => e.downloadFile),
       };
 
       emit("update:form", formCommand, ref);
-
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -339,32 +279,24 @@ function getCommander() {
     })
     .catch((e) => {
       console.log(e);
-      // messageError($q, e);
     });
 }
+
+function onAddSubject() {
+  formCommand.subject.push("");
+}
+
+function onDeleteSubject(index: number) {
+  formCommand.subject.splice(index, 1);
+}
+
 /** callback function */
 watch(
   () => store.checkFileupload,
   () => {
-    const fileEvaluationValues = [
-      fileEvaluation1,
-      fileEvaluation2,
-      fileEvaluation3,
-      fileEvaluation4,
-      fileEvaluation5,
-      fileEvaluation6,
-    ];
-    const downloadFileValues = [
-      downloadFile1,
-      downloadFile2,
-      downloadFile3,
-      downloadFile4,
-      downloadFile5,
-      downloadFile6,
-    ];
-    for (let i = 0; i < downloadFileValues.length; i++) {
-      if (downloadFileValues[i].value === "") {
-        fileEvaluationValues[i].value = null;
+    for (let i = 0; i < formTemplates.value.length; i++) {
+      if (formTemplates.value[i].downloadFile === "") {
+        formTemplates.value[i].file = null;
       }
     }
   }
@@ -385,19 +317,29 @@ onMounted(async () => {
   if (user) {
     formCommand.author = user.name;
   }
-  showLoader();
-  await Promise.all([
-    fetcheSigner(evaluateId.value),
-    fetchCheckSpec(evaluateId.value),
-    downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
-    downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
-    downloadFile(
-      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-    ),
-    downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
-    downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
-    downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
-  ]);
+
+  try {
+    showLoader();
+    await Promise.all([
+      fetcheSigner(evaluateId.value),
+      fetchCheckSpec(evaluateId.value),
+      formTemplates.value.forEach((e) => {
+        downloadFile(e.fileName);
+      }),
+      // downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
+      // downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
+      // downloadFile(
+      //   "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
+      // ),
+      // downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
+      // downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
+      // downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -412,32 +354,67 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-12 q-pa-sm">
           <div class="row q-col-gutter-sm">
-            <q-input
-              :readonly="store.currentStep != 2 || store.statusUpload"
-              ref="performanceRef"
-              dense
-              class="col-xs-12 col-sm-6"
-              outlined
-              label="ชื่อผลงาน"
-              v-model="formCommand.subject"
-              @update:model-value="updateInput(formCommand)"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-              lazy-rules
-              hide-bottom-space
-            />
-            <q-input
-              :readonly="store.currentStep != 2 || store.statusUpload"
-              ref="performanceOwnerRef"
-              class="col-xs-12 col-sm-6"
-              dense
-              outlined
-              v-model="formCommand.author"
-              @update:model-value="updateInput(formCommand)"
-              label="เจ้าของผลงาน"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-              lazy-rules
-              hide-bottom-space
-            />
+            <div class="col-12">
+              <q-input
+                :readonly="store.currentStep != 2 || store.statusUpload"
+                dense
+                outlined
+                v-model="formCommand.author"
+                @update:model-value="updateInput(formCommand)"
+                label="เจ้าของผลงาน"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div
+              class="col-12"
+              v-if="store.currentStep === 2 && !store.statusUpload"
+            >
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click="onAddSubject"
+              >
+                <q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
+              </q-btn>
+            </div>
+            <div
+              class="row col-12 q-col-gutter-sm"
+              v-for="(item, index) in formCommand.subject"
+              :key="index"
+            >
+              <div class="col-11">
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  dense
+                  outlined
+                  label="ชื่อผลงาน"
+                  v-model="formCommand.subject[index]"
+                  @update:model-value="updateInput(formCommand)"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div
+                class="row col-1 items-centet justify-center"
+                v-if="index !== 0"
+              >
+                <q-btn
+                  v-if="store.currentStep === 2 && !store.statusUpload"
+                  flat
+                  round
+                  color="red"
+                  icon="delete"
+                  @click="onDeleteSubject(index)"
+                >
+                  <q-tooltip>ลบ</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
           </div>
         </div>
       </q-card>
@@ -459,7 +436,6 @@ onMounted(async () => {
               <div class="row col-12 q-col-gutter-sm q-pa-sm">
                 <q-input
                   :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderFullnameRef"
                   dense
                   class="col-xs-12 col-sm-6"
                   outlined
@@ -470,19 +446,58 @@ onMounted(async () => {
                   lazy-rules
                   hide-bottom-space
                 />
-                <q-input
-                  :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderPositionRef"
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  v-model="formCommand.commanderPosition"
-                  @update:model-value="updateInput(formCommand)"
-                  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="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderPosition"
+                      @update:model-value="updateInput(formCommand)"
+                      label="ตำแหน่ง"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderPositionOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="ตำแหน่งเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderOrg"
+                      @update:model-value="updateInput(formCommand)"
+                      label="สังกัด"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderOrgOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="สังกัดเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -494,7 +509,6 @@ onMounted(async () => {
               <div class="row col-12 q-col-gutter-md q-pa-sm">
                 <q-input
                   :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderAboveFullnameRef"
                   dense
                   class="col-xs-12 col-sm-6"
                   outlined
@@ -505,19 +519,59 @@ onMounted(async () => {
                   @update:model-value="updateInput(formCommand)"
                   hide-bottom-space
                 />
-                <q-input
-                  :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderAbovePositionRef"
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  v-model="formCommand.commanderAbovePosition"
-                  label="ตำแหน่ง"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                  @update:model-value="updateInput(formCommand)"
-                />
+
+                <div class="col-12">
+                  <div class="row col-12 q-col-gutter-sm">
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAbovePosition"
+                      label="ตำแหน่ง"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAbovePositionOld"
+                      label="ตำแหน่งเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAboveOrg"
+                      label="สังกัด"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAboveOrgOld"
+                      label="สังกัดเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -527,8 +581,97 @@ onMounted(async () => {
 
     <!-- v-if="store.statusUpload -->
     <div class="row q-col-gutter-sm">
+      <div
+        class="col-6"
+        v-if="store.currentStep === 2"
+        v-for="(item, index) in formTemplates"
+        :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
+                  v-model="item.file"
+                  :disable="!store.statusUpload"
+                  class="col-xs-12 col-sm-12"
+                  label="อัปโหลดไฟล์"
+                  outlined
+                  dense
+                  lazy-rules
+                  hide-bottom-space
+                  accept=".pdf"
+                  :rules="
+                  item.downloadFile === ''
+                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
+                      : []
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      :disable="!store.statusUpload"
+                      flat
+                      round
+                      dense
+                      color="primary"
+                      icon="mdi-upload"
+                      @click="
+                        fetchPathUpload(
+                          'เล่ม 1',
+                          evaluateId,
+                          item.fileName,
+                          item.file
+                        )
+                      "
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
       <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <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"
@@ -615,10 +758,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <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"
@@ -705,10 +848,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
@@ -795,10 +938,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
@@ -884,10 +1027,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
@@ -972,10 +1115,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
@@ -1060,7 +1203,7 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
     </div>
   </div>
 
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 8333f63..019a960 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -22,13 +22,23 @@ const evaluateId = ref<string>(route.params.id.toString());
 const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
-const fileName = ref([
-  "1-แบบพิจารณาคุณสมบัติบุคคล",
-  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
-  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-  "4-แบบประเมินคุณลักษณะบุคคล",
-  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+const formTemplates = ref([
+  {
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
 ]);
 
 /**
@@ -38,7 +48,7 @@ const fileName = ref([
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-  fetchDocument(fileName.value[itemNumber - 1]);
+  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
 }
 
 /**
@@ -50,14 +60,14 @@ async function fetchDocument(fileName: string) {
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
-      .then((res) => {
-        downloadFile(res.data.downloadUrl);
+      .then(async (res) => {
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        showLoader();
+        hideLoader();
       }));
 }
 
@@ -66,7 +76,6 @@ async function fetchDocument(fileName: string) {
  * @param url ลิงก์ดาวน์โหลดไฟล์
  */
 async function downloadFile(url: string) {
-  showLoader();
   await axios
     .get(url, {
       responseType: "blob",
@@ -81,84 +90,28 @@ async function downloadFile(url: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(fileName.value[selectedItem.value - 1]);
+  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
 });
 </script>
 
 <template>
   <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>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 2 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(2)"
-      class="cursor-pointer"
-    >
-      <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 3 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(3)"
-      class="cursor-pointer"
-    >
-      <q-item-section
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        (เอกสารแบบ ก)</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 4 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(4)"
-      class="cursor-pointer"
-    >
-      <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 5 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(5)"
-      class="cursor-pointer"
-    >
-      <q-item-section>
-        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 6 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(6)"
-      class="cursor-pointer"
-    >
-      <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
+      <q-item-section>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index d4ed7b9..839f63b 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -1,7 +1,215 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+
+const $q = useQuasar();
+const route = useRoute();
+const store = useEvaluateStore();
+const { showLoader, hideLoader, messageError, success } = useCounterMixin();
+
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+]);
+
+const evaluateId = ref<string>(route.params.id.toString());
 const status = ref<string>("WAIT_CHECK_DOC_V1");
+
+const profile = ref<any>();
+const author = ref<string>("");
+const subject = ref<string>("");
+
+/**
+ * function
+ * @param id  evaluate ID
+ */
+async function fetchCheckSpec(id: string) {
+  await http
+    .get(config.API.evaluationReportCheckspecByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      profile.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function fecth รายชื่อผู้เซ็นเอกสาร
+ * @param id evaluate ID
+ */
+function fetcheSigner(id: string) {
+  http
+    .get(config.API.evaluationSignerDoc1(id))
+    .then((res) => {
+      const data = res.data.result;
+      author.value = data.author;
+      subject.value = data.subject;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * funcion ดาวน์โหลดไฟล์
+ * @param tp templatname
+ * @param templateName
+ * @param fileName ชือ่ไฟล์
+ */
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  showLoader();
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: profile.value,
+  };
+  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  hideLoader();
+}
+
+/**
+ * function fetch ลิงก์อัปโหลดไฟล์
+ * @param volume เล่ม
+ * @param id  evaluate ID
+ * @param type ประเภทไฟล์
+ * @param file ไฟล์
+ */
+async function fetchPathUpload(
+  volume: string,
+  id: string | undefined,
+  type: string,
+  file: any
+) {
+  const body = {
+    fileList: {
+      fileName: type,
+      metadata: {
+        subject: subject.value,
+        author: author.value,
+      },
+    },
+  };
+
+  if (id && file) {
+    showLoader();
+    await http
+      .post(config.API.loadPathDocument(volume, id), body)
+      .then(async (res) => {
+        const foundKey: string | undefined = Object.keys(res.data).find(
+          (key) =>
+            res.data[key]?.fileName !== undefined &&
+            res.data[key]?.fileName !== ""
+        );
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
+        await downloadFile(type);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
+ */
+async function uploadfile(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      success($q, "อัปโหลไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+async function downloadFile(fileName: string) {
+  await http
+    .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
+    .then((res) => {
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
+      }
+    });
+}
+
+/**lifecycle Hooks*/
+onMounted(async () => {
+  try {
+    showLoader();
+    await Promise.all([
+      fetcheSigner(evaluateId.value),
+      fetchCheckSpec(evaluateId.value),
+      formTemplates.value.forEach((e) => {
+        downloadFile(e.fileName);
+      }),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
+});
 </script>
 
 <template>
@@ -15,6 +223,91 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
       style="font-size: 16px"
     />
   </div>
+
+  <div class="row q-col-gutter-sm q-pa-sm">
+    <div class="col-6" v-for="(item, index) in formTemplates" :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" v-if="store.currentStep === 4">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <q-file
+                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:any) => !!val || 'กรุณาเลือกไฟล์']
+                    : []
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    :disable="!item.file"
+                    flat
+                    round
+                    dense
+                    color="primary"
+                    icon="mdi-upload"
+                    @click="
+                      fetchPathUpload(
+                        'เล่ม 1',
+                        evaluateId,
+                        item.fileName,
+                        item.file
+                      )
+                    "
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index 7a37b25..450c22b 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -34,36 +34,25 @@ const fileEvaluation1 = ref<any>();
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [""],
   assignedPosition: "",
 });
-/** ref input*/
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
 
 const modalView = ref<boolean>(false);
 
 /** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
 function updateInput(value: any) {
   const ref = {
-    commanderFullnameRef: commanderFullnameRef.value,
-    commanderPositionRef: commanderPositionRef.value,
-    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-    commanderAbovePositionRef: commanderAbovePositionRef.value,
-    fileEvaluation1Ref: fileEvaluation1Ref.value,
     downloadFile: [downloadUrl.value],
-    performance: performanceRef.value,
-    performanceOwner: performanceOwnerRef.value,
-    assignedPosition: assignedPositionRef.value,
   };
   emit("update:form", value, ref);
 }
@@ -146,17 +135,25 @@ async function fetcheSigner(id: string) {
       const data = res.data.result;
       formCommand.commanderFullname = data.commanderFullnameDoc2;
       formCommand.commanderPosition = data.commanderPositionDoc2;
+      formCommand.commanderPositionOld = data.commanderPositionOldDoc2;
+      formCommand.commanderOrg = data.commanderOrgDoc2;
+      formCommand.commanderOrgOld = data.commanderOrgOldDoc2;
       formCommand.commanderAboveFullname = data.commanderAboveFullnameDoc2;
       formCommand.commanderAbovePosition = data.commanderAbovePositionDoc2;
+      formCommand.commanderAbovePositionOld =
+        data.commanderAbovePositionOldDoc2;
+      formCommand.commanderAboveOrgOld = data.commanderAboveOrgOldDoc2;
+      formCommand.commanderAboveOrg = data.commanderAboveOrgDoc2;
       formCommand.author = data.authorDoc2;
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
 
-      store.statusUpload6 = data.commanderFullnameDoc2 === null ? false : true;
+      store.statusUpload6 = data.isUpdated;
     })
-    .catch(() => {
-      store.statusUpload6 = false;
-      getCommander();
+    .catch((err) => {
+      messageError($q, err);
+      // store.statusUpload6 = false;
+      // getCommander();
     })
     .finally(() => {
       hideLoader();
@@ -181,28 +178,17 @@ async function fetchCheckDate() {
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
-function checkDoc() {
-  // showLoader();
-  http
+async function checkDoc() {
+  await http
     .get(
       config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
     })
-    .catch(() => {})
     .finally(() => {
-      // hideLoader();
       const ref = {
-        commanderFullnameRef: commanderFullnameRef.value,
-        commanderPositionRef: commanderPositionRef.value,
-        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-        commanderAbovePositionRef: commanderAbovePositionRef.value,
-        fileEvaluation1Ref: fileEvaluation1Ref.value,
         downloadFile: [downloadUrl.value],
-        performance: performanceRef.value,
-        performanceOwner: performanceOwnerRef.value,
-        assignedPosition: assignedPositionRef.value,
       };
 
       emit("update:form", formCommand, ref);
@@ -221,8 +207,15 @@ function getCommander() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
+}
+
+function onAddSubject() {
+  formCommand.subject.push("");
+}
+
+function onDeleteSubject(index: number) {
+  formCommand.subject.splice(index, 1);
 }
 
 watch(
@@ -273,27 +266,12 @@ onMounted(async () => {
         <q-card bordered class="shadow-0" 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="col-12">
-            <div class="row q-col-gutter-sm col-12">
-              <div class="col-xs-12 col-sm-12 row">
-                <div class="row col-12 q-col-gutter-sm q-pa-sm">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-sm">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-6">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="performanceRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อผลงาน"
-                    v-model="formCommand.subject"
-                    @update:model-value="updateInput(formCommand)"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                    hide-bottom-space
-                    lazy-rules
-                  />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="performanceOwnerRef"
-                    class="col-xs-12 col-sm-6"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     dense
                     outlined
                     v-model="formCommand.author"
@@ -303,9 +281,10 @@ onMounted(async () => {
                     :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                     lazy-rules
                   />
+                </div>
+                <div class="col-6">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="assignedPositionRef"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     class="col-xs-12 col-sm-6"
                     dense
                     outlined
@@ -314,12 +293,62 @@ onMounted(async () => {
                     label="ตำแหน่งที่ได้รับ"
                     hide-bottom-space
                     :rules="[
-                      (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
-                    ]"
+                    (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
+                  ]"
                     lazy-rules
                   />
                 </div>
               </div>
+
+              <div
+                class="col-12"
+                v-if="store.currentStep === 6 && !store.statusUpload6"
+              >
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="add"
+                  @click="onAddSubject"
+                >
+                  <q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <div
+                class="row col-12 q-col-gutter-sm"
+                v-for="(item, index) in formCommand.subject"
+                :key="index"
+              >
+                <div class="col-11">
+                  <q-input
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
+                    dense
+                    outlined
+                    label="ชื่อผลงาน"
+                    v-model="formCommand.subject[index]"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                    hide-bottom-space
+                    lazy-rules
+                  />
+                </div>
+                <div
+                  class="row col-1 items-centet justify-center"
+                  v-if="index !== 0"
+                >
+                  <q-btn
+                    v-if="store.currentStep === 6 && !store.statusUpload6"
+                    flat
+                    round
+                    color="red"
+                    icon="delete"
+                    @click="onDeleteSubject(index)"
+                  >
+                    <q-tooltip>ลบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
             </div>
           </div>
         </q-card>
@@ -340,8 +369,7 @@ onMounted(async () => {
                 </div>
                 <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderFullnameRef"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
@@ -352,19 +380,68 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                   />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderPositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.commanderPosition"
-                    @update:model-value="updateInput(formCommand)"
-                    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="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderPosition"
+                        @update:model-value="updateInput(formCommand)"
+                        label="ตำแหน่ง"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderPositionOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderOrg"
+                        @update:model-value="updateInput(formCommand)"
+                        label="สังกัด"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderOrgOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="สังกัดเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -376,8 +453,7 @@ onMounted(async () => {
                 </div>
                 <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderAboveFullnameRef"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
@@ -388,19 +464,67 @@ onMounted(async () => {
                     @update:model-value="updateInput(formCommand)"
                     hide-bottom-space
                   />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderAbovePositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.commanderAbovePosition"
-                    label="ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    lazy-rules
-                    @update:model-value="updateInput(formCommand)"
-                    hide-bottom-space
-                  />
+
+                  <div class="col-12">
+                    <div class="row col-12 q-col-gutter-sm">
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAbovePosition"
+                        label="ตำแหน่ง"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        @update:model-value="updateInput(formCommand)"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAbovePositionOld"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAboveOrg"
+                        label="สังกัด"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAboveOrgOld"
+                        label="สังกัดเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -434,7 +558,6 @@ onMounted(async () => {
                 <div class="col-12">
                   <q-file
                     :disable="!store.statusUpload6"
-                    ref="fileEvaluation1Ref"
                     v-model="fileEvaluation1"
                     class="col-12"
                     outlined
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index 6afb48c..8586ce3 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -35,11 +35,14 @@ async function fetchDocument() {
           "1-เอกสารเล่ม 2"
         )
       )
-      .then((res) => {
-        downloadFile(res.data.downloadUrl);
+      .then(async (res) => {
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       }));
 }
 
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index cd8dcf2..93794c9 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -69,20 +69,20 @@ async function fetchPathUpload(
     showLoader();
     await http
       .post(config.API.loadPathDocument(volume, id), body)
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: string | undefined = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
-        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
-    // .finally(() => {
-    // });
   }
 }
 
@@ -103,16 +103,12 @@ async function uploadfile(uploadUrl: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 function checkDoc() {
-  showLoader();
   http
     .get(
       config.API.loadFileDocument(
@@ -123,12 +119,6 @@ function checkDoc() {
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      // messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -141,7 +131,6 @@ const assignedPosition = ref<string>("");
  * @param id ประเมิน
  */
 async function fetcheSigner(id: string) {
-  showLoader();
   await http
     .get(config.API.evaluationSignerDoc2(id))
     .then((res) => {
@@ -151,16 +140,21 @@ async function fetcheSigner(id: string) {
       assignedPosition.value = data.assignedPosition;
       evaluationResult.value = data.evaluationResult;
     })
-    .catch(() => {})
-    .finally(() => {
-      hideLoader();
+    .catch((err) => {
+      messageError($q, err);
     });
 }
 
 /** lifecycleHook*/
 onMounted(async () => {
-  await checkDoc();
-  await fetcheSigner(evaluateId.value);
+  try {
+    showLoader();
+    await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -178,7 +172,7 @@ onMounted(async () => {
         />
       </div>
 
-      <div class="col-12">
+      <div class="col-12" v-if="(store.currentStep !== 8 && downloadUrl) ||  store.currentStep == 8 ">
         <q-card class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
@@ -224,7 +218,7 @@ onMounted(async () => {
                 </div>
               </div>
               <div v-else>
-                <div class="row col-12 q-px-sm q-py-xs items-center">
+                <div class="row col-12 q-px-sm q-py-xs items-center"> 
                   <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
                   <q-space />
                   <q-btn
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 8cfc4c8..28eeb77 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -69,11 +69,10 @@ const formDetail = reactive<any>({
 
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
-  showLoader();
   await http
     .get(config.API.positionBykeycloak())
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       formDetail.root = data.root;
       formDetail.rootId = data.rootId;
       formDetail.userId = data.id;
@@ -89,58 +88,62 @@ async function fetchDetail() {
       formDetail.birthDate = data.birthDate;
       // formDetail.govAge = data.govAge; // ยังไม่มี
       formDetail.salary = data.salary;
-
-      http.get(config.API.dataUserEducations).then((res) => {
-        formDetail.educations = res.data.result;
-      });
-
-      http.get(config.API.dataUserCertificate("certificate")).then((res) => {
-        formDetail.certificates = res.data.result.map(
-          (e: CertificatesForm) => ({
-            certificateNo: e.certificateNo,
-            certificateType: e.certificateType,
-            expireDate: e.expireDate,
-            issueDate: e.issueDate,
-            issuer: e.issuer,
-          })
-        );
-      });
-
-      http.get(config.API.dataUserSalary).then((res) => {
-        formDetail.salaries = res.data.result;
-      });
-
-      http.get(config.API.dataUserCertificate("training")).then((res) => {
-        formDetail.trainings = res.data.result.map((e: any) => ({
-          dateOrder: e.dateOrder,
-          department: e.department,
-          duration: e.duration,
-          endDate: e.endDate,
-          name: e.name,
-          numberOrder: e.numberOrder,
-          place: e.place,
-          startDate: e.startDate,
-          topic: e.topic,
-          yearly: e.yearly,
-        }));
-      });
-
-      http.get(config.API.dataUserAssessments).then((res) => {
-        formDetail.assessments = res.data.result;
-      });
+      await fetchDataAllDetail();
 
       emit("update:formDeital", formDetail);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
     });
 }
 
+async function fetchDataAllDetail() {
+  // ดึงข้อมูลประวัติการศึกษา
+  http.get(config.API.dataUserEducations).then((res) => {
+    formDetail.educations = res.data.result;
+  });
+
+  // ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
+  http.get(config.API.dataUserCertificate("certificate")).then((res) => {
+    formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
+      certificateNo: e.certificateNo,
+      certificateType: e.certificateType,
+      expireDate: e.expireDate,
+      issueDate: e.issueDate,
+      issuer: e.issuer,
+    }));
+  });
+
+  // ดึงข้อมูลประวัติการรับราชการ
+  http.get(config.API.dataUserSalary).then((res) => {
+    formDetail.salaries = res.data.result;
+  });
+
+  // ดึงข้อมูลประวัติการฝึกอบรมดูงาน
+  http.get(config.API.dataUserCertificate("training")).then((res) => {
+    formDetail.trainings = res.data.result.map((e: any) => ({
+      dateOrder: e.dateOrder,
+      department: e.department,
+      duration: e.duration,
+      endDate: e.endDate,
+      name: e.name,
+      numberOrder: e.numberOrder,
+      place: e.place,
+      startDate: e.startDate,
+      topic: e.topic,
+      yearly: e.yearly,
+    }));
+  });
+
+  http.get(config.API.dataUserPerformance).then((res) => {
+    formDetail.assessments = res.data.result;
+  });
+
+  http.get(config.API.dataUserPortfolio).then((res) => {
+    formDetail.experience = res.data.result;
+  });
+}
+
 /**
  *  function fetchData ตรวจสอบคุณสมบัติ
  * @param id ประเมิน
@@ -178,7 +181,8 @@ async function fetchCheckSpec(data: any) {
     topic: e.topic,
     yearly: e.yearly,
   }));
-  formDetail.assessments = data.assessments;
+  formDetail.assessments = data.performances;
+  formDetail.experience = data.portfolios;
 }
 
 /**
@@ -195,7 +199,6 @@ function formattedNumber(x: number) {
 
 /** get data */
 function getData() {
-  showLoader();
   http
     .get(config.API.dataUserGovernment)
     .then(async (res) => {
@@ -207,28 +210,30 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
     });
 }
 
 onMounted(async () => {
-  const promises = [];
+  try {
+    showLoader();
+    const promises = [];
 
-  if (route.name === "evaluate-add") {
-    promises.push(fetchDetail());
+    if (route.name === "evaluate-add") {
+      promises.push(fetchDetail());
+    }
+
+    if (props.data) {
+      promises.push(fetchCheckSpec(props.data));
+    }
+
+    promises.push(getData());
+
+    await Promise.all(promises);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
   }
-
-  if (props.data) {
-    promises.push(fetchCheckSpec(props.data));
-  }
-
-  promises.push(getData());
-
-  await Promise.all(promises);
 });
 </script>
 
@@ -537,7 +542,6 @@ onMounted(async () => {
               </q-tr>
             </template>
           </d-table>
-          <!-- <TableData :columns="columnSalaries" :row="formDetail.salaries" /> -->
         </div>
       </q-card>
 
@@ -561,7 +565,7 @@ onMounted(async () => {
         <TableData
           class="col-12"
           :columns="columnExperience"
-          :row="formDetail.trainings"
+          :row="formDetail.experience"
         />
       </q-card>
 
@@ -570,13 +574,12 @@ onMounted(async () => {
           <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">
+        <div class="col-10">
           <TableData
             :columns="columnAssessments"
             :row="formDetail.assessments"
           />
-        </div> -->
+        </div>
       </q-card>
     </div>
   </q-card>
diff --git a/src/modules/06_evaluate/interface/evalute.ts b/src/modules/06_evaluate/interface/evalute.ts
index 593a27b..1db407c 100644
--- a/src/modules/06_evaluate/interface/evalute.ts
+++ b/src/modules/06_evaluate/interface/evalute.ts
@@ -38,10 +38,16 @@ interface FormSpec {
 interface FormCommand {
   commanderFullname: string;
   commanderPosition: string;
+  commanderPositionOld: string;
+  commanderOrgOld: string;
+  commanderOrg: string;
   commanderAboveFullname: string;
   commanderAbovePosition: string;
+  commanderAbovePositionOld: string;
+  commanderAboveOrgOld: string;
+  commanderAboveOrg: string;
   author: string;
-  subject: string;
+  subject: string[];
   assignedPosition: string;
 }
 
@@ -134,5 +140,5 @@ export type {
   ListMenu,
   FormRef,
   FormData,
-  FormCommandSe
+  FormCommandSe,
 };
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index 02aa6df..0ae6bad 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -360,94 +360,40 @@ 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" }),
-    },
-    {
-      name: "name",
-      align: "left",
-      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" }),
     },
   ]);