UI ออกคำสั่ง

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>

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>