API User Popup สมรรถนะในหน้าฟอร์มแบบประเมิน & อัปโหลดไฟล์

src/modules/08_KPI/components/Tab/04_File.vue

@@ -1,3 +1,237 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import axios from "axios";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const $q = useQuasar();
+const route = useRoute();
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+} = useCounterMixin();
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`)
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`, {
+          replace: false,
+          fileList: fileName,
+        })
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+
+      .then((res) => {
+        success($q, `ลบไฟล์สำเร็จ`);
+        setTimeout(() => {
+          getData();
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
 <template>
-    <div class="q-pa-md">4</div>
-</template>
+  <div class="q-pa-md">
+    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+        อัปโหลดไฟล์เอกสารหลักฐาน
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div class="col-12 row">
+          <q-file
+            for="inputFiles"
+            class="col-12"
+            outlined
+            dense
+            v-model="documentFile"
+            label="ไฟล์เอกสารหลักฐาน"
+            hide-bottom-space
+            accept=".pdf,.xlsx,.docx,.png,.jpg"
+            clearable
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+            <template v-slot:after>
+              <q-btn
+                size="14px"
+                v-if="documentFile"
+                flat
+                round
+                dense
+                color="add"
+                icon="mdi-upload"
+                @click="clickUpload(documentFile)"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </template>
+          </q-file>
+
+          <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+        </div>
+
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item
+              clickable
+              v-ripple
+              v-for="data in fileList"
+              :key="data.id"
+              class="items-center"
+            >
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <div>
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
+                  @click="downloadFile(data.fileName)"
+                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
+
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="red"
+                  class="q-ml-sm"
+                  icon="mdi-delete-outline"
+                  @click="deleteFile(data.fileName)"
+                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>

src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const { showLoader, hideLoader } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
+const competencyType = defineModel<string>("competencyType", {
+  required: true,
+});
 const numpage = defineModel<number>("numpage", { required: true });
 const splitterModel = ref<number>(30);
 const search = ref<string>("");
@@ -13,18 +21,8 @@ const formula = ref<string>("");
 const type = ref<string>("");
 
 const listCheck = ref<number | null>();
-const listTarget = ref<any>([
-  {
-    id: "ID1",
-    metricCode: "1กก",
-    indicatorName: "ตัวชี้วัด 1",
-  },
-  {
-    id: "ID2",
-    metricCode: "2กก",
-    indicatorName: "ตัวชี้วัด 2",
-  },
-]);
+const listTarget = ref<any>([]);
+const listTargetMain = ref<any>([]);
 
 const formDetail = reactive<any>({
   type: "สมรรถนะหลัก",
@@ -33,11 +31,11 @@ const formDetail = reactive<any>({
   criteria: "",
 });
 const formScore = reactive<any>({
-  score1: "1",
-  score2: "2",
-  score3: "3",
+  score1: "",
+  score2: "",
+  score3: "",
   score4: "",
-  score5: "5",
+  score5: "",
 });
 
 const fieldDetailLabels = {
@@ -57,48 +55,56 @@ const fieldLabels = {
 
 const competencyTypeOp = ref<DataOptions[]>([
   {
-    id: "ID1",
+    id: "HEAD",
     name: "สมรรถนะหลัก",
   },
   {
-    id: "ID2",
+    id: "GROUP",
     name: "สมรรถนะประจำกลุ่มงาน",
   },
   {
-    id: "ID3",
-    name: "สมรรถนะประจำกลุ่มงาน",
-  },
-  {
-    id: "ID4",
+    id: "EXECUTIVE",
     name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
   },
   {
-    id: "ID5",
+    id: "DIRECTOR",
     name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
   },
   {
-    id: "ID6",
+    id: "INSPECTOR",
     name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
   },
 ]);
 
 function clickList(index: number, data: any) {
   listCheck.value = index;
-  // dataList.value = data.map((i: any) => ({
-  //   commandNo: i.commandNo,
-  //   duty: i.duty,
-  //   prefix: i.prefix,
-  //   firstName: i.firstName,
-  //   lastName: i.lastName,
-  //   fullName:`${i.prefix}${i.firstName} ${i.lastName}`
-  // }));
+
+  // formDetail.type = ???
+  // formDetail.name = ???
+  // formDetail.definition = ???
+  // formDetail.criteria = ???
+  formScore.score1 = data.capacityDetails[0].description;
+  formScore.score2 = data.capacityDetails[1].description;
+  formScore.score3 = data.capacityDetails[2].description;
+  formScore.score4 = data.capacityDetails[3].description;
+  formScore.score5 = data.capacityDetails[4].description;
 }
 
 /** ปิด dialog */
 function closeDialog() {
   modal.value = false;
-  type.value = ''
-  search.value = ''
+  type.value = "";
+  search.value = "";
+  listCheck.value = null;
+  formScore.score1 = "";
+  formScore.score2 = "";
+  formScore.score3 = "";
+  formScore.score4 = "";
+  formScore.score5 = "";
+  formDetail.type = "";
+  formDetail.name = "";
+  formDetail.definition = "";
+  formDetail.criteria = "";
 }
 
 /** เรียกใช้ class */
@@ -107,6 +113,43 @@ function getclass() {
 }
 
 function onSubmit() {}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.KpiCapacity + `?type=${type.value}`)
+    .then((res) => {
+      const data = res.data.result.data;
+      console.log(data);
+      listTarget.value = data;
+      listTargetMain.value = data;
+      formScore.score1 = data.capacityDetails[0].description;
+      formScore.score2 = data.capacityDetails[1].description;
+      formScore.score3 = data.capacityDetails[2].description;
+      formScore.score4 = data.capacityDetails[3].description;
+      formScore.score5 = data.capacityDetails[4].description;
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function filterTxt(val: any) {
+  console.log(val);
+  listTarget.value = listTargetMain.value.filter(
+    (v: any) => v.name.indexOf(val) > -1
+  );
+  console.log(listTarget.value.length);
+}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      type.value = competencyType.value;
+      getData();
+    }
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -117,14 +160,17 @@ function onSubmit() {}
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
           <div class="col-12 row">
-            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+            <div
+              class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight"
+            >
               <div class="col-12 q-col-gutter-sm fit">
-                <div class="col-12 ">
+                <div class="col-12">
                   <q-select
                     v-model="type"
                     outlined
                     label="ประเภทสมรรถนะ"
                     dense
+                    readonly
                     bg-color="white"
                     option-label="name"
                     option-value="id"
@@ -134,7 +180,7 @@ function onSubmit() {}
                     map-options
                   />
                 </div>
-                <div class="col-12 ">
+                <div class="col-12">
                   <q-input
                     v-model="search"
                     outlined
@@ -142,6 +188,7 @@ function onSubmit() {}
                     label="ค้นหา"
                     bg-color="white"
                     :class="getclass()"
+                    @update:model-value="filterTxt"
                   >
                     <template v-slot:append>
                       <q-icon v-if="search == ''" name="search" />
@@ -149,28 +196,23 @@ function onSubmit() {}
                         v-if="search !== ''"
                         name="clear"
                         class="cursor-pointer"
-                        @click="search = ''"
+                        @click="(search = ''), (listTarget = listTargetMain)"
                       />
                     </template>
                   </q-input>
                 </div>
-                <div class="col-12 ">
+                <div class="col-12">
                   <q-card bordered flat class="no-shadow bg-white col-12">
                     <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                      <div class="col-4">
-                        <span>รหัสตัวชี้วัด</span>
-                      </div>
-                      <div class="col-4">
-                        <span>ชื่อตัวชี้วัด</span>
+                      <div class="col-12">
+                        <span>ชื่อสมรรถนะ</span>
                       </div>
                     </div>
 
                     <q-separator />
                     <q-card-section class="q-pa-none">
-                        <q-list
-                          separator
-                          dense
-                        >
+                      <div v-if="listTarget.length > 0">
+                        <q-list separator dense>
                           <q-item
                             v-for="(item, index) in listTarget"
                             :key="index"
@@ -178,20 +220,25 @@ function onSubmit() {}
                             v-ripple
                             :active="listCheck === index"
                             active-class="my-menu-link"
-                            @click="clickList(index, item.id)"
+                            @click="clickList(index, item)"
                           >
                             <q-item-section class="q-pa-none">
-                              <div class="row items-center" style="height: 20px">
-                                <div class="col-4">
-                                  <span>{{ item.metricCode }}</span>
-                                </div>
-                                <div class="col-4">
-                                  <span>{{ item.indicatorName }}</span>
+                              <div
+                                class="row items-center"
+                                style="height: 20px"
+                              >
+                                <div class="col-12">
+                                  <span>{{ item.name }}</span>
                                 </div>
                               </div>
                             </q-item-section>
                           </q-item>
                         </q-list>
+                      </div>
+
+                      <div v-else class="q-pa-md">
+                        <span>ไม่พบข้อมูล</span>
+                      </div>
                     </q-card-section>
                   </q-card>
                 </div>
@@ -228,7 +275,7 @@ function onSubmit() {}
                     </div>
                   </q-card>
                 </div>
-                <div class="col-4 row ">
+                <div class="col-4 row">
                   <q-card bordered class="col-12 row no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                       <div class="col-6 text-center">ระดับคะแนน</div>
@@ -240,9 +287,7 @@ function onSubmit() {}
                       class="col-12"
                     >
                       <div class="row col-12 q-py-sm">
-                        <div
-                          class="col-6 text-center text-body2"
-                        >
+                        <div class="col-6 text-center text-body2">
                           {{ fieldLabels[field as keyof typeof fieldLabels] }}
                         </div>
                         <div class="col-6 text-center">
@@ -281,17 +326,17 @@ function onSubmit() {}
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
-.no-shadow{
-  box-shadow:none !important;
+.no-shadow {
+  box-shadow: none !important;
 }
-.lineRight{
-  border-right: 1px solid #EDEDED !important;
+.lineRight {
+  border-right: 1px solid #ededed !important;
 }
-.lineTop{
-  border-top: 1px solid #EDEDED !important;
+.lineTop {
+  border-top: 1px solid #ededed !important;
 }
-.card-box{
-  border: 1px solid #EDEDED !important;
+.card-box {
+  border: 1px solid #ededed !important;
   border-radius: 8px;
 }
 </style>

src/modules/08_KPI/components/Tab/Topic/02_Template.vue

@@ -15,6 +15,7 @@ const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
 
+const competencyType = ref<string>('HEAD')
 const visibleColumns = ref<string[]>([
   "capacity",
   "level",
@@ -142,7 +143,7 @@ function onAdd() {
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" :numpage="numpage"/>
+  <Dialog v-model:modal="modal" :numpage="numpage" v-model:competency-type="competencyType"/>
 </template>
 <style scoped>
 .custom-table2 {