รายการตรวจสอบเงื่อนไขต่าง ๆ

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -13,11 +13,13 @@ import keycloak from "@/plugins/keycloak";
 import type {
   TypeFile,
   rowFile,
+  FileList,
+  CheckBoxType,
 } from "@/modules/06_retirement/interface/response/Main";
 import type { QTableProps } from "quasar";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
-const avatar = ref<string>('')
+const avatar = ref<string>("");
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** Use */
@@ -34,6 +36,7 @@ const {
   success,
   dialogMessage,
   dialogConfirm,
+  dialogRemove,
 } = mixin;
 const { statusText } = RetirementData;
 
@@ -43,6 +46,7 @@ const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
 const myFormConfirm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
+const conditions = ref<boolean>(false);
 const dataDetail = ref<any>({
   datetext: "",
   activeDate: new Date(),
@@ -117,6 +121,14 @@ const columns = ref<QTableProps["columns"]>([
 const closeModal = () => (modal.value = false);
 const openModal = () => (modal.value = true);
 
+const file = ref<any>(null);
+const fileList = ref<FileList[]>([]);
+const checkboxGroup = ref<CheckBoxType[]>([]);
+const checkboxOp = ref<CheckBoxType[]>([
+  { label: "ไม่เป็นหนี้สหกรณ์", value: "debt" },
+  { label: "test1", value: "test1" },
+  { label: "test2", value: "test2" },
+]);
 /** Hook */
 onMounted(async () => {
   fetchData(id.value);
@@ -180,7 +192,7 @@ const fetchData = async (id: string) => {
       location.value = data.location ?? "";
       status.value = data.status ?? "";
       remarkHorizontal.value = data.remarkHorizontal ?? "-";
-      getAvatar(data.profileId)
+      getAvatar(data.profileId);
     })
     .catch((e) => {
       messageError($q, e);
@@ -190,19 +202,17 @@ const fetchData = async (id: string) => {
     });
 };
 
-function getAvatar(id:string){
+function getAvatar(id: string) {
-  if(id){
+  if (id) {
     http
-    .get(config.API.profileAvaId(id))
+      .get(config.API.profileAvaId(id))
-    .then((res)=>{
+      .then((res) => {
-      console.log(res)
+        console.log(res);
-      const dataList = res.data.result
+        const dataList = res.data.result;
-      avatar.value = dataList.avatar
+        avatar.value = dataList.avatar;
-    }).catch((e)=>{
+      })
-
+      .catch((e) => {})
-    }).finally(()=>{
+      .finally(() => {});
-      
-    })
   }
 }
 
@@ -298,6 +308,38 @@ const clickCancel = async () => {
   await fetchData(id.value);
   edit.value = false;
 };
+/**
+ * กดยกเลิก
+ */
+const clickCancelConditions = async () => {
+  await fetchData(id.value);
+  conditions.value = false;
+};
+
+
+const saveConditions = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await dataSave(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+//Save จาก Api
+const dataSave = async () => {
+
+};
 
 /**
  * Functionบันทึก
@@ -320,6 +362,8 @@ const conditionSave = () => {
     });
   }
 };
+
+
 //Save จาก Api
 const saveData = async () => {
   const formData = new FormData();
@@ -418,6 +462,54 @@ function onclickViewinfo(id: string) {
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
+
+function uploadFiles() {
+  const Data = new FormData();
+  Data.append("file", file.value);
+  showLoader();
+  http
+    .put(config.API.investigateRelevantUploadFile(id.value), Data)
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      file.value = null;
+    });
+}
+
+function downloadFiles(link: string) {
+  window.open(link, "_blank");
+}
+
+/**
+ * ลบไฟล์
+ * @param id id file
+ */
+function removeFile(id: string) {
+  dialogRemove($q, () => confirmRemove(id));
+}
+
+/**
+ * ยืนยัน ลบ ไฟล์
+ * @param id id file
+ */
+function confirmRemove(fileId: string) {
+  showLoader();
+  http
+    .delete(config.API.investigateRelevantFileDelete(id.value, fileId))
+    .then((res) => {
+      success($q, `ลบไฟล์สำเร็จ`);
+      fetchData(id.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -662,6 +754,135 @@ function updatemodalPersonal(modal: boolean) {
     </div>
   </q-card>
 
+  <q-card
+    v-if="dataDetail.status == 'WAITTING'"
+    bordered
+    class="row col-12 text-dark q-mt-sm"
+  >
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        รายการตรวจสอบเงื่อนไขต่าง ๆ
+      </div>
+      <q-space />
+      <div v-if="!conditions">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="conditions = !conditions"
+        />  
+      </div>
+      <div v-else class="q-gutter-x-sm">
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="saveConditions"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="clickCancelConditions"
+        />
+      </div>
+    </div>
+
+    <div class="col-12"><q-separator /></div>
+    <div class="col-7">
+      <q-option-group
+        :options="checkboxOp"
+        type="checkbox"
+        v-model="checkboxGroup"
+        :disable="!conditions"
+      />
+    </div>
+    <div class="col-5">
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div class="col-12 row">
+          <q-file
+            class="col-12"
+            for="#evidenceFiles"
+            outlined
+            dense
+            v-model="file"
+            label="อัปโหลดเอกสารหลักฐานต่าง ๆ"
+            hide-bottom-space
+            :disable="!conditions"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+            <template v-slot:after>
+              <q-btn
+                v-if="file"
+                size="14px"
+                flat
+                round
+                dense
+                color="add"
+                icon="mdi-upload"
+                @click="uploadFiles"
+                ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+              >
+            </template>
+          </q-file>
+        </div>
+
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item v-for="File in fileList" :key="File.id" clickable v-ripple>
+              <q-item-section>{{ File.fileName }}</q-item-section>
+              <q-item-section avatar>
+                <div class="row">
+                  <div>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      size="12px"
+                      color="blue"
+                      icon="mdi-download-outline"
+                      @click="downloadFiles(File.pathName)"
+                    >
+                      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      size="12px"
+                      color="red"
+                      icon="mdi-delete-outline"
+                      @click="removeFile(file.id)"
+                      ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
@@ -1121,7 +1342,6 @@ function updatemodalPersonal(modal: boolean) {
     :id="personId"
     @update:modal="updatemodalPersonal"
   />
-
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/interface/response/Main.ts

@@ -40,4 +40,17 @@ interface rowFile {
   pathName: string
 
 }
-export type { resMain, ResponseItems, TypeFile, rowFile };
+
+interface FileList {
+  id: string
+  fileName: string
+  pathName: string
+
+}
+
+interface CheckBoxType {
+  label: string
+  value: string
+
+}
+export type { resMain, ResponseItems, TypeFile, rowFile,FileList,CheckBoxType };