แก้ไข ui /เพิ่ม api

src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue

@@ -16,21 +16,19 @@ const router = useRouter();
  * บันทึกข้อมูลที่เเก้ไข
  * @param id ระบุ บุคคล
  */
- function onSubmit(formData:FormDataPost) {
+function onSubmit(formData: FormDataPost) {
   dialogConfirm($q, () => addData(formData));
 }
 
-function addData(formData: FormDataPost) {
+function addData(formData: any) {
   showLoader();
   http
-    .post(config.API.director(), {
-      personalId:formData.personalId ?? '',
-      prefix: formData.prefix,
-      firstName: formData.firstname,
-      lastName: formData.lastname,
-      position: formData.position,
-      email: formData.email,
-      phone: formData.phone,
+    .post(config.API.meeting(), {
+      Round: formData.rounded ?? "",
+      Tittle: formData.title,
+      Date: formData.dateMeetingStart,
+      Result: formData.consider,
+      Duration: formData.period,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -39,7 +37,7 @@ function addData(formData: FormDataPost) {
       messageError($q, e);
     })
     .finally(async () => {
-      router.push(`/discipline/meeting`);
+      router.push(`/evaluate/meeting`);
     });
 }
 </script>

src/modules/12_evaluatePersonal/components/Meeting/Form.vue

@@ -18,8 +18,9 @@ const {
   dialogMessageNotify,
   dialogConfirm,
   success,
+  date2Thai,
   hideLoader,
-  dialogRemove
+  dialogRemove,
 } = mixin;
 /**
  * รับ props มาจาก page หลัก
@@ -48,8 +49,11 @@ const fileOj = reactive<FileOj[]>([]);
 const formData = reactive<FormData>({
   rounded: "",
   dateMeeting: "",
+  dateMeetingStart: null,
+  dateMeetingEnd: null,
   consider: "",
   period: "",
+  title: "",
   file: fileOj,
 });
 
@@ -64,6 +68,7 @@ watch(props.data, async () => {
   formData.dateMeeting = props.data.dateMeeting;
   formData.consider = props.data.consider;
   formData.period = props.data.period;
+  formData.title = props.data.title;
 });
 
 /**
@@ -112,12 +117,14 @@ const roundedRef = ref<object | null>(null);
 const dateMeetingRef = ref<object | null>(null);
 const considerRef = ref<object | null>(null);
 const periodRef = ref<object | null>(null);
+const titleRef = ref<object | null>(null);
 
 const formRef: FormRef = {
   rounded: roundedRef,
   dateMeeting: dateMeetingRef,
   consider: considerRef,
   period: periodRef,
+  title: titleRef,
 };
 
 /** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@@ -185,6 +192,17 @@ function confirmDelete(id: string) {
   //   });
 }
 
+//checkDate
+function checkDate() {
+  if (formData.dateMeetingEnd !== null && formData.dateMeetingStart !== null) {
+    if (formData.dateMeetingEnd <= formData.dateMeetingStart) {
+      formData.dateMeetingEnd = null;
+    }
+  } else {
+    console.log("One or both dates are null");
+  }
+}
+
 function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer ": val,
@@ -210,7 +228,7 @@ function inputEdit(val: boolean) {
           />
         </div>
         <div class="col-3">
-          <q-input
+          <!-- <q-input
             :class="inputEdit(isReadonly)"
             dense
             outlined
@@ -220,6 +238,89 @@ function inputEdit(val: boolean) {
             for="dateMeetingRef"
             hide-bottom-space
             :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกวันเวลาในการประชุม'}`]"
+          /> -->
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.dateMeetingStart"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="true"
+            week-start="0"
+            @update:model-value="checkDate"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                for="selectDate"
+                dense
+                outlined
+                lazy-rules
+                :model-value="
+                  formData.dateMeetingStart != null
+                    ? date2Thai(formData.dateMeetingStart, false, true)
+                    : null
+                "
+                hide-bottom-space
+                :label="`${'วันเวลาที่เริ่มต้นการประชุม'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer text-primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.dateMeetingEnd"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="true"
+            week-start="0"
+            :min-date="formData.dateMeetingStart"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                for="selectDate"
+                dense
+                outlined
+                lazy-rules
+                :model-value="
+                  formData.dateMeetingEnd != null
+                    ? date2Thai(formData.dateMeetingEnd, false, true)
+                    : null
+                "
+                hide-bottom-space
+                :label="`${'วันเวลาที่สิ้นสุด'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer text-primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-6">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            dense
+            outlined
+            v-model="formData.title"
+            label="ชื่อการประชุม"
+            ref="titleRef"
+            for="titleRef"
+            hide-bottom-space
+            :rules="[(val: string) => !!val || `${'กรุณากรอกชื่อการประชุม'}`]"
           />
         </div>
         <div class="col-12">