hrms-mgt/src/modules/18_command/components/Main/TableMain.vue

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

import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";

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

import type { QTableProps } from "quasar";

const $q = useQuasar();
const router = useRouter();

const store = useCommandListStore();
const { date2Thai, dialogRemove, dialogConfirm } = useCounterMixin();

const columns = ref<QTableProps["columns"]>([
  {
    name: "orderNo",
    align: "left",
    label: "เลขที่คำสั่ง",
    sortable: false,
    field: "orderNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "orderName",
    align: "center",
    label: "ชื่อคำสั่ง",
    sortable: true,
    field: "orderName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "signatoryDate",
    align: "center",
    label: "วันที่ลงนาม",
    sortable: false,
    field: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "orderDate",
    align: "center",
    label: "วันที่คำสั่งมีผล",
    sortable: false,
    field: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "orderBy",
    align: "center",
    label: "ผู้สร้าง",
    sortable: false,
    field: "orderBy",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "signatoryBy",
    align: "center",
    label: "ผู้ลงนาม",
    sortable: false,
    field: "signatoryBy",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const modalCopy = ref<boolean>(false);
const commandId = ref<string>("");

function onRedirectToDetail(type: string, id: string) {
  router.push(`/command/${type}/${id}`);
}

function onCopy(id: string) {
  commandId.value = id;
  modalCopy.value = true;
}

function onCancel(id: string) {
  dialogRemove(
    $q,
    () => {},
    "ยืนยันการยกเลิกการออกคำสั่ง",
    "ต้องการยืนยันการยกเลิกการออกคำสั่งนี้ใช่หรือไม่ ?"
  );
}

function onReCommand(id: string) {
  dialogConfirm(
    $q,
    () => {},
    "ยืนยันการดึงไปทำคำสั่งใหม่",
    "ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
  );
}
</script>

<template>
  <d-table
    ref="table"
    :columns="columns"
    :rows="store.rows"
    row-key="id"
    flat
    dense
    bordered
    :paging="true"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
        <q-th auto-width />
        <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">
        <q-td auto-width>
          <q-btn
            flat
            dense
            round
            color="secondary"
            icon="mdi-dots-horizontal-circle-outline"
          >
            <q-menu>
              <q-list dense style="min-width: 200px">
                <!-- แก้ไขข้อมูล ไม่แสดง Tabs ยกเลิก -->
                <q-item
                  clickable
                  v-close-popup
                  v-if="store.tabsMain !== 'list_cancel'"
                  @click.pervent="onRedirectToDetail('edit', props.row.id)"
                >
                  <q-item-section>
                    <div class="row items-center">
                      <q-icon
                        color="edit"
                        size="xs"
                        name="edit
                      "
                      />
                      <div class="q-pl-md">แก้ไขข้อมูล</div>
                    </div>
                  </q-item-section>
                </q-item>

                <!-- รายละเอียด -->
                <q-item
                  clickable
                  v-close-popup
                  @click.pervent="onRedirectToDetail('view', props.row.id)"
                >
                  <q-item-section>
                    <div class="row items-center">
                      <q-icon
                        color="info"
                        size="xs"
                        name="mdi-eye
                      "
                      />
                      <div class="q-pl-md">รายละเอียด</div>
                    </div>
                  </q-item-section>
                </q-item>

                <!-- ทำสำเนาคำสั่ง -->
                <q-item
                  clickable
                  v-close-popup
                  @click.pervent="onCopy(props.row.id)"
                >
                  <q-item-section>
                    <div class="row items-center">
                      <q-icon
                        color="blue-6"
                        size="xs"
                        name="mdi-content-copy"
                      />
                      <div class="q-pl-md">ทำสำเนาคำสั่ง</div>
                    </div>
                  </q-item-section>
                </q-item>

                <!-- ยกเลิก ไม่แสดง Tabs ยกเลิก -->
                <q-item
                  clickable
                  v-close-popup
                  v-if="store.tabsMain !== 'list_cancel'"
                  @click.pervent="onCancel(props.row.id)"
                >
                  <q-item-section>
                    <div class="row items-center">
                      <q-icon
                        color="red"
                        size="xs"
                        name="close
                      "
                      />
                      <div class="q-pl-md">ยกเลิก</div>
                    </div>
                  </q-item-section>
                </q-item>

                <!-- ดึงไปทำคำสั่งใหม่ แสดงแค่ Tabs ยกเลิก -->
                <q-item
                  clickable
                  v-close-popup
                  v-if="store.tabsMain === 'list_cancel'"
                  @click.pervent="onReCommand(props.row.id)"
                >
                  <q-item-section>
                    <div class="row items-center">
                      <q-icon color="amber-5" size="xs" name="mdi-replay" />
                      <div class="q-pl-md">ดึงไปทำคำสั่งใหม่</div>
                    </div>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </q-td>
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div>
            {{ col.value ?? "-" }}
          </div>
        </q-td>
      </q-tr>
    </template>
  </d-table>

  <DialogFormCommand v-model:modal="modalCopy" :is-copy="true" />
</template>

<style scoped></style>