ui ประเมินผล

src/modules/06_evaluate/components/step/step5.vue

@@ -1,14 +1,40 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixins = useCounterMixin();
+const { date2Thai } = mixins;
 const status = ref<string>("ANNOUNCE_WEB");
 const website = ref<string>("https://bma-ehr.frappet.com/");
+const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
+
+const items = ref<any>([
+  { label: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)" },
+  { label: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)" },
+  { label: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)" },
+]);
+
+function copyLink(link: string) {
+  console.log(`Copying link  ${link}`);
+  const textarea = document.createElement("textarea");
+  textarea.value = link;
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+}
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 text-center q-">
-      <q-badge
+  <div class="row q-gutter-md">
+    <div class="col-12 text-center">
+      <q-banner class="text-weight-bold text-red-14 bg-red-2">
+        <div class="text-weight-bold">
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
+        </div>
+      </q-banner>
+      <!-- <q-badge
         v-if="status == 'ANNOUNCE_WEB'"
         outline
         color="primary"
@@ -16,9 +42,41 @@ const website = ref<string>("https://bma-ehr.frappet.com/");
         class="q-pa-sm"
         style="font-size: 16px"
       />
-      <div>
-        <a :href="website" target="_blank">{{ website }}</a>
-      </div>
+      <div> -->
+      <!-- <a :href="website" target="_blank">{{ website }}</a> -->
+      <!-- </div> -->
+    </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 q-pa-md">
+          <div class="col-12">
+            <q-list>
+              <q-item v-for="(item, index) in items" :key="index">
+                <q-item-section>
+                  <q-item-label>{{ item.label }}</q-item-label>
+                </q-item-section>
+
+                <q-item-section side top>
+                  <q-btn
+                    flat
+                    round
+                    color="primary"
+                    icon="mdi-clipboard-outline"
+                    @click="copyLink(item.label)"
+                  >
+                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
+                  </q-btn>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </div>
+      </q-card>
     </div>
   </div>
 </template>