From 884fab15604e9ec02ab0defdcc0fc81f51bd37ff Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 10 Sep 2024 18:03:01 +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

---
 .../components/Main/DialogCopyCommand.vue     | 105 ++++++
 .../18_command/components/Main/TableMain.vue  | 245 ++++++++++++++
 .../18_command/components/Step/1_Detail.vue   | 205 +++++++++++-
 .../components/Step/2_ListPersons.vue         | 308 +++++++++++++++++-
 .../components/Step/3_ReceivedCopy.vue        | 243 +++++++++++++-
 .../components/Step/Dialog1_Perview.vue       | 144 ++++++++
 .../components/Step/Dialog2_AddPerson.vue     | 121 +++++++
 .../components/Step/Dialog2_Salary.vue        | 113 +++++++
 .../18_command/interface/index/Main.ts        |   2 +-
 src/modules/18_command/router.ts              |  14 +-
 src/modules/18_command/store/DetailStore.ts   |  17 +-
 src/modules/18_command/store/ListStore.ts     |  11 +-
 src/modules/18_command/store/PosSalary.ts     | 106 ++++++
 src/modules/18_command/views/detail.vue       |  86 ++++-
 src/modules/18_command/views/lists.vue        | 126 ++++++-
 15 files changed, 1828 insertions(+), 18 deletions(-)
 create mode 100644 src/modules/18_command/components/Main/DialogCopyCommand.vue
 create mode 100644 src/modules/18_command/components/Main/TableMain.vue
 create mode 100644 src/modules/18_command/components/Step/Dialog1_Perview.vue
 create mode 100644 src/modules/18_command/components/Step/Dialog2_AddPerson.vue
 create mode 100644 src/modules/18_command/components/Step/Dialog2_Salary.vue
 create mode 100644 src/modules/18_command/store/PosSalary.ts

diff --git a/src/modules/18_command/components/Main/DialogCopyCommand.vue b/src/modules/18_command/components/Main/DialogCopyCommand.vue
new file mode 100644
index 000000000..ab6f7457e
--- /dev/null
+++ b/src/modules/18_command/components/Main/DialogCopyCommand.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const commandNo = ref<string>("");
+const commandYear = ref<string>("");
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(commandNo.value);
+    console.log(commandYear.value);
+    onClose();
+  });
+}
+
+function onClose() {
+  modal.value = false;
+  commandNo.value = "";
+  commandYear.value = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 50%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'ทำสำเนาคำสั่ง'" :close="onClose" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="commandNo"
+                hide-bottom-space
+                :label="`${'คำสั่งเลขที่'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
+              />
+            </div>
+            <label class="col-1 flex justify-center items-center text-bold"
+              >/</label
+            >
+            <div class="col-5">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="commandYear"
+                hide-bottom-space
+                :label="`${'พ.ศ.'}`"
+                mask="####"
+                :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+              />
+              <!-- <datepicker
+                v-model="commandYear"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="inputgreen"
+                    :model-value="
+                      commandYear !== null ? commandYear + 543 : null
+                    "
+                    :rules="[(val) => !!val || `${'กรุณาเลือก พ.ศ.'}`]"
+                    :label="`${'พ.ศ.'}`"
+                    dense
+                    hide-bottom-space
+                    outlined
+                  >
+                  </q-input>
+                </template>
+              </datepicker> -->
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
new file mode 100644
index 000000000..764b77632
--- /dev/null
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandListStore } from "@/modules/18_command/store/ListStore";
+
+import DialogCopyCommand from "@/modules/18_command/components/Main/DialogCopyCommand.vue";
+
+import type { QTableProps } from "quasar";
+
+const $q = useQuasar();
+const router = useRouter();
+
+const store = useCommandListStore();
+const { date2Thai, dialogRemove, dialogConfirm } = useCounterMixin();
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "orderNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: false,
+    field: "orderNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderName",
+    align: "center",
+    label: "ชื่อคำสั่ง",
+    sortable: true,
+    field: "orderName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "signatoryDate",
+    align: "center",
+    label: "วันที่ลงนาม",
+    sortable: false,
+    field: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderDate",
+    align: "center",
+    label: "วันที่คำสั่งมีผล",
+    sortable: false,
+    field: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderBy",
+    align: "center",
+    label: "ผู้สร้าง",
+    sortable: false,
+    field: "orderBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "signatoryBy",
+    align: "center",
+    label: "ผู้ลงนาม",
+    sortable: false,
+    field: "signatoryBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const modalCopy = ref<boolean>(false);
+const commandId = ref<string>("");
+
+function onRedirectToDetail(type: string, id: string) {
+  router.push(`/command/${type}/${id}`);
+}
+
+function onCopy(id: string) {
+  commandId.value = id;
+  modalCopy.value = true;
+}
+
+function onCancel(id: string) {
+  dialogRemove(
+    $q,
+    () => {},
+    "ยืนยันการยกเลิกการออกคำสั่ง",
+    "ต้องการยืนยันการยกเลิกการออกคำสั่งนี้ใช่หรือไม่ ?"
+  );
+}
+
+function onReCommand(id: string) {
+  dialogConfirm(
+    $q,
+    () => {},
+    "ยืนยันการดึงไปทำคำสั่งใหม่",
+    "ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
+  );
+}
+</script>
+
+<template>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.rows"
+    row-key="id"
+    flat
+    dense
+    bordered
+    :paging="true"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            color="secondary"
+            icon="mdi-dots-horizontal-circle-outline"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 200px">
+                <!-- แก้ไขข้อมูล ไม่แสดง Tabs ยกเลิก -->
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="store.tabsMain !== 'list_cancel'"
+                  @click.pervent="onRedirectToDetail('edit', props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        color="edit"
+                        size="xs"
+                        name="edit
+                      "
+                      />
+                      <div class="q-pl-md">แก้ไขข้อมูล</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- รายละเอียด -->
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click.pervent="onRedirectToDetail('view', props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        color="info"
+                        size="xs"
+                        name="mdi-eye
+                      "
+                      />
+                      <div class="q-pl-md">รายละเอียด</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- ทำสำเนาคำสั่ง -->
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click.pervent="onCopy(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        color="blue-6"
+                        size="xs"
+                        name="mdi-content-copy"
+                      />
+                      <div class="q-pl-md">ทำสำเนาคำสั่ง</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- ยกเลิก ไม่แสดง Tabs ยกเลิก -->
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="store.tabsMain !== 'list_cancel'"
+                  @click.pervent="onCancel(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        color="red"
+                        size="xs"
+                        name="close
+                      "
+                      />
+                      <div class="q-pl-md">ยกเลิก</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- ดึงไปทำคำสั่งใหม่ แสดงแค่ Tabs ยกเลิก -->
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="store.tabsMain === 'list_cancel'"
+                  @click.pervent="onReCommand(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="amber-5" size="xs" name="mdi-replay" />
+                      <div class="q-pl-md">ดึงไปทำคำสั่งใหม่</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            {{ col.value ?? "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <DialogCopyCommand v-model:modal="modalCopy" />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index b45cce13f..60f1a833f 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -1,5 +1,206 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+
+import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
+
+const store = useCommandDetail();
+
+const formData = reactive({
+  commandNo: "",
+  commandYear: "",
+  commandName: "",
+  commandHeader: "",
+  commandCenter: "",
+  commandFooter: "",
+});
+
+const modalPreview = ref<boolean>(false);
+</script>
 
 <template>
-  <div>รายละเอียดคำสั่ง</div>
+  <q-card-section>
+    <div class="row q-col-gutter-sm">
+      <!-- คำสั่งเลขที่ -->
+      <div class="col-4 row">
+        <div class="col-6">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.commandNo"
+            hide-bottom-space
+            :label="`${'คำสั่งเลขที่'}`"
+          />
+        </div>
+        <label class="col-1 flex justify-center items-center text-bold">
+          /
+        </label>
+        <div class="col-5">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.commandYear"
+            hide-bottom-space
+            :label="`${'พ.ศ.'}`"
+            mask="####"
+          />
+        </div>
+      </div>
+
+      <!-- คำสั่งเรื่อง -->
+      <div class="col-8">
+        <q-input
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          outlined
+          dense
+          v-model="formData.commandName"
+          hide-bottom-space
+          :label="`${'คำสั่งเรื่อง'}`"
+        />
+      </div>
+
+      <!-- เนื้อหาคำสั่งส่วนต้น -->
+      <div class="col-12">
+        <q-card bordered flat>
+          <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
+            เนื้อหาคำสั่งส่วนต้น
+          </div>
+          <q-separator />
+          <q-card-section>
+            <q-field
+              class="q_field_p_none"
+              ref="fieldRef"
+              v-model="formData.commandHeader"
+              borderless
+              hide-bottom-space
+            >
+              <template #control>
+                <q-editor
+                  :readonly="store.readonly"
+                  class="full-width"
+                  v-model="formData.commandHeader"
+                  min-height="5rem"
+                  :toolbar="[
+                    ['left', 'center', 'right', 'justify'],
+                    [
+                      'bold',
+                      'italic',
+                      'strike',
+                      'underline',
+                      'subscript',
+                      'superscript',
+                    ],
+                    ['unordered', 'ordered'],
+                  ]"
+                />
+              </template>
+            </q-field>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <!-- เนื้อหาคำสั่งส่วนกลาง -->
+      <div class="col-12">
+        <q-card bordered flat>
+          <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
+            เนื้อหาคำสั่งส่วนกลาง
+          </div>
+          <q-separator />
+          <q-card-section>
+            <q-field
+              class="q_field_p_none"
+              ref="fieldRef"
+              v-model="formData.commandCenter"
+              borderless
+              hide-bottom-space
+            >
+              <template #control>
+                <q-editor
+                  :readonly="store.readonly"
+                  class="full-width"
+                  v-model="formData.commandCenter"
+                  min-height="5rem"
+                  :toolbar="[
+                    ['left', 'center', 'right', 'justify'],
+                    [
+                      'bold',
+                      'italic',
+                      'strike',
+                      'underline',
+                      'subscript',
+                      'superscript',
+                    ],
+                    ['unordered', 'ordered'],
+                  ]"
+                />
+              </template>
+            </q-field>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <!-- เนื้อหาคำสั่งส่วนท้าย -->
+      <div class="col-12">
+        <q-card bordered flat>
+          <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
+            เนื้อหาคำสั่งส่วนท้าย
+          </div>
+          <q-separator />
+          <q-card-section>
+            <q-field
+              class="q_field_p_none"
+              ref="fieldRef"
+              v-model="formData.commandFooter"
+              borderless
+              hide-bottom-space
+            >
+              <template #control>
+                <q-editor
+                  :readonly="store.readonly"
+                  class="full-width"
+                  v-model="formData.commandFooter"
+                  min-height="5rem"
+                  :toolbar="[
+                    ['left', 'center', 'right', 'justify'],
+                    [
+                      'bold',
+                      'italic',
+                      'strike',
+                      'underline',
+                      'subscript',
+                      'superscript',
+                    ],
+                    ['unordered', 'ordered'],
+                  ]"
+                />
+              </template>
+            </q-field>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-12 row justify-end">
+        <q-btn
+          label="แสดงตัวอย่าง"
+          color="info"
+          icon="mdi-eye"
+          @click.prevent="modalPreview = true"
+        />
+      </div>
+    </div>
+  </q-card-section>
+
+  <q-separator />
+
+  <q-card-actions align="right" v-if="!store.readonly">
+    <q-btn label="บันทึก" color="public" />
+  </q-card-actions>
+
+  <DialogPerview v-model:modal="modalPreview" />
 </template>
diff --git a/src/modules/18_command/components/Step/2_ListPersons.vue b/src/modules/18_command/components/Step/2_ListPersons.vue
index f81fa2cc9..4b60f68bd 100644
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/src/modules/18_command/components/Step/2_ListPersons.vue
@@ -1,5 +1,309 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
+import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/18_command/interface/index/Main";
+
+import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
+import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
+
+const $q = useQuasar();
+const storePosSalary = usePosSalaryDataStore();
+const store = useCommandDetail();
+const {
+  dialogMessageNotify,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
+const templatePos = ref<string>("");
+const position = ref<string>("");
+
+const filter = ref<string>("");
+const rows = ref<any[]>([
+  {
+    idCard: "6796519798790",
+    fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
+    salaryAmount: 0,
+  },
+  {
+    idCard: "7707218775803",
+    fullName: "นายศรัณย์ ศิลาดี",
+    salaryAmount: 1,
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: (row) => rows.value.indexOf(row) + 1,
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<String[]>(["no", "idCard", "fullName"]);
+
+const modalSalary = ref<boolean>(false);
+const titleName = ref<string>("");
+
+const modalPerson = ref<boolean>(false);
+
+/**
+ * function เลือกต้นแบบ tamplate ตำแหน่ง
+ * @param val
+ */
+function updatePos(val: string) {
+  position.value = val;
+}
+
+function onSawpPos(val: any, type: string) {}
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {});
+}
+
+function selectModal(data: any) {
+  titleName.value = data.fullName;
+  modalSalary.value = true;
+}
+
+/**
+ * ฟิลเตอร์ข้อมูลจาก input
+ * @param val ค่าที่ป้อนให้ input
+ * @param update function จาก quasar
+ * @param filtername type ที่กำหนด ของ input นั้นๆ
+ */
+function filterSelector(val: string, update: Function, filtername: string) {
+  switch (filtername) {
+    case "pos":
+      update(() => {
+        posNoOptions.value = storePosSalary.optionPos.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+</script>
 
 <template>
-  <div>รายชื่อผู้ถูกออกคำสั่ง</div>
+  <q-card-section>
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <q-select
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          outlined
+          dense
+          lazy-rules
+          borderless
+          clearable
+          v-model="templatePos"
+          :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+          option-label="name"
+          :options="posNoOptions"
+          option-value="name"
+          hide-bottom-space
+          emit-value
+          use-input
+          input-debounce="0"
+          @update:modelValue="updatePos"
+          @filter="(inputValue: any,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+            )"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          outlined
+          dense
+          v-model="position"
+          hide-bottom-space
+          :label="`${'ตำแหน่ง'}`"
+          type="textarea"
+        />
+      </div>
+
+      <div class="col-12 row q-pb-sm items-center">
+        <q-btn
+          v-if="!store.readonly"
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click="modalPerson = true"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="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">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th auto-width />
+              <q-th auto-width />
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="!store.readonly"
+                  dense
+                  flat
+                  round
+                  :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                  :disable="props.rowIndex + 1 == 1"
+                  @click="onSawpPos(props, 'up')"
+                  icon="mdi-arrow-up-bold"
+                >
+                  <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  v-if="!store.readonly"
+                  dense
+                  flat
+                  round
+                  :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                  :disable="rows.length == props.rowIndex + 1"
+                  @click="onSawpPos(props, 'down')"
+                  icon="mdi-arrow-down-bold"
+                >
+                  <q-tooltip>เลื่อนลำดับลง</q-tooltip>
+                </q-btn>
+              </q-td>
+              <!-- v-if="statuscode !== true" -->
+              <q-td auto-width>
+                <q-btn
+                  v-if="!store.readonly"
+                  dense
+                  flat
+                  round
+                  color="blue"
+                  @click="selectModal(props.row)"
+                  icon="mdi-cash-multiple"
+                >
+                  <q-tooltip>เงินเดือน</q-tooltip>
+                </q-btn>
+              </q-td>
+
+              <q-td auto-width>
+                <q-btn
+                  v-if="!store.readonly"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  @click="onDelete(props.row.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                {{ col.value ?? "-" }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card-section>
+
+  <q-separator />
+
+  <q-card-actions align="right" v-if="!store.readonly">
+    <q-btn label="บันทึก" color="public" />
+  </q-card-actions>
+
+  <DialogAddPerson v-model:modal="modalPerson" />
+  <DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
 </template>
diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index 526ca259f..56331e298 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -1,5 +1,244 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+
+import type { DataOption } from "@/modules/18_command/interface/index/Main";
+
+import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
+
+const store = useCommandDetail();
+
+const filter = ref<string>("");
+const rows = ref<any[]>([
+  {
+    idCard: "1",
+    name: "2",
+    position: "3",
+    unit: "4",
+    send: "5",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: (row) => rows.value.indexOf(row) + 1,
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "name",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "unit",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "unit",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "send",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "send",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "idCard",
+  "name",
+  "position",
+  "unit",
+  "send",
+]);
+
+const optionSelect = ref<DataOption[]>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const modal = ref<boolean>(false);
+const selectedModal = ref<any[]>([]);
+
+function onDelete(id: string) {}
+
+function onSubmitPerson() {}
+</script>
 
 <template>
-  <div>รายชื่อผู้ได้รับสำเนาคำสั่ง</div>
+  <q-card-section>
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 row items-center">
+        <q-btn
+          v-if="!store.readonly"
+          flat
+          round
+          color="primary"
+          @click="modal = true"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="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">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="idCard"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="!store.readonly"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  @click="onDelete(props.row.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name === 'send'">
+                  <q-select
+                    :readonly="store.readonly"
+                    :class="store.classInput(!store.readonly)"
+                    hide-bottom-space
+                    multiple
+                    :outlined="true"
+                    dense
+                    v-model="props.row.mutiselect"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                      (val) =>
+                        val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                    ]"
+                    :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    :options="optionSelect"
+                    option-value="id"
+                    input-debounce="0"
+                    color="primary"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-black">
+                          ไม่พบข้อมูลที่ค้นหา
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card-section>
+
+  <q-separator />
+
+  <q-card-actions align="right" v-if="!store.readonly">
+    <q-btn label="บันทึก" color="public" />
+  </q-card-actions>
+
+  <DialogOrgSelectOneStep
+    v-model:modal="modal"
+    :title="'เลือกรายชื่อตามหน่วยงาน'"
+    v-model:selectedModal="selectedModal"
+    :saveData="onSubmitPerson"
+  />
 </template>
diff --git a/src/modules/18_command/components/Step/Dialog1_Perview.vue b/src/modules/18_command/components/Step/Dialog1_Perview.vue
new file mode 100644
index 000000000..b18357f43
--- /dev/null
+++ b/src/modules/18_command/components/Step/Dialog1_Perview.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import axios from "axios";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+function fetchPDF(type: string = "docx") {
+  axios
+    .post(
+      config.API.reportTemplate + `/${type}`,
+      {
+        template: "command_test",
+        reportName: "docx-report",
+        data: {
+          commandNo: "๑๒๓๔๕",
+          commandYear: "กระผม",
+          commandTitle: "นาย",
+          detailHeader: "Administrator",
+          detailBody: "detailBody",
+          detailFooter: "detailFooter",
+          commandDate: "",
+          name: "Chief Technology Officer",
+          position: "Chief Technology Officer",
+        },
+      },
+      {
+        headers: {
+          accept: "application/pdf",
+          "content-Type": "application/json",
+        },
+        responseType: "blob",
+      }
+    )
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      const pdfData = usePDF(`${objectUrl}`);
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      //   messageError($q, e);
+      //   hideLoader();
+    });
+}
+
+function onClose() {
+  modal.value = false;
+}
+
+onMounted(() => {
+  fetchPDF();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent full-height full-width>
+    <q-card>
+      <DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
+      <q-separator />
+
+      <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+        <div class="justify-between items-center align-center q-pb-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+        <div class="pdfWidth">
+          <VuePDF
+            ref="vuePDFRef"
+            :pdf="pdfSrc"
+            :page="page"
+            fit-parent
+            :scale="0.1"
+          />
+        </div>
+        <div class="justify-between items-center align-center q-pt-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/18_command/components/Step/Dialog2_AddPerson.vue b/src/modules/18_command/components/Step/Dialog2_AddPerson.vue
new file mode 100644
index 000000000..f8a9ba2a1
--- /dev/null
+++ b/src/modules/18_command/components/Step/Dialog2_AddPerson.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const selected = ref<any[]>([]);
+const rows = ref<any[]>([
+  {
+    idCard: "6796519798790",
+    fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
+    salaryAmount: 0,
+  },
+  {
+    idCard: "7707218775803",
+    fullName: "นายศรัณย์ ศิลาดี",
+    salaryAmount: 1,
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: (row) => rows.value.indexOf(row) + 1,
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    onClose();
+  });
+}
+
+function onClose() {
+  modal.value = false;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="onClose" />
+      <q-separator />
+      <q-card-section style="max-height: 60vh">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          row-key="name"
+          :selection="'multiple'"
+          v-model:selected="selected"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-th>
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
+                col.name == "no" ? props.rowIndex + 1 : col.value
+              }}</q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="public" @click="onSubmit"> </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/18_command/components/Step/Dialog2_Salary.vue b/src/modules/18_command/components/Step/Dialog2_Salary.vue
new file mode 100644
index 000000000..15b8c44c1
--- /dev/null
+++ b/src/modules/18_command/components/Step/Dialog2_Salary.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const titleName = defineModel<string>("titleName", { required: true });
+
+const formData = reactive({
+  salaryAmount: 0,
+  positionSalaryAmount: 0,
+  monthSalaryAmount: 0,
+  remarkVertical: null,
+  remarkHorizontal: null,
+});
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    onClose();
+  });
+}
+
+function onClose() {
+  modal.value = false;
+  formData.salaryAmount = 0;
+  formData.positionSalaryAmount = 0;
+  formData.monthSalaryAmount = 0;
+  formData.remarkVertical = null;
+  formData.remarkHorizontal = null;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="titleName" :close="onClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <CurruncyInput
+                :edit="true"
+                :dense="true"
+                v-model="formData.salaryAmount"
+                :label="`${'เงินเดือน'}`"
+                :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <CurruncyInput
+                :edit="true"
+                :dense="true"
+                v-model="formData.positionSalaryAmount"
+                :label="`${'เงินประจำตำแหน่ง'}`"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <CurruncyInput
+                :edit="true"
+                :dense="true"
+                v-model="formData.monthSalaryAmount"
+                :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-12">
+              <q-input
+                dense
+                outlined
+                v-model="formData.remarkVertical"
+                label="หมายเหตุแนวตั้ง"
+                type="textarea"
+                rows="2"
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-12">
+              <q-input
+                dense
+                outlined
+                v-model="formData.remarkHorizontal"
+                type="textarea"
+                label="หมายเหตุแนวนอน"
+                rows="2"
+                class="inputgreen"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" type="submit">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/18_command/interface/index/Main.ts b/src/modules/18_command/interface/index/Main.ts
index 46133c9b9..7a77d8c18 100644
--- a/src/modules/18_command/interface/index/Main.ts
+++ b/src/modules/18_command/interface/index/Main.ts
@@ -3,7 +3,7 @@ interface Pagination {
 }
 
 interface DataOption {
-  id: string;
+  id: string | number;
   name: string;
 }
 
diff --git a/src/modules/18_command/router.ts b/src/modules/18_command/router.ts
index 45d7f2c93..fbfa2ebcf 100644
--- a/src/modules/18_command/router.ts
+++ b/src/modules/18_command/router.ts
@@ -13,8 +13,18 @@ export default [
     },
   },
   {
-    path: "/command/:id",
-    name: "commandDetailPage",
+    path: "/command/view/:id",
+    name: "commandViewDetailPage",
+    component: detailPage,
+    meta: {
+      Auth: true,
+      Key: "COMMAND",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/command/edit/:id",
+    name: "commandEditDetailPage",
     component: detailPage,
     meta: {
       Auth: true,
diff --git a/src/modules/18_command/store/DetailStore.ts b/src/modules/18_command/store/DetailStore.ts
index 268852a5e..dbf1f0f58 100644
--- a/src/modules/18_command/store/DetailStore.ts
+++ b/src/modules/18_command/store/DetailStore.ts
@@ -1,5 +1,18 @@
+import { ref } from "vue";
 import { defineStore } from "pinia";
 
-export const usePositionEmp = defineStore("commandDetailStore", () => {
-  return {};
+export const useCommandDetail = defineStore("commandDetailStore", () => {
+  const readonly = ref<boolean>(false);
+
+  const classInput = (val: boolean) => {
+    return {
+      "full-width inputgreen cursor-pointer": val,
+      "full-width cursor-pointer": !val,
+    };
+  };
+
+  return {
+    classInput,
+    readonly,
+  };
 });
diff --git a/src/modules/18_command/store/ListStore.ts b/src/modules/18_command/store/ListStore.ts
index 50ecf442d..06d0c97ad 100644
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@@ -1,5 +1,12 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-export const usePositionEmp = defineStore("commandListStore", () => {
-  return {};
+export const useCommandListStore = defineStore("commandListStore", () => {
+  const tabsMain = ref<string>("list_draft");
+  const rows = ref<any[]>([]);
+
+  return {
+    tabsMain,
+    rows,
+  };
 });
diff --git a/src/modules/18_command/store/PosSalary.ts b/src/modules/18_command/store/PosSalary.ts
new file mode 100644
index 000000000..f9070483c
--- /dev/null
+++ b/src/modules/18_command/store/PosSalary.ts
@@ -0,0 +1,106 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataOption } from "@/modules/18_command/interface/index/Main";
+
+export const usePosSalaryDataStore = defineStore("possalary", () => {
+  const optionPos = ref<DataOption[]>([
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "โปรดเกล้าฯ {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 13,
+      name: "ช่วยราชการที่{หน่วยงานและรายละเอียดต่างๆ}",
+    },
+
+    {
+      id: 14,
+      name: "ปฏิบัติหน้าที่ในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 15,
+      name: "รักษาการในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 16,
+      name: "พ้นจากการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+
+    {
+      id: 17,
+      name: "งดเลื่อนขั้นเงินเดือน",
+    },
+    {
+      id: 18,
+      name: "แก้ไขคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 19,
+      name: "ยกเลิกคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 20,
+      name: "กลับไปปฏิบัติงานทางต้นสังกัดเดิม",
+    },
+    {
+      id: 21,
+      name: "โปรดเกล้าฯ แต่งตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
+    },
+    {
+      id: 22,
+      name: "รักษาการในตำแหน่งหัวหน้าฝ่าย {ฝ่าย…} {หน่วยงาน/สำนัก} {ลำดับที่…} คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่/ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+  ]);
+
+  return { optionPos };
+});
diff --git a/src/modules/18_command/views/detail.vue b/src/modules/18_command/views/detail.vue
index 17ba5981c..154b3672a 100644
--- a/src/modules/18_command/views/detail.vue
+++ b/src/modules/18_command/views/detail.vue
@@ -1,11 +1,91 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
+
+import { useRouter, useRoute } from "vue-router";
+import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+
+import Detail from "@/modules/18_command/components/Step/1_Detail.vue"; //รายละเอียดคำสั่ง
+import ListPersons from "@/modules/18_command/components/Step/2_ListPersons.vue"; //รายชื่อผู้ออกคำสั่ง
+import ReceivedCopy from "@/modules/18_command/components/Step/3_ReceivedCopy.vue"; //รายชื่อผู้ออกคำสั่ง
+import Attached from "@/modules/18_command/components/Step/4_Attached.vue"; //คำสั่งและบัญชีแนบท้าบ
+
+const router = useRouter();
+const route = useRoute();
+const store = useCommandDetail();
+
+const componentMap: any = {
+  Detail,
+  ListPersons,
+  ReceivedCopy,
+  Attached,
+};
+
+const readonly = ref<boolean>(route.name === "commandViewDetailPage");
+const tabs = ref<string>("Detail");
+const tabsManu = ref([
+  { label: "รายละเอียดคำสั่ง", name: "Detail" },
+  { label: "รายชื่อผู้ออกคำสั่ง", name: "ListPersons" },
+  { label: "รายชื่อผู้ได้รับสำเนาคำสั่ง", name: "ReceivedCopy" },
+  { label: "คำสั่งและบัญชีแนบท้าบ", name: "Attached" },
+]);
 
 onMounted(() => {
-  console.log("mounted");
+  store.readonly = readonly.value;
 });
 </script>
 
-<template>detail</template>
+<template>
+  <div class="toptitle 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)"
+    />
+    {{
+      route.name === "commandEditDetailPage"
+        ? "แก้ไขรายละเอียดคำสั่ง"
+        : "รายละเอียดคำสั่ง"
+    }}
+  </div>
+
+  <q-card class="q-mt-sm">
+    <q-card-section style="padding: 0px">
+      <q-separator />
+      <q-tabs
+        v-model="tabs"
+        inline-label
+        align="left"
+        indicator-color="primary"
+        active-color="primary bg-teal-1"
+      >
+        <q-tab
+          v-for="(tab, index) in tabsManu"
+          :key="index"
+          :name="tab.name"
+          :label="tab.label"
+        />
+      </q-tabs>
+      <q-separator />
+
+      <q-tab-panels v-model="tabs" animated>
+        <q-tab-panel
+          style="padding: 0px"
+          v-for="(panel, index) in tabsManu"
+          :key="index"
+          :name="panel.name"
+        >
+          <q-card>
+            <component :is="componentMap[panel.name]" />
+          </q-card>
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card-section>
+  </q-card>
+</template>
 
 <style scoped></style>
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index a1fde2de2..d0bfda13f 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -1,11 +1,133 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
+
+import { useCommandListStore } from "@/modules/18_command/store/ListStore";
+
+import TableList from "@/modules/18_command/components/Main/TableMain.vue";
+
+const store = useCommandListStore();
+
+const year = ref<number>(new Date().getFullYear());
+const searchKeyword = ref<string>("");
+
+const tabsManu = ref([
+  { label: "แบบร่าง", name: "list_draft" },
+  { label: "รอผู้มีอำนาจ", name: "list_authority" },
+  { label: "รอออกคำสั่ง", name: "list_orders" },
+  { label: "ออกคำสั่งเสร็จสิ้น", name: "list_completed" },
+  { label: "ยกเลิก", name: "list_cancel" },
+]);
 
 onMounted(() => {
+  store.rows = [
+    {
+      id: "1",
+      caseFault: null,
+      faultLevel: null,
+      fiscalYear: "2024",
+      fullName: "นายพิชัยยุทธ แสงศรี",
+      orderBy: "สำนักงานเขตพระนคร",
+      orderById: "32c99b86-c390-45d2-b1aa-7af5ba2de788",
+      orderByOrganization: "สำนักงานเขตพระนคร",
+      orderDate: "2024-08-23T03:09:00",
+      orderId: "08dcc321-17f7-43a8-80ef-40f7822a6e46",
+      orderName: "คำสั่งแต่งตั้ง",
+      orderNo: "23",
+      orderStatusName: "ออกคำสั่งแล้ว",
+      orderStatusValue: "e0d7c384-642d-4a01-a2e9-b06180ab466d",
+      orderTypeName: "คำสั่งแต่งตั้ง",
+      orderTypeValue: "3b3c8fcf-7940-4963-ab48-b8e803ed534d",
+      refRaw: null,
+      result: null,
+      signatoryBy: "นายวิษณุ สุวรรณรัตน์",
+      signatoryDate: "2024-08-23T03:09:00",
+      signatoryPosition: "ผู้อำนวยการ",
+    },
+  ];
   console.log("mounted");
 });
 </script>
 
-<template>tabs / lists</template>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>
+
+  <!-- toolbar -->
+  <q-card>
+    <q-toolbar class="q-pa-sm">
+      <datepicker
+        class="q-mr-sm"
+        menu-class-name="modalfix"
+        :model-value="year"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+        clearable
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            hide-bottom-space
+            outlined
+            dense
+            borderless
+            :model-value="year == null ? null : year + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+          </q-input>
+        </template>
+      </datepicker>
+      <q-btn flat round dense icon="add" color="primary" />
+
+      <q-space />
+      <q-input
+        dense
+        outlined
+        v-model="searchKeyword"
+        label="ค้นหา"
+        clearable
+        style="width: 300px"
+      >
+        <template v-slot:append v-if="!searchKeyword">
+          <q-icon name="search" /> </template
+      ></q-input>
+    </q-toolbar>
+  </q-card>
+
+  <!-- Tabs -->
+  <q-card class="q-mt-sm">
+    <q-card-section style="padding: 0px">
+      <q-separator />
+      <q-tabs
+        v-model="store.tabsMain"
+        inline-label
+        align="justify"
+        indicator-color="primary"
+        active-color="primary bg-teal-1"
+      >
+        <q-tab
+          v-for="(tab, index) in tabsManu"
+          :key="index"
+          :name="tab.name"
+          :label="tab.label"
+        />
+      </q-tabs>
+      <q-separator />
+
+      <q-tab-panels v-model="store.tabsMain" animated>
+        <q-tab-panel
+          v-for="(panel, index) in tabsManu"
+          :key="index"
+          :name="panel.name"
+        >
+          <TableList />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card-section>
+  </q-card>
+</template>
 
 <style scoped></style>