ปรับ UI

2023-12-22 10:05:18 +07:00 · 2023-12-22 10:05:18 +07:00 · 6323d1cb41
commit 6323d1cb41
parent 4cbf6fa473
5 changed files with 251 additions and 21 deletions
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@ -203,7 +203,7 @@ onMounted(() => {
            <q-card-section>
              <Step1 v-if="store.step === 1" />
              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
-              <Step3 v-if="store.step === 3" />
+              <Step3 v-if="store.step === 3" :step="store.step"/>
              <Step4 v-if="store.step === 4" />
              <Step5 v-if="store.step === 5" />
              <Step6 v-if="store.step === 6" />
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@ -522,6 +522,7 @@ onMounted(() => {
                </div>
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
+                    readonly
                    ref="elementaryFullNameRef"
                    dense
                    class="col-xs-12 col-sm-6"
@ -533,6 +534,7 @@ onMounted(() => {
                    lazy-rules
                  />
                  <q-input
+                    readonly
                    ref="elementaryPositonRef"
                    class="col-xs-12 col-sm-6"
                    dense
@ -554,6 +556,7 @@ onMounted(() => {
                </div>
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
+                    readonly
                    ref="abovelevelFullnameRef"
                    dense
                    class="col-xs-12 col-sm-6"
@ -568,6 +571,7 @@ onMounted(() => {
                    ref="abovelevelPositionRef"
                    class="col-xs-12 col-sm-6"
                    dense
+                    readonly
                    outlined
                    v-model="formCommand.abovelevelPosition"
                    label="ตำแหน่ง"
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@ -7,9 +7,10 @@ import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 import { useCounterMixin } from "@/stores/mixin";
 import genReport from "@/plugins/genreport";
-
+import { useQuasar } from "quasar";
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError,success } = mixin;

 const router = useRouter();
 const route = useRoute();
@ -144,6 +145,46 @@ function onWebSite() {}
 //       hideLoader();
 //     });
 // }
+
+function upLoadFile() {
+  showLoader();
+  http
+    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
+      fileList: {
+        fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+        metadata: {
+          tag: "value",
+        },
+      },
+    })
+    .then((res) => {
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fileUpLoad(url: string) {
+  axios.put(url, fileEvaluationUpload.value, {
+    headers: { "Content-Type": fileEvaluationUpload.value?.type },
+    onUploadProgress: (e) => console.log(e),
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    fileEvaluationUpload.value = null
+    success($q, "อัปโหลดไฟล์สำเร็จ");
+  })
+}
 </script>

 <template>
@ -240,7 +281,13 @@ function onWebSite() {}
                </q-file>
              </div>
              <div class="col-1 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
+                <q-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload "
+                  @click="upLoadFile"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@ -1,5 +1,20 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
+const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
+const id = ref<string>(route.params.id as string);
+

 const fileEvaluation5 = ref<any>();
 const status = ref<string>("ANNOUNCE_WEB");
@ -7,17 +22,17 @@ const website = ref<string>("https://bma-ehr.frappet.com/");

 const files = [
  {
-    id: "x1",
+    id: "file1",
    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    pathName: "12",
  },
  {
-    id: "x2",
+    id: "file2",
    fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
    pathName: "12",
  },
  {
-    id: "x3",
+    id: "file3",
    fileName: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "12",
  },
@ -47,14 +62,73 @@ function deleteFile(name: string) {
 function save() {
  console.log("save");
 }
+
+function upLoadFile() {
+  showLoader();
+  http
+    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
+      fileList: {
+        fileName: "บันทึกแจ้งผลการประกาศคัดเลือก",
+        metadata: {
+          tag: "value",
+        },
+      },
+    })
+    .then((res) => {
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fileUpLoad(url: string) {
+  axios
+    .put(url, fileEvaluation5.value, {
+      headers: { "Content-Type": fileEvaluation5.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fileEvaluation5.value = null;
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    });
+}
+
+function copyLink(link: string) {
+  navigator.clipboard
+    .writeText(link)
+    .then(() => {
+      console.log(`Copied link for file: ${link}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      success($q, "คัดลอกสำเร็จ");
+    });
+}
 </script>

 <template>
  <div class="row q-gutter-sm">
    <div class="col-12">
-      <q-banner inline-actions bordered class="bg-red-1 text-red border-red">
-        <q-icon name="mdi-information-outline" size="20px" />
-        ประกาศเมื่อวันที่ 20 พ.ค. 2566 ถึงวันที่ 20 ธ.ค. 2566
+      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
+        <div class="text-weight-bold">
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
+        </div>
      </q-banner>
    </div>

@ -78,15 +152,13 @@ function save() {
              <div class="row">
                <div>
                  <q-btn
-                    dense
                    flat
                    round
-                    size="12px"
-                    color="blue"
-                    icon="mdi-download-outline"
-                    @click="downloadFile(file.pathName)"
+                    color="primary"
+                    icon="mdi-clipboard-outline"
+                    @click="copyLink(file.fileName)"
                  >
-                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
                  </q-btn>
                </div>
              </div>
@ -121,7 +193,13 @@ function save() {
                </q-file>
              </div>
              <div class="col-1 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
+                <q-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="upLoadFile"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
@ -168,8 +246,8 @@ function save() {
              </q-list>
            </div>
            <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+            </div>
          </div>
        </div>
      </q-card>
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
@ -1,20 +1,45 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";

+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
+const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
 const fileEvaluation1 = ref<any>();

 const pdfSrc = ref<any>();
-
 const modalView = ref<boolean>(false);
+const emit = defineEmits(["update:form"]);
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
 function onClickViewPDF(file: any) {
  pdfSrc.value = file.webkitRelativePath;
  modalView.value = true;
 }
+
+const updateInput = (value: any) => {
+  emit("update:form", value, ref);
+};
 </script>

 <template>
  <div class="row q-col-gutter-md">
+    <div class="col-12">
+      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
+        <div class="text-weight-bold">
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
+        </div>
+      </q-banner>
+    </div>
    <div class="col-6">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
@ -73,6 +98,82 @@ function onClickViewPDF(file: any) {
        </div>
      </q-card>
    </div>
+
+    <div class="col-12">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เลือกผู้เซ็นเอกสาร
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาชั้นต้น
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="elementaryFullNameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    v-model="formCommand.elementaryFullName"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                  />
+                  <q-input
+                    ref="elementaryPositonRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.elementaryPosition"
+                    @update:model-value="updateInput(formCommand)"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="abovelevelFullnameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    v-model="formCommand.abovelevelFullname"
+                    label="ชื่อ-นามสกุล"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                  <q-input
+                    ref="abovelevelPositionRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.abovelevelPosition"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
  </div>

  <!-- Dialog Full Screen -->