FormEvaluateScore

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue

@@ -448,7 +448,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -658,7 +664,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -60,9 +60,6 @@ const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
 // part 1
-const knowledge_level = ref<number>(0);
-const skill_level = ref<number>(0);
-const competency_level = ref<number>(0);
 const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
@@ -74,39 +71,94 @@ const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>([{ text: "", level: 0 }]);
-const behavio_strength_desc = ref<string>("");
-const behavio_inprove_desc = ref<string>("");
+
 // part 3
-const orientation = ref<num>(null);
-const self_learning = ref<any>(null);
-const training_seminar = ref<any>(null);
-const other_training = ref<any>(null);
-//rules
-const behavio_strengthRef = ref<any>(null);
-const behavio_strengthRules = [
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
-];
-const behavio_inproveRef = ref<any>(null);
-const behavio_inproveRules = [
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
-];
+const orientation = ref<number>(null);
+const self_learning = ref<number>(null);
+const training_seminar = ref<number>(null);
+const other_training = ref<number>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+// score
+const score1 = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return (
+      learn_level.value +
+      apply_level.value +
+      success_level.value +
+      achievement_other.value.level
+    );
+  }
+  return learn_level.value + apply_level.value + success_level.value;
+});
+const score2 = computed(() => {
+  let sum_conduct = conduct_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_moral = moral_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_discipline = discipline_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return (
+      sum_conduct + sum_moral + sum_discipline + behavio_orther.value.level
+    );
+  } else return sum_conduct + sum_moral + sum_discipline;
+});
+const percent_score1: number = computed(() => {
+  let num = 0;
+  if (etc.value === true) {
+    num = 20;
+  } else num = 15;
+  let percent1 = (score1.value / num) * 100;
+  return percent1.toFixed(2);
+});
+const percent_score2: number = computed(() => {
+  let num = 0;
+  if (etc2.value === true) {
+    num = 65;
+  } else num = 60;
+  let percent2 = (score2.value / num) * 100;
+  return percent2.toFixed(2);
+});
+const percent_sum: any = computed(() => {
+  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
+  return sum.toFixed(2);
+});
+const score4 = computed(() => {
+  return (
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    Number(other_training.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
-  behavio_strengthRef.value.validate();
-  behavio_inproveRef.value.validate();
   if (
-    knowledge_level.value === 0 ||
-    skill_level.value === 0 ||
-    competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
     success_level.value === 0 ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
-    behavio_inprove_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -133,9 +185,6 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    knowledge_level: knowledge_level.value,
-    skill_level: skill_level.value,
-    competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
@@ -153,12 +202,12 @@ const putformData = () => {
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
-    behavio_inprove_desc: behavio_inprove_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    total_experiment: Number(score1.value),
+    total_behavior: Number(score2.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -331,7 +380,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.4 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -387,6 +442,24 @@ const putformData = () => {
           </q-item>
         </q-list>
       </q-card>
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> คะแนนรวมผลสัมฤทธิ์ของการทดลองฯ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-field dense>
+                <template v-slot:control>
+                  <div class="self-center full-width no-outline">
+                    {{ score1 }}
+                  </div>
+                </template>
+              </q-field>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
     </div>
 
     <!-- Part 2 -->
@@ -541,7 +614,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"
@@ -598,22 +676,195 @@ const putformData = () => {
           </q-list>
         </q-card>
       </div>
+      <div class="col-12 row">
+        <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label> คะแนนรวมพฤติกรรมการปฎิบัติราชการ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-field dense>
+                  <template v-slot:control>
+                    <div class="self-center full-width no-outline">
+                      {{ score2 }}
+                    </div>
+                  </template>
+                </q-field>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
     </div>
 
-    <!-- Part 3 -->
-    <!-- <Part3 /> -->
+    <!-- ผลการประเมิน -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row justify-center">
         <div class="col-12 text-top0 items-center">
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.1. ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 }}</div>
+                  <div class="col">{{ percent_score1 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score1 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.2. พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score2 }}</div>
+                  <div class="col">{{ percent_score2 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score2 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> ผลคะแนนรวม</q-item-label>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 + score2 }}</div>
+                  <div class="col">{{ percent_sum }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_sum > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <!-- Part 4 -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
           การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
         </div>
+        <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+          <div class="row q-gutter-md">
+            <div class="col-8"></div>
+            <div class="col">คะแนน</div>
+            <div class="col">ร้อยละ</div>
+          </div>
+        </div>
         <q-card
           flat
           bordered
           class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
         >
-          <q-list dense>
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input dense type="number" v-model="orientation" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input dense type="number" v-model="self_learning" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input dense type="number" v-model="training_seminar" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">
+              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="other_training" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <!-- <q-list dense>
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label>1. การปฐมนิเทศ</q-item-label>
@@ -711,13 +962,177 @@ const putformData = () => {
                 </div>
               </q-item-section>
             </q-item>
-          </q-list>
+          </q-list> -->
+        </q-card>
+        <q-card class="text-top0 col-12">
+          <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+            <div class="row q-gutter-md">
+              <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
+              <div class="col">{{ score4 }}</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </div>
 
     <!-- Footer -->
     <!-- <Footer /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          ผู้บังคับบัญชาผู้มอบหมายงาน
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <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>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <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>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <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>
+      </div>
+    </div>
+
     <q-toolbar class="text-primary">
       <q-space />
       <q-btn label="บันทึก" color="secondary" @click="savaForm" />
@@ -726,6 +1141,11 @@ const putformData = () => {
 </template>
 
 <style lang="scss" scoped>
+.align-center {
+  display: flex;
+
+  align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
+}
 .text-top2 {
   font-weight: 500;
   padding-bottom: 8px;

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -636,7 +636,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.8 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -887,7 +893,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"