no message

src/modules/05_placement/components/probation/FormAssign.vue

@@ -52,70 +52,69 @@
               <div class="col-12 text-top0 items-center">
                 ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
               </div>
-              <div class="col-xs-12 col-sm-6">
+              <div class="col-xs-12 col-sm-4">
                 <datepicker
-              menu-class-name="modalfix"
+                  menu-class-name="modalfix"
-              v-model="dateExam"
+                  v-model="dateExam"
-              :locale="'th'"
+                  :locale="'th'"
-              autoApply
+                  autoApply
-              borderless
+                  borderless
-              :enableTimePicker="false"
+                  :enableTimePicker="false"
-              week-start="0"
+                  week-start="0"
-            >
+                  @input="handleDateExamChange"
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                 
-                  dense
-                  class="full-width datepicker q-mb-md"
-                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
-                  :label="`${'ตั้งเเต่วันที่'}`"
-                  clearable
-                  @clear="clearDateExam"
                 >
-
+                  <template #year="{ year }">
-                </q-input>
+                    {{ year + 543 }}
-              </template>
+                  </template>
-            </datepicker>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      class="full-width datepicker q-mb-md"
+                      :model-value="
+                        dateExam != null ? date2Thai(dateExam) : null
+                      "
+                      :label="`${'ตั้งเเต่วันที่'}`"
+                      clearable
+                      @clear="clearDateExam"
+                    >
+                    </q-input>
+                  </template>
+                </datepicker>
               </div>
-              
+              <div class="col-xs-12 col-sm-4">
-              <div class="col-xs-12 col-sm-6">
                 <datepicker
-              menu-class-name="modalfix"
+                  menu-class-name="modalfix"
-              v-model="dateExam2"
+                  v-model="dateExam2"
-              :locale="'th'"
+                  :locale="'th'"
-              autoApply
+                  autoApply
-              borderless
+                  borderless
-              :enableTimePicker="false"
+                  :enableTimePicker="false"
-              week-start="0"
+                  week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                 
-                  dense
-                  class="full-width datepicker q-mb-md"
-                  :model-value="dateExam2 != null ? date2Thai(dateExam2) : null"
-                  :label="`${'ถึงวันที่'}`"
-                  clearable
-                  @clear="clearDateExam2"
                 >
-
+                  <template #year="{ year }">
-                </q-input>
+                    {{ year + 543 }}
-              </template>
+                  </template>
-            </datepicker>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      class="full-width datepicker q-mb-md"
+                      :model-value="
+                        dateExam2 != null ? date2Thai(dateExam2) : null
+                      "
+                      :label="`${'ถึงวันที่'}`"
+                      clearable
+                      @clear="clearDateExam2"
+                    >
+                    </q-input>
+                  </template>
+                </datepicker>
               </div>
-              
             </div>
           </div>
           <div class="col-12">
@@ -306,15 +305,19 @@
                     style="max-height: 500px; overflow-y: scroll"
                   >
                     <div class="example-row-column-width">
-                      <div class="row bg-grey-3 q-py-xs">
+                      <div
+                        v-for="item in val1"
+                        :key="item.id"
+                        class="row bg-grey-3 q-py-xs"
+                      >
                         <div class="col-1 text-center">
                           <q-checkbox
-                            v-model="val1"
+                            v-model="item.checked"
                             dense
                             :disable="routeName != 'probationWorkAdd'"
                           />
                         </div>
-                        <div class="col-2">1. รัฐธรรมนูญ</div>
+                        <div class="col-9">1. รัฐธรรมนูญ</div>
                       </div>
 
                       <div class="row q-mt-xs bg-grey-3 q-py-xs">
@@ -403,7 +406,7 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-                      <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                      <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
                         <div class="col-1 text-center"></div>
                         <div class="col-11">
                           3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
@@ -422,7 +425,7 @@
                             type="textarea"
                           />
                         </div>
-                      </div>
+                      </div> -->
                     </div>
                   </q-card>
                 </div>
@@ -439,6 +442,7 @@
                         borderless
                         :outlined="routeName == 'probationWorkAdd'"
                         v-model="OtherLaw"
+                        type="textarea"
                       />
                     </div>
                   </div>
@@ -1034,7 +1038,7 @@
                 </datepicker>
               </div>
               <q-select
-                :options="OPcaretaker2"
+                :options="OPcaretaker"
                 class="col-xs-12 col-sm-8"
                 :readonly="routeName != 'probationWorkAdd'"
                 dense
@@ -1147,25 +1151,47 @@
         v-show="routeName == 'probationWorkAdd'"
         class="flex justify-end q-pa-sm q-gutter-sm"
       >
-        <q-btn unelevated label="บันทึก" color="public" />
+        <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
       </div>
     </q-card>
   </div>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 // import type { QForm } from "quasar";
-const val1 = ref(false);
+const val1 = ref([
+  {
+    id: 1,
+    text: "1.รัฐธรรมนูญ",
+    checked: false,
+  },
+]);
 const val3 = ref(false);
 const router = useRouter();
-const test = ref<string>('')
+const test = ref<string>("");
 const ruleNote = ref<string>("");
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 const dateExam = ref<Date | null>(null);
 const dateExam2 = ref<Date | null>(null);
+
+const id = ref<number>();
+const personal_id = ref<string>();
+const knowledge_skill_map_no = ref<string[]>([]);
+const round_no = ref<number>();
+const date_start = ref<Date>();
+const date_finish = ref<Date>();
+const behavior_desc = ref<string>();
+const other_desc = ref<object>({});
+const other4_desc = ref<string>();
+const other5_no1_desc = ref<object>({});
+const other5_no2_desc = ref<object>({});
+const experimenter_dated = ref<Date>();
+const createdAt = ref<Date>();
+const updatedAt = ref<Date>();
+
 const clearDateExam = () => {
   dateExam.value = null;
 };
@@ -1174,7 +1200,22 @@ const clearDateExam2 = () => {
 };
 
 const routeName = router.currentRoute.value.name;
-
+const handleDateExamChange = (value: Date | null) => {
+  if (value) {
+    const newDate = new Date(value);
+    newDate.setMonth(newDate.getMonth() + 6);
+    dateExam2.value = newDate;
+  } else {
+    dateExam2.value = null;
+  }
+};
+watch(dateExam, (newDate, oldDate) => {
+  if (newDate && newDate !== oldDate) {
+    const newDate2 = new Date(newDate);
+    newDate2.setMonth(newDate2.getMonth() + 6);
+    dateExam2.value = newDate2;
+  }
+});
 const name = ref<string>("นายสมคิด ยอดใจ");
 const position = ref<string>("นักจัดการงานทั่วไป");
 
@@ -1429,6 +1470,25 @@ const listlaw = [
       "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
   },
 ];
+interface CheckboxItem {
+  id: number;
+  text: string;
+  checked: boolean;
+}
+const saveData = () => {
+  // สร้าง Object ที่เก็บข้อมูล Checkbox
+  const checkboxData: Record<string, CheckboxItem[]> = {
+    val1: val1.value.filter((item) => item.checked),
+    checkList21: checkList21.value.filter((item) => item.checked),
+    checkList22: checkList22.value.filter((item) => item.checked),
+    checkList23: checkList23.value.filter((item) => item.checked),
+    checkList24: checkList24.value.filter((item) => item.checked),
+  };
+
+  // แสดงข้อมูลใน Console
+  console.log("3.2 ข้อมูลติ๊ก", checkboxData);
+  
+};
 const OtherLaw = ref<string>("");
 
 const skill = ref<string>("ความรู้ความสามารถด้าน 1");

src/modules/05_placement/interface/index/Main.ts

@@ -188,6 +188,22 @@ const FamilyDataDefualt: Family = {
   motherLastName: "",
   motherOccupation: "",
 };
+interface Assign {
+  id: number;
+  personal_id: string;
+  knowlage_skill_map_no: number;
+  round_no: number;
+  date_start: Date;
+  date_finish: Date;
+  behavior_desc: string;
+  other_desc: string;
+  other4_desc: string;
+  othor5_no1_desc: string;
+  othor5_no2_desc: string;
+  experimenter_dated: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
 export type {
   DataOption,
   DataOptionInsignia,
@@ -206,6 +222,7 @@ export type {
   Address,
   optionData,
   Certificate,
+  Assign,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };