Merge branch 'Aom_dev' into develop

src/modules/01_manual/components/7_commands/71_main.vue

@@ -0,0 +1,736 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rightDrawerOpen = ref(false);
+const text = ref("");
+</script>
+
+<template>
+  <!-- <div class="row col-12">
+    <div class="col-12">
+      <div class="toptitle text-dark col-12 row items-center">
+        คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+      </div> -->
+
+      <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="
+          background-color: #ecebeb;
+          border-radius: 8px 8px 0px 0px;
+          padding: 10px 16px 10px 16px;
+        "
+      >
+        <div class="custom-topic text-dark">
+          <div style="font-size: 16px; font-weight: 700">
+            ออกคำสั่ง
+        </div>
+        </div>
+      </q-card>
+
+      <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="border-radius: 0px 0px 8px 8px"
+      >
+<!--     <div style="font-weight: bold; font-size: 15px; color: #00aa86">
+        5.1 การเข้าสู่หน้าระบบสรรหา
+        </div>
+--> 
+
+        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
+            - เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยากรบุคคล ให้คลิกเลือกแถบเมนู “ออกคำสั่ง” โดยระบบแสดงหน้าตารางออกคำสั่งพร้อมรายการออกคำสั่งต่าง ๆ ดังรูปภาพ        
+        </div>
+
+        <div class="col-12">
+          <q-img
+          src="@/assets/manual/07_commands/1_main/7-1.png"
+            style="
+              display: block;
+              margin: 0 auto;
+              border-radius: 20px;
+              margin-top: 20px;
+              width: 255px;
+              height: 380px;
+              border: 1px solid #97B2DE; 
+
+
+
+            "
+          />
+            <div class="text-center text-grey-6" style="margin-top: 20px">
+                รูปภาพที่ 7 – 1 ระบบออกคำสั่ง
+            </div>
+        </div>
+
+
+        <div class="col-12">
+            <div class="col-12">
+                <p style="margin-top: 50px; margin-left: 10px">
+                    -	หากเข้าสู่ระบบออกคำสั่ง ระบบจะแสดงตารางรายงานออกคำสั่งต่าง ๆ ที่ทำการออกรายงานและ
+แสดงสถานะการอออกคำสั่งของรายงาน โดยสามารถเพิ่มรายงานคำสั่งต่าง ๆ ได้ ดังรูปภาพ
+
+                </p>
+            </div>
+        </div>
+
+        <div class="col-12">
+          <q-img
+          src="@/assets/manual/07_commands/1_main/7-2.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            width: auto;
+            height: auto;
+            border: 1px solid #97B2DE; 
+
+
+            "
+          />
+
+            <div class="text-center text-grey-6" style="margin-top: 20px">
+                รูปภาพที่ 7 – 2 รายการออกคำสั่ง
+            </div>
+
+            <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+            หมายเลข 1 ช่องสำหรับคลิกเลือกปีงบประมาณ <br>
+            หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเพิ่มข้อมูลรายงานออกคำสั่ง  <br>
+            หมายเลข 3 ช่องสำหรับคลิกเลือกประเภทรายงานการแสดงข้อมูลในตาราง <br>
+            หมายเลข 4 ช่องสำหรับคลิกเลือกสถานะรายงานการแสดงข้อมูลในตาราง <br>
+            หมายเลข 5 ช่องตารางสำหรับแสดงรายงานคำสั่งและข้อมูลที่เกี่ยวข้อง <br>
+            หมายเลข 6 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหารายงานคำสั่ง <br>
+            หมายเลข 7 ไอคอนสำหรับคลิกเพื่อแสดงประวัติออกคำสั่ง <br>
+            หมายเลข 8 สถานะ “ออกคำสั่ง” หมายถึง ได้ทำการออกคำสั่งรายงานเสร็จสิ้นทุกขั้นตอน <br>
+            หมายเลข 9 สถานะ “บัญชีแนบท้าย” หมายถึง อยู่ในหน้าเพิ่มไฟล์คำสั่งและบัญชีแนบท้าย/ขั้นตอนที่ 4 <br>
+            หมายเลข 10 สถานะ “เลือกผู้รับสำเนา” หมายถึง อยู่ในหน้าเลือกรายชื่อส่งสำเนา/ขั้นตอนที่ 3 <br>
+            หมายเลข 11 สถานะ “จัดทำร่างคำสั่ง” หมายถึง อยู่ในหน้ากรอกรายละเอียดการออกคำสั่ง/ขั้นตอนที่ 1 <br>
+            หมายเลข 12 สถานะ “รอผู้มีอำนาจลงนาม” หมายถึง รอคลิก “ออกคำสั่ง” /ขั้นตอนที่ 4
+
+             </div>
+
+        </div>
+
+
+
+        <div class="col-12">
+            <div class="col-12">
+                <p style="margin-top: 50px; margin-left: 10px">
+                -	ประเภทคำสั่งปัจจุบันมีทั้งหมด 24 คำสั่ง ได้แก่
+                <br />
+                <div style="margin-left: 20px;">
+                1.) C-PM-01 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้
+                <br />
+                2.) C-PM-02 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้ได้รับคัดเลือก
+                <br />
+                3.) C-PM-03 คำสั่งแต่งตั้ง: สำหรับข้าราชการ กทม. เดิม
+                <br />
+                4.) C-PM-04 คำสั่งย้าย: สำหรับข้าราชการ กทม. เดิม
+                <br />
+                5.) C-PM-05 คำสั่งแต่งตั้ง
+                <br />
+                6.) C-PM-06 คำสั่งเลื่อน
+                <br />
+                7.) C-PM-07 คำสั่งย้าย
+                <br />
+                8.) C-PM-08 คำสั่งบรรจุและแต่งตั้งข้าราชการฯ กลับเข้ารับราชการ
+                <br />
+                9.) C-PM-09 คำสั่งบรรจุและแต่งตั้งผู้ออกไปรับราชการทหารกลับเข้ารับราชการ
+                <br />
+                10.) C-PM-10 คำสั่งแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+                <br />
+                11.) C-PM-11 คำสั่งให้ข้าราชการที่มีผลการทดลองปฏิบัติหน้าที่ราชการไม่ต่ำกว่ามาตรฐาน
+                ที่กำหนดรับราชการต่อไป
+                <br />
+                12.) C-PM-12 คำสั่งให้ข้าราชการออกจากราชการเพราะผลการทดลองปฏิบัติหน้าที่
+                ราชการต่ำกว่ามาตรฐานที่กำหนด
+                <br />
+                13.) C-PM-13 คำสั่งให้โอนข้าราชการกรุงเทพมหานครสามัญ
+                <br />
+                14.) C-PM-14 คำสั่งรับโอนข้าราชการกรุงเทพมหานครสามัญ
+                <br />
+                15.) C-PM-15 คำสั่งให้ช่วยราชการ
+                <br />
+                16.) C-PM-16 คำสั่งส่งตัวกลับ
+                <br />
+                17.) C-PM-17 คำสั่งอนุญาตให้ข้าราชการลาออกจากราชการ
+                <br />
+                18.) C-PM-18 คำสั่งให้ออกจากราชการ
+                <br />
+                19.) C-PM-19 คำสั่งปลดออกจากราชการ
+                <br />
+                20.) C-PM-20 คำสั่งไล่ออกจากราชการ
+                <br />
+                21.) C-PM-21 คำสั่งแต่งตั้งลูกจ้างชั่วคราวเป็นลูกจ้างประจำ
+                <br />
+                22.) C-PM-22 คำสั่งปรับระดับชั้นงาน
+                <br />
+                23.) C-PM-23 คำสั่งให้ลูกจ้างออกจากราชการ
+                <br />
+                24.) C-PM-24 คำสั่งย้ายลูกจ้างประจำ
+            </div>
+                </p>
+            </div>
+            </div>
+
+    
+        <div class="col-12" >
+            <p style="margin-top: 50px; margin-left: 10px">
+                -	ตัวอย่างการการออกคำสั่ง C-PM-01 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้ รายชื่อจะ
+            สามารถออกคำสั่งได้ต่อเมื่อระบบ “สรรหา” ส่งรายชื่อมาออกคำสั่งเสร็จแล้วเท่านั้น หากไม่ได้ทำการส่งรายชื่อออกคำสั่ง ในระบ “ออกคำสั่ง” จะไม่มีรายชื่อเพื่อดำเนินการต่อ หากทำการกรอกข้อมูลเสร็จสิ้นตามระบบแนะนำเสร็จแล้ว ทำการคลิก
+            <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            บันทึก
+          </span>              
+            และยืนยันการบันทึกข้อมูล เพื่อไปยังขั้นตอนที่ 2 
+
+
+            </p>        
+        </div>
+
+        <div class="col-12">
+          <q-img
+          src="@/assets/manual/07_commands/1_main/7-3.png"
+            style="
+              display: block;
+              margin: 0 auto;
+              border-radius: 20px;
+              margin-top: 20px;
+              width: auto;
+              height: auto;
+              border: 1px solid #97B2DE; 
+
+
+
+            "
+          />
+            <div class="text-center text-grey-6" style="margin-top: 20px">
+                รูปภาพที่ 7 – 3 กรอกรายละเอียดการออกคำสั่ง
+            </div>
+
+            <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+            หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 1 การกรอกรายละเอียดคำสั่ง <br>
+            หมายเลข 2 ช่องสำหรับคลิกเลือกประเภทคำสั่ง<br>
+            หมายเลข 3 ช่องสำหรับแสดงคำสั่งเรื่อง<br>
+            หมายเลข 4 ช่องสำหรับคลิกกรอกคำสั่งเลขที่ <br>
+            หมายเลข 5 ช่องสำหรับคลิกเลือกปี พ.ศ.<br>
+            หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่คำสั่งมีผล<br>
+            หมายเลข 7 ช่องสำหรับคลิกกรอกหรือเลือกคำสั่งโดย<br>
+            หมายเลข 8 ช่องสำหรับคลิกกรอกหรือคลิกเลือกผู้มีอำนาจลงนาม<br>
+            หมายเลข 9 ช่องสำหรับคลิกกรอกหรือคลิกเลือกตำแหน่งผู้มีอำนาจลงนาม<br>
+            หมายเลข 10 ช่องสำหรับคลิกเลือกรอบการสอบ<br>
+            หมายเลข 11 ช่องสำหรับคลิกกรอก มติ กก. ครั้งที่ (เรื่อง สมัครสอบฯ)<br>
+            หมายเลข 12 ช่องสำหรับคลิกเลือกวันที่ (เรื่อง รับสมัครสอบฯ)<br>
+            หมายเลข 13 ช่องสำหรับคลิกกรอก มติ กก. ครั้งที่ (เรื่อง ผลการสอบ)<br>
+            หมายเลข 14 ช่องสำหรับคลิกเลือกวันที่ (เรื่อง ผลการสอบ)<br>
+            หมายเลข 15 ปุ่มสำหรับคลิกบันทึกข้อมูลการออกคำสั่ง
+             </div>
+
+        </div>
+
+
+
+
+        <div class="col-12">
+        <p style="margin-top: 50px; margin-left: 10px">
+            การเลือกรายชื่อเพื่อออกคำสั่ง ให้ทำการใช้เมาส์คลิก
+            <q-icon
+            name="mdi-plus"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+          />
+          จากนั้นทำการคลิก
+            <q-icon
+            name="mdi-checkbox-marked"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+            />
+            เพื่อเลือกรายชื่อออกคำสั่ง หากทำการคลิกเลือกรายชื่อสำเร็จ ให้ทำการคลิก
+            <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            บันทึก
+          </span>  
+          และยืนยันการบันทึกข้อมูลเพื่อบันทึกรายชื่อที่เลือก หรือหากยกเลิกการเลือกรายชื่อให้ทำการคลิก            
+          <i
+          class="q-icon mdi mdi-close"
+          style="
+            color: red;
+            background-color: #ffe5e6;
+            margin-right: 5px;
+            margin-left: 5px;
+            border-radius: 20px;
+            padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
+          "
+        >
+        </i>
+        ระบบจะแสดงหน้าขั้นตอนที่ 2 หน้าเลือกรายชื่อ โดยไม่มีรายชื่อที่เลือก หากทำการเลือกรายชื่อเสร็จแล้ว ให้ทำการกรอกข้อมูลเงินเดือนทุกครั้ง  โดยการใช้เมาส์คลิก
+        <q-icon
+            name="mdi-cash-multiple"
+            style="margin: 0 5px; color:rgb(49, 204, 236)"
+            size="xs"
+            />
+        จากนั้นทำการกรอกข้อมูลเงินเดือน หากไม่ทำการกรอกข้อมูลเงินเดือน ในส่วนของการออกคำสั่ง รายงานการออกคำสั่งจะไม่ปรากฏเงินเดือน หรือการต้องการลบรายชื่อผู้สอบแข่งขันได้ที่ทำการเลือกรายชื่อ ให้ทำการคลิก
+        <q-icon
+            name="mdi-delete"
+            style="margin: 0 5px; color:hsl(0, 100%, 50%)"
+            size="xs"
+            />
+            รายชื่อที่ต้องการลบ และยืนยันการลบข้อมูล รายชื่อที่ถูกลบจะปรากฏอยู่ในตารางการเพิ่มรายชื่อ หากจะเพิ่มรายชื่อใหม่ก็ทำการคลิก
+            <q-icon
+            name="mdi-plus"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+          />
+          แล้วเพิ่มรายชื่อเข้ามาใหม่ได้
+        </p>
+        
+        </div>
+
+        <div class="col-12">
+        <q-img
+        src="@/assets/manual/07_commands/1_main/7-4.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 1px solid #97b2de;
+            "
+        />
+        <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 7 – 4 เลือกรายชื่อออกรายงานคำสั่ง
+        </div>
+
+        <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 2 การเลือกรายชื่อ <br>
+        หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเลือกรายชื่อ<br>
+        หมายเลข 3 ตารางแสดงรายชื่อที่ทำการเลือกรายชื่อมา<br>
+        หมายเลข 4 ไอคอนสำหรับคลิกเพื่อจัดเรียงรายชื่อขึ้น-ลง<br>
+        หมายเลข 5 ไอคอนสำหรับคลิกเพื่อกรอกข้อมูลเงินเดือน<br>
+        หมายเลข 6 ไอคอนสำหรับคลิกเพื่อลบรายชื่อออกจากการออกคำสั่งแต่งตั้ง<br>
+        หมายเลข 7 ช่องสำหรับคลิกกรอกข้อมูลเพื่อค้นหารายชื่อ<br>
+        หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับไปขั้นตอนกรอกรายละเอียดก่อนหน้านี้<br>
+        หมายเลข 9 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลการเลือกรายชื่อ
+
+        </div>
+    </div>
+
+
+
+
+
+
+
+    <div class="col-12">
+        <p style="margin-top: 50px; margin-left: 10px">
+            - ขั้นตอนที่ 3 การเลือกรายชื่อส่งสำเราคำสั่ง เพิ่มรายชื่อตามหน่วยงาน ให้ทำการใช้เมาส์คลิก     
+            <q-icon
+            name="mdi-plus"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+          />
+          จากนั้นทำการเลือกรายชื่อที่ต้องการเพิ่มเพื่อส่งสำเนาคำสั่ง หากเลือกรายชื่อเสร็จแล้ว รายชื่อจะปรากฏในหน้าตารางของ ขั้นตอนที่ 3 เลือกรายชื่อออกคำสั่ง ให้ทำการคลิก
+          <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            บันทึก
+          </span>  
+          และยืนยันการบันทึกข้อมูล หรือหากต้องการลบรายชื่อ ให้ทำการใช้เมาส์คลิก           
+          <i
+          class="q-icon mdi mdi-close"
+          style="
+            color: red;
+            background-color: #ffe5e6;
+            margin-right: 5px;
+            margin-left: 5px;
+            border-radius: 20px;
+            padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
+          "
+        >
+        </i>
+        และยืนยันการลบข้อมูลรายชื่อ โดยระบบสามารถคลิกเพื่อเพิ่มรายชื่อส่งสำเนาคำสั่งได้เรื่อย ๆ
+        </p>
+        
+        </div>
+
+        <div class="col-12">
+        <q-img
+        src="@/assets/manual/07_commands/1_main/7-5.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 1px solid #97b2de;
+            "
+        />
+        <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 7 – 5 แสดงรายชื่อหน่วยงานส่งสำเนาคำสั่ง
+        </div>
+
+        <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 3 การเลือกรายชื่อส่งสำเนาคำสั่ง <br>
+        หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเพิ่มรายชื่อส่งสำเนาคำสั่ง<br>
+        หมายเลข 3 ช่องตารางแสดงรายชื่อที่เลือกส่งสำเราคำสั่ง<br>
+        หมายเลข 4 ช่องสำหรับคลิกเลือกช่องทางการส่งสำเนาคำสั่ง<br>
+        หมายเลข 5 ไอคอนสำหรับคลิกเพื่อลบรายชื่อการส่งสำเนาคำสั่ง<br>
+        หมายเลข 6 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหารายชื่อส่งสำเนาคำสั่ง<br>
+        หมายเลข 7 ปุ่มสำหรับคลิกเพื่อกลับไปเลือกรายชื่อ ขั้นตอนที่ 2<br>
+        หมายเลข 8 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลรายชื่อส่งสำเนาคำสั่ง
+
+
+        </div>
+    </div>
+
+
+
+
+    <div class="col-12">
+        <p style="margin-top: 50px; margin-left: 10px">
+            - การเลือกรายชื่อส่งสำเนาคำสั่ง ให้ทำการใช้เมาส์คลิก
+            <q-icon
+            name="mdi-plus"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+          />
+          ระบบแสดงตาราง “เลือกรายชื่อตามหน่วยงาน” จากนั้นทำการใช้เมาส์คลิกเลือกหน่วยงานก่อน จากนั้นระบบจะแสดงรายชื่อบุคคลของหน่วยงานนั้น ๆ ให้ จากนั้นทำการคลิก   
+          <q-icon
+            name="mdi-checkbox-marked"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+            /> 
+            เพื่อเลือกรายชื่อส่งสำเนาคำสั่ง  หากทำการคลิกเลือกรายชื่อเสร็จสิ้นแล้ว ให้ทำการใช้เมาส์คลิก
+            <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            บันทึก
+          </span>  
+          และยืนยันการบันทึกข้อมูลการเพิ่มรายชื่อส่งสำเนาคำสั่ง และหากต้องการยกเลิกการเลือกรายชื่อ ให้คลิก                 
+          <i
+          class="q-icon mdi mdi-close"
+          style="
+            color: red;
+            background-color: #ffe5e6;
+            margin-right: 5px;
+            margin-left: 5px;
+            border-radius: 20px;
+            padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
+          "
+        >
+        </i>
+        ระบบจะแสดงหน้าก่อนหน้านี้ หรือหน้าขั้นตอนที่ 3 เลือกรายชื่อส่งสำเนาคำสั่ง
+        </p>
+        
+        </div>
+
+        <div class="col-12">
+        <q-img
+        src="@/assets/manual/07_commands/1_main/7-6.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 1px solid #97b2de;
+            "
+        />
+        <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 7 – 6 เลือกรายชื่อหน่วยงานส่งสำเนาคำสั่ง
+        </div>
+
+        <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหาหน่วยงาน <br>
+        หมายเลข 2 ช่องสำหรับคลิกเลือกและแสดงหน่วยงานต่าง ๆ <br>
+        หมายเลข 3 ช่องตารางสำหรับแสดงรายชื่อของหน่วยงานที่ทำการคลิกเลือก/คลิกเลือกรายชื่อ<br>
+        หมายเลข 4 ช่องสำหรับกรอกข้อมูลค้นหารายชื่อที่ต้องการส่งสำเนาคำสั่ง<br>
+        หมายเลข 5 ปุ่มสำหรับคลิกบันทึกข้อมูลรายชื่อส่งสำเนาคำสั่ง<br>
+        หมายเลข 6 ไอคอนสำหรับคลิกเพื่อยกเลิกการเพิ่มรายชื่อส่งสำเนาคำสั่ง
+        </div>
+    </div>
+
+
+
+
+
+    <div class="col-12">
+        <p style="margin-top: 50px; margin-left: 10px">
+            -	ขั้นตอนที่ 4 รายละเอียดคำสั่งและแนบท้าย ให้ทำการคลิกเลือก “วันที่ลงนาม” ในตาราง “รายละเอียด” และทำการคลิก
+            <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            บันทึก
+          </span>  
+          เพื่อให้เอกสารคำสั่งลงวันที่ลงนามในเอกสาร จากนั้นทำการคลิกในหัวข้อ “คำสั่ง” และ “เอกสารแนบท้าย” และทำการดาวน์โหลดไฟล์ PDF ต่อไปทำการเอาไฟล์คำสั่ง PDF ที่ทำการดาวน์โหลดมาอัปโหลดลงในตาราง “คำสั่ง” ไฟล์คำสั่งและไฟล์เอกสารแนบท้าย จากนั้นและคลิก
+          <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            บันทึก
+          </span>   
+          หากทำการคลิกบันทึกเสร็จแล้ว ระบบจะปรากฏไอคอน
+          <q-icon
+            name="mdi-eye"
+            style="margin: 0 5px; color: #00aa86"
+            size="xs"
+            /> 
+            สำหรับดูเอกสารที่อัปโหลด และไอคอน
+            <q-icon
+            name="mdi-download"
+            style="margin: 0 5px; color: red"
+            size="xs"
+            /> 
+            สำหรับดาวน์โหลดเอกสาร  หากบันทึกและตรวจสอบเอกสารเสร็จสิ้นหมดแล้ว ให้ทำการใช้เมาส์คลิก
+            <span
+            style="
+              background-color: #01435F;
+              border: 1px solid #01435F;
+              color: white;
+              font-size: 12px;
+              text-align: center;
+              display: inline-block;
+              padding: 0px 5px;
+              border-radius: 2px;
+              margin: 0px 5px 0px 5px;
+
+            "
+          >
+            ออกคำสั่ง
+          </span> 
+          เลือก “ออกคำสั่งทันที”  หากทำการคลิกออกคำสั่งเสร็จแล้ว จะไม่สามารถแก้ไขเอกสารคำสั่งได้อีก และหากคลิกออกคำสั่งเสร็จสิ้นแล้ว รายชื่อผู้สอบแข่งขันจะปรากฏในทะเบียนประวัติ ข้าราชการ กทม. สามัญ
+        </p>
+        
+        </div>
+
+        <div class="col-12">
+        <q-img
+        src="@/assets/manual/07_commands/1_main/7-7.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 1px solid #97b2de;
+            "
+        />
+        <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 7 – 7 คำสั่งและแนบท้ายรายงานออกคำสั่ง
+        </div>
+
+        <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+      หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 4 การเลือกรายชื่อส่งสำเนาคำสั่ง <br>
+	หมายเลข 2 ช่องสำหรับแสดงตัวอย่างเอกสารคำสั่ง <br>
+	หมายเลข 3 ช่องสำหรับกรอกเลขที่คำสั่ง <br>
+	หมายเลข 4 ช่องสำหรับคลิกเลือกปีที่ออกคำสั่ง <br>
+	หมายเลข 5 ไอคอนสำหรับคลิกเพื่อดูตัวอย่างเอกสารเต็มจอ <br>
+	หมายเลข 6 ไอคอนสำหรับคลิกเพื่อเลื่อนดูหน้าตัวอย่างเอกสารซ้าย-ขวา <br>
+	หมายเลข 7 ไอคอนสำหรับดาวน์โหลดเอกสารคำสั่ง (ไฟล์ PDF, xlsx) <br>
+	หมายเลข 8 ไอคอนสำหรับดาวน์โหลดเอกสารแนบท้าย (ไฟล์ PDF, xlsx) <br>
+	หมายเลข 9 ช่องสำหรับคลิกเลือกไฟล์คำสั่งเพื่ออัปโหลด <br>
+	หมายเลข 10 ไอคอนสำหรับดูเอกสารที่อัปโหลด และไอคอนดาวน์โหลดเอกสารที่อัปโหลด  <br>
+    หมายเลข 11 ช่องสำหรับคลิกเลือกไฟล์เอกสารแนบท้ายเพื่ออัปโหลด <br>
+	หมายเลข 12 ไอคอนสำหรับดูเอกสารแนบท้ายที่อัปโหลด และไอคอนดาวน์โหลดเอกสารที่อัปโหลด <br>
+    หมายเลข 13 ปุ่มสำหรับคลิกบันทึกเพื่ออัปโหลดเอกสารคำสั่งและเอกสารแนบท้าย <br>
+	หมายเลข 14 ปุ่มสำหรับคลิกเพื่อย้อนไปขั้นตอนที่ 3 เลือกรายชื่อส่งสำเนา <br>
+	หมายเลข 15 ปุ่มสำหรับคลิกเพื่อออกคำสั่งเอกสาร
+
+        </div>
+    </div>
+    
+
+
+
+
+    <div class="col-12">
+        <p style="margin-top: 50px; margin-left: 10px">
+            
+        </p>
+        
+        </div>
+
+        <div class="col-12">
+        <q-img
+        src="@/assets/manual/07_commands/1_main/7-8.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 1px solid #97b2de;
+            "
+        />
+        <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 7 – 8 ตัวอย่างเอกสารรายงานคำสั่ง
+        </div>
+    </div>
+
+
+
+
+    <div class="col-12">
+        <p style="margin-top: 50px; margin-left: 10px">
+            
+        </p>
+        
+        </div>
+
+        <div class="col-12">
+        <q-img
+        src="@/assets/manual/07_commands/1_main/7-9.png"
+            style="
+            display: block;
+            margin: 0 auto;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 1px solid #97b2de;
+            "
+        />
+        <div class="text-center text-grey-6" style="margin-top: 20px">
+            รูปภาพที่ 7 – 9 ตัวอย่างเอกสารแนบท้ายคำสั่ง
+        </div>
+    </div>
+    
+    
+
+
+
+
+
+
+
+
+
+ 
+      </q-card>
+    <!-- </div>
+  </div> -->
+</template>
+
+
+
+
+
+
+

src/modules/01_manual/router.ts

@@ -48,6 +48,10 @@ const recruitdisabilities = () => import("@/modules/01_manual/components/5_recru
 const recruitselection = () => import("@/modules/01_manual/components/5_recruitment/57_selection.vue");
 
 
+const commandsmain = () => import("@/modules/01_manual/components/7_commands/71_main.vue");
+
+const employeehistorymain = () => import("@/modules/01_manual/components/6_employeehistory/61_main.vue");
+
 
 
 /****** 1 ********/
@@ -456,6 +460,28 @@ export default [
       Key: [10],
       Role: "order",
     },
-  }
+  },
 
+  {
+    path: "/Commandsmain",
+    name: "commandsmain",
+    component: commandsmain,
+    meta: {
+      Auth: true,
+      Key: [10],
+      Role: "order",
+    },
+  },
+
+  {
+    path: "/Employeehistorymain",
+    name: "employeehistorymain",
+    component: employeehistorymain,
+    meta: {
+      Auth: true,
+      Key: [10],
+      Role: "order",
+    },
+  }
+  
 ];