no message

src/modules/04_registryNew/components/detail/Other/02_Document.vue

@@ -1,6 +1,184 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { ArrayFileList } from "@/modules/04_registryNew/interface/index/document";
+const $q = useQuasar;
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+} = mixin;
+
+const id = ref<string>("");
+const documentFile = ref<any>(null);
+const fileDocDataUpload = ref<File[]>([]);
+const fileList = ref<ArrayFileList[]>([]);
+/**
+ * ฟังชั่นอัปโหลดไฟล์
+ * @param documentFile ไฟล์ที่รับมา
+ */
+function fileUploadDoc(documentFile: any) {
+  documentFile.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+function getData() {}
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+function upLoadFileDoc() {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  http
+    .put(config.API.complaintFileUpload(id.value), Data)
+    .then((res) => {
+      success($q, "อัพโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+/**
+ * เปิดลิงค์ไฟล์
+ * @param link รับมาเป็น https ลิงค์
+ */
+function downloadFile(link: string) {
+  window.open(link, "_blank");
+}
+
+/**
+ * ลบไฟล์
+ * @param id id file
+ */
+function deleteFile(id: string) {
+  dialogRemove($q, () => confirmDelete(id));
+}
+
+/**
+ * ยืนยัน ลบ ไฟล์
+ * @param id id file
+ */
+function confirmDelete(idOrder: string) {
+  showLoader();
+  http
+    .delete(config.API.complaintFileDelete(id.value, idOrder))
+    .then((res) => {
+      success($q, `ลบไฟล์สำเร็จ`);
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+</script>
 <template>
-  <div>เอกสารหลักฐาน</div>
+  <div class="col-sm-12 col-md-3">
+    <div flat class="q-pa-none">
+      <div class="col-12 row q-col-gutter-md">
+        <div class="row col-12">
+          <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"
+                  @added="fileUploadDoc"
+                  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="upLoadFileDoc()"
+                      ><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.pathName)"
+                        ><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.id)"
+                        ><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>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>