hrms-edm/Services/client/src/components/ListView.vue

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import type { QTableProps } from 'quasar'
import { useTreeDataStore } from '@/stores/tree-data'

const { listDataFile, listDataFolder, currentDept } = storeToRefs(
  useTreeDataStore()
)
const { getFolder } = useTreeDataStore()

const currentLevel = computed(() =>
  currentDept.value === 0
    ? 'ตู้จัดเก็บเอกสาร'
    : currentDept.value === 1
    ? 'ลิ้นชัก'
    : currentDept.value === 2
    ? 'แฟ้ม'
    : 'แฟ้มย่อย'
)



const currentIcon = computed(() =>
  currentDept.value === 0
    ? 'mdi-file-cabinet'
    : currentDept.value === 1
    ? 'inbox'
    : 'o_folder_open'
)
const columnsFolder: QTableProps['columns'] = [
  {
    name: 'name',
    required: true,
    label: 'ชื่อ',
    align: 'left',
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
    style: 'width: 1000px',
  },
  {
    name: 'createdBy',
    align: 'center',
    label: 'สร้างโดย',
    field: 'createdBy',
    style: 'width: 20px',

    sortable: true,
  },
  {
    name: 'createdBy',
    align: 'center',
    label: 'วันที่สร้าง',
    field: 'createdAt',
    sortable: true,
    style: 'width: 20px',
  },
  {
    name: 'actions',
    align: 'center',
    label: '',
    field: '',
    style: 'width: 5px',
  },
]

const columnsFile: QTableProps['columns'] = [
  {
    name: 'fileName',
    required: true,
    label: 'ชื่อไฟล์',
    align: 'left',
    field: (row) => row.fileName,
    format: (val) => `${val}`,
    sortable: true,
    style: 'width: 200px',
  },
  {
    name: 'title',
    align: 'center',
    label: 'ชื่อเรื่อง',
    field: 'title',
    style: 'width: 200px',

    sortable: true,
  },
  {
    name: 'fileType',
    align: 'center',
    label: 'ประเภทของไฟล์',
    field: 'fileType',
    sortable: true,
    style: 'width: 200px',
  },
  {
    name: 'actions',
    align: 'center',
    label: '',
    field: '',
    style: 'width: 20px',
  },
]
</script>

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <div
        class="flex flex-break d justify-between space-between"
        v-if="currentDept >= 1"
      >
        <div>
          <span class="text-h6">{{ currentLevel }}</span>
        </div>
        <div>
          <q-btn
            outline
            push
            class="q-px-md q-ml-md q-py-sm"
            :label="'สร้าง' + currentLevel"
            type="submit"
            color="primary"
            dense
            icon="add"
            @click=""
          />
        </div>
      </div>
      <q-table
        flat
        bordered
        :rows="listDataFolder"
        :columns="columnsFolder"
        row-key="name"
        hide-bottom
        :rows-per-page-options="[0]"
      >
        <template v-slot:body-cell-name="nameRow">
          <q-td
            @click="
              () => {
                getFolder(nameRow.row.pathname)
              }
            "
          >
            <q-icon :name="currentIcon" size="2em" color="primary" />
            {{ nameRow.row.name }}
          </q-td>
        </template>

        <template v-slot:body-cell-actions="actionsRow">
          <q-td class="justify-center">
            <div>
              <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
              <q-tooltip
                anchor="center left"
                self="center right"
                :offset="[5, 1]"
              >
                {{ actionsRow.row.name }}
              </q-tooltip>
            </div>
            <div>
              <q-btn flat color="positive" dense icon="edit" @click="" />
              <q-btn flat color="negative" dense icon="delete" @click="" />
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
  </div>

  <div class="q-pa-md" v-if="currentDept >= 3">
    <div class="q-gutter-sm">
      <div class="flex flex-break d justify-between space-between">
        <div>
          <span class="text-h6">เอกสาร</span>
        </div>
        <div>
          <q-btn
            outline
            push
            class="q-px-md q-ml-md q-py-sm"
            label="สร้างเอกสาร"
            type="submit"
            color="primary"
            dense
            icon="add"
            @click=""
          />
        </div>
      </div>
      <q-table
        flat
        bordered
        :rows="listDataFile"
        :columns="columnsFile"
        row-key="name"
        hide-bottom
        :rows-per-page-options="[0]"
      >
        <template v-slot:body-cell-name="nameRow">
          <q-td
            @click="
              () => {
                getFolder(nameRow.row.pathname)
              }
            "
          >
            <q-icon :name="currentIcon" size="2em" color="primary" />
            {{ nameRow.row.name }}
          </q-td>
        </template>

        <template v-slot:body-cell-actions="actionsRow">
          <q-td class="justify-center">
            <div>
              <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
              <q-tooltip
                anchor="center left"
                self="center right"
                :offset="[5, 1]"
              >
                {{ actionsRow.row.fileSize }}
              </q-tooltip>
            </div>
            <div>
              <q-btn flat color="positive" dense icon="edit" @click="" />
              <q-btn flat color="negative" dense icon="delete" @click="" />
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.justify-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>