hrms-mgt/src/modules/15_development/components/Target.vue

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

import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type {
  FormGroupTarget,
  FormGroupRelate,
} from "@/modules/15_development/interface/request/Main";
import type {
  ResGroup,
  ResLevel,
} from "@/modules/15_development/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";

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

const $q = useQuasar();
const {
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogRemove,
  success,
  messageError,
} = useCounterMixin();

const columnsGroup = ref<QTableProps["columns"]>([
  {
    name: "groupTarget",
    align: "left",
    label: "กลุ่มเป้าหมาย ",
    sortable: true,
    field: "groupTarget",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "type",
    align: "left",
    label: "ประเภท",
    sortable: true,
    field: "type",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "amount",
    align: "left",
    label: "จำนวน(คน)",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const columnsRelated = ref<QTableProps["columns"]>([
  {
    name: "related",
    align: "left",
    label: "ผู้เกี่ยวข้อง ",
    sortable: true,
    field: "related",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "amount",
    align: "left",
    label: "จำนวน(คน)",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const rows1 = ref<any>([
  {
    groupTarget: "ข้าราชการ",
    type: "บริหาร",
    amount: 20,
  },
]);
const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
const rows3 = ref<any>([
  {
    groupTarget: "ข้าราชการ",
    type: "บริหาร",
    amount: 20,
  },
]);
const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
const options = ref<any>([
  // "ข้าราชการกรุงเทพมหานคร",
  // "ข้าราชการกรุงเทพมหานครสามัญ",
  // "เจ้าหน้าที่ดำเนิดการ",
]);

const groupOp = ref<DataOption[]>([
  { id: "1", name: "ข้าราชการกรุงเทพมหานคร" },
  { id: "2", name: "บุคลากรกรุงเทพมหานคร" },
  { id: "3", name: "บุคคลภายนอก" },
]);
const groupSubOp = ref<DataOption[]>([
  { id: "1", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
  { id: "2", name: "ข้าราชการครู" },
]);

const modalGroupTarget = ref<boolean>(false);
const modalRelate = ref<boolean>(false);

const formGroupTarget = reactive<FormGroupTarget>({
  groupTarget: "",
  groupTargetSub: "",
  position: "",
  posType: "",
  level: "",
  type: "",
  amount: null,
});

const formGroupRelate = reactive<FormGroupRelate>({
  relate: "",
  amount: null,
});

const posTypeOp = ref<DataOption[]>([]);
const posLevelOp = ref<DataOption[]>([]);
const posTypeMain = ref<ResGroup[]>([]);

/** function เรียกข้อมูลประเภทตำแหน่ง*/
function fetchType() {
  if (posTypeMain.value.length === 0) {
    http
      .get(config.API.orgPosType)
      .then((res) => {
        const data = res.data.result;
        posTypeMain.value = data;
        posTypeOp.value = data.map((e: ResGroup) => ({
          id: e.id,
          name: e.posTypeName,
        }));
      })
      .catch((err) => {
        messageError($q, err);
      });
  }
}

function onClickOpenDialog(type: string) {
  if (type === "group") {
    modalGroupTarget.value = true;
    fetchType();
  } else {
    modalRelate.value = true;
  }
}

function onSubmitGroup() {
  dialogConfirm($q, () => {
    success($q, "บันทึกข้อมูลสำเร็จ");
    onClickCloseDialog();
  });
}

function onSubmitRelate() {
  dialogConfirm($q, () => {
    success($q, "บันทึกข้อมูลสำเร็จ");
    onClickCloseDialog();
  });
}

function onclickDelete() {
  dialogRemove($q, () => {
    success($q, "ลบข้อมูลสำเร็จ");
  });
}

function cleanFormData() {
  formGroupTarget.groupTarget = "";
  formGroupTarget.groupTargetSub = "";
  formGroupTarget.position = "";
  formGroupTarget.posType = "";
  formGroupTarget.level = "";
  formGroupTarget.type = "";
  formGroupTarget.amount = null;
  formGroupRelate.relate = "";
  formGroupRelate.amount = null;
}

function onClickCloseDialog() {
  modalGroupTarget.value = false;
  modalRelate.value = false;
  cleanFormData();
}

function updatePosTypeName(id: string) {
  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
  posLevelOp.value =
    posLevel?.posLevels.map((e: ResLevel) => ({
      id: e.id,
      name: e.posLevelName.toString(),
    })) ?? [];
  formGroupTarget.level = "";
}

onMounted(() => {
  console.log("เป้าหมาย");
});
</script>
<template>
  <!-- CARD เป้าหมายตามแผน -->
  <q-card bordered style="border: 1px solid #d6dee1">
    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
      เป้าหมายตามแผน
      <q-btn flat round dense icon="add" color="primary">
        <q-menu>
          <q-list style="min-width: 100px">
            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickOpenDialog('relate')"
            >
              <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
            </q-item>
            <q-separator />
          </q-list>
        </q-menu>
        <q-tooltip>เพิ่ม</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-col-gutter-md q-pa-md">
      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsGroup"
          :rows="rows1"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>

      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsRelated"
          :rows="rows2"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>

  <!--CARD เป้าหมายตามจริง -->
  <q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
      เป้าหมายตามจริง
      <q-btn flat round dense icon="add" color="primary">
        <q-menu>
          <q-list style="min-width: 100px">
            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickOpenDialog('relate')"
            >
              <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
            </q-item>
            <q-separator />
          </q-list>
        </q-menu>
        <q-tooltip>เพิ่ม</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-col-gutter-md q-pa-md">
      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsGroup"
          :rows="rows3"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>

      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsRelated"
          :rows="rows4"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modalGroupTarget" persistent>
    <q-card style="width: 700px">
      <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
        <DialogHeader tittle="เพิ่มกลุ่มเป้าหมาย" :close="onClickCloseDialog" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="row col-12 q-col-gutter-md">
            <div class="col-xs-6 col-sm-6 col-md-6">
              <q-select
                dense
                outlined
                v-model="formGroupTarget.groupTarget"
                :options="groupOp"
                label="กลุ่มเป้าหมาย"
                hide-bottom-space
                option-label="name"
                option-value="id"
                map-options
                emit-value
                lazy-rules
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6">
              <q-select
                dense
                outlined
                v-model="formGroupTarget.groupTargetSub"
                :options="groupSubOp"
                label="กลุ่มเป้าหมายย่อย"
                hide-bottom-space
                lazy-rules
                option-label="name"
                option-value="id"
                map-options
                emit-value
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.position"
                label="ตำแหน่ง"
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกตำแหน่ง'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
              <q-select
                dense
                outlined
                hide-bottom-space
                lazy-rules
                v-model="formGroupTarget.posType"
                :options="posTypeOp"
                option-label="name"
                option-value="id"
                emit-value
                map-options
                input-class="text-red"
                label="ประเภทตำแหน่ง"
                @update:model-value="updatePosTypeName"
                :rules="[
          (val:string) =>
            !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
        ]"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
              <q-select
                dense
                outlined
                hide-bottom-space
                lazy-rules
                v-model="formGroupTarget.level"
                :options="posLevelOp"
                option-label="name"
                option-value="id"
                emit-value
                map-options
                input-class="text-red"
                label="ระดับ"
                :rules="[
        (val:string) =>
          !!val || `${'กรุณาเลือกระดับ'}`,
      ]"
              />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-8">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.type"
                label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
                :rules="[
              (val:string) =>
                !!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
            ]"
              />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-4">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.amount"
                label="จำนวน(คน)"
                mask="#"
                reverse-fill-mask
                :rules="[
              (val:string) =>
                !!val || `${'กรุณากรอกจำนวน(คน)'}`,
            ]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <div class="text-right q-pa-sm">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalRelate" persistent>
    <q-card style="width: 400px">
      <q-form greedy @submit.prevent @validation-success="onSubmitRelate">
        <DialogHeader tittle="เพิ่มผู้เกี่ยวข้อง" :close="onClickCloseDialog" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="row col-12 q-col-gutter-md">
            <div class="col-xs-6 col-sm-12 col-md-12">
              <q-select
                dense
                outlined
                v-model="formGroupRelate.relate"
                :options="options"
                label="ผู้เกี่ยวข้อง"
                hide-bottom-space
                lazy-rules
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-12 col-md-12">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupRelate.amount"
                label="จำนวน(คน)"
                mask="#"
                reverse-fill-mask
                :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจำนวน(คน)'}`,
          ]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <div class="text-right q-pa-sm">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>