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

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

/** importType*/
import type { QTableProps } from "quasar";
import type {
  ListMenu,
  NewPagination,
} from "@/modules/02_organizationalNew/interface/index/Main";
import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
import type { PosMaster2 } from "@/modules/02_organizationalNew/interface/response/organizational";

/** importComponents*/
import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosition.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";

const dataSort = ref<Array<any>>([]);
const modalSort = ref<boolean>(false);
const showAllData = ref<boolean>(false);

const currentPage = ref<number>(1);
const orgLevel = defineModel<number>("orgLevel", { required: true });
const treeId = defineModel<string>("treeId", { required: true });
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
const totalPage = defineModel<number>("totalPage", { required: true });
const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
const stroe = useOrganizational();
const filter = ref<string>("");
const actionType = ref<string>("");
const listMenu = ref<ListMenu[]>([
  {
    label: "ดูรายละเอียด",
    icon: "mdi-eye",
    type: "VIEWDETIAL",
    color: "primary",
  },
  {
    label: "แก้ไข",
    icon: "edit",
    type: "EDIT",
    color: "primary",
  },
]);
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: "posMasterNo",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    sortable: true,
    field: "posMasterNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    field: "positionName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posTypeName",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "posTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionIsSelected",
    align: "left",
    label: "มีคนครองหรือไม่",
    sortable: true,
    field: "positionIsSelected",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const columnsExpand = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "positionName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionField",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posTypeName",
    align: "left",
    label: "ประเภทตำเเหน่ง",
    sortable: true,
    field: "posTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posExecutiveName",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "posExecutiveName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionExecutiveField",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionArea",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionArea",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const rows = ref<any>([
  {
    noPosition: "สกง.1",
    namePosition: "นักทรัพยากรบุคคล",
    typePosition: "ทั่วไป",
    levelPositoion: "ชำนาญการ / ?",
    isStatus: "ไม่มี",
  },
  {
    noPosition: "สกง.2",
    namePosition: "นักทรัพยากรบุคคล",
    typePosition: "ทั่วไป",
    levelPositoion: "ชำนาญการ / ?",
    isStatus: "ไม่มี",
  },
]);

const dialogPosition = ref<boolean>(false);
function onClickPosition(type: string) {
  actionType.value = type;
  dialogPosition.value = !dialogPosition.value;
}

const dialogDetail = ref<boolean>(false);
function onClickViewDetail() {
  dialogDetail.value = !dialogDetail.value;
}

function onClickSort() {
  modalSort.value = true;
}
function updatePagination(newPagination: NewPagination) {
  reqMaster.value.pageSize = newPagination.rowsPerPage;
  reqMaster.value.page = 1;
}
</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"
          @click="onClickPosition('ADD')"
        >
          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
        </q-btn>

        <q-btn
          flat
          round
          dense
          color="blue"
          icon="mdi-sort"
          @click="onClickSort()"
        >
          <q-tooltip>จัดลำดับ</q-tooltip>
        </q-btn>
      </div>

      <q-btn flat round dense color="blue-10" icon="save_alt">
        <q-menu>
          <q-list
            dense
            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="reqMaster.isAll"
            label="แสดงตำแหน่งทั้งหมด"
            color="primary"
          >
            <q-tooltip
              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
            >
          </q-checkbox>
        </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="posMaster"
      row-key="id"
      flat
      bordered
      :paging="true"
      dense
      class="custom-header-table"
      :rows-per-page-options="[10, 25, 50, 100]"
      :filter="filter"
      @update:pagination="updatePagination"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width></q-th>
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            <span class="text-weight-medium">{{ col.label }}</span>
          </q-th>
          <q-th auto-width></q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props" class="cursor-pointer">
          <q-td>
            <q-btn
              size="sm"
              color="primary"
              round
              dense
              @click="props.expand = !props.expand"
              :icon="props.expand ? 'remove' : 'add'"
            />
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <div v-if="col.name == 'no'">
              {{
                (reqMaster.page - 1) * Number(reqMaster.pageSize) +
                props.rowIndex +
                1
              }}
            </div>

            <div v-else>
              {{ col.value }}
            </div>
          </q-td>
          <q-td>
            <q-btn
              flat
              dense
              icon="mdi-dots-vertical"
              class="q-pa-none q-ml-xs"
              color="grey-13"
            >
              <q-menu>
                <q-list
                  dense
                  style="min-width: 200px"
                  v-for="(item, index) in listMenu"
                  :key="index"
                >
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      item.type === 'VIEWDETIAL'
                        ? onClickViewDetail()
                        : item.type === 'EDIT'
                        ? onClickPosition('EDIT')
                        : null
                    "
                  >
                    <q-item-section avatar>
                      <q-icon :color="item.color" :name="item.icon" />
                    </q-item-section>
                    <q-item-section>{{ item.label }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-td>
        </q-tr>

        <q-tr v-show="props.expand" :props="props">
          <q-td colspan="100%">
            <div class="text-left q-pa-md">
              <div class="col-12">
                <q-table
                  :columns="columnsExpand"
                  :rows="props.row.positions"
                  row-key="id"
                  bordered
                  dense
                  class="custom-header-table"
                >
                  <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-th auto-width></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-td>
                        <q-btn
                          flat
                          dense
                          icon="mdi-dots-vertical"
                          class="q-pa-none q-ml-xs"
                          color="grey-13"
                        >
                          <q-menu>
                            <q-list
                              dense
                              style="min-width: 200px"
                              v-for="(item, index) in listMenu"
                              :key="index"
                            >
                              <q-item
                                clickable
                                v-close-popup
                                @click="
                                  item.type === 'VIEWDETIAL'
                                    ? onClickViewDetail()
                                    : null
                                "
                              >
                                <q-item-section avatar>
                                  <q-icon
                                    :color="item.color"
                                    :name="item.icon"
                                  />
                                </q-item-section>
                                <q-item-section>{{
                                  item.label
                                }}</q-item-section>
                              </q-item>
                            </q-list>
                          </q-menu>
                        </q-btn>
                      </q-td>
                    </q-tr>
                  </template>
                </q-table>
              </div>
            </div>
          </q-td>
        </q-tr>
      </template>
      <template v-slot:pagination="scope">
        <q-pagination
          v-model="reqMaster.page"
          active-color="primary"
          color="dark"
          :max="totalPage"
          size="sm"
          boundary-links
          direction-links
        ></q-pagination>
      </template>
    </d-table>
  </div>

  <DialogFormPosotion
    :modal="dialogPosition"
    :close="onClickPosition"
    :orgLevel="orgLevel"
    :treeId="treeId"
    :actionType="actionType"
  />

  <!-- รายละเอียดตำแหน่ง -->
  <DialogPositionDetail v-model:position-detail="dialogDetail" />
  <DialogSort v-model:sort-position="modalSort" v-model:data="dataSort" />
</template>

<style scoped></style>