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,
  ResPlannedGoals,
  ResPeople,
  ResActualGoals,
} from "@/modules/15_development/interface/response/Main";

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

import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const store = useDevelopmentDataStore();
const { dialogRemove, success, messageError } = useCounterMixin();

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

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

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

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

const columnsRelated = ref<QTableProps["columns"]>([
  {
    name: "groupTarget",
    align: "left",
    label: "ผู้เกี่ยวข้อง ",
    sortable: true,
    field: "groupTarget",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (val) => convertNamePeoples(val),
  },

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

const plannedGoals = ref<ResPlannedGoals[]>([]);
const plannedPeoples = ref<ResPeople[]>([]);
const actualGoals = ref<ResActualGoals[]>([]);
const actualPeoples = ref<ResPeople[]>([]);

const peoplesOp = ref<DataOption[]>([
  { id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
  { id: "LECTURER", name: "วิทยากร" },
  { id: "OBSERVER", name: "ผู้สังเกตการณ์" },
]);

const groupOp = ref<DataOption[]>([
  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานคร" },
  { id: "PERSONNEL", name: "บุคลากรกรุงเทพมหานคร" },
  { id: "OUTSIDERS", name: "บุคคลภายนอก" },
]);
const groupSubOp = ref<DataOption[]>([
  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
  { id: "TEACHER", name: "ข้าราชการครู" },
  { id: "EMPLOYEE", name: "กรุงเทพมหานคร(ลูกจ้างประจำ ลูกจ้างชั่วคราว)" },
  { id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
]);

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

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, target: string) {
  isTarget.value = target;
  if (type === "group") {
    modalGroupTarget.value = true;
  } else {
    modalRelate.value = true;
  }
}

function onSubmitGroup() {
  if (isTarget.value === "planned") {
    const data = [];
    data.push(formGroupTarget);
    const list = data.map((e: FormGroupTarget) => ({
      groupTarget: e.groupTarget,
      groupTargetSub: e.groupTargetSub,
      position: e.position,
      posTypePlannedId: e.posType,
      posLevelPlannedId: e.level,
      type: e.type,
      amount: Number(e.amount),
    }));
    plannedGoals.value.push(...list);
    store.formAddProject.plannedGoals = plannedGoals.value;
  } else {
    const data = [];
    data.push(formGroupTarget);
    const list = data.map((e: FormGroupTarget) => ({
      groupTarget: e.groupTarget,
      groupTargetSub: e.groupTargetSub,
      position: e.position,
      posTypeActualId: e.posType,
      posLevelActualId: e.level,
      type: e.type,
      amount: Number(e.amount),
    }));
    actualGoals.value.push(...list);
    store.formAddProject.actualGoals = actualGoals.value;
  }
  setTimeout(() => {
    onClickCloseDialog();
  }, 100);
}

function onSubmitRelate() {
  if (isTarget.value === "planned") {
    const data = [];
    data.push(formGroupRelate);
    const list = data.map((e: FormGroupRelate) => ({
      groupTarget: e.relate,
      amount: Number(e.amount),
    }));
    plannedPeoples.value.push(...list);
    store.formAddProject.plannedPeoples = plannedPeoples.value;
  } else {
    const data = [];
    data.push(formGroupRelate);
    const list = data.map((e: FormGroupRelate) => ({
      groupTarget: e.relate,
      amount: Number(e.amount),
    }));
    actualPeoples.value.push(...list);
    store.formAddProject.actualPeoples = actualPeoples.value;
  }
  setTimeout(() => {
    onClickCloseDialog();
  }, 100);
}

function onclickDelete(index: number, type: string) {
  dialogRemove($q, () => {
    switch (type) {
      case "plannedGoals":
        plannedGoals.value.splice(index, 1);
        break;
      case "plannedPeoples":
        plannedPeoples.value.splice(index, 1);
        break;
      case "actualGoals":
        actualGoals.value.splice(index, 1);
        break;
      case "actualPeoples":
        actualPeoples.value.splice(index, 1);
        break;

      default:
        break;
    }
  });
}

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 = "";
}

function updateGroupTarget(val: string) {
  if (val === "OUTSIDERS") {
    formGroupTarget.groupTargetSub = "NONE";
    formGroupTarget.position = "";
    formGroupTarget.posType = null;
    formGroupTarget.level = null;
  } else formGroupTarget.groupTargetSub = "";
}

function convertNameGoals(id: string) {
  const data = groupOp.value.find((e: DataOption) => e.id === id);
  return data && data?.name;
}

function convertNamePeoples(id: string) {
  const data = peoplesOp.value.find((e: DataOption) => e.id === id);
  return data && data?.name;
}

function convertTypeGoals(id: string) {
  const data = posTypeMain.value.find((e: ResGroup) => e.id === id);
  return data && data?.posTypeName;
}

onMounted(() => {
  fetchType();
  plannedGoals.value = store.formAddProject.plannedGoals
    ? store.formAddProject.plannedGoals
    : [];

  plannedPeoples.value = store.formAddProject.plannedPeoples
    ? store.formAddProject.plannedPeoples
    : [];

  actualGoals.value = store.formAddProject.actualGoals
    ? store.formAddProject.actualGoals
    : [];

  actualPeoples.value = store.formAddProject.actualPeoples
    ? store.formAddProject.actualPeoples
    : [];
});
</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', 'planned')"
            >
              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickOpenDialog('relate', 'planned')"
            >
              <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="columnsPlannedGoals"
          :rows="plannedGoals"
          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(props.rowIndex, 'plannedGoals')"
                >
                  <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="plannedPeoples"
          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(props.rowIndex, 'plannedPeoples')"
                >
                  <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', 'actual')"
            >
              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickOpenDialog('relate', 'actual')"
            >
              <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="columnsActualGoals"
          :rows="actualGoals"
          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(props.rowIndex, 'actualGoals')"
                >
                  <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="actualPeoples"
          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(props.rowIndex, 'actualPeoples')"
                >
                  <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
                class="inputgreen"
                @update:model-value="updateGroupTarget"
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
              ]"
              />
            </div>
            <div
              class="col-xs-6 col-sm-6 col-md-6"
              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
            >
              <q-select
                dense
                outlined
                class="inputgreen"
                v-model="formGroupTarget.groupTargetSub"
                :options="
                  formGroupTarget.groupTarget === 'OFFICER'
                    ? groupSubOp.slice(0, 2)
                    : groupSubOp.slice(2, 4)
                "
                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"
              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
            >
              <q-input
                outlined
                dense
                hide-bottom-space
                class="inputgreen"
                v-model="formGroupTarget.position"
                label="ตำแหน่ง"
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกตำแหน่ง'}`,
              ]"
              />
            </div>
            <div
              class="col-xs-6 col-sm-4 col-md-4"
              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
            >
              <q-select
                dense
                outlined
                hide-bottom-space
                lazy-rules
                class="inputgreen"
                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"
              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
            >
              <q-select
                dense
                outlined
                hide-bottom-space
                lazy-rules
                class="inputgreen"
                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"
              v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
            >
              <q-input
                outlined
                dense
                class="inputgreen"
                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
                class="inputgreen"
                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
                class="inputgreen"
                v-model="formGroupRelate.relate"
                :options="peoplesOp"
                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-12 col-md-12">
              <q-input
                outlined
                dense
                hide-bottom-space
                class="inputgreen"
                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>