แก้ไขเงินเลื่อนเดือน

src/modules/13_salary/components/SalaryLists/ProcessStep.vue

@@ -1,9 +1,147 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+
+const sendStep = ref<number>(1);
+const fileUpload = ref<any>(null);
+const document = ref<string>("");
+/**
+ * function อัปโหลดไฟล์เจ้าหน้าที่
+ * @param event file
+ */
+async function uploadFile(event: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = event;
+      const formdata = new FormData();
+      formdata.append("Document", selectedFile);
+      // await http
+      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
+      //   .then(async () => {
+      //     await fecthInsigniaByOc(
+      //       round.value,
+      //       DataStore.agency,
+      //       "officer",
+      //       tab.value
+      //     );
+      //     success($q, "อัปโหลดไฟล์สำเร็จ");
+      //     fileUpload.value = null;
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   }),
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+function sendToDirector() {}
 </script>
 
 <template>
-  <div class="q-pa-md">process</div>
+  <div class="row col-12 q-pa-md">
+    <q-toolbar class="text-primary">
+      <div>
+        <q-file
+          v-if="sendStep == 1"
+          bg-color="white"
+          clearable
+          outlined
+          dense
+          v-model="fileUpload"
+          accept=".pdf"
+          label="อัปโหลดไฟล์"
+        >
+          <template v-slot:prepend>
+            <q-icon color="light-blue" name="attach_file" />
+            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+          </template>
+        </q-file>
+
+        <q-btn
+          flat
+          color="light-blue"
+          icon="upload"
+          @click="uploadFile(fileUpload)"
+          v-if="fileUpload !== null"
+        />
+        <div v-if="document">
+          <q-btn
+            dense
+            color="primary"
+            icon-right="mdi-download"
+            label="ดาวน์โหลดไฟล์"
+            outline
+            :href="document"
+            target="_blank"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+      <q-toolbar-title>
+        <!-- Toolbar -->
+      </q-toolbar-title>
+      <div>
+        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
+        <q-btn
+          v-if="sendStep == 1"
+          unelevated
+          color="public"
+          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
+          @click="sendToDirector()"
+        />
+
+        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
+        <q-btn
+          v-if="sendStep == 2"
+          unelevated
+          color="public"
+          label="ยืนยันและส่งเอกสารให้ สกจ."
+          @click="sendToDirector()"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          unelevated
+          color="public"
+          label="ยืนยันการตรวจสอบ"
+          @click="sendToDirector()"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 4"
+          unelevated
+          color="public"
+          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
+          @click="sendToDirector()"
+        />
+
+        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
+        <q-btn
+          v-if="sendStep == 5"
+          unelevated
+          color="public"
+          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
+          @click="sendToDirector()"
+        />
+      </div>
+    </q-toolbar>
+  </div>
 </template>
 
 <style lang="scss" scoped></style>