Update form.vue

src/modules/05_placement/components/probation/form.vue

@@ -139,12 +139,29 @@
         no-dimming
       />
       <div>
-        <q-radio
-          checked-icon="task_alt"
-          unchecked-icon="panorama_fish_eye"
-          v-model="etc"
-          val="1"
-          label="1.7 อื่นๆ"
+        <q-checkbox v-model="etc" label="1.7 อื่นๆ" />
+      </div>
+      <div v-if="etc">
+        <div class="q-gutter-y-md column" style="max-width: 650px">
+          <q-input
+            filled
+            v-model="etc_text"
+            label="อื่นๆ"
+            lazy-rules
+            autogrow
+            :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+          />
+        </div>
+        <q-rating
+          v-model="modelEtc"
+          max="5"
+          size="3.5em"
+          label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
+          color="yellow"
+          icon="star_border"
+          icon-selected="star"
+          icon-half="star_half"
+          no-dimming
         />
       </div>
       <div class="q-gutter-y-md column" style="max-width: 650px">
@@ -358,28 +375,30 @@
         no-dimming
       />
       <div>
-        <q-radio
-          checked-icon="task_alt"
-          unchecked-icon="panorama_fish_eye"
-          v-model="etc_4"
-          val="0"
-          label="4. อื่นๆ"
-        />
-
-        <q-separator
-          vertical
-          color="grey-4"
-          size="2px"
-          class="q-mx-md"
-          v-if="etc == '1'"
-        />
-        <div class="col-xs-6 col-sm-2 col-md-2" v-if="etc_4 == '1'">
-          <q-input
-            filled
-            v-model="text_etc"
-            label="สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)"
-            lazy-rules
-            :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        <div>
+          <q-checkbox v-model="etc_4" label="1.7 อื่นๆ" />
+        </div>
+        <div v-if="etc_4">
+          <div class="q-gutter-y-md column" style="max-width: 650px">
+            <q-input
+              filled
+              v-model="etc_text2"
+              label="อื่นๆ"
+              lazy-rules
+              autogrow
+              :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+            />
+          </div>
+          <q-rating
+            v-model="modelEtc"
+            max="5"
+            size="3.5em"
+            label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
+            color="yellow"
+            icon="star_border"
+            icon-selected="star"
+            icon-half="star_half"
+            no-dimming
           />
         </div>
       </div>
@@ -485,51 +504,53 @@
       <div>
         {{ "เลือกผู้บังคับคับัญชา" }}
       </div>
-      <q-select
-        filled
-        v-model="Autherise"
-        :options="option"
-        label="ผู้บังคับบัญชา"
-        style="width: 250px"
-      />
-      <div class="col-xs-12 col-md-6">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="dateAutherise"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              class="full-width datepicker"
-              :model-value="
-                dateAutherise != null ? date2Thai(dateAutherise) : null
-              "
-              :label="`${'ลงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+      <div class="col-xs-12 col-md-6 row">
+        <q-select
+          filled
+          v-model="Autherise"
+          :options="option"
+          label="ผู้บังคับบัญชา"
+          style="width: 250px"
+        />
+        <div class="col-xs-12 col-md-6 row q-pl-md">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAutherise"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker col-3"
+                :model-value="
+                  dateAutherise != null ? date2Thai(dateAutherise) : null
+                "
+                :label="`${'ลงวันที่'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
       </div>
     </q-card>
     <div>
@@ -545,13 +566,15 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+import router from "@/router";
 
 const $q = useQuasar();
 const text1_1 = ref<any>(null);
 const text1_2 = ref<any>(null);
 const text2_1 = ref<any>(null);
 const text2_2 = ref<any>(null);
-
+const etc_text = ref<any>(null);
+const etc_text2 = ref<any>(null);
 const text3_1 = ref<any>(null);
 const text3_2 = ref<any>(null);
 const mixin = useCounterMixin();
@@ -583,14 +606,28 @@ const model15 = ref<any>(0);
 const model16 = ref<any>(0);
 const model17 = ref<any>(0);
 const model18 = ref<any>(0);
+const modelEtc = ref<any>(0);
 const dateAutherise = ref<any>(new Date());
-const etc = ref<any>(null);
-const etc_4 = ref<any>(null);
+const etc = ref<any>(false);
+const etc_4 = ref<any>(false);
 const radio_1 = ref<any>(null);
 const radio_2 = ref<any>(null);
 const radio_3 = ref<any>(null);
 const radio_4 = ref<any>(null);
 const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+const onSubmit = () => {
+  $q.notify({
+    color: "green-4",
+    textColor: "white",
+    icon: "cloud_done",
+    message: "ส่งแบบประเมินเเล้ว",
+  });
+};
+
+const onReset = () => {
+  router.push({ name: "probation" });
+};
 </script>
 
 <style>