เพิ่ม ui ลงเวลากรณีพิเศษ

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -34,13 +34,13 @@ const formData = reactive<FormData>({
 
 watch(props.data, async () => {
   // console.log("data==>", props.data)
-  formData.prefix = props.data.prefix
-  formData.firstname = props.data.firstname
-  formData.lastname = props.data.lastname
-  formData.position = props.data.position
-  formData.phone = props.data.phone
-  formData.responsibilities = props.data.responsibilities
-  formData.email = props.data.email
+  formData.prefix = props.data.prefix;
+  formData.firstname = props.data.firstname;
+  formData.lastname = props.data.lastname;
+  formData.position = props.data.position;
+  formData.phone = props.data.phone;
+  formData.responsibilities = props.data.responsibilities;
+  formData.email = props.data.email;
 });
 
 // เพิ่มบุคลากร
@@ -93,50 +93,120 @@ function onValidate() {
             <label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
           </div>
           <div class="col-6">
-            <q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef" for="idCardRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="idCard"
+              label="รหัสบัตรประชาชน"
+              ref="idCardRef"
+              for="idCardRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
+            />
           </div>
           <div class="col-2">
-            <q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร"
-              id="addCustomer" />
+            <q-btn
+              unelevated
+              dense
+              color="primary"
+              class="q-px-md q-py-sm"
+              @click="addEmployee"
+              label="เพิ่มบุคลากร"
+              id="addCustomer"
+            />
           </div>
         </div>
 
         <div class="row q-px-md q-col-gutter-sm">
           <div class="col-3">
-            <q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef" for="prefixRef"
-              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.prefix"
+              label="คำนำหน้า"
+              ref="prefixRef"
+              for="prefixRef"
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef" for="firstnameRef"
-              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.firstname"
+              label="ชื่อ"
+              ref="firstnameRef"
+              for="firstnameRef"
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef" for="lastnameRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.lastname"
+              label="นามสกุล"
+              ref="lastnameRef"
+              for="lastnameRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef" for="positionRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.position"
+              label="ตำแหน่ง"
+              ref="positionRef"
+              for="positionRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef" for="phoneRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.phone"
+              label="เบอร์โทร"
+              ref="phoneRef"
+              for="phoneRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef"
-              for="responsibilitiesRef" :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.responsibilities"
+              label="หน้าที่"
+              ref="responsibilitiesRef"
+              for="responsibilitiesRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef" for="emailRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.email"
+              label="อีเมล"
+              ref="emailRef"
+              for="emailRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
+            />
           </div>
         </div>
 
         <q-separator />
         <div class="row col-12 q-pa-sm">
           <q-space />
-          <q-btn type="submit" flat round color="public" icon="mdi-content-save-outline" id="formSubmit">
+          <q-btn
+            type="submit"
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            id="formSubmit"
+          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>