From 16dd4c2fe8e34806c99758fed8eca191c5a4813f Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 3 Oct 2023 17:10:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20dialog=20=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=81=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=A3,=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20input=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=80=E0=B8=95=E0=B8=B4=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/Form/Address.vue       | 14 +--
 .../01_exam/components/Form/Career.vue        | 41 ++++++++-
 .../01_exam/components/Form/Education.vue     | 28 ++----
 .../01_exam/components/Form/Information.vue   | 87 +++++++++++++++++--
 4 files changed, 135 insertions(+), 35 deletions(-)

diff --git a/src/modules/01_exam/components/Form/Address.vue b/src/modules/01_exam/components/Form/Address.vue
index 6886d77..fa1c43b 100644
--- a/src/modules/01_exam/components/Form/Address.vue
+++ b/src/modules/01_exam/components/Form/Address.vue
@@ -87,10 +87,11 @@
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           dense
           lazy-rules
-          readonly
-          borderless
+          :readonly="!(status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           v-model="defaultAddress.code"
-          :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
+          bottom-slots
           :label="`${'รหัสไปรษณีย์'}`"
         />
       </div>
@@ -198,10 +199,11 @@
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           dense
           lazy-rules
-          readonly
-          borderless
+          bottom-slots
+          :readonly="!(status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           v-model="defaultAddress.codeC"
-          :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
           :label="`${'รหัสไปรษณีย์'}`"
         />
       </div>
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 72810aa..0f61a45 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -73,6 +73,22 @@
               />
             </div>
             <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="type"
+                :options="opType"
+                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                :label="`${'ประเภท'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <!-- <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -116,7 +132,7 @@
                 @update:modelValue="clickEditRow"
                 hide-bottom-space
               />
-            </div>
+            </div> -->
             <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 :readonly="!edit"
@@ -264,6 +280,10 @@ const { examData, changeExamColumns } = store
 const dataStore = useDataStore()
 const { loaderPage } = dataStore
 const id = ref<string>('')
+
+const type = ref<string | null>()
+const opType = ref(['ลูกจ้างประจำ','ลูกจ้างชั่วคราว','ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร'])
+
 const position = ref<string | null>()
 const group = ref<string | null>()
 const pile = ref<string | null>()
@@ -292,9 +312,10 @@ const visibleColumns = ref<String[]>([])
 examData.career.columns.length == 0
   ? (visibleColumns.value = [
       'position',
-      'group',
+      /* 'group',
       'pile',
-      'org',
+      'org', */
+      'type',
       'startDate',
       'endDate',
       'rangeDate'
@@ -313,7 +334,19 @@ const columns = ref<any>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
   },
+
   {
+    name: 'type',
+    align: 'left',
+    label: 'ประเภท',
+    sortable: true,
+    field: 'type',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+  },
+  /* {
     name: 'group',
     align: 'left',
     label: 'กลุ่ม/ฝ่าย',
@@ -345,7 +378,7 @@ const columns = ref<any>([
     style: 'font-size: 14px',
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
+  }, */
   {
     name: 'startDate',
     align: 'left',
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index 7274ccd..c67daaa 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -10,8 +10,8 @@
   />
   <q-form ref="myform">
     <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-12 row">
-        <div class="col-3">
+      <div class="col-12 row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -29,9 +29,8 @@
             :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
           />
         </div>
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <q-input
-            class="q-pl-sm"
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :outlined="status == 'register' || status == 'rejectRegister'"
             dense
@@ -44,9 +43,8 @@
             :label="`${'ชื่อปริญญา'}`"
           />
         </div>
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <q-input
-            class="q-pl-sm"
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :outlined="status == 'register' || status == 'rejectRegister'"
             dense
@@ -59,9 +57,7 @@
             :label="`${'สาขาวิชา/วิชาเอก'}`"
           />
         </div>
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <q-input
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :outlined="status == 'register' || status == 'rejectRegister'"
@@ -75,9 +71,8 @@
             :label="`${'ชื่อสถานศึกษา'}`"
           />
         </div>
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <q-select
-            class="q-pl-sm"
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
             :borderless="!(status == 'register' || status == 'rejectRegister')"
@@ -94,7 +89,7 @@
             :label="`${'ประเภทสถานศึกษา'}`"
           />
         </div>
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <datepicker
             :readonly="!(status == 'register' || status == 'rejectRegister')"
             v-model="defaultEducation.educationEndDate"
@@ -113,7 +108,6 @@
             </template>
             <template #trigger>
               <q-input
-                class="q-pl-sm"
                 :class="getClass(status == 'register' || status == 'rejectRegister')"
                 :outlined="status == 'register' || status == 'rejectRegister'"
                 dense
@@ -122,7 +116,6 @@
                 :borderless="!(status == 'register' || status == 'rejectRegister')"
                 :model-value="date2Thai(defaultEducation.educationEndDate)"
                 :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]"
-                hide-bottom-space
                 :label="`${'วันที่สำเร็จการศึกษา'}`"
               >
                 <template v-slot:prepend>
@@ -141,9 +134,8 @@
             </template>
           </datepicker>
         </div>
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <q-input
-            class="q-pl-sm"
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :outlined="status == 'register' || status == 'rejectRegister'"
             dense
@@ -156,9 +148,7 @@
             :label="`${'คะแนนเฉลี่ยสะสม'}`"
           />
         </div>
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
+        <div class="col-xs-12 col-sm-3">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index fbfa661..d4aa8fe 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -13,7 +13,17 @@
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
+        <q-field outlined bottom-slots :stack-label="defaultInformation.cardid != null" label="เลขประจำตัวประชาชน" counter maxlength="12" dense>
+          <template v-slot:prepend>
+            <q-btn round flat dense size="md" @click="idDialog">
+              <q-icon name="mdi-pencil-outline" color="primary" />
+            </q-btn>
+          </template>
+          <template v-slot:control>
+            <div class="self-center full-width no-outline" tabindex="0">{{defaultInformation.cardid}}</div>
+          </template>
+        </q-field>
+        <!-- <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -30,7 +40,7 @@
             (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
           ]"
           label="เลขบัตรประจำตัวประชาชน"
-        />
+        /> -->
       </div>
       <div class="col-xs-12 col-sm-3 col-md-2">
         <q-select
@@ -77,14 +87,15 @@
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3"><!-- :borderless="!false" -->
-        <q-input
+        <q-select
           :class="getClass(false)"
           dense
           :outlined="status == 'register' || status == 'rejectRegister'"
-          :readonly="!(status == 'rejectRegister')"
+          :readonly="!(status == 'register' ||status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           lazy-rules          
           v-model="defaultInformation.nationality"
+          :options="opNat"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
@@ -157,11 +168,12 @@
           </template>
         </datepicker>
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
+      <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           dense
           lazy-rules
+          bottom-slots
           :outlined="status == 'register' || status == 'rejectRegister'"
           :readonly="!(status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
@@ -211,11 +223,12 @@
           :label="`${'โทรศัพท์มือถือ'}`"
         />
       </div> -->
-      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"><!-- style="padding: 0 12px" -->
+      <div class="col-xs-12 col-sm-3 col-md-3"><!-- style="padding: 0 12px" -->
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           dense
           lazy-rules
+          bottom-slots
           :outlined="status == 'register' || status == 'rejectRegister'"
           :readonly="!(status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
@@ -271,6 +284,60 @@
       />
     </div> -->
   </q-form>
+
+  <!--  dialog กรอกเลขบัตร -->
+  <q-dialog v-model="idModel">
+    <q-card style="width: 350px">
+        <q-card-section class="bg-grey-2 q-py-sm">
+          <div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-input
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            type="tel"
+            mask="#############"
+            :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+            lazy-rules
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultInformation.cardid"
+            maxlength="13"
+            :rules="[
+              (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            class="q-mb-sm"
+          /> 
+          <q-input
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            type="tel"
+            mask="#############"
+            :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+            lazy-rules
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultInformation.cardid"
+            maxlength="13"
+            :rules="[
+              (val) => val.length == 13 || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชน'}`,
+              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชนให้ถูกต้อง'}`
+            ]"
+            label="ยืนยันเลขบัตรประจำตัวประชาชน"
+          /> 
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn flat label="ยกเลิก" color="red" v-close-popup />
+          <q-btn flat label="ตกลง" class="bg-teal-1" v-close-popup />
+        </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -324,6 +391,10 @@ const myform = ref<any>({})
 const img = ref<string>('')
 const fileProfile = ref<File[]>([])
 
+const opNat = ref(['ไทย'])
+const idModel = ref<boolean>(false)
+
+
 watch(myform, async (count: any, prevCount: any) => {
   emit('update:form', count)
 })
@@ -445,6 +516,10 @@ const getClass = (val: boolean) => {
     'full-width cursor-pointer': !val
   }
 }
+
+const idDialog = () => {
+  idModel.value = true
+}
 </script>
 
 <style>