clone code

src/modules/04_registry/components/Information/Government.vue

@@ -0,0 +1,703 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลราชการ"
+      icon="mdi-account-tie"
+      :save="saveData"
+      :history="true"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ocId"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionId"
+            :label="`${'ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'เลขที่ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.workId"
+            :label="`${'สายงาน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.typeId"
+            :label="`${'ประเภท'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.levelId"
+            :label="`${'ระดับ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.businessId"
+            :label="`${'ตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-12 q-py-md"><q-separator /></div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.containDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.containDate))"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วันที่สั่งบรรจุ'}`]"
+                :label="`${'วันที่สั่งบรรจุ'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.workDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.workDate))"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือก เริ่มปฎิบัติราชการ'}`,
+                ]"
+                :label="`${'เริ่มปฎิบัติราชการ'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-6 col-md-6">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            stack-label
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="govermentData.reasonSameDate"
+            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.retireDate"
+            :label="`${'วันเกษียณอายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ageAll"
+            :label="`${'อายุราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.absent"
+            :label="`${'ขาดราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.age"
+            :label="`${'อายุราชการเกื้อกูล'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateAppoint' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type { Goverment } from "@/modules/04_registry/components/profileType";
+import { defaultGoverment } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import HistoryTable from "@/components/TableHistory.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { storeToRefs } from "pinia";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const profileStore = useProfileDataStore();
+const { birthDate, retireText } = storeToRefs(profileStore);
+const edit = ref<boolean>(false);
+const govermentData = ref<Goverment>(defaultGoverment);
+const myform = ref<any>();
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลราชการ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่สั่งบรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "oc",
+  "position",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionexecutive",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchData();
+  emit("update:statusEdit", false);
+});
+
+watch(birthDate, async () => {
+  await fetchData();
+});
+
+watch(retireText, async () => {
+  govermentData.value.retireDate = retireText.value;
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileGovId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject = res.data.result;
+      govermentData.value.ocId = data.oc;
+      govermentData.value.positionId = data.position;
+      govermentData.value.workId = data.work;
+      govermentData.value.typeId = data.type;
+      govermentData.value.levelId = data.level;
+      govermentData.value.numberId = data.posNo;
+      govermentData.value.businessId = data.business;
+      govermentData.value.containDate = new Date(data.dateAppoint);
+      govermentData.value.workDate = new Date(data.dateStart);
+      govermentData.value.retireDate = data.retireDate;
+      govermentData.value.absent = data.govAgeAbsent;
+      govermentData.value.age = data.govAgePlus;
+      govermentData.value.ageAll = data.govAge;
+      govermentData.value.reasonSameDate = data.reasonSameDate;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await fetchData();
+};
+
+const editData = async () => {
+  loaderPage(true);
+  const body: ResponseObject = {
+    oc: govermentData.value.ocId,
+    business: govermentData.value.businessId,
+    dateAppoint: dateToISO(govermentData.value.containDate),
+    dateStart: dateToISO(govermentData.value.workDate),
+    govAge: govermentData.value.ageAll,
+    govAgeAbsent: govermentData.value.absent,
+    govAgePlus: govermentData.value.age,
+    level: govermentData.value.levelId,
+    posNo: govermentData.value.numberId,
+    position: govermentData.value.positionId,
+    retireDate: govermentData.value.retireDate,
+    type: govermentData.value.typeId,
+    work: govermentData.value.workId,
+    reasonSameDate: govermentData.value.reasonSameDate,
+    createdAt: new Date(),
+    createdFullName: "-",
+  };
+  await http
+    .put(config.API.profileGovId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      emit("update:statusEdit", false);
+      edit.value = false;
+      await refreshData();
+    });
+};
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      await editData();
+    } else {
+    }
+  });
+};
+
+const handleDate = async (modelData: Date) => {
+  govermentData.value.containDate = modelData;
+  await fetchCalAgeGov(modelData);
+};
+
+const fetchCalAgeGov = async (date: Date) => {
+  loaderPage(true);
+  const body = {
+    dateAppoint: date,
+  };
+  await http
+    .post(config.API.profileCalGovId(route.params.id.toString()), body)
+    .then((res) => {
+      const result = res.data.result;
+      govermentData.value.ageAll = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileGovHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          oc: e.oc,
+          position: e.position,
+          posNo: e.posNo,
+          positionLine: e.positionLine,
+          positionType: e.positionType,
+          positionLevel: e.positionLevel,
+          positionExecutive: e.positionExecutive,
+          dateAppoint: new Date(e.dateAppoint),
+          dateStart: new Date(e.dateStart),
+          retireDate: e.retireDate,
+          govAge: e.govAge,
+          govAgeAbsent: e.govAgeAbsent,
+          govAgePlus: e.govAgePlus,
+          reasonSameDate: e.reasonSameDate,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>