ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง step

src/modules/13_salary/components/Command/detail.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref,onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+
+const router = useRouter();
+const route = useRoute();
+const orderId_params = route.params.id;
+const orderId = ref<string>('')
+const step = ref<number>(0);
+const step01 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step03.vue")
+);
+const step04 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step04.vue")
+);
+
+const nextStep = async () => {
+  localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.nextStep(orderId.value))
+      .then(() => {
+        router.push(
+          `/salary/command/detail/${orderId.value}?step=${step.value + 1}`
+        );
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+};
+
+const previousStep = async () => {
+  localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.prevStep(orderId.value))
+      .then(() => {
+          router.push(
+            `/salary/command/detail/${orderId.value}?step=${step.value - 1}`
+          );
+       
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+};
+
+function destroyLocalStorage(){
+  localStorage.clear();
+};
+
+onMounted(() => {
+    destroyLocalStorage()
+  if (route.query.step) {
+    step.value = Number(route.query.step);
+    localStorage.setItem("currentStep", step.value.toString());
+  } else {
+    const currentStep = localStorage.getItem("currentStep");
+    if (currentStep) {
+      step.value = Number(currentStep);
+    } else {
+      step.value = 1;
+    }
+  }
+  if (orderId_params !== undefined) {
+    orderId.value = orderId_params.toString();
+  }
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/salary/command`)"
+    />
+    ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      class="step"
+      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"
+        :done="step > 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>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+
+.step .q-stepper__tab--done .q-stepper__title,
+.step .q-stepper__tab--active .q-stepper__title {
+  color: #35473c !important;
+  font-weight: 500;
+}
+
+.step .q-stepper__header--standard-labels .q-stepper__tab {
+  min-height: 60px;
+}
+</style>

src/modules/13_salary/components/Command/step02.vue

@@ -718,9 +718,7 @@ const pagination = ref({
             :visible-columns="visibleColumns"
             :filter="filter"
             row-key="name"
-            :selection="
-              routeName === 'disciplineOrderDatail' ? 'single' : 'multiple'
-            "
+            :selection="'multiple' "
             v-model:selected="selected"
           >
             <template v-slot:header="props">

src/modules/13_salary/components/Command/step04.vue

@@ -23,7 +23,7 @@ const {
 const route = useRoute();
 const $q = useQuasar();
 
-const orderId_params = route.params.orderid;
+const orderId_params = route.params.id;
 const dialog = ref<boolean>(false);
 const dialogFileUpload = ref<boolean>(false);
 const splitterModel = ref<number>(70);
@@ -48,13 +48,7 @@ const orderStatusName = ref<string>("");
 const dataGen = ref<any>();
 
 const orderId = ref<string>(orderId_params.toString());
-onMounted(async () => {
-  if (orderId.value) {
-    await fetchAttachment(orderId.value);
-    await fecthstatusOrder();
-    await getCommandDetail();
-  }
-});
+
 
 // เช็คว่าต้องมีแนบท้ายไหม code ที่เพิ่มคืออันที่ไม่มีแนบท้าย
 const attachmentStatus = computed(() => {
@@ -81,16 +75,9 @@ const attachmentStatus = computed(() => {
 
 // เช็คว่าต้องไป gen report ที่ server เพิ่มไหม code ที่เพิ่มคือคำสั่งใหม่ที่ต้องไป gen report อีกรอบ
 const genReportStatus = computed(() => {
-  return code.value == "c-pm-19" ||
-    code.value == "c-pm-20" ||
-    code.value == "c-pm-25" ||
-    code.value == "c-pm-26" ||
-    code.value == "c-pm-27" ||
-    code.value == "c-pm-28" ||
-    code.value == "c-pm-29" ||
-    code.value == "c-pm-30" ||
-    code.value == "c-pm-31" ||
-    code.value == "c-pm-32"
+  return code.value == "c-pm-33" ||
+    code.value == "c-pm-34" ||
+    code.value == "c-pm-35"
     ? true
     : false;
 });
@@ -151,23 +138,7 @@ const downloadCover = async (type: string) => {
   }
 };
 
-// โหลด เอกสารแนบท้าย
-const downloadAttachment = async (type: string) => {
-  showLoader();
-  await http
-    .get(config.API.fileAttachment(code.value, type, orderId.value), {
-      responseType: "blob",
-    })
-    .then(async (res) => {
-      downloadFile(res, `เอกสารแนบท้าย ${orderName.value}.${type}`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+
 // เรียกไฟล์ คำสั่ง
 const fetchReportCover = async (type: string, orderId: string) => {
   await http
@@ -493,10 +464,17 @@ const viewFileUpload = async (url: string) => {
 
   dialogFileUpload.value = true;
 };
+
+onMounted(async () => {
+  if (orderId.value) {
+    await fetchAttachment(orderId.value);
+    await fecthstatusOrder();
+    await getCommandDetail();
+  }
+});
 </script>
 
 <template>
-  <div>
     <div style="min-height: 70vh">
       <q-splitter
         v-model="splitterModel"
@@ -549,54 +527,6 @@ const viewFileUpload = async (url: string) => {
                 </q-menu>
               </q-btn>
             </div>
-            <div
-              v-if="attachmentStatus"
-              @click="setTab('second')"
-              :class="getClass(tab == 'second')"
-            >
-              <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn
-                v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
-                size="12px"
-                flat
-                dense
-                :color="tab !== 'second' ? 'grey' : 'add'"
-                icon="mdi-download"
-                :disable="tab !== 'second'"
-              >
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadAttachment('pdf')"
-                    >
-                      <!-- type="a"
-                      :href="orderAttachmentPdf"
-                      target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .PDF</q-item-section>
-                    </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadAttachment('xlsx')"
-                    >
-                      <!-- type="a"
-                      :href="orderAttachmentXlsx"
-                      target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .xls</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
             <q-space />
             <q-btn
               class="text-dark"
@@ -1120,7 +1050,6 @@ const viewFileUpload = async (url: string) => {
         </q-card-section>
       </q-card>
     </q-dialog>
-  </div>
 </template>
 
 <style lang="scss" scoped>

src/modules/13_salary/router.ts

@@ -11,6 +11,9 @@ const salaryEmployeeLists = () =>
 const commandSalary = () =>
   import("@/modules/13_salary/views/commandSalary.vue");
 
+  const commandSalaryAdd = () => import("@/modules/13_salary/components/Command/detail.vue");
+  // const commandSalary = () => import("@/modules/13_salary/views/commandSalary.vue");
+  // const commandSalary = () => import("@/modules/13_salary/views/commandSalary.vue");
 export default [
   {
     path: "/salary",
@@ -92,4 +95,24 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary/command/add",
+    name: "commandSalaryAdd",
+    component: commandSalaryAdd,
+    meta: {
+      Auth: true,
+      Key: [1.5],
+      Role: "salary",
+    },
+  },
+  {
+    path: "/salary/command/detail/:id",
+    name: "commandSalaryDatail",
+    component: commandSalaryAdd,
+    meta: {
+      Auth: true,
+      Key: [1.5],
+      Role: "salary",
+    },
+  },
 ];

src/modules/13_salary/views/commandSalary.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import router from "@/router";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -18,14 +18,121 @@ import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 
+const rows = ref<any>([])
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const DataStore = useOrderPlacementDataStore();
 const stroe = useOrderStore();
 const { showLoader, hideLoader, messageError } = mixin;
+/** pagination */
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 const commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35"]);
 
+/** ข้อมูลที่เเสดงใน คอลัม */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderName",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "orderName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "orderNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "orderNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderTypeName",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "orderTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "orderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderByOrganization",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "orderByOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "signatoryBy",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: true,
+    field: "signatoryBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderStatusName",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: true,
+    field: "orderStatusName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+/** หัวตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "orderName",
+  "orderNo",
+  "orderTypeName",
+  "orderDate",
+  "orderByOrganization",
+  "signatoryBy",
+  "orderStatusName",
+]);
+
 onMounted(async () => {
   await fiscalYearFilter();
   await OrderTypeFilter();
@@ -57,7 +164,7 @@ async function fetchOrderlist() {
 
 // สร้างคำสั่งใหม่
 const clickAdd = () => {
-  router.push({ name: "disciplineOrderAdd" });
+  router.push(`/salary/command/add`);
 };
 
 // รายการข้อมูลปีงบประมาณ
@@ -185,6 +292,25 @@ function filterSelector(val: any, update: Function, refData: string) {
       break;
   }
 }
+
+function redirectToPage(id:string,status:string){
+  let step = 1;
+  switch (status) {
+    case "จัดทำร่างคำสั่ง":
+      step = 1;
+      break;
+    case "บัญชีแนบท้าย":
+      step = 2;
+      break;
+    case "เลือกผู้ได้รับสำเนาคำสั่ง":
+      step = 3;
+      break;
+    default:
+      step = 4;
+      break;
+  }
+  router.push(`/salary/command/detail/${id}?step=${step}`);
+}
 </script>
 
 <template>
@@ -260,7 +386,7 @@ function filterSelector(val: any, update: Function, refData: string) {
           </q-input>
 
           <q-select
-            v-model="stroe.visibleColumns"
+            v-model="visibleColumns"
             multiple
             outlined
             dense
@@ -268,7 +394,7 @@ function filterSelector(val: any, update: Function, refData: string) {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="stroe.columns"
+            :options="columns"
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -346,7 +472,47 @@ function filterSelector(val: any, update: Function, refData: string) {
           </q-card>
         </div>
         <div class="col-12">
-          <TableOrder :filterTable="filterKeyword" />
+          <d-table
+            for="table"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="subject"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <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
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  @click="
+                    redirectToPage(props.row.id, props.row.status)
+                  "
+                >
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
         </div>
       </div>
     </q-card>