ปรับ ui สมัครสอบ

src/modules/03_recruiting/components/Career.vue

@@ -79,6 +79,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"
@@ -122,7 +138,7 @@
                 @update:modelValue="clickEditRow"
                 hide-bottom-space
               />
-            </div>
+            </div> -->
             <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 :readonly="!edit"
@@ -274,6 +290,14 @@ const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 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>();
@@ -302,9 +326,10 @@ const visibleColumns = ref<String[]>([]);
 examData.career.columns.length == 0
   ? (visibleColumns.value = [
       "position",
-      "group",
+      //   "group",
-      "pile",
+      //   "pile",
-      "org",
+      //   "org",
+      "type",
       "startDate",
       "endDate",
       "rangeDate",
@@ -324,38 +349,49 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "group",
+    name: "type",
     align: "left",
-    label: "กลุ่ม/ฝ่าย",
+    label: "ประเภท",
     sortable: true,
-    field: "group",
+    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "pile",
-    align: "left",
-    label: "กอง",
-    sortable: true,
-    field: "pile",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "org",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "org",
     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: "กลุ่ม/ฝ่าย",
+  //     sortable: true,
+  //     field: "group",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "pile",
+  //     align: "left",
+  //     label: "กอง",
+  //     sortable: true,
+  //     field: "pile",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "org",
+  //     align: "left",
+  //     label: "สังกัด",
+  //     sortable: true,
+  //     field: "org",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
   {
     name: "startDate",
     align: "left",
@@ -479,6 +515,7 @@ const clickPrevious = async () => {
   startDate.value = row.startDate;
   endDate.value = row.endDate;
   rangeDate.value = row.rangeDate;
+  type.value = row.type;
   id.value = row.id;
   await checkRowPage();
 };
@@ -496,6 +533,7 @@ const clickNext = () => {
   startDate.value = row.startDate;
   endDate.value = row.endDate;
   rangeDate.value = row.rangeDate;
+  type.value = row.type;
   id.value = row.id;
   checkRowPage();
 };
@@ -591,6 +629,7 @@ const saveData = async () => {
       durationStart: dateToISO(new Date(startDate.value)),
       durationEnd: dateToISO(new Date(endDate.value)),
       rangeDate: rangeDate.value,
+      type: type.value,
     })
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -618,6 +657,7 @@ const editData = async () => {
       durationStart: dateToISO(new Date(startDate.value)),
       durationEnd: dateToISO(new Date(endDate.value)),
       rangeDate: rangeDate.value,
+      type: type.value,
     })
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -672,6 +712,7 @@ const selectData = (props: any) => {
   startDate.value = props.row.startDate;
   endDate.value = props.row.endDate;
   rangeDate.value = props.row.rangeDate;
+  type.value = props.row.type;
   id.value = props.row.id;
   next.value = false;
   previous.value = false;
@@ -690,6 +731,7 @@ const addRow = () => {
   startDate.value = new Date();
   endDate.value = new Date();
   rangeDate.value = null;
+  type.value = null;
 };
 
 /**

src/modules/03_recruiting/components/Information.vue

@@ -16,7 +16,31 @@
     <div
       class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"
     >
-      <div class="col-xs-12 col-sm-3 col-md-3">
+      <div class="col-xs-12 col-sm-4 col-md-4">
+        <q-input
+          :class="getClass(status == 'checkRegister' || status == 'payment')"
+          :outlined="status == 'checkRegister' || status == 'payment'"
+          dense
+          type="tel"
+          mask="#############"
+          :counter="
+            status == 'checkRegister' || status == 'payment' ? true : false
+          "
+          lazy-rules
+          :readonly="!(status == 'checkRegister' || status == 'payment')"
+          :borderless="!(status == 'checkRegister' || status == 'payment')"
+          v-model="defaultInformation.cardid"
+          maxlength="13"
+          :rules="[
+            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+            (val) =>
+              /^[0-9]*$/.test(val) ||
+              `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+          ]"
+          label="เลขประจำตัวประชาชน"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
         <q-select
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
@@ -61,16 +85,28 @@
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
+        <!-- <q-input
-          :class="getClass(false)"
+          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :outlined="false"
+          :outlined="status == 'checkRegister' || status == 'payment'"
           dense
           lazy-rules
-          :readonly="!false"
+          :readonly="!status == 'checkRegister' || status == 'payment'"
-          :borderless="!false"
+          :borderless="!status == 'checkRegister' || status == 'payment'"
           v-model="defaultInformation.nationality"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
+        /> -->
+        <q-select
+          :class="getClass(status == 'checkRegister' || status == 'payment')"
+          :readonly="!(status == 'checkRegister' || status == 'payment')"
+          :borderless="!(status == 'checkRegister' || status == 'payment')"
+          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+          :outlined="status == 'checkRegister' || status == 'payment'"
+          dense
+          lazy-rules
+          v-model="defaultInformation.nationality"
+          :options="opNat"
+          :label="`${'สัญชาติ'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -185,30 +221,6 @@
           :label="`${'เบอร์โทร'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          type="tel"
-          mask="#############"
-          :counter="
-            status == 'checkRegister' || status == 'payment' ? true : false
-          "
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          v-model="defaultInformation.cardid"
-          maxlength="13"
-          :rules="[
-            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-            (val) =>
-              /^[0-9]*$/.test(val) ||
-              `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-          ]"
-          label="เลขประจำตัวประชาชน"
-        />
-      </div>
       <!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-select
           :class="getClass(status == 'checkRegister' || status == 'payment')"
@@ -435,6 +447,7 @@ const candidateId = ref<string>(route.params.candidateId.toString());
 const edit = ref<boolean>(true);
 const myform = ref<any>({});
 const img = ref<string>("");
+const opNat = ref(["ไทย"]);
 const fileProfile = ref<File[]>([]);
 
 const { messageError, showLoader, hideLoader } = mixin;