updated position

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue

@@ -51,7 +51,7 @@ const {
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
-  convertDateToAPI
+  convertDateToAPI,
 } = useCounterMixin();
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@@ -296,6 +296,7 @@ const formData = reactive<FormPostition>({
   positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
   positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
   positionLine: "", // สายงาน
+  positionCee: "", //ระดับซี
   positionPathSide: "", //ด้าน/สาขา
   positionExecutive: "", //ตำแหน่งทางการบริหาร
   amount: null, //เงินเดือน
@@ -529,9 +530,9 @@ async function fetchDataTenure() {
  * @param status แก่ไข , เพิ่ม
  */
 async function updateSelectType(val: string, status: boolean = false) {
-  const listLevel = dataLevel.value.find(
+  const listLevel = val
-    (e: DataPosType) => e.posTypeName === val
+    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
-  );
+    : null;
 
   if (listLevel) {
     store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
@@ -543,6 +544,9 @@ async function updateSelectType(val: string, status: boolean = false) {
     }));
 
     formData.positionLevel = !status ? "" : formData.positionLevel;
+  } else {
+    store.posLevelData = [];
+    formData.positionLevel = "";
   }
 }
 
@@ -588,6 +592,7 @@ async function onClickOpenDialog(
   formData.positionName = statusEdit ? data.positionName : "";
   formData.positionType = statusEdit ? data.positionType : "";
   formData.positionLevel = statusEdit ? data.positionLevel : "";
+  formData.positionCee = statusEdit ? data.positionCee : "";
   formData.positionLine = statusEdit ? data.positionLine : "";
   formData.positionPathSide = statusEdit ? data.positionPathSide : "";
   formData.positionExecutive = statusEdit ? data.positionExecutive : "";
@@ -913,7 +918,8 @@ onMounted(async () => {
 
         <q-card-section style="max-height: 100%" class="scroll">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
+            <div class="col-xs-12 col-sm-12 col-md-8">
+              <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
               <q-select
                 outlined
                 :class="classInput(true)"
@@ -933,7 +939,6 @@ onMounted(async () => {
                 fill-input
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']"
                 @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
                     )"
@@ -948,7 +953,43 @@ onMounted(async () => {
               </q-select>
             </div>
 
-            <div class="col-xs-6 col-sm-12 col-md-6">
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
+              <datepicker
+                v-model="formData.commandDateAffect"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(true)"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    borderless
+                    :model-value="date2Thai(formData.commandDateAffect)"
+                    :label="`${'วันที่คำสั่งมีผล'}`"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        color="primary"
+                        class="cursor-pointer"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-6 col-sm-12 col-md-8">
               <div class="row q-col-gutter-sm">
                 <div class="col-6">
                   <q-input
@@ -962,10 +1003,9 @@ onMounted(async () => {
                     :label="`${'เลขที่คำสั่ง'}`"
                   />
                 </div>
-                <label class="col-1 flex justify-center items-center text-bold"
+                <label class="col-1 flex justify-center items-center">/</label>
-                  >/</label
-                >
                 <div class="col-5">
+                  <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.commandYear"
@@ -990,7 +1030,6 @@ onMounted(async () => {
                             : formData.commandYear + 543
                         "
                         :label="`${'พ.ศ.'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1007,47 +1046,8 @@ onMounted(async () => {
               </div>
             </div>
 
-            <div class="col-xs-6 col-sm-6 col-md-3">
+            <div class="col-xs-6 col-sm-6 col-md-4">
-              <datepicker
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
-                v-model="formData.commandDateAffect"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :class="classInput(true)"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    borderless
-                    :model-value="date2Thai(formData.commandDateAffect)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือกวันที่คำสั่งมีผล'}`,
-                        ]"
-                    :label="`${'วันที่คำสั่งมีผล'}`"
-                    hide-bottom-space
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        color="primary"
-                        class="cursor-pointer"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-
-            <div class="col-xs-6 col-sm-6 col-md-3">
               <datepicker
                 v-model="formData.commandDateSign"
                 :locale="'th'"
@@ -1066,11 +1066,6 @@ onMounted(async () => {
                     dense
                     borderless
                     :model-value="date2Thai(formData.commandDateSign)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือก วันที่ลงนาม'}`,
-                        ]"
                     :label="`${'วันที่ลงนาม'}`"
                     hide-bottom-space
                   >
@@ -1087,6 +1082,10 @@ onMounted(async () => {
               </datepicker>
             </div>
 
+            <div class="col-12">
+              <q-separator />
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
                 :class="classInput(true)"
@@ -1102,6 +1101,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1111,12 +1111,12 @@ onMounted(async () => {
                 v-model="formData.posNo"
                 hide-bottom-space
                 :label="`${'ตำแหน่งเลขที่'}`"
-                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
               >
               </q-input>
             </div>
 
             <div class="col-xs-12 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1126,11 +1126,11 @@ onMounted(async () => {
                 v-model="formData.positionName"
                 :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
                 hide-bottom-space
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']"
               />
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
               <q-select
                 ref="positionType Ref"
                 outlined
@@ -1150,8 +1150,8 @@ onMounted(async () => {
                 hide-selected
                 fill-input
                 input-debounce="0"
+                clearable
                 @update:model-value="updateSelectType"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
@@ -1167,6 +1167,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
               <q-select
                 :class="classInput(true)"
                 :disable="!formData.positionType"
@@ -1175,7 +1176,6 @@ onMounted(async () => {
                 lazy-rules
                 borderless
                 v-model="formData.positionLevel"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']"
                 :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
                 emit-value
                 map-options
@@ -1200,6 +1200,20 @@ onMounted(async () => {
               </q-select>
             </div>
 
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-input
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.positionCee"
+                hide-bottom-space
+                :label="`${'ระดับซี'}`"
+              >
+              </q-input>
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
                 outlined
@@ -1303,6 +1317,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]" -->
               <q-input
                 :class="classInput(true)"
                 ref="salaryRef"
@@ -1312,7 +1327,6 @@ onMounted(async () => {
                 label="เงินเดือน"
                 mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 lazy-rules
                 hide-bottom-space
               />

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -49,7 +49,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
-  convertDateToAPI
+  convertDateToAPI,
 } = useCounterMixin();
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@@ -325,6 +325,7 @@ const formData = reactive<FormSalary>({
   positionName: "", //ตำแหน่ง
   positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
   positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
+  positionCee: "", //ตำแหน่งซี
   positionLine: "", // สายงาน
   positionPathSide: "", //ด้าน/สาขา
   positionExecutive: "", //ตำแหน่งทางการบริหาร
@@ -498,9 +499,9 @@ async function fetchDataOptionExecutive() {
  * @param status แก่ไข , เพิ่ม
  */
 async function updateSelectType(val: string, status: boolean = false) {
-  const listLevel = dataLevel.value.find(
+  const listLevel = val
-    (e: DataPosType) => e.posTypeName === val
+    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
-  );
+    : null;
 
   if (listLevel) {
     store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
@@ -512,6 +513,9 @@ async function updateSelectType(val: string, status: boolean = false) {
     }));
 
     formData.positionLevel = !status ? "" : formData.positionLevel;
+  } else {
+    store.posLevelData = [];
+    formData.positionLevel = "";
   }
 }
 
@@ -558,6 +562,7 @@ async function onClickOpenDialog(
   formData.positionName = statusEdit ? data.positionName : "";
   formData.positionType = statusEdit ? data.positionType : "";
   formData.positionLevel = statusEdit ? data.positionLevel : "";
+  formData.positionCee = statusEdit ? data.positionCee : "";
   formData.positionLine = statusEdit ? data.positionLine : "";
   formData.positionPathSide = statusEdit ? data.positionPathSide : "";
   formData.positionExecutive = statusEdit ? data.positionExecutive : "";
@@ -724,6 +729,7 @@ onMounted(async () => {
   }
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -860,7 +866,8 @@ onMounted(async () => {
 
         <q-card-section style="max-height: 100%" class="scroll">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
+            <div class="col-xs-12 col-sm-12 col-md-8">
+              <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
               <q-select
                 outlined
                 :class="classInput(true)"
@@ -880,7 +887,6 @@ onMounted(async () => {
                 fill-input
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']"
                 @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
                     )"
@@ -895,7 +901,43 @@ onMounted(async () => {
               </q-select>
             </div>
 
-            <div class="col-xs-6 col-sm-12 col-md-6">
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
+              <datepicker
+                v-model="formData.commandDateAffect"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(true)"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    borderless
+                    :model-value="date2Thai(formData.commandDateAffect)"
+                    :label="`${'วันที่คำสั่งมีผล'}`"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        color="primary"
+                        class="cursor-pointer"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-6 col-sm-12 col-md-8">
               <div class="row q-col-gutter-sm">
                 <div class="col-6">
                   <q-input
@@ -909,10 +951,9 @@ onMounted(async () => {
                     :label="`${'เลขที่คำสั่ง'}`"
                   />
                 </div>
-                <label class="col-1 flex justify-center items-center text-bold"
+                <label class="col-1 flex justify-center items-center">/</label>
-                  >/</label
-                >
                 <div class="col-5">
+                  <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.commandYear"
@@ -937,7 +978,6 @@ onMounted(async () => {
                             : formData.commandYear + 543
                         "
                         :label="`${'พ.ศ.'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -954,47 +994,8 @@ onMounted(async () => {
               </div>
             </div>
 
-            <div class="col-xs-6 col-sm-6 col-md-3">
+            <div class="col-xs-6 col-sm-6 col-md-4">
-              <datepicker
+              <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
-                v-model="formData.commandDateAffect"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :class="classInput(true)"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    borderless
-                    :model-value="date2Thai(formData.commandDateAffect)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือกวันที่คำสั่งมีผล'}`,
-                        ]"
-                    :label="`${'วันที่คำสั่งมีผล'}`"
-                    hide-bottom-space
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        color="primary"
-                        class="cursor-pointer"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-
-            <div class="col-xs-6 col-sm-6 col-md-3">
               <datepicker
                 v-model="formData.commandDateSign"
                 :locale="'th'"
@@ -1013,11 +1014,6 @@ onMounted(async () => {
                     dense
                     borderless
                     :model-value="date2Thai(formData.commandDateSign)"
-                    :rules="[
-                          (val: string) =>
-                            !!val ||
-                            `${'กรุณาเลือก วันที่ลงนาม'}`,
-                        ]"
                     :label="`${'วันที่ลงนาม'}`"
                     hide-bottom-space
                   >
@@ -1034,6 +1030,10 @@ onMounted(async () => {
               </datepicker>
             </div>
 
+            <div class="col-12">
+              <q-separator />
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
                 :class="classInput(true)"
@@ -1049,6 +1049,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1058,12 +1059,12 @@ onMounted(async () => {
                 v-model="formData.posNo"
                 hide-bottom-space
                 :label="`${'ตำแหน่งเลขที่'}`"
-                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]"
               >
               </q-input>
             </div>
 
             <div class="col-xs-12 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
               <q-input
                 :class="classInput(true)"
                 outlined
@@ -1073,11 +1074,11 @@ onMounted(async () => {
                 v-model="formData.positionName"
                 :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
                 hide-bottom-space
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']"
               />
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
               <q-select
                 ref="positionType Ref"
                 outlined
@@ -1096,9 +1097,9 @@ onMounted(async () => {
                 use-input
                 hide-selected
                 fill-input
+                clearable
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
@@ -1114,6 +1115,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
+              <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
               <q-select
                 :class="classInput(true)"
                 :disable="!formData.positionType"
@@ -1122,7 +1124,6 @@ onMounted(async () => {
                 lazy-rules
                 borderless
                 v-model="formData.positionLevel"
-                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']"
                 :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
                 emit-value
                 map-options
@@ -1147,6 +1148,20 @@ onMounted(async () => {
               </q-select>
             </div>
 
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-input
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.positionCee"
+                hide-bottom-space
+                :label="`${'ระดับซี'}`"
+              >
+              </q-input>
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
               <q-select
                 outlined

src/modules/04_registryPerson/interface/index/government.ts

@@ -72,6 +72,7 @@ interface FormPostition {
   positionLine: string; // สายงาน
   positionPathSide: string; //ด้าน/สาขา
   positionExecutive: string; //ตำแหน่งทางการบริหาร
+  positionCee: string; //ระดับซี
   amount: number | null; //เงินเดือน
   amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
   orgRoot: string; //หน่วยงาน

src/modules/04_registryPerson/interface/request/Salary.ts

@@ -9,6 +9,7 @@ interface FormSalary {
   positionName: string; //ตำแหน่ง
   positionType: string; //ประเภทตำแหน่ง, กลุ่มงาน
   positionLevel: string; //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionCee: string; //ระดับซี
   positionLine: string; // สายงาน
   positionPathSide: string; //ด้าน/สาขา
   positionExecutive: string; //ตำแหน่งทางการบริหาร

src/modules/21_report/views/02_reportRegistry.vue

@@ -1169,6 +1169,28 @@ watch(
                       </q-select>
                     </div>
                     <div class="col-12"><q-separator /></div>
+                    <div
+                      class="col-12 q-px-sm"
+                      v-if="employeeClass === 'officer'"
+                    >
+                      <q-input
+                        dense
+                        v-model="positionArea"
+                        borderless
+                        label=" ด้าน/สาขา"
+                        class="bg-white full-width"
+                      >
+                        <template v-if="positionArea" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="positionArea = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
                     <div class="col-12 q-px-sm">
                       <q-select
                         label="เพศ"
@@ -1301,28 +1323,7 @@ watch(
                     <div class="col-12" v-if="employeeClass === 'officer'">
                       <q-separator />
                     </div>
-                    <div
+
-                      class="col-12 q-px-sm"
-                      v-if="employeeClass === 'officer'"
-                    >
-                      <q-input
-                        dense
-                        v-model="positionArea"
-                        borderless
-                        label=" ด้าน/สาขา"
-                        class="bg-white full-width"
-                      >
-                        <template v-if="positionArea" v-slot:append>
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="positionArea = ''"
-                            class="cursor-pointer"
-                            style="opacity: 0.6"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
                     <div class="col-12 q-pa-sm">
                       <div class="text-grey-8 text-caption">ช่วงเวลาบรรจุ</div>
                       <div class="col-12">