ประวัติอบรม/ดูงาน ขรก.

src/modules/15_development/components/history/AddPage.vue

@@ -1,32 +1,24 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   FormAddHistory,
   FormAddHistoryProject,
 } from "@/modules/15_development/interface/request/Main";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
-import DialogProject from "@/modules/15_development/components/history/DialogProject.vue";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 const router = useRouter();
 const route = useRoute();
-
-const id = ref<string>(route.params.id as string);
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, date2Thai } =
-  mixin;
-const store = useDevelopmentDataStore();
-const modalDialogGov = ref<boolean>(false);
-const modalDialogProject = ref<boolean>(false);
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const id = ref<string>(route.params.id as string);
 
 const dateOrder = ref<Date | null>(null);
 const order = ref<string>("");
@@ -55,111 +47,19 @@ const formMainProject = reactive<FormAddHistoryProject>({
   id: "",
   project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
   year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
-  trainingStart: "", //วันเริ่มต้นการฝึกอบรม
-  trainingEnd: "", //วันสิ้นสุดการฝึกอบรม
+  trainingStart: null, //วันเริ่มต้นการฝึกอบรม
+  trainingEnd: null, //วันสิ้นสุดการฝึกอบรม
   totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
   location: "", //สถานที่ไปศึกษาดูงาน
   topic: "", //หัวข้อการไปศึกษาดูงาน
-  // studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
-  // studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
   organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
 });
 
-const fieldLabels = {
-  citizenId: "เลขประจําตัวประชาชน",
-  name: "ชื่อ - นามสกุล",
-  position: "ตําแหน่ง",
-  type: "ประเภทตําแหน่ง",
-
-  level: "ระดับตําแหน่ง",
-  positionSide: "ตําแหน่งทางการบริหาร",
-  oc: "หน่วยงานที่สังกัด",
-};
-
-const fieldLabelsProject = {
-  project: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
-  year: "ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน",
-  topic: "หัวข้อการไปฝึกอบรม/ศึกษาดูงาน",
-  location: "สถานที่ไปฝึกอบรม/ศึกษาดูงาน",
-  trainingStart: "วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน",
-  trainingEnd: "วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน",
-  totalTraining: "รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน",
-  // studyStart: "วันเริ่มต้นการศึกษาดูงาน",
-  // studyEnd: "วันสิ้นสุดการศึกษาดูงาน",
-  organizingTraining: "หน่วยงานที่รับผิดชอบ",
-};
-
 function getClass() {
   return "inputgreen";
 }
-/** save */
-function onSubmit() {
-  const url = id.value
-    ? config.API.developmentHistoryListByid("officer", id.value)
-    : config.API.developmentHistoryAdd("officer");
 
-  const body = {
-    rank: null,
-    prefix: formMain.prefix,
-    firstName: formMain.firstName,
-    lastName: formMain.lastName,
-    citizenId: formMain.citizenId,
-    position: formMain.position,
-    posExecutive: formMain.positionSide,
-    posLevelId: formMain.posLevelId,
-    posTypeId: formMain.posTypeId,
-
-    developmentId: formMainProject.id,
-    order: order.value,
-    dateOrder: dateOrder.value,
-  };
-  dialogConfirm($q, () => {
-    showLoader();
-    http[id.value ? "put" : "post"](url, body)
-      .then((res) => {
-        router.push(`/development/history`);
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-function upDate(data: FormAddHistory) {
-  formMain.id = data.id;
-  formMain.citizenId = data.citizenId;
-  formMain.name = data.name;
-  formMain.prefix = data.prefix;
-  formMain.firstName = data.firstName;
-  formMain.lastName = data.lastName;
-  formMain.position = data.position;
-  formMain.posLevelId = data.posLevelId;
-  formMain.posTypeId = data.posTypeId;
-  formMain.type = data.type;
-  formMain.level = data.level;
-  formMain.positionSide = data.positionSide;
-}
-
-function upDateProject(data: any) {
-  formMainProject.id = data.id ? data.id : null;
-  formMainProject.project = data.project ? data.project : null;
-  formMainProject.year = data.year ? data.year : null;
-  formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
-  formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
-  formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
-  formMainProject.location = data.addressAcademic ? data.addressAcademic : null;
-  formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
-  // formMainProject.studyStart = data.studyStart ? data.studyStart : null;
-  // formMainProject.studyEnd = data.studyEnd ? data.studyEnd : null;
-  formMainProject.organizingTraining = data.organizingTraining
-    ? data.organizingTraining
-    : null;
-}
-
-function getDataEdit() {
+function fetchData() {
   showLoader();
   http
     .get(config.API.developmentHistoryListByid("officer", id.value))
@@ -173,7 +73,6 @@ function getDataEdit() {
       formMain.prefix = data.prefix ? data.prefix : null;
       formMain.firstName = data.firstName ? data.firstName : null;
       formMain.lastName = data.lastName ? data.lastName : null;
-
       formMain.position = data.position ? data.position : null;
       formMain.posLevelId = data.posLevelId ? data.posLevelId : null;
       formMain.posTypeId = data.posTypeId ? data.posTypeId : null;
@@ -182,17 +81,17 @@ function getDataEdit() {
       formMain.positionSide = data.posExecutive ? data.posExecutive : null;
       formMain.oc = data.org ? data.org : null;
 
-      formMainProject.id = data.developmentId;
-      formMainProject.project = data.projectName;
-      formMainProject.year = data.year;
-      formMainProject.trainingStart = data.dateStart;
-      formMainProject.trainingEnd = data.dateEnd;
-      formMainProject.totalTraining = data.totalDate;
-      formMainProject.location = data.addressAcademic;
-      formMainProject.topic = data.topicAcademic;
+      formMainProject.id = data.developmentId ? data.developmentId : null;
+      formMainProject.project = data.projectName ? data.projectName : null;
+      formMainProject.year = data.year ? data.year : null;
+      formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
+      formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
+      formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
+      formMainProject.location = data.addressAcademic ? data.addressAcademic : null;
+      formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
       // formMainProject.studyStart = data.dateStudyStart;
       // formMainProject.studyEnd = data.dateStudyEnd;
-      formMainProject.organizingTraining = data.org;
+      formMainProject.organizingTraining = data.org? data.org : null;
 
       dateOrder.value = data.dateOrder;
       order.value = data.order;
@@ -207,7 +106,7 @@ function getDataEdit() {
 
 onMounted(() => {
   if (id.value) {
-    getDataEdit();
+    fetchData();
   }
 });
 </script>
@@ -224,206 +123,227 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span>{{
-      id
-        ? `แก้ไขประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`
-        : `เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`
-    }}</span>
+    <span> ประวัติการฝึกอบรม / ดูงานของข้าราชการกรุงเทพมหานครสามัญ </span>
   </div>
   <q-card flat bordered>
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <q-card-section>
-        <q-card flat bordered style="border: 1px solid #d6dee1">
-          <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-            ข้อมูลข้าราชการฯ
-
-            <!-- <q-btn
-              flat
-              class="btn-fixed-width"
-              color="teal"
-              label="เลือกข้าราชการฯ"
-              icon="add"
-              @click="modalDialogGov = true"
-            /> -->
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row q-col-gutter-md q-pa-md">
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-4">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabels[field as keyof typeof fieldLabels]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
-                </div>
-              </div>
+    <q-card-section>
+      <!-- Card ข้อมูลข้าราชการฯ -->
+      <q-card flat bordered style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          ข้อมูลข้าราชการฯ
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              เลขประจําตัวประชาชน
             </div>
 
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-4">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabels[field as keyof typeof fieldLabels]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
-                </div>
-              </div>
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.citizenId ?? "-" }}
             </div>
           </div>
-        </q-card>
-
-        <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
-          <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-            ข้อมูลโครงการ
-            <!-- <q-btn
-              flat
-              class="btn-fixed-width"
-              color="teal"
-              label="เลือกโครงการ"
-              icon="add"
-              @click="modalDialogProject = true"
-            /> -->
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row q-col-gutter-md q-pa-md">
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-                  0,
-                  4
-                )"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-5">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-7">
-                  <span v-if="index == 1">{{
-                    formMainProject[field] ? formMainProject[field] + 543 : "-"
-                  }}</span>
-                  <span v-else-if="index == 2 || index == 3">{{
-                    formMainProject[field]
-                      ? date2Thai(formMainProject[field])
-                      : "-"
-                  }}</span>
-                  <span v-else>{{
-                    formMainProject[field] ? formMainProject[field] : "-"
-                  }}</span>
-                </div>
-              </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ระดับตําแหน่ง
             </div>
 
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-                  4,
-                  10
-                )"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-4">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{
-                    formMainProject[field] ? formMainProject[field] : "-"
-                  }}</span>
-                </div>
-              </div>
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.level ?? "-" }}
             </div>
           </div>
-        </q-card>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ชื่อ - นามสกุล
+            </div>
 
-        <div class="row q-col-gutter-sm q-mt-md">
-          <div class="col-3">
-            <q-input
-              readonly
-              label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
-              v-model="order"
-              dense
-              outlined
-              :class="getClass()"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
-            />
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.name ?? "-" }}
+            </div>
           </div>
-          <div class="col-3">
-            <datepicker
-              readonly
-              menu-class-name="modalfix"
-              v-model="dateOrder"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  readonly
-                  outlined
-                  dense
-                  :class="getClass()"
-                  hide-bottom-space
-                  :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
-                  label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ตําแหน่งทางการบริหาร
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.positionSide ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ตําแหน่ง
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.position ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              หน่วยงานที่สังกัด
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.oc ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ประเภทตําแหน่ง
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.type ?? "-" }}
+            </div>
           </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-card>
 
-  <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
-  <DialogProject v-model:modal="modalDialogProject" :up-date="upDateProject" />
+      <!-- Card ข้อมูลโครงการ -->
+      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          ข้อมูลโครงการ
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ชื่อโครงการ/หลักสูตรการฝึกอบรม
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.project ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{
+                formMainProject.trainingStart
+                  ? date2Thai(formMainProject.trainingStart)
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.year ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{
+                formMainProject.trainingEnd
+                  ? date2Thai(formMainProject?.trainingEnd)
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.topic ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.totalTraining ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              สถานที่ไปฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.location ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              หน่วยงานที่รับผิดชอบ
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.organizingTraining ?? "-" }}
+            </div>
+          </div>
+        </div>
+      </q-card>
+
+      <div class="row q-col-gutter-sm q-mt-md">
+        <div class="col-3">
+          <q-input
+            readonly
+            label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+            v-model="order"
+            dense
+            outlined
+            :class="getClass()"
+            hide-bottom-space
+            :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
+          />
+        </div>
+        <div class="col-3">
+          <datepicker
+            readonly
+            menu-class-name="modalfix"
+            v-model="dateOrder"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                readonly
+                outlined
+                dense
+                :class="getClass()"
+                hide-bottom-space
+                :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
+                label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
+              >
+                <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-card>
 </template>

src/modules/15_development/interface/request/Main.ts

@@ -133,8 +133,8 @@ interface FormAddHistoryProject {
   id: string;
   project: string;
   year: string;
-  trainingStart: string;
-  trainingEnd: string;
+  trainingStart: null | Date;
+  trainingEnd: null | Date;
   totalTraining: string;
   location: string;
   topic: string;

src/modules/15_development/views/History.vue

@@ -16,7 +16,7 @@ const pagination = ref({
 });
 
 const formFilter = reactive({
-  root: "",
+  root: null,
   page: 1,
   pageSize: 20,
   keyword: "",
@@ -115,8 +115,9 @@ function fetchListOrg() {
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then((res) => {
-      formFilter.root = "";
+      formFilter.root = null;
       agencyOp.value = res.data.result;
+      getData();
     })
     .catch((err) => {
       messageError($q, err);