บันทึกผล

2024-07-30 18:07:41 +07:00 · 2024-07-30 18:07:41 +07:00 · c91843ceba
commit c91843ceba
parent 3531301713
9 changed files with 918 additions and 170 deletions
--- a/src/modules/15_development/components/DialogRecordPerson.vue
+++ b/src/modules/15_development/components/DialogRecordPerson.vue
@ -0,0 +1,483 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type { ResPrefix } from "@/modules/15_development/interface/response/Main";
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  calculateDurationYmd,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const tab = defineModel<string>("tab", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const projectId = ref<string>(route.params.id.toString());
+const formData = reactive({
+  type: "",
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  org: "",
+  dateStart: null,
+  dateEnd: null,
+  trainingDays: "",
+  commandNumber: "",
+  commandDate: null,
+});
+
+/** Option*/
+const typeOpsMain = ref<DataOption[]>([
+  {
+    id: "OFFICER",
+    name: "ขรก.กทม. สามัญ",
+  },
+  {
+    id: "EMPLOYEE",
+    name: "ลูกจ้างประจำ",
+  },
+]);
+const typeOps = ref<DataOption[]>(typeOpsMain.value);
+const prefixOpsMain = ref<DataOption[]>([]);
+const prefixOps = ref<DataOption[]>([]);
+
+/**
+ * function บันทึกข้อมูลการเพิ่มราชชื่อ
+ */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.devUploadUser + projectId.value, formData)
+      .then(async (res) => {
+        await props?.fetchData();
+        tab.value = res.data.result ? "IN" : "OUT";
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update function
+ * @param refData ประเภท
+ */
+const filterSelector = (val: string, update: Function, refData: string) => {
+  switch (refData) {
+    case "type":
+      update(() => {
+        typeOps.value = typeOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "prefix":
+      update(() => {
+        prefixOps.value = prefixOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+/**
+ * function ปิด Dialig และเคลียร์ข้อมูลใน formData
+ */
+function onCloseDialog() {
+  modal.value = false;
+  formData.type = "";
+  formData.citizenId = "";
+  formData.prefix = "";
+  formData.firstName = "";
+  formData.lastName = "";
+  formData.position = "";
+  formData.org = "";
+  formData.dateStart = null;
+  formData.dateEnd = null;
+  formData.trainingDays = "";
+  formData.commandNumber = "";
+  formData.commandDate = null;
+}
+
+/**
+ * function เรียกข้อมูลคำนำหน้าชื่อ
+ */
+function fetchDataPrefix() {
+  showLoader();
+  http
+    .get(config.API.orgPrefix)
+    .then((res) => {
+      const option = res.data.result.map((e: ResPrefix) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      prefixOpsMain.value = option;
+      prefixOps.value = option;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * callback function ทำงานเมื่อเลือกวันเริ่มต้นและวันาสิ้นสุด จะคำนวนจำนวนวันที่อบรม
+ */
+watch(
+  () => [formData.dateStart, formData.dateEnd],
+  () => {
+    if (formData.dateStart && formData.dateEnd) {
+      formData.trainingDays = calculateDurationYmd(
+        formData.dateStart,
+        formData.dateEnd
+      );
+    }
+  }
+);
+
+/**
+ * callback function ทำงานเมื่อ modal = true
+ */
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataPrefix();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'เพิ่มรายชื่อ'" :close="onCloseDialog" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="id"
+                v-model="formData.type"
+                class="inputgreen"
+                :options="typeOps"
+                label="ประเภท"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'type'
+              )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-italic text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                maxlength="13"
+                mask="#############"
+                v-model="formData.citizenId"
+                class="inputgreen"
+                label="เลขประจำตัวประชาชน"
+                :rules="[
+                  (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                  (val: string) =>
+                    val.length >= 13 ||
+                    `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                ]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-select
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.prefix"
+                class="inputgreen"
+                :options="prefixOps"
+                label="คำนำหน้าชื่อ"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'prefix'
+                )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-italic text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.firstName"
+                class="inputgreen"
+                label="ชื่อ"
+                :rules="[
+                  (val: string) => !!val || `${'กรุณากรอกชื่อ'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.lastName"
+                class="inputgreen"
+                label="นามสกุล"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.position"
+                class="inputgreen"
+                label="ตำแหน่ง"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.org"
+                class="inputgreen"
+                label="สังกัด"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :max-date="formData.dateEnd"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="inputgreen"
+                    dense
+                    outlined
+                    :model-value="
+                      formData.dateStart ? date2Thai(formData.dateStart) : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formData.dateStart"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.trainingDays"
+                class="inputgreen"
+                label="จำนวนวันที่อบรม"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอกจำนวนวันที่อบรม'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.commandNumber"
+                class="inputgreen"
+                label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.commandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formData.commandDate
+                        ? date2Thai(formData.commandDate)
+                        : null
+                    "
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@ -1,14 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";

-const mixin = useCounterMixin();
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * usec
+ */
 const route = useRoute();
 const $q = useQuasar();
 const id = ref<string>(route.params.id.toString());
@ -19,8 +29,19 @@ const {
  hideLoader,
  dialogConfirm,
  date2Thai,
-} = mixin;
+} = useCounterMixin();

+/**
+ * prosp
+ */
+const isProfile = defineModel<boolean>("isProfile", { required: true });
+const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
+
+/**
+ * ข้อมุล Table
+ */
+const keyword = ref<string>("");
+const rows = ref<ResRecord[]>([]);
 const columns = ref<QTableProps["columns"]>([
  {
    name: "type",
@ -170,7 +191,6 @@ const columns = ref<QTableProps["columns"]>([
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
-
 const visibleColumns = ref<string[]>([
  "type",
  "idcard",
@ -186,41 +206,15 @@ const visibleColumns = ref<string[]>([
  "commandNumber",
  "commandDate",
 ]);
-const files = ref<any>(null);
 const pagination = ref({
  page: 1,
  rowsPerPage: 10,
 });
-const keyword = ref<string>("");
-const rows = ref<ResRecord[]>([]);

-/** uoload file */
-async function clickUpload(file: any) {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const selectedFile = file;
-      const formData = new FormData();
-      formData.append("file", selectedFile);
-      await http
-        .post(config.API.developmentMainTab("tab6", id.value), formData)
-        .then(() => {
-          success($q, "อัปโหลดไฟล์สำเร็จ");
-          getData();
-          files.value = null;
-        })
-        .catch((err) => {
-          messageError($q, err);
-          showLoader();
-        });
-    },
-    "ยืนยันการอัปโหลดไฟล์",
-    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
-  );
-}
-
-/** convert status to text */
+/**
+ * convert status to text
+ * @param  val ประเภท
+ */
 function formBmaofficer(val: string) {
  switch (val) {
    case "OFFICER":
@ -234,90 +228,23 @@ function formBmaofficer(val: string) {
  }
 }

-/** ดึงข้อมูล */
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.developmentMainTab("tab6", id.value))
-    .then((res) => {
-      rows.value = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ส่งไปบันทึกที่ทะเบียนประวัติ */
-function sendRecordRegistry() {
-  // ส่งไปบันทึกที่ทะเบียนประวัติ
-  dialogConfirm(
-    $q,
-    () => {
-      showLoader();
-      http
-        .get(config.API.developmentMainTab("tab6/done", id.value))
-        .then(async () => {
-          await getData();
-          await success($q, "ส่งข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-          hideLoader();
-        });
-    },
-    "ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
-    "ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
+/**
+ *  function เรียกข้อมูลโครงการ
+ */
+function fetchDataProject() {
+  rows.value = listPerson.value.filter(
+    (e: ResRecord) => e.isProfile === isProfile.value
  );
 }

 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
 onMounted(() => {
-  getData();
+  fetchDataProject();
 });
 </script>

 <template>
-  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
-    <q-file
-      v-model="files"
-      dense
-      label="อัปโหลดไฟล์"
-      outlined
-      accept=".xlsx"
-      hide-bottom-space
-      clearable
-      class="col-xs-12 col-sm-4"
-    >
-      <template v-slot:prepend>
-        <q-icon name="attach_file" color="blue" />
-      </template>
-    </q-file>
-    <q-btn
-      v-if="files"
-      size="md"
-      icon="mdi-upload"
-      round
-      flat
-      color="blue"
-      @click="clickUpload(files)"
-    >
-      <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-    </q-btn>
-    <q-btn
-      v-if="rows.length > 0"
-      size="md"
-      icon="mdi-clipboard-account-outline"
-      round
-      flat
-      color="public"
-      @click="sendRecordRegistry()"
-    >
-      <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
-    </q-btn>
-
+  <q-toolbar style="padding: 0px" class="q-mb-xs">
    <q-space />
    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
      <template v-slot:append>
@ -338,56 +265,61 @@ onMounted(() => {
      option-value="name"
      options-cover
      style="min-width: 150px"
-      class="q-mr-sm"
    />
  </q-toolbar>
-  <d-table
-    ref="table"
-    row-key="id"
-    flat
-    bordered
-    dense
-    :columns="columns"
-    :rows="rows"
-    :paging="true"
-    :filter="keyword"
-    v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100]"
-    :visible-columns="visibleColumns"
-  >
-    <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" class="cursor-pointer">
-        <q-td>
-          <q-icon
-            v-if="props.row.isDone"
-            name="mdi-check"
-            color="green"
-            size="xs"
-          >
-            <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติแล้ว</q-tooltip>
-          </q-icon>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.id">
-          <div v-if="col.name == 'fullName'">
-            {{ props.row.prefix ? props.row.prefix : ""
-            }}{{ props.row.firstName ? props.row.firstName : "" }}
-            {{ props.row.lastName ? props.row.lastName : "" }}
-          </div>
-          <div v-else class="table_ellipsis2">
-            {{ col.value ? col.value : "-" }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
+
+  <div class="col-12">
+    <d-table
+      ref="table"
+      row-key="id"
+      flat
+      bordered
+      dense
+      :columns="columns"
+      :rows="rows"
+      :paging="true"
+      :filter="keyword"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[20, 50, 100]"
+      :visible-columns="visibleColumns"
+    >
+      <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" class="cursor-pointer">
+          <q-td>
+            <q-icon
+              v-if="props.row.isDone"
+              name="mdi-check"
+              color="green"
+              size="xs"
+            >
+              <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติแล้ว</q-tooltip>
+            </q-icon>
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.id">
+            <div v-if="col.name == 'fullName'">
+              {{ props.row.prefix ? props.row.prefix : ""
+              }}{{ props.row.firstName ? props.row.firstName : "" }}
+              {{ props.row.lastName ? props.row.lastName : "" }}
+            </div>
+            <div v-else-if="col.name === 'org'" class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
 </template>

 <style scoped></style>