เพิ่ม Function เพิ่มรายการประวัติตำแหน่ง/เงินเดือน

src/modules/04_registryPerson/views/edit/components/FormPosition.vue

@@ -9,6 +9,7 @@ const { date2Thai } = useCounterMixin();
 const store = useEditPosDataStore();
 
 const isReadonly = defineModel<boolean>("isReadonly", { required: true });
+const isAddPosition = defineModel<boolean>("isAddPosition", { default: false });
 const empType = defineModel<string>("empType", { required: true });
 const formData = defineModel<FormDataSalary>("formData", { required: true });
 const commandCodeOptions = defineModel<DataOption[]>("commandCodeOptions", {
@@ -106,7 +107,6 @@ function classInput(val: boolean) {
 <template>
   <div class="row col-12 q-col-gutter-sm">
     <div class="col-xs-12 col-sm-6 col-md-8">
-      <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
       <q-select
         outlined
         :class="classInput(isReadonly)"
@@ -120,6 +120,7 @@ function classInput(val: boolean) {
         map-options
         option-label="name"
         :options="commandCodeOptions"
+        :rules="isAddPosition ? [(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง'] : []"
         option-value="id"
         hide-bottom-space
         use-input
@@ -140,7 +141,6 @@ function classInput(val: boolean) {
     </div>
 
     <div class="col-xs-12 col-sm-6 col-md-4">
-      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
       <datepicker
         menu-class-name="modalfix"
         :readonly="isReadonly"
@@ -167,6 +167,7 @@ function classInput(val: boolean) {
                 : null
             "
             :label="`${'วันที่คำสั่งมีผล'}`"
+            :rules="isAddPosition ? [ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ] : []"
             hide-bottom-space
             clearable
             @clear="formData.commandDateAffect = null"
@@ -222,11 +223,11 @@ function classInput(val: boolean) {
             v-model="formData.commandNo"
             hide-bottom-space
             :label="`${'เลขที่คำสั่ง'}`"
+            :rules="isAddPosition ? [ (val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`, ] : []"
           />
         </div>
         <label class="col-1 flex justify-center items-center">/</label>
         <div class="col-5">
-          <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
           <datepicker
             menu-class-name="modalfix"
             v-model="formData.commandYear"
@@ -253,6 +254,7 @@ function classInput(val: boolean) {
                     : formData.commandYear + 543
                 "
                 :label="`${'พ.ศ.'}`"
+                :rules="isAddPosition ? [(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`] : []"
                 clearable
                 @clear="formData.commandYear = null"
               >
@@ -272,7 +274,6 @@ function classInput(val: boolean) {
     </div>
 
     <div class="col-xs-6 col-sm-6 col-md-4">
-      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
       <datepicker
         menu-class-name="modalfix"
         v-model="formData.commandDateSign"
@@ -299,6 +300,7 @@ function classInput(val: boolean) {
                 : null
             "
             :label="`${'วันที่ลงนาม'}`"
+            :rules="isAddPosition ? [ (val: string) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`, ] : []"
             hide-bottom-space
             clearable
             @clear="formData.commandDateSign = null"
@@ -358,6 +360,7 @@ function classInput(val: boolean) {
         borderless
         v-model="formData.positionName"
         :label="empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
+        :rules="isAddPosition ? [(val: string) => !!val || `${empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'}` ] :[]"
         hide-bottom-space
       />
     </div>
@@ -577,6 +580,20 @@ function classInput(val: boolean) {
       </q-select> -->
     </div>
 
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionExecutiveField"
+        hide-bottom-space
+        :label="`${'ด้านทางการบริหาร'}`"
+      />
+    </div>
+
     <div class="col-12">
       <div class="row q-col-gutter-sm">
         <div class="col-xs-6 col-sm-6 col-md-4">