hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue

<script setup lang="ts">
import { ref } from "vue";

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

const files = [
  {
    id: "x1",
    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    pathName: "12",
  },
  {
    id: "x2",
    fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
    pathName: "12",
  },
  {
    id: "x3",
    fileName: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "12",
  },
];

const listFile = [
  {
    id: "x1",
    fileName: "เอกสาร 1",
    pathName: "12",
  },
  {
    id: "x2",
    fileName: "เอกสาร 2",
    pathName: "12",
  },
];

function downloadFile(name: string) {
  console.log("download");
}

function deleteFile(name: string) {
  console.log("delete");
}

function save() {
  console.log("save");
}
</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>
    </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>

        <q-list
          v-for="file in files"
          :key="file.id"
          class="full-width"
          bordered
          separator
        >
          <q-item 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="downloadFile(file.pathName)"
                  >
                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </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 q-mb-xs">
              <div class="col-xs-12 col-sm-11 row">
                <q-file
                  v-model="fileEvaluation5"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                  label="อัปโหลดไฟล์"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </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-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
            <div v-if="listFile.length > 0">
              <q-list
                v-for="file in listFile"
                :key="file.id"
                class="full-width"
                bordered
                separator
              >
                <q-item 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="downloadFile(file.pathName)"
                        >
                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                        </q-btn>
                        <q-btn
                          dense
                          flat
                          round
                          size="12px"
                          color="red"
                          icon="mdi-trash-can-outline"
                          @click="deleteFile(file.pathName)"
                        >
                          <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>
    </div>
    <div class="col-12">
      <div class="q-mt-xs q-gutter-md" align="right">
        <q-btn
          unelevated
          label="บันทึกแจ้งผลการประกาศคัดเลือก"
          color="public"
          @click="save"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>