hrms-mgt/src/modules/18_command/views/lists.vue

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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";

import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
import type { FormQuery } from "@/modules/18_command/interface/request/Main";
import type { ResListCommand } from "@/modules/18_command/interface/response/Main";

import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
import TableList from "@/modules/18_command/components/Main/TableMain.vue";

const $q = useQuasar();
const store = useCommandListStore();
const { showLoader, hideLoader, messageError } = useCounterMixin();

const modalAdd = ref<boolean>(false);

const tabsManu = ref<ItemTabs[]>([
  { label: "แบบร่าง", name: "DRAFT" },
  { label: "รอผู้มีอำนาจ", name: "PENDING" },
  { label: "รอออกคำสั่ง", name: "WAITING" },
  { label: "ออกคำสั่งเสร็จสิ้น", name: "REPORTED" },
  { label: "ยกเลิก", name: "CANCEL" },
]);

const queryParams = reactive<FormQuery>({
  page: 1,
  pageSize: 10,
  year: new Date().getFullYear(),
  keyword: "",
});

async function fetchListCommand() {
  showLoader();
  await http
    .get(config.API.commandList, {
      params: { ...queryParams, status: store.tabsMain },
    })
    .then(async (res: ResListCommand) => {
      const data = await res.data.result;
      store.rows = data.data;
      store.total = data.total;
      store.maxPage = Math.ceil(data.total / queryParams.pageSize);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>

  <!-- toolbar -->
  <q-card>
    <q-toolbar class="q-pa-sm">
      <datepicker
        menu-class-name="modalfix"
        v-model="queryParams.year"
        :locale="'th'"
        autoApply
        year-picker
        :enableTimePicker="false"
        @update:model-value="fetchListCommand"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            hide-bottom-space
            :model-value="
              queryParams.year == null ? null : queryParams.year + 543
            "
            :label="`${'ปีงบประมาณ'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>

      <q-btn
        flat
        round
        dense
        icon="add"
        color="primary"
        @click.prevent="modalAdd = true"
      />

      <q-space />
      <q-input
        dense
        outlined
        v-model="queryParams.keyword"
        label="ค้นหา"
        clearable
        style="width: 300px"
      >
        <template v-slot:append v-if="!queryParams.keyword">
          <q-icon name="search" /> </template
      ></q-input>
    </q-toolbar>
  </q-card>

  <!-- Tabs -->
  <q-card class="q-mt-sm">
    <q-card-section style="padding: 0px">
      <q-separator />
      <q-tabs
        v-model="store.tabsMain"
        inline-label
        align="justify"
        indicator-color="primary"
        active-color="primary bg-teal-1"
      >
        <q-tab
          v-for="(tab, index) in tabsManu"
          :key="index"
          :name="tab.name"
          :label="tab.label"
        />
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="store.tabsMain" animated>
        <q-tab-panel
          v-for="(panel, index) in tabsManu"
          :key="index"
          :name="panel.name"
        >
          <TableList
            :fetch-list="fetchListCommand"
            v-model:page="queryParams.page"
            v-model:pageSize="queryParams.pageSize"
          />
        </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>

  <DialogFormCommand v-model:modal="modalAdd" :is-copy="false" />
</template>

<style scoped></style>