From 70fb166d8911a56aa1da46f285e997140efa013e Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 23 Jun 2023 12:10:59 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableView.vue                  |   6 +
 .../views/01_compete/DetailEx.vue             | 650 ++++++++----------
 .../OrderReplace/MainOrderReplace.vue         |   2 +-
 .../OrderReplace/detailOrderReplace.vue       |  95 +++
 .../components/OrderReplace/step/step01.vue   | 492 +++++++++++++
 .../components/OrderReplace/step/step02.vue   | 227 ++++++
 .../components/OrderReplace/step/step03.vue   |  40 ++
 .../components/OrderReplace/step/step04.vue   |  40 ++
 .../components/pass/TableView.vue             | 155 ++++-
 src/modules/05_placement/router.ts            |  16 +-
 10 files changed, 1338 insertions(+), 385 deletions(-)
 create mode 100644 src/modules/05_placement/components/OrderReplace/detailOrderReplace.vue
 create mode 100644 src/modules/05_placement/components/OrderReplace/step/step01.vue
 create mode 100644 src/modules/05_placement/components/OrderReplace/step/step02.vue
 create mode 100644 src/modules/05_placement/components/OrderReplace/step/step03.vue
 create mode 100644 src/modules/05_placement/components/OrderReplace/step/step04.vue

diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 1c1c98c9a..d8d0b5a5e 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -160,6 +160,7 @@
         style="min-width: 150px"
         class="gt-xs q-ml-sm"
       /> -->
+
       <q-select
         dense
         outlined
@@ -173,6 +174,7 @@
         @update:model-value="updateVisibleFilter"
         v-if="optionsFilter != undefined && optionsFilter.length > 0"
       />
+
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
@@ -384,6 +386,10 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  refreshData: {
+    type: Boolean,
+    defualt: false,
+  },
   nextPageVisible: {
     type: Boolean,
     defualt: false,
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 45db235f0..06fb879e3 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -1,304 +1,237 @@
 <!-- page:detail page สรรหา -->
 <template>
-	<div class="toptitle text-dark col-12 row items-center">
-		<q-btn
-			icon="mdi-arrow-left"
-			unelevated
-			round
-			dense
-			flat
-			color="primary"
-			class="q-mr-sm"
-			@click="router.go(-1)"
-		/>
-		รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
-	</div>
-	<q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
-		<div class="row q-col-gutter-md col-12">
-			<div class="col-xs-12 col-sm-12 col-md-6">
-				<q-card bordered flat class="col-12 q-pa-md">
-					<div class="col-12 q-col-gutter-sm row items-center">
-						<div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
-						<div
-							class="col-6 text-grey-7"
-							v-if="profile_id !== null"
-						>
-							เลขประจำตัวประชาชน
-						</div>
-						<div
-							class="col-6 text-black"
-							v-if="profile_id !== null"
-						>
-							{{ profile_id }}
-						</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
+  </div>
+  <q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-md col-12">
+      <div class="col-xs-12 col-sm-12 col-md-6">
+        <q-card bordered flat class="col-12 q-pa-md">
+          <div class="col-12 q-col-gutter-sm row items-center">
+            <div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
+            <div class="col-6 text-grey-7" v-if="profile_id !== null">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-6 text-black" v-if="profile_id !== null">
+              {{ profile_id }}
+            </div>
 
-						<div class="col-6 text-grey-7" v-if="prefix !== null">
-							คำนำหน้านาม
-						</div>
-						<div class="col-6 text-black" v-if="prefix !== null">
-							{{ prefix }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="prefix !== null">
+              คำนำหน้านาม
+            </div>
+            <div class="col-6 text-black" v-if="prefix !== null">
+              {{ prefix }}
+            </div>
 
-						<div class="col-6 text-grey-7" v-if="fullname !== null">
-							ชื่อ-นามสกุล
-						</div>
-						<div class="col-6 text-black" v-if="fullname !== null">
-							{{ fullname }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="fullname !== null">
+              ชื่อ-นามสกุล
+            </div>
+            <div class="col-6 text-black" v-if="fullname !== null">
+              {{ fullname }}
+            </div>
 
-						<div
-							class="col-6 text-grey-7"
-							v-if="birthdate !== null"
-						>
-							วัน/เดือน/ปี เกิด
-						</div>
-						<div class="col-6 text-black" v-if="birthdate !== null">
-							{{ birthdate }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="birthdate !== null">
+              วัน/เดือน/ปี เกิด
+            </div>
+            <div class="col-6 text-black" v-if="birthdate !== null">
+              {{ birthdate }}
+            </div>
 
-						<div class="col-6 text-grey-7" v-if="gender !== null">
-							เพศ
-						</div>
-						<div class="col-6 text-black" v-if="gender !== null">
-							{{ gender }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="gender !== null">เพศ</div>
+            <div class="col-6 text-black" v-if="gender !== null">
+              {{ gender }}
+            </div>
 
-						<div
-							class="col-6 text-grey-7"
-							v-if="position_name !== null"
-						>
-							ตำแหน่งที่สมัคร
-						</div>
-						<div
-							class="col-6 text-black"
-							v-if="position_name !== null"
-						>
-							{{ position_name }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="position_name !== null">
+              ตำแหน่งที่สมัคร
+            </div>
+            <div class="col-6 text-black" v-if="position_name !== null">
+              {{ position_name }}
+            </div>
 
-						<div
-							class="col-6 text-grey-7"
-							v-if="university !== null"
-						>
-							สถานศึกษา
-						</div>
-						<div
-							class="col-6 text-black"
-							v-if="university !== null"
-						>
-							{{ university }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="university !== null">
+              สถานศึกษา
+            </div>
+            <div class="col-6 text-black" v-if="university !== null">
+              {{ university }}
+            </div>
 
-						<div class="col-6 text-grey-7" v-if="degree !== null">
-							วุฒิการศึกษา
-						</div>
-						<div class="col-6 text-black" v-if="degree !== null">
-							{{ degree }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="degree !== null">
+              วุฒิการศึกษา
+            </div>
+            <div class="col-6 text-black" v-if="degree !== null">
+              {{ degree }}
+            </div>
 
-						<div class="col-6 text-grey-7" v-if="major !== null">
-							สาขาวิชาเอก
-						</div>
-						<div class="col-6 text-black" v-if="major !== null">
-							{{ major }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="major !== null">
+              สาขาวิชาเอก
+            </div>
+            <div class="col-6 text-black" v-if="major !== null">
+              {{ major }}
+            </div>
 
-						<div class="col-6 text-grey-7" v-if="major !== null">
-							จำนวนครั้งที่สมัครสอบ
-						</div>
-						<div class="col-6 text-black" v-if="major !== null">
-							{{ examCount }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="major !== null">
+              จำนวนครั้งที่สมัครสอบ
+            </div>
+            <div class="col-6 text-black" v-if="major !== null">
+              {{ examCount }}
+            </div>
 
-						<div
-							class="col-6 text-grey-7"
-							v-if="cert_issuedate !== null"
-						>
-							ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
-						</div>
-						<div
-							class="col-6 text-black"
-							v-if="cert_issuedate !== null"
-						>
-							{{ cert_issuedate }}
-						</div>
+            <div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
+              ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
+            </div>
+            <div class="col-6 text-black" v-if="cert_issuedate !== null">
+              {{ cert_issuedate }}
+            </div>
 
-						<div
-							class="col-6 text-grey-7"
-							v-if="examAttribute !== null"
-						>
-							สถานะการคัดกรองคุณสมบัติ
-						</div>
-						<div
-							class="col-6 text-black"
-							v-if="examAttribute !== null"
-						>
-							{{ examAttribute }}
-						</div>
-					</div>
-				</q-card>
-			</div>
-			<div class="col-xs-12 col-sm-12 col-md-6">
-				<q-card
-					bordered
-					flat
-					class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
-				>
-					<div class="col-12 row q-col-gutter-sm">
-						<div class="col-12 text-weight-bold row items-center">
-							ผลการสอบ
-							<q-space />
-							<q-btn
-								color="primary"
-								flat
-								round
-								icon="mdi-download"
-								v-if="examResultinscore === 'ผ่าน'"
-							>
-								<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-								<q-menu>
-									<q-list style="min-width: 100px">
-										<q-item
-											clickable
-											v-close-popup
-											@click="downloadScore()"
-										>
-											<q-item-section class="text-primary"
-												>ดาวน์โหลดผลคะแนน</q-item-section
-											>
-										</q-item>
-										<q-item
-											clickable
-											v-close-popup
-											@click="downloadCertificate()"
-										>
-											<q-item-section class="text-blue"
-												>ดาวน์โหลดเอกสารรับรอง</q-item-section
-											>
-										</q-item>
-									</q-list>
-								</q-menu>
-							</q-btn>
-							<q-btn
-								v-else
-								color="blue"
-								flat
-								round
-								icon="mdi-download"
-								@click="downloadScore()"
-							>
-								<q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
-							</q-btn>
-						</div>
-						<div class="row items-center q-gutter-y-sm col-12">
-							<div
-								class="col-xs-4 col-sm-5 text-weight-medium text-grey-7"
-							>
-								ประเภท
-							</div>
-							<div
-								class="col-xs-3 col-sm-2 text-primary text-weight-bold"
-							>
-								คะแนนเต็ม
-							</div>
-							<div
-								class="col-xs-3 col-sm-2 text-primary text-weight-bold"
-							>
-								คะแนนที่ได้
-							</div>
-							<div
-								class="col-xs-2 col-sm-2 text-primary text-weight-bold"
-							></div>
+            <div class="col-6 text-grey-7" v-if="examAttribute !== null">
+              สถานะการคัดกรองคุณสมบัติ
+            </div>
+            <div class="col-6 text-black" v-if="examAttribute !== null">
+              {{ examAttribute }}
+            </div>
+          </div>
+        </q-card>
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-6">
+        <q-card
+          bordered
+          flat
+          class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
+        >
+          <div class="col-12 row q-col-gutter-sm">
+            <div class="col-12 text-weight-bold row items-center">
+              ผลการสอบ
+              <q-space />
+              <q-btn
+                color="primary"
+                flat
+                round
+                icon="mdi-download"
+                v-if="examResultinscore === 'ผ่าน'"
+              >
+                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable v-close-popup @click="downloadScore()">
+                      <q-item-section class="text-primary"
+                        >ดาวน์โหลดผลคะแนน</q-item-section
+                      >
+                    </q-item>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="downloadCertificate()"
+                    >
+                      <q-item-section class="text-blue"
+                        >ดาวน์โหลดเอกสารรับรอง</q-item-section
+                      >
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+              <q-btn
+                v-else
+                color="blue"
+                flat
+                round
+                icon="mdi-download"
+                @click="downloadScore()"
+              >
+                <q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="row items-center q-gutter-y-sm col-12">
+              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">
+                ประเภท
+              </div>
+              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
+                คะแนนเต็ม
+              </div>
+              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
+                คะแนนที่ได้
+              </div>
+              <div
+                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
+              ></div>
 
-							<div class="col-xs-4 col-sm-5 text-grey-7">
-								ภาค ก
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreAFull }}
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreA }}
-							</div>
-							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
-								คะแนน
-							</div>
+              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ก</div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreAFull }}
+              </div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreA }}
+              </div>
+              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-							<div class="col-xs-4 col-sm-5 text-grey-7">
-								ภาค ข
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreBFull }}
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreB }}
-							</div>
-							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
-								คะแนน
-							</div>
+              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreBFull }}
+              </div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreB }}
+              </div>
+              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-							<div class="col-xs-4 col-sm-5 text-grey-7">
-								ภาค ค
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreCFull }}
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreC }}
-							</div>
-							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
-								คะแนน
-							</div>
+              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreCFull }}
+              </div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreC }}
+              </div>
+              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-							<div class="col-xs-4 col-sm-5 text-grey-7">
-								รวมทั้งหมด
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreSumFull }}
-							</div>
-							<div class="col-xs-3 col-sm-2 q-pr-xs">
-								{{ scoreSum }}
-							</div>
-							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
-								คะแนน
-							</div>
+              <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreSumFull }}
+              </div>
+              <div class="col-xs-3 col-sm-2 q-pr-xs">
+                {{ scoreSum }}
+              </div>
+              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-							<div
-								class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm"
-							>
-								ผลการสอบ
-							</div>
-							<div
-								class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
-							>
-								<span
-									:class="
-										examResultinscore != 'ผ่าน'
-											? 'text-red'
-											: 'text-positive'
-									"
-									>{{ examResultinscore }}</span
-								>
-							</div>
+              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
+                ผลการสอบ
+              </div>
+              <div
+                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
+              >
+                <span
+                  :class="
+                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
+                  "
+                  >{{ examResultinscore }}</span
+                >
+              </div>
 
-							<div class="col-xs-6 col-sm-5 text-grey-7">
-								ลำดับที่สอบได้
-							</div>
-							<div class="col-xs-6 col-sm-7 q-pr-xs">
-								{{ number }}
-							</div>
+              <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
+              <div class="col-xs-6 col-sm-7 q-pr-xs">
+                {{ number }}
+              </div>
 
-							<div class="col-xs-6 col-sm-5 text-grey-7">
-								วันหมดอายุบัญชีสอบแข่งขัน
-							</div>
-							<div class="col-xs-6 col-sm-7 q-pr-xs">
-								{{ score_expired }}
-							</div>
-						</div>
-					</div>
-				</q-card>
-			</div>
-		</div>
-	</q-card>
+              <div class="col-xs-6 col-sm-5 text-grey-7">
+                วันหมดอายุบัญชีสอบแข่งขัน
+              </div>
+              <div class="col-xs-6 col-sm-7 q-pr-xs">
+                {{ score_expired }}
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
@@ -344,95 +277,92 @@ const importId = ref<string>(route.params.id as string); // Period Import Id
 const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
 
 onMounted(async () => {
-	await fetchData();
+  await fetchData();
 });
 
 const fetchData = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.getExamDetail(importId.value, examId.value))
-		.then((res) => {
-			let data = res.data.result;
+  loaderPage(true);
+  await http
+    .get(config.API.getExamDetail(importId.value, examId.value))
+    .then((res) => {
+      let data = res.data.result;
 
-			profile_id.value = data.profileID;
-			examID.value = data.examID;
-			prefix.value = data.prefix;
-			fullname.value = data.fullName;
-			birthdate.value = data.dateOfBirth;
-			gender.value = data.gender;
-			degree.value = data.degree;
-			major.value = data.major;
-			university.value = data.university;
-			position_name.value = data.positionName;
-			cert_issuedate.value = data.certificateIssueDate;
-			examAttribute.value = data.examAttribute;
-			number.value = data.number;
-			examCount.value = data.examCount;
-			score_expired.value = data.scoreExpire;
-			if (data.scoreResult != null) {
-				scoreAFull.value = data.scoreResult.scoreAFull;
-				scoreA.value = data.scoreResult.scoreA;
-				scoreBFull.value = data.scoreResult.scoreBFull;
-				scoreB.value = data.scoreResult.scoreB;
-				scoreCFull.value = data.scoreResult.scoreCFull;
-				scoreC.value = data.scoreResult.scoreC;
-				scoreSumFull.value = data.scoreResult.scoreSumFull;
-				scoreSum.value = data.scoreResult.scoreSum;
-				examResultinscore.value = data.scoreResult.examResult;
-			}
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+      profile_id.value = data.profileID;
+      examID.value = data.examID;
+      prefix.value = data.prefix;
+      fullname.value = data.fullName;
+      birthdate.value = data.dateOfBirth;
+      gender.value = data.gender;
+      degree.value = data.degree;
+      major.value = data.major;
+      university.value = data.university;
+      position_name.value = data.positionName;
+      cert_issuedate.value = data.certificateIssueDate;
+      examAttribute.value = data.examAttribute;
+      number.value = data.number;
+      examCount.value = data.examCount;
+      score_expired.value = data.scoreExpire;
+      if (data.scoreResult != null) {
+        scoreAFull.value = data.scoreResult.scoreAFull;
+        scoreA.value = data.scoreResult.scoreA;
+        scoreBFull.value = data.scoreResult.scoreBFull;
+        scoreB.value = data.scoreResult.scoreB;
+        scoreCFull.value = data.scoreResult.scoreCFull;
+        scoreC.value = data.scoreResult.scoreC;
+        scoreSumFull.value = data.scoreResult.scoreSumFull;
+        scoreSum.value = data.scoreResult.scoreSum;
+        examResultinscore.value = data.scoreResult.examResult;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const downloadScore = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.downloadScoreReport(importId.value, examId.value), {
-			responseType: "blob",
-		})
-		.then((res) => {
-			var a = document.createElement("a");
-			a.href = URL.createObjectURL(res.data);
-			a.download = `ผลคะแนน_${examId.value}.pdf`;
-			// start download
-			a.click();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  loaderPage(true);
+  await http
+    .get(config.API.downloadScoreReport(importId.value, examId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `ผลคะแนน_${examId.value}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const downloadCertificate = async () => {
-	loaderPage(true);
-	let type = degree.value.includes("บัณฑิต") ? 2 : 1;
-	await http
-		.get(
-			config.API.downloadExamReport(importId.value, examId.value, type),
-			{
-				responseType: "blob",
-			}
-		)
-		.then((res) => {
-			var a = document.createElement("a");
-			a.href = URL.createObjectURL(res.data);
-			a.download = `เอกสารรับรอง_${examId.value}.pdf`;
-			// start download
-			a.click();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  loaderPage(true);
+  let type = degree.value.includes("บัณฑิต") ? 2 : 1;
+  await http
+    .get(config.API.downloadExamReport(importId.value, examId.value, type), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 </script>
 
diff --git a/src/modules/05_placement/components/OrderReplace/MainOrderReplace.vue b/src/modules/05_placement/components/OrderReplace/MainOrderReplace.vue
index 59c72013b..6b78f89d5 100644
--- a/src/modules/05_placement/components/OrderReplace/MainOrderReplace.vue
+++ b/src/modules/05_placement/components/OrderReplace/MainOrderReplace.vue
@@ -408,7 +408,7 @@ onMounted(async () => {
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (id?: number) => {
   // router.push({ name: 'placementDetail'});
-  router.push(`/orderPlacement/detail`);
+  router.push(`/placement/order/detail`);
 };
 
 const clickDelete = (id: string) => {
diff --git a/src/modules/05_placement/components/OrderReplace/detailOrderReplace.vue b/src/modules/05_placement/components/OrderReplace/detailOrderReplace.vue
new file mode 100644
index 000000000..8f0329ea0
--- /dev/null
+++ b/src/modules/05_placement/components/OrderReplace/detailOrderReplace.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    ออกคำสั่งบรรจุ
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      header-class="bg-grey-1"
+    >
+      <q-step
+        :name="1"
+        title="รายละเอียดการออกคำสั่ง"
+        prefix="1"
+        :done="step > 1"
+        :header-nav="step > 1"
+      />
+
+      <q-step
+        :name="2"
+        title="เลือกรายชื่อ"
+        prefix="2"
+        :done="step > 2"
+        :header-nav="step > 2"
+      />
+
+      <q-step
+        :name="3"
+        title="เลือก"
+        prefix="3"
+        :done="step > 3"
+        :header-nav="step > 3"
+      />
+      <q-step
+        :name="4"
+        title="รายละเอียดคำสั่งและแนบท้าย"
+        prefix="4"
+        :header-nav="step > 4"
+      />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+        <step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
+      </template>
+    </q-stepper>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent } from "vue";
+import type { QStepper } from "quasar";
+
+const step01 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/OrderReplace/step/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/OrderReplace/step/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/OrderReplace/step/step03.vue")
+);
+const step04 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/OrderReplace/step/step04.vue")
+);
+
+const router = useRouter();
+const step = ref<number>(1);
+const stepper = ref<QStepper>();
+
+const nextStep = () => {
+  stepper.value!.next();
+};
+
+const previousStep = () => {
+  stepper.value!.previous();
+};
+</script>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+</style>
diff --git a/src/modules/05_placement/components/OrderReplace/step/step01.vue b/src/modules/05_placement/components/OrderReplace/step/step01.vue
new file mode 100644
index 000000000..26be5f055
--- /dev/null
+++ b/src/modules/05_placement/components/OrderReplace/step/step01.vue
@@ -0,0 +1,492 @@
+<template>
+  <div>
+    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
+      <q-form ref="myForm">
+        <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="typeOrder"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+              hide-bottom-space
+              :label="`${'ประเภทคำสั่ง'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="typeOrderOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                      ) "
+            />
+          </div>
+
+          <div class="col-xs-12 col-md-6">
+            <!-- :readonly="!edit"
+                :borderless="!edit" -->
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="nameOrder"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+              :label="`${'คำสั่งเรื่อง'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+            />
+          </div>
+
+          <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
+            <div class="col-6">
+              <q-input
+                :class="getClass(true)"
+                outlined
+                dense
+                lazy-rules
+                v-model="command"
+                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+                :label="`${'คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+                type="number"
+              />
+            </div>
+            <label class="col-1 flex justify-center items-center text-bold"
+              >/</label
+            >
+            <div class="col-5">
+              <datepicker
+                v-model="dateYear"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :model-value="dateYear + 543"
+                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                    :label="`${'พ.ศ.'}`"
+                    dense
+                    outlined
+                  >
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-xs-5 col-md-3">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateCommand"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    dateCommand != null ? date2Thai(dateCommand) : null
+                  "
+                  :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="byOrder"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+              hide-bottom-space
+              :label="`${'คำสั่งโดย'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="byOrderOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <!-- :readonly="!edit"
+                :borderless="!edit" -->
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="nameCommand"
+              :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+              :label="`${'ผู้มีอำนาจลงนาม'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <!-- :readonly="!edit"
+                :borderless="!edit" -->
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="positionCommand"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`,
+              ]"
+              :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12">
+            <q-separator />
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="register"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+              hide-bottom-space
+              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="registerOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
+                      ) "
+            />
+          </div>
+
+          <div class="col-xs-12 col-md-6">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateRegister"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    dateRegister != null ? date2Thai(dateRegister) : null
+                  "
+                  :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="announce"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
+              hide-bottom-space
+              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="announceOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAnnounce"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
+                  :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="position"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
+              hide-bottom-space
+              :label="`${'ตำแหน่งรับสมัคร'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="positionOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
+                      ) "
+            />
+          </div>
+        </div>
+      </q-form>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-px-md q-gutter-sm">
+      <q-btn
+        flat
+        round
+        color="public"
+        icon="mdi-content-save-outline"
+        @click="next"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <q-tooltip>ย้อนกลับ</q-tooltip>
+      </q-btn> -->
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main.ts";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QForm } from "quasar";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+const previous = () => props.previous();
+
+const myForm = ref<QForm>();
+
+const editRow = ref<boolean>(false);
+
+const nameOrder = ref<string>("");
+const nameCommand = ref<string>("");
+const positionCommand = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
+const command = ref<string>("");
+const dateCommand = ref<Date>(new Date());
+const dateRegister = ref<Date>(new Date());
+const dateAnnounce = ref<Date>(new Date());
+
+const typeOrder = ref<string>("");
+const typeOrderOption = ref<DataOption[]>([]);
+const typeOrderOptionFilter = ref<DataOption[]>([]);
+
+const byOrder = ref<string>("");
+const byOrderOption = ref<DataOption[]>([]);
+const byOrderOptionFilter = ref<DataOption[]>([]);
+
+const register = ref<string>("");
+const registerOption = ref<DataOption[]>([]);
+const registerOptionFilter = ref<DataOption[]>([]);
+
+const announce = ref<string>("");
+const announceOption = ref<DataOption[]>([]);
+const announceOptionFilter = ref<DataOption[]>([]);
+
+const position = ref<string>("");
+const positionOption = ref<DataOption[]>([]);
+const positionOptionFilter = ref<DataOption[]>([]);
+
+const clickEditRow = () => (editRow.value = true);
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeOrderOption":
+      update(() => {
+        typeOrderOption.value = typeOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "byOrderOption":
+      update(() => {
+        byOrderOption.value = byOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "registerOption":
+      update(() => {
+        registerOption.value = registerOptionFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "announceOption":
+      update(() => {
+        announceOption.value = announceOptionFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "positionOption":
+      update(() => {
+        positionOption.value = positionOptionFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const submit = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result == false) {
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style>
+.q-field--with-bottom {
+  padding-bottom: 0px;
+}
+</style>
diff --git a/src/modules/05_placement/components/OrderReplace/step/step02.vue b/src/modules/05_placement/components/OrderReplace/step/step02.vue
new file mode 100644
index 000000000..f73c32f3a
--- /dev/null
+++ b/src/modules/05_placement/components/OrderReplace/step/step02.vue
@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
+      <Table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :nornmalData="true"
+        :refreshBtn="true"
+        selection="multiple"
+        v-model:selected="selected"
+      >
+        <template #columns="props">
+          <q-tr :props="props"
+            ><q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props.row)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'no'" class="table_ellipsis">
+                {{ props.rowIndex }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td></q-tr
+          >
+        </template>
+      </Table>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-px-md q-gutter-sm">
+      <q-btn
+        flat
+        round
+        color="public"
+        icon="mdi-content-save-outline"
+        @click="next"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <q-tooltip>ย้อนกลับ</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import Table from "@/modules/05_placement/components/pass/TableView.vue";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>([
+  "name",
+  "calories",
+  "fat",
+  "carbs",
+  "protein",
+  "sodium",
+  "calcium",
+  "iron",
+]);
+const columns = [
+  {
+    name: "desc",
+    required: true,
+    label: "Dessert (100g serving)",
+    align: "left",
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: "calories",
+    align: "center",
+    label: "Calories",
+    field: "calories",
+    sortable: true,
+  },
+  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
+  { name: "carbs", label: "Carbs (g)", field: "carbs" },
+  { name: "protein", label: "Protein (g)", field: "protein" },
+  { name: "sodium", label: "Sodium (mg)", field: "sodium" },
+  {
+    name: "calcium",
+    label: "Calcium (%)",
+    field: "calcium",
+    sortable: true,
+    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
+  },
+  {
+    name: "iron",
+    label: "Iron (%)",
+    field: "iron",
+    sortable: true,
+    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
+  },
+];
+
+const rows = [
+  {
+    name: "Frozen Yogurt",
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    sodium: 87,
+    calcium: "14%",
+    iron: "1%",
+  },
+  {
+    name: "Ice cream sandwich",
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    sodium: 129,
+    calcium: "8%",
+    iron: "1%",
+  },
+  {
+    name: "Eclair",
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    sodium: 337,
+    calcium: "6%",
+    iron: "7%",
+  },
+  {
+    name: "Cupcake",
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    sodium: 413,
+    calcium: "3%",
+    iron: "8%",
+  },
+  {
+    name: "Gingerbread",
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    sodium: 327,
+    calcium: "7%",
+    iron: "16%",
+  },
+  {
+    name: "Jelly bean",
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    sodium: 50,
+    calcium: "0%",
+    iron: "0%",
+  },
+  {
+    name: "Lollipop",
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    sodium: 38,
+    calcium: "0%",
+    iron: "2%",
+  },
+  {
+    name: "Honeycomb",
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    sodium: 562,
+    calcium: "0%",
+    iron: "45%",
+  },
+  {
+    name: "Donut",
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    sodium: 326,
+    calcium: "2%",
+    iron: "22%",
+  },
+  {
+    name: "KitKat",
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: "12%",
+    iron: "6%",
+  },
+];
+const selected = ref([]);
+
+const selectData = (row: any) => {};
+</script>
diff --git a/src/modules/05_placement/components/OrderReplace/step/step03.vue b/src/modules/05_placement/components/OrderReplace/step/step03.vue
new file mode 100644
index 000000000..db43bbf6f
--- /dev/null
+++ b/src/modules/05_placement/components/OrderReplace/step/step03.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">03</div>
+    <q-separator />
+    <div class="flex justify-end q-px-md q-gutter-sm">
+      <q-btn
+        flat
+        round
+        color="public"
+        icon="mdi-content-save-outline"
+        @click="next"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <q-tooltip>ย้อนกลับ</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+</script>
diff --git a/src/modules/05_placement/components/OrderReplace/step/step04.vue b/src/modules/05_placement/components/OrderReplace/step/step04.vue
new file mode 100644
index 000000000..424d60e40
--- /dev/null
+++ b/src/modules/05_placement/components/OrderReplace/step/step04.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">04</div>
+    <q-separator />
+    <div class="flex justify-end q-px-md q-gutter-sm">
+      <q-btn
+        flat
+        round
+        color="public"
+        icon="mdi-content-save-outline"
+        @click="next"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <q-tooltip>ย้อนกลับ</q-tooltip>
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+</script>
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index 695d46c98..79e3c0d1a 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,61 +1,160 @@
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-      <q-btn size="12px" v-if="!editvisible" flat round :disabled="editvisible"
-        :color="editvisible ? 'grey-7' : 'primary'" @click="clickEdit" icon="mdi-pencil-outline">
+      <q-btn
+        size="12px"
+        v-if="!editvisible"
+        flat
+        round
+        :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'"
+        @click="clickEdit"
+        icon="mdi-pencil-outline"
+      >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn size="12px" flat round v-if="editvisible" :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'red'"
-        @click="clickCancel" icon="mdi-undo">
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="editvisible"
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="clickCancel"
+        icon="mdi-undo"
+      >
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn>
       <div class="q-px-sm">
-        <q-btn flat round :disabled="editvisible == false" :color="editvisible == false ? 'grey-7' : 'public'"
-          @click="add" icon="mdi-content-save-outline">
+        <q-btn
+          flat
+          round
+          :disabled="editvisible == false"
+          :color="editvisible == false ? 'grey-7' : 'public'"
+          @click="add"
+          icon="mdi-content-save-outline"
+        >
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
       </div>
 
       <q-space />
       <div class="items-center" style="display: flex">
-        <div class="row items-center" style="display: flex" v-if="publicData == false && publicNoBtn == false"></div>
+        <div
+          class="row items-center"
+          style="display: flex"
+          v-if="publicData == false && publicNoBtn == false"
+        ></div>
 
-        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
-          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->
-        <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
-          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
-          style="min-width: 150px" class="gt-xs q-ml-sm" />
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
       </div>
     </div>
 
     <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
       <span class="text-subtitle1">{{ titleText }}</span>
-
+      <q-btn
+        flat
+        round
+        color="primary"
+        @click="refresh"
+        icon="mdi-refresh"
+        v-if="props.refreshBtn"
+      >
+        <q-tooltip>อัปเดตข้อมูล</q-tooltip>
+      </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
-          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
-        <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
-          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
-          style="min-width: 150px" class="gt-xs q-ml-sm" />
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
       </div>
     </div>
-    <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
-      :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" :pagination="initialPagination"
-      :rows-per-page-options="[0]">
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      :pagination="initialPagination"
+      :rows-per-page-options="[0]"
+    >
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -132,6 +231,10 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  refreshBtn: {
+    type: Boolean,
+    defualt: false,
+  },
   add: {
     type: Function,
     default: () => console.log("not function"),
@@ -160,7 +263,13 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  refresh: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
+
+const refresh = () => props.refresh();
 const initialPagination = ref<any>({
   //   descending: false,
   rowsPerPage: props.paging == true ? 25 : 0,
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index cad0932c5..427d21569 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -14,6 +14,10 @@ const addOrderReplace = () =>
   import("@/modules/05_placement/components/OrderReplace/addOrderReplace.vue");
 const MainOrderPlacement = () =>
   import("@/modules/05_placement/components/OrderReplace/MainOrderReplace.vue");
+const detailOrderReplace = () =>
+  import(
+    "@/modules/05_placement/components/OrderReplace/detailOrderReplace.vue"
+  );
 export default [
   {
     path: "/placement/Sorkorcho",
@@ -26,7 +30,7 @@ export default [
     },
   },
   {
-    path: "/placement/OrderPlacement",
+    path: "/placement/order",
     name: "Orderplacement",
     component: MainOrderPlacement,
     meta: {
@@ -35,6 +39,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/placement/order/detail",
+    name: "OrderplacementDetail",
+    component: detailOrderReplace,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
   {
     path: "/placement/detail",
     name: "placementDetail",