From af3deafa03c12ba473538f4c7e5f3dca6d3b0c6c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 15 Oct 2024 16:16:59 +0700
Subject: [PATCH] ui ==> Workflow

---
 src/components/CardProfile.vue                |   6 +-
 src/components/Workflow/DialogApprove.vue     |  75 +-
 .../Workflow/DialogSelectPerson.vue           |  65 +-
 src/components/Workflow/Main.vue              | 155 +++-
 .../components/Transfer/TransferDetail.vue    | 693 +++++++++---------
 .../05_placement/views/02_transferMain.vue    |   2 +-
 6 files changed, 626 insertions(+), 370 deletions(-)

diff --git a/src/components/CardProfile.vue b/src/components/CardProfile.vue
index f798c1628..cefd8967a 100644
--- a/src/components/CardProfile.vue
+++ b/src/components/CardProfile.vue
@@ -5,6 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
+import type { PropType } from "vue";
 import type { FormProfile } from "@/interface/main";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
@@ -15,12 +16,11 @@ import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const $q = useQuasar();
-const { messageError, findOrgNameOld, findOrgName } = useCounterMixin();
+const { findOrgNameOld, findOrgName } = useCounterMixin();
 
 /** propsDataProfile*/
 const props = defineProps({
-  data: { type: Object, required: true },
+  data: { type: Object as PropType<DataProfile>, required: true },
   type: { type: String, default: "" },
 });
 
diff --git a/src/components/Workflow/DialogApprove.vue b/src/components/Workflow/DialogApprove.vue
index 5c3efa950..dc3fca261 100644
--- a/src/components/Workflow/DialogApprove.vue
+++ b/src/components/Workflow/DialogApprove.vue
@@ -1,5 +1,76 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(false);
+const isComment = ref<boolean>(false);
+
+function onSubmit() {}
+
+function onCloseModal() {
+  modal.value = false;
+}
+</script>
 
 <template>
-  <div></div>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 700px">
+      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`รับทราบ/พิจารณา/แสดงความเห็น`"
+          :close="onCloseModal"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="q-gutter-xs q-pt-sm">
+            <div>
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isAcknowledge"
+                label="ให้เลือกรับทราบ"
+                @update:model-value="(isConsider = false), (isComment = false)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isConsider"
+                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isComment"
+                label="ให้แสดงความเห็นในเอกสาร"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            label="บันทึกข้อมูล"
+            color="public"
+            type="submit"
+            :disable="!isAcknowledge && !isConsider && !isComment"
+          >
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index 28cbca153..d392c6215 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -12,11 +12,9 @@ const $q = useQuasar();
 const { dialogConfirm } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const operator = defineModel<string>("operator", {
-  default: "officer",
-});
 
 /** table*/
+const selected = ref<any[]>([]);
 const rows = ref<any[]>([
   {
     fullName: "นายศรัณย์ ศิลาดี",
@@ -25,7 +23,6 @@ const rows = ref<any[]>([
     organization: "",
   },
 ]);
-const selected = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -65,25 +62,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(false);
+const isComment = ref<boolean>(false);
+
 function fetchLists() {}
 
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
-function convertLabelBtn(name: string) {
-  switch (name) {
-    case "officer":
-      return "การเจ้าหน้าที่";
-    case "personnelOfficer":
-      return "สำนักงานการเจ้าหน้าที่";
-    case "commander":
-      return "ผู้บังคับบัญชา";
-    case "authority":
-      return "ผู้มีอำนาจ";
-  }
-}
-
 function onCloseModal() {
   modal.value = false;
   selected.value = [];
@@ -115,7 +103,6 @@ watch(modal, (val) => {
             :paging="true"
             dense
             :rows-per-page-options="[10, 25, 50, 100]"
-            class="tableTb"
             selection="single"
             v-model:selected="selected"
           >
@@ -152,19 +139,51 @@ watch(modal, (val) => {
                 </q-td>
               </q-tr>
             </template>
-          </d-table></q-card-section
-        >
+          </d-table>
+          <div class="q-gutter-xs q-pt-sm">
+            <div>
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isAcknowledge"
+                label="ให้เลือกรับทราบ"
+                @update:model-value="(isConsider = false), (isComment = false)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isConsider"
+                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isComment"
+                label="ให้แสดงความเห็นในเอกสาร"
+              />
+            </div>
+          </div>
+        </q-card-section>
 
         <q-separator />
 
         <q-card-actions align="right">
           <q-btn
-            :label="convertLabelBtn(operator)"
+            label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
             color="public"
             type="submit"
-            :disable="selected.length === 0"
+            :disable="
+              selected.length === 0 ||
+              (!isAcknowledge && !isConsider && !isComment)
+            "
           >
-            <q-tooltip>{{ convertLabelBtn(operator) }}</q-tooltip>
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 5c3efa950..172a14f94 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -1,5 +1,156 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
+import DialogApprove from "@/components/Workflow/DialogApprove.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const { id, sysName } = defineProps({
+  id: { type: String, require: true },
+  sysName: { type: String, require: true },
+});
+
+const state = ref<number>(1);
+const isChangeState = ref<boolean>(false);
+const isOperate = ref<boolean>(false);
+
+const rowsOperate = ref<any[]>([
+  {
+    fullName: "ชื่อนาม - สกุล",
+    comment: "ความเห็น",
+    position: " บริหาร - ต้น ",
+    status: "อนุมัติ",
+  },
+]);
+const modalSelectPerson = ref<boolean>(false);
+
+function fetchData() {
+  console.log(id, sysName);
+
+  const data = {
+    stateNo: 1,
+    step: 1,
+    can_view: true,
+    can_update: true,
+    can_operate: true,
+    can_change_state: true,
+    can_delete: false,
+    can_cancel: false,
+  };
+
+  state.value = data.stateNo;
+  isChangeState.value = data.can_change_state;
+  isOperate.value = data.can_operate;
+}
+
+function onConfirmDraft() {
+  dialogConfirm($q, () => {
+    state.value++;
+  });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
 
 <template>
-  <div></div>
+  <q-card bordered class="row col-12">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+      <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
+      <q-space />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-card-section>
+      <div class="q-px-lg q-py-md">
+        <q-timeline color="primary">
+          <!-- Draft -->
+          <q-timeline-entry
+            title="Draft"
+            :icon="
+              state === 1 ? 'mdi-pencil' : state > 1 ? 'done' : 'mdi-numeric-1'
+            "
+          >
+            <div class="row q-col-gutter-sm" v-if="state === 1">
+              <q-btn
+                v-if="isChangeState"
+                @click.prevent="onConfirmDraft"
+                label="Next Step"
+                color="primary"
+              />
+            </div>
+          </q-timeline-entry>
+
+          <!-- Operate -->
+          <q-timeline-entry
+            title="Operate"
+            :icon="
+              state === 2 ? 'mdi-pencil' : state > 2 ? 'done' : 'mdi-numeric-2'
+            "
+            :color="state < 2 ? 'grey-4' : ''"
+          >
+            <div class="q-col-gutter-sm" v-if="state > 1">
+              <div>
+                <q-list bordered separator style="min-width: 20vw">
+                  <q-item v-for="(item, index) in rowsOperate" :key="index">
+                    <q-item-section>
+                      <q-item-label
+                        >{{ item.fullName }}
+                        {{ `(${item.position})` }}</q-item-label
+                      >
+                      <q-item-label caption lines="2">{{
+                        item.comment
+                      }}</q-item-label>
+                    </q-item-section>
+
+                    <q-item-section side top>
+                      <q-item-label class="text-green">
+                        {{ item.status }}</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+
+              <div v-if="isOperate && state === 2">
+                <q-btn
+                  @click.prevent="modalSelectPerson = true"
+                  label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
+                  color="public"
+                />
+              </div>
+
+              <div v-if="isChangeState && state === 2">
+                <q-btn
+                  @click.prevent="onConfirmDraft"
+                  label="Next Step"
+                  color="primary"
+                />
+              </div>
+            </div>
+          </q-timeline-entry>
+
+          <!-- Finish -->
+          <q-timeline-entry
+            title="Finish"
+            :icon="
+              state === 3 ? 'mdi-pencil' : state > 3 ? 'done' : 'mdi-numeric-4'
+            "
+            :color="state < 3 ? 'grey-4' : ''"
+          >
+            <div class="row q-col-gutter-sm"></div>
+          </q-timeline-entry>
+        </q-timeline>
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <DialogSelectPerson v-model:modal="modalSelectPerson" />
+
+  <!-- <DialogApprove v-model:modal="modalSelectPerson" /> -->
 </template>
diff --git a/src/modules/05_placement/components/Transfer/TransferDetail.vue b/src/modules/05_placement/components/Transfer/TransferDetail.vue
index 4785fc115..c9e4fdb21 100644
--- a/src/modules/05_placement/components/Transfer/TransferDetail.vue
+++ b/src/modules/05_placement/components/Transfer/TransferDetail.vue
@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
+import { tokenParsed } from "@/plugins/auth";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
@@ -17,8 +18,8 @@ import type {
   rowFile,
 } from "@/modules/05_placement/interface/response/Transfer";
 
-import CardProfile from "@/components/CardProfile.vue";
-import { tokenParsed } from "@/plugins/auth";
+import CardProfile from "@/components/CardProfile.vue"; //Card รายละเอียดบุคคล
+import WorkFlow from "@/components/Workflow/Main.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -309,209 +310,361 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/transfer`)"
-    />
-    รายละเอียดการขอโอนของ{{ responseData.fullname }}
-  </div>
-
-  <CardProfile :data="dataProfile as DataProfile" />
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
-      <q-space />
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
       <q-btn
-        v-if="!roleAdmin && responseData.status != 'APPROVE'"
-        outline
-        color="primary"
+        icon="mdi-arrow-left"
+        unelevated
+        round
         dense
-        icon-right="arrow_forward"
-        class="q-px-sm"
-        label="ส่งคำร้องไปยัง สกจ."
-        @click="confirmMessage"
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/placement/transfer`)"
       />
+      รายละเอียดการขอโอนของ{{ responseData.fullname }}
     </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organization }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
-            <div class="col-12 text-detail">
-              {{ responseData.reason }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn
-                type="a"
-                target="_blank"
-                :href="props.row.pathName"
-                flat
-                dense
-                round
-                color="red"
-                icon="picture_as_pdf"
-              >
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
+    <!-- รายละเอียดการ -->
+    <CardProfile :data="dataProfile as DataProfile" />
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">เอกสารดาวน์โหลด</div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rowsFileDownload"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn
-                flat
-                dense
-                round
-                color="red"
-                icon="picture_as_pdf"
-                @click="fileDownload(props.row.no, 'pdf', props.row.fileName)"
-              >
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-              <q-btn
-                flat
-                dense
-                round
-                color="blue"
-                icon="mdi-file-word"
-                @click="fileDownload(props.row.no, 'docx', props.row.fileName)"
-              >
-                <q-tooltip>ไฟล์ WORD</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <q-form
-      class="col-12"
-      greedy
-      @submit.prevent
-      @validation-success="onSubmit"
-    >
+    <!-- ข้อมูลการขอโอน -->
+    <q-card bordered class="row col-12">
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-        <div class="q-pl-sm text-weight-bold text-dark">
-          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-        </div>
+        <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
         <q-space />
-        <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
-            outline
-            color="primary"
-            dense
-            icon-right="mdi-file-edit-outline"
-            class="q-px-sm"
-            label="แก้ไข"
-            style="width: 80px"
-            @click="edit = !edit"
-            v-if="
-              !(
-                responseData.status == 'REPORT' || responseData.status == 'DONE'
-              ) && checkPermission($route)?.attrIsUpdate
-            "
-          />
-        </div>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-            type="submit"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="cancel()"
-          />
-        </div>
+        <q-btn
+          v-if="!roleAdmin && responseData.status != 'APPROVE'"
+          outline
+          color="primary"
+          dense
+          icon-right="arrow_forward"
+          class="q-px-sm"
+          label="ส่งคำร้องไปยัง สกจ."
+          @click="confirmMessage"
+        />
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row q-pa-md">
-        <div class="col-12">
-          <div class="row bg-white q-col-gutter-y-md">
-            <div class="col-xs-12 row items-center">
-              <div class="col-12">
-                <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
+              <div class="col-12 text-detail">
+                {{ responseData.organization }}
               </div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
+              <div class="col-12 text-detail">
+                {{ responseData.reason }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <!-- เอกสารเพิ่มเติม -->
+    <q-card bordered class="row col-12">
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          row-key="fileName"
+          hide-header
+          hide-bottom
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fileName" :props="props">
+                {{ props.row.fileName }}
+              </q-td>
+              <q-td key="btnMicrosoft" :props="props">
+                <q-btn
+                  type="a"
+                  target="_blank"
+                  :href="props.row.pathName"
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="picture_as_pdf"
+                >
+                  <q-tooltip>ไฟล์ PDF</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
+
+    <!-- เอกสารดาวน์โหลด -->
+    <q-card bordered class="row col-12">
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-dark">เอกสารดาวน์โหลด</div>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12">
+        <d-table
+          :rows="rowsFileDownload"
+          :columns="columns"
+          row-key="fileName"
+          hide-header
+          hide-bottom
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fileName" :props="props">
+                {{ props.row.fileName }}
+              </q-td>
+              <q-td key="btnMicrosoft" :props="props">
+                <q-btn
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="picture_as_pdf"
+                  @click="fileDownload(props.row.no, 'pdf', props.row.fileName)"
+                >
+                  <q-tooltip>ไฟล์ PDF</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  dense
+                  round
+                  color="blue"
+                  icon="mdi-file-word"
+                  @click="
+                    fileDownload(props.row.no, 'docx', props.row.fileName)
+                  "
+                >
+                  <q-tooltip>ไฟล์ WORD</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
+
+    <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
+    <q-card bordered class="row col-12">
+      <q-form
+        class="col-12"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
+        <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+          <div class="q-pl-sm text-weight-bold text-dark">
+            แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+          </div>
+          <q-space />
+          <div class="q-gutter-sm" v-if="!edit">
+            <q-btn
+              outline
+              color="primary"
+              dense
+              icon-right="mdi-file-edit-outline"
+              class="q-px-sm"
+              label="แก้ไข"
+              style="width: 80px"
+              @click="edit = !edit"
+              v-if="
+                !(
+                  responseData.status == 'REPORT' ||
+                  responseData.status == 'DONE'
+                ) && checkPermission($route)?.attrIsUpdate
+              "
+            />
+          </div>
+          <div class="q-gutter-sm" v-else>
+            <q-btn
+              outline
+              color="public"
+              dense
+              class="q-px-sm"
+              label="บันทึก"
+              style="width: 80px"
+              type="submit"
+            />
+            <q-btn
+              outline
+              color="red"
+              dense
+              class="q-px-sm"
+              label="ยกเลิก"
+              style="width: 80px"
+              @click="cancel()"
+            />
+          </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-pa-md">
+          <div class="col-12">
+            <div class="row bg-white q-col-gutter-y-md">
+              <div class="col-xs-12 row items-center">
+                <div class="col-12">
+                  <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="organizationPositionOld"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                    hide-bottom-space
+                    :label="`${'ตำแหน่ง/สังกัด'}`"
+                    type="textarea"
+                  />
+                </div>
+              </div>
+              <div class="col-12">
+                <div class="row q-col-gutter-x-xs">
+                  <div class="col-xs-6 col-sm-3">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionTypeOld"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'ประเภทตำแหน่ง'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-3">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionLevelOld"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'ระดับตำแหน่ง'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-3">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="posNo"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-3">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      v-model="salary"
+                      dense
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      hide-bottom-space
+                      :label="`${'เงินเดือน'}`"
+                      :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                      lazy-rules
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12"><q-separator /></div>
+
+              <div class="col-12">
+                <div class="row q-col-gutter-x-xs">
+                  <div class="col-xs-6 col-sm-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="organization"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                      hide-bottom-space
+                      :label="`${'โอนไปสังกัด'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          :borderless="!edit"
+                          :readonly="!edit"
+                          :model-value="date !== null ? date2Thai(date) : null"
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                          hide-bottom-space
+                          :label="`${'ตั้งแต่วัน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </div>
+
               <div class="col-12">
                 <q-input
                   :class="getClass(edit)"
@@ -520,159 +673,21 @@ onMounted(async () => {
                   lazy-rules
                   :readonly="!edit"
                   :borderless="!edit"
-                  v-model="organizationPositionOld"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  v-model="reason"
                   hide-bottom-space
-                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  :label="`${'หมายเหตุ '}`"
                   type="textarea"
                 />
               </div>
             </div>
-            <div class="col-12">
-              <div class="row q-col-gutter-x-xs">
-                <div class="col-xs-6 col-sm-3">
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    v-model="positionTypeOld"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                    hide-bottom-space
-                    :label="`${'ประเภทตำแหน่ง'}`"
-                  />
-                </div>
-                <div class="col-xs-6 col-sm-3">
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    v-model="positionLevelOld"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                    hide-bottom-space
-                    :label="`${'ระดับตำแหน่ง'}`"
-                  />
-                </div>
-                <div class="col-xs-6 col-sm-3">
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    v-model="posNo"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                    hide-bottom-space
-                    :label="`${'เลขที่'}`"
-                  />
-                </div>
-                <div class="col-xs-6 col-sm-3">
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    v-model="salary"
-                    dense
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    hide-bottom-space
-                    :label="`${'เงินเดือน'}`"
-                    :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    lazy-rules
-                    mask="###,###,###,###"
-                    reverse-fill-mask
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div class="col-12"><q-separator /></div>
-
-            <div class="col-12">
-              <div class="row q-col-gutter-x-xs">
-                <div class="col-xs-6 col-sm-6">
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    v-model="organization"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                    hide-bottom-space
-                    :label="`${'โอนไปสังกัด'}`"
-                  />
-                </div>
-                <div class="col-xs-6 col-sm-6">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    :readonly="!edit"
-                    v-model="date"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        :borderless="!edit"
-                        :readonly="!edit"
-                        :model-value="date !== null ? date2Thai(date) : null"
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                        hide-bottom-space
-                        :label="`${'ตั้งแต่วัน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            :style="
-                              edit
-                                ? 'color: var(--q-primary)'
-                                : 'color: var(--q-grey)'
-                            "
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reason"
-                hide-bottom-space
-                :label="`${'หมายเหตุ '}`"
-                type="textarea"
-              />
-            </div>
           </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+      </q-form>
+    </q-card>
+
+    <!-- Workflow -->
+    <WorkFlow :id="transferId" :sys-name="'transfer'" />
+  </div>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/views/02_transferMain.vue b/src/modules/05_placement/views/02_transferMain.vue
index ee05b392f..6c6020f97 100644
--- a/src/modules/05_placement/views/02_transferMain.vue
+++ b/src/modules/05_placement/views/02_transferMain.vue
@@ -186,10 +186,10 @@ onMounted(async () => {
   await fetchData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">