hrms-mgt/src/views/Dashboard.vue

<script setup lang="ts">
import { ref } from "vue";
const iteminbox = ref<any>([]);
const splitterModel = ref<number>(30);
const link = ref<number>(1);
const inboxList = ref<any>([
  {
    no: 1,
    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
    timereceive: "13/12/2565",
    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
    ratingModel: 0,
  },
  {
    no: 2,
    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
    timereceive: "13/12/2565",
    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
    ratingModel: 1,
  },
]);
const data = ref<any>([
  {
    no: 1,
    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
    timereceive: "13/12/2565",
    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
  },
]);
const btnReply = ref<boolean>(true);
const listpayload = ref<any>([]);
const listpayloadNolink = ref<any>([]);
const smgreplaytitle = ref<string>("");
const smgreplay = ref<string>("");
const userName = ref<any>(localStorage.getItem("userName"));
const thumbStyle = ref<any>({
  right: "4px",
  borderRadius: "5px",
  backgroundColor: "#a8bbbf",
  width: "5px",
  opacity: 0.5,
});

const barStyle = ref<any>({
  right: "2px",
  borderRadius: "9px",
  backgroundColor: "#d6dee1",
  width: "9px",
  opacity: 0.2,
});
</script>

<!-- page:หน้าแรก -->
<template>
  <div class="toptitle text-dark">หน้าแรก</div>
  <q-splitter
    v-model="splitterModel"
    :horizontal="$q.screen.lt.sm"
    separator-class="bg-grey-2 row"
    separator-style="width: 12px"
    class="text-dark"
    :style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'"
  >
    <template v-slot:before>
      <q-card
        flat
        bordered
        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
      >
        <div class="col-12 q-pt-sm q-px-md">
          <div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
        </div>
        <q-scroll-area
          :style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
          class="bg-white rounded-borders q-px-md row col-12"
        >
          <q-list
            v-for="(contact, index) in inboxList"
            :key="index"
            class="q-pt-sm"
          >
            <q-item
              clickable
              v-ripple
              class="mytry"
              :active="link === contact.no"
              active-class="my-menu-link"
            >
              <q-item-section>
                <q-item-label caption class="text-weight-light">{{
                  contact.timereceive
                }}</q-item-label>
                <q-item-label class="text-weight-medium">{{
                  contact.sender
                }}</q-item-label>
                <q-item-label caption lines="2">{{
                  contact.subject
                }}</q-item-label>
              </q-item-section>
              <q-item-section side top>
                <q-rating
                  v-model="contact.ratingModel"
                  size="1.4em"
                  :max="1"
                  color="grey"
                  color-selected="yellow-13"
                />
                <q-icon
                  class="q-mt-md"
                  name="mdi-paperclip"
                  color="grey-5"
                  size="xs"
                />
              </q-item-section>
            </q-item>
            <q-separator
              v-if="index + 1 < inboxList.length"
              :key="index"
              color="grey-3 q-mt-sm"
            />
          </q-list>

          <q-banner
            rounded
            class="bg-amber-1 text-center q-mt-sm"
            v-if="inboxList.length < 1"
          >
            <div class="text-yellow-10">
              <q-icon
                name="mdi-alert-box"
                class="q-mx-xs"
                size="sm"
                color="yellow-10"
              />
              ไม่พบข้อความ
            </div>
          </q-banner>
        </q-scroll-area>
      </q-card>
    </template>

    <template v-slot:after>
      <q-card
        v-if="data != null"
        class="q-pa-none rounded-borders"
        flat
        bordered
        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
      >
        <div class="eow col-12" v-for="(d, index) in data" :key="index">
          <div class="col-12 q-pa-xs">
            <q-item>
              <q-item-section top avatar>
                <q-avatar
                  size="40px"
                  rounded
                  color="primary"
                  class="text-white"
                >
                  <q-icon name="mdi-account" size="28px" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label class="text-weight-medium">{{
                  d.subject
                }}</q-item-label>
                <q-item-label caption lines="2"
                  >จาก : {{ d.sender }}</q-item-label
                >
              </q-item-section>

              <q-item-section side top>
                <q-item-label caption>{{ d.timereceive }}</q-item-label>
                <div class="text-grey-8 q-gutter-xs q-pt-sm">
                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-reply"
                    size="10px"
                    color="grey-7"
                  />
                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-trash-can"
                    size="10px"
                    color="grey-7"
                  />
                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-dots-vertical"
                    size="10px"
                    color="grey-7"
                  />
                </div>
              </q-item-section>
            </q-item>
          </div>
          <div flat class="q-mb-md">
            <q-card
              flat
              bordered
              class="text-dark q-mx-md q-pa-md bg-grey-1"
              :style="$q.screen.gt.xs ? 'height: 64vh' : ''"
              >{{ d.body }}</q-card
            >
            <div :class="$q.screen.gt.xs ? 'absolute-bottom q-mb-md' : ''">
              <div class="row col-12 self-center q-px-md q-pt-md">
                <div class="row self-center">
                  <q-icon name="mdi-paperclip" color="grey" size="xs" />
                  <div class="text-grey-8 q-pl-sm text-weight-light">
                    เอกสารแนบ (10 MB)
                  </div>
                </div>
                <q-btn
                  unelevated
                  size="12px"
                  dense
                  class="q-ml-md q-px-sm bg-blue-1 text-blue-7"
                  label="ดาวน์โหลดทั้งหมด"
                />
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </template>
  </q-splitter>
</template>

<style>
.my-menu-link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  border: 1px solid #1bb19ab8;
  color: #1bb19ab8 !important;
}

.my-menu-link .q-hoverable {
  border-radius: 5px;
}

.mytry {
  font-size: 0.75rem;
  padding: 12px;
}

.mytry:hover {
  border-radius: 5px;
}
</style>