hrms-mgt/src/modules/17_acting/views/main.vue

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { QTableProps } from "quasar";
import type {
  DataTree,
  PosMaster,
  ListPerson,
} from "@/modules/17_acting/interface/response/Main";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const $q = useQuasar();
const { showLoader, hideLoader, messageError, dialogRemove } =
  useCounterMixin();

/** โครงสร้าง*/
const expanded = ref<Array<string>>([]);
const filter = ref<string>("");
const nodeTree = ref<DataTree[]>([]);
const posmasterId = ref<string>("");

/** function เรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
function fetchOrganizationActive() {
  showLoader();
  http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      if (data) {
        fetchOrganization(data.activeId);
      }
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * function fetch ข้อมูลโครงสร้าาง
 * @param id id โครงสร้างปัจุบัน
 */
function fetchOrganization(id: string) {
  showLoader();
  http
    .get(config.API.orgAct + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      nodeTree.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function updateSelected(data: PosMaster) {
  posmasterId.value = data.posmasterId;
  await Promise.all([fetchPosMaster(), fetchListAct()]);
}

/** ตำแหน่ง*/
const rowPosition = ref<ListPerson[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    sortable: false,
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-นามสกุล",
    field(row) {
      return `${row.prefix}${row.firstName}  ${row.lastName}`;
    },
    sortable: false,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: false,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: false,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posType",
    align: "left",
    label: "ตำแหน่งประเภท",
    sortable: false,
    field: "posType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevel",
    align: "left",
    label: "ระดับ",
    sortable: false,
    field: "posLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const keyword = ref<string>("");

/** function fetch รายชื่อ*/
function fetchPosMaster() {
  showLoader();
  http
    .post(config.API.orgPosAct + `/search`, { posmasterId: posmasterId.value })
    .then((res) => {
      const data = res.data.result;
      rowPosition.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function เลือกราชชื่อรักษาการ
 * @param data ข้อมูลรายชื่อ
 */
function selectPosition(data: ListPerson) {
  showLoader();
  http
    .post(config.API.orgPosAct, {
      posMasterId: posmasterId.value,
      posMasterChildId: data.id,
    })
    .then(async () => {
      await Promise.all([fetchPosMaster(), fetchListAct()]);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/** รายชื่อคนรักษาการ*/
const rowListPerson = ref<ListPerson[]>([]);
const keywordAct = ref<string>("");

/** function fetch รายชื่อรักษาการ */
function fetchListAct() {
  showLoader();
  http
    .get(config.API.orgPosAct + `/${posmasterId.value}`)
    .then((res) => {
      const data = res.data.result;
      rowListPerson.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * funcion เลือกลำดับรายชื่อรักษาการ
 * @param type up,down
 * @param id รายชื่อรักษาการ
 */
function onSwapPerson(type: string, id: string) {
  showLoader();
  http
    .get(config.API.orgPosAct + `/swap/${type}/${id}`)
    .then(() => {
      fetchListAct();
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * function ลบรายชื่อรักษาการ
 * @param id ชื่อรักษาการ
 */
function onDelete(id: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(config.API.orgPosAct + `/${id}`)
      .then(async () => {
        await Promise.all([fetchPosMaster(), fetchListAct()]);
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

onMounted(() => {
  fetchOrganizationActive();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รักษาการในตำแหน่ง
  </div>
  <q-card style="height: 100%">
    <q-card-section :horizontal="$q.screen.gt.sm">
      <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
        <div>
          <q-input dense outlined v-model="filter" label="ค้นหา">
            <template v-slot:append>
              <q-icon
                v-if="filter !== ''"
                name="clear"
                class="cursor-pointer"
                @click="filter = ''"
              />
              <q-icon name="search" color="grey-5" />
            </template>
          </q-input>
        </div>
        <div class="bg-white tree-container q-pa-xs">
          <q-tree
            class="q-pa-sm q-gutter-sm"
            dense
            :nodes="nodeTree"
            node-key="orgTreeId"
            label-key="labelName"
            :filter="filter"
            no-results-label="ไม่พบข้อมูลที่ค้นหา"
            no-nodes-label="ไม่มีข้อมูล"
            v-model:expanded="expanded"
          >
            <template v-slot:default-header="prop">
              <q-item
                clickable
                class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
              >
                <div>
                  <div class="text-weight-medium">
                    {{ prop.node.orgTreeName }}
                  </div>
                  <div class="text-weight-light text-grey-8">
                    {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
                    {{
                      prop.node.orgTreeShortName == null
                        ? null
                        : prop.node.orgTreeShortName
                    }}
                  </div>
                </div>
              </q-item>
            </template>

            <template v-slot:default-body="prop">
              <div v-if="prop.node.posMaster">
                <q-list dense v-for="col in prop.node.posMaster">
                  <q-item
                    clickable
                    :active="posmasterId == col.posmasterId"
                    active-class="my-list-link text-primary text-weight-medium"
                    @click.stop="updateSelected(col)"
                  >
                    <q-item-section>
                      {{ col.fullNameCurrentHolder }}
                    </q-item-section>
                  </q-item>
                </q-list>
                <div></div>
              </div>
            </template>
          </q-tree>
        </div>
      </q-card-section>

      <q-separator :vertical="$q.screen.gt.xs" />

      <q-card-section
        v-if="posmasterId"
        class="col-lg-9 col-md-8 col-xs-12 scroll"
        style="height: 80vh"
      >
        <div class="column q-col-gutter-sm">
          <div class="col">
            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
              <div class="col-12 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-toolbar style="padding: 0">
                    <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="keyword" label="ค้นหา">
                          <template v-slot:append>
                            <q-icon name="search" color="grey-5" />
                          </template>
                        </q-input>
                      </div>
                    </div>
                  </q-toolbar>
                </div>
                <div class="col-12">
                  <d-table
                    ref="table"
                    :columns="columns"
                    :rows="rowPosition"
                    :paging="true"
                    :filter="keyword"
                    row-key="id"
                    flat
                    bordered
                    dense
                    :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"
                          @click="selectPosition(props.row)"
                        >
                          <div v-if="col.name === 'no'">
                            {{ props.rowIndex + 1 }}
                          </div>
                          <div v-else>
                            {{ col.value ? col.value : "-" }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                    <!-- <template v-slot:pagination="scope">
                        <q-pagination
                          v-model="reqMaster.page"
                          active-color="primary"
                          color="dark"
                          :max="totalPage"
                          :max-pages="5"
                          size="sm"
                          boundary-links
                          direction-links
                        ></q-pagination>
                      </template> -->
                  </d-table>
                </div>
              </div>
            </q-card>
          </div>
          <div class="col">
            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
              <div class="col-12 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-toolbar style="padding: 0">
                    <q-space />
                    <div class="row q-gutter-md">
                      <div>
                        <q-input
                          outlined
                          dense
                          v-model="keywordAct"
                          label="ค้นหา"
                        >
                          <template v-slot:append>
                            <q-icon name="search" color="grey-5" />
                          </template>
                        </q-input>
                      </div>
                    </div>
                  </q-toolbar>
                </div>
                <div class="col-12">
                  <d-table
                    ref="table"
                    :columns="columns"
                    :rows="rowListPerson"
                    :paging="true"
                    :filter="keywordAct"
                    row-key="id"
                    flat
                    bordered
                    dense
                    :rows-per-page-options="[10, 25, 50, 100]"
                  >
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th auto-width v-if="rowListPerson.length !== 1" />
                        <q-th auto-width v-if="rowListPerson.length !== 1" />
                        <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-tr>
                    </template>
                    <template v-slot:body="props">
                      <q-tr :props="props" class="cursor-pointer">
                        <q-td auto-width v-if="rowListPerson.length !== 1">
                          <q-btn
                            dense
                            size="12px"
                            flat
                            round
                            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
                            :disable="props.rowIndex + 1 == 1"
                            icon="mdi-arrow-up-bold"
                            @click="onSwapPerson('up', props.row.id)"
                          >
                            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
                          </q-btn>
                        </q-td>
                        <q-td auto-width v-if="rowListPerson.length !== 1">
                          <q-btn
                            dense
                            size="12px"
                            flat
                            round
                            :color="
                              rowListPerson.length == props.rowIndex + 1
                                ? 'grey'
                                : 'red'
                            "
                            :disable="
                              rowListPerson.length == props.rowIndex + 1
                            "
                            icon="mdi-arrow-down-bold"
                            @click="onSwapPerson('down', props.row.id)"
                          >
                            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
                          </q-btn>
                        </q-td>
                        <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 ? col.value : "-" }}
                          </div>
                        </q-td>
                        <q-td>
                          <q-btn
                            dense
                            size="12px"
                            flat
                            round
                            color="red"
                            icon="delete"
                            @click="onDelete(props.row.id)"
                          >
                            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
                          </q-btn>
                        </q-td>
                      </q-tr>
                    </template>
                    <!-- <template v-slot:pagination="scope">
                        <q-pagination
                          v-model="reqMaster.page"
                          active-color="primary"
                          color="dark"
                          :max="totalPage"
                          :max-pages="5"
                          size="sm"
                          boundary-links
                          direction-links
                        ></q-pagination>
                      </template> -->
                  </d-table>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card-section>
  </q-card>
</template>

<style scoped>
.tree-container {
  overflow: auto;
  height: 74vh;
  border: 1px solid #e6e6e7;
  border-radius: 10px;
}

.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>