ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง 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>