hrms-mgt/src/modules/02_organizationalNew/components/tableTree.vue

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

/** importType*/
import type { QTableProps } from "quasar";

/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";

const showData = defineModel<boolean>("showData", { required: true });
const stroe = useOrganizational();
const filter = ref<string>("");
const document = ref<any>([
  {
    name: "บัญชี 1",
    val: "1",
  },
  {
    name: "บัญชี 2",
    val: "2",
  },
  {
    name: "บัญชี 3",
    val: "3",
  },
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "noPosition",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    sortable: true,
    field: "noPosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "namePosition",
    align: "left",
    label: "ชื่อตำแหน่ง",
    field: "namePosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "typePosition",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "typePosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "levelPositoion",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "levelPositoion",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "isStatus",
    align: "left",
    label: "มีคนครองหรือไม่",
    sortable: true,
    field: "isStatus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const rows = ref<any>([]);
</script>
<template>
  <!-- TOOLBAR -->
  <div class="col-12">
    <q-toolbar style="padding: 0">
      <div v-if="stroe.typeOrganizational === 'draft'">
        <q-btn flat round dense color="primary" icon="add">
          <q-tooltip>เพิ่ม</q-tooltip></q-btn
        >
        <q-btn flat round dense color="blue" icon="filter_list">
          <q-tooltip>ค้นหา</q-tooltip>
        </q-btn>
      </div>

      <q-btn flat round dense color="blue-10" icon="save_alt">
        <q-menu>
          <q-list
            style="min-width: 100px"
            v-for="(item, index) in document"
            :key="index"
          >
            <q-item clickable v-close-popup>
              <q-item-section>{{ item.name }}</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
        <q-tooltip>ดาวน์โหลด</q-tooltip>
      </q-btn>
      <q-space />
      <div class="row q-gutter-md">
        <div>
          <q-checkbox
            keep-color
            v-model="showData"
            label="แสดงตำแหน่งทั้งหมด"
            color="primary"
          />
        </div>
        <div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
      </div>
    </q-toolbar>
  </div>

  <!-- TABLE -->
  <div class="col-12">
    <d-table
      ref="table"
      :columns="columns"
      :rows="rows"
      row-key="id"
      flat
      bordered
      :paging="true"
      dense
      class="custom-header-table"
      :rows-per-page-options="[10, 25, 50, 100]"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            <span class="text-weight-medium">{{ col.label }}</span>
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props" class="cursor-pointer">
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <div v-if="col.name == 'no'">
              {{ props.rowIndex + 1 }}
            </div>

            <div v-else>
              {{ col.value }}
            </div>
          </q-td>
        </q-tr>
      </template>
      <!-- <template v-slot:pagination="scope">
      <q-pagination
        v-model="currentPage"
        active-color="primary"
        color="dark"
        :max="Number(props.maxPage)"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template> -->
    </d-table>
  </div>
</template>

<style scoped></style>