From eaead1fade5f7f9754d9b11bc6f74879cb237e26 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:54:55 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20ui=20form=20probation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/form.vue             | 648 ++++++++++++++++++
 src/modules/05_placement/router.ts            |  12 +
 2 files changed, 660 insertions(+)
 create mode 100644 src/modules/05_placement/components/probation/form.vue

diff --git a/src/modules/05_placement/components/probation/form.vue b/src/modules/05_placement/components/probation/form.vue
new file mode 100644
index 000000000..ebec3acf1
--- /dev/null
+++ b/src/modules/05_placement/components/probation/form.vue
@@ -0,0 +1,648 @@
+<!-- card ข้อมูลส่วนตัว -->
+<template>
+  <q-toolbar class="q-pa-sm text-center">
+    <q-toolbar-title class="text-dark">
+      {{ "ฟอร์มแบบประเมินสำหรับผู้ดูแล" }}
+    </q-toolbar-title>
+  </q-toolbar>
+  {{
+    "วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่ " +
+    date2Thai(dateToday) +
+    "   ถึงวันที่  " +
+    date2Thai(dateEnd)
+  }}
+  <q-space />
+  {{ "ครั้งที่" + period }}
+  {{
+    "ระหว่างวันที่  " +
+    date2Thai(dateToday) +
+    "   ถึงวันที่  " +
+    date2Thai(dateEnd)
+  }}
+  <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+      <div>
+        {{ "1. ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ" }}
+      </div>
+      <div>
+        {{ "1.1 ความสำเร็จของงานที่ได้รับมอบหมาย" }}
+      </div>
+      <div class="q-gutter-y-md column" style="max-width: 650px">
+        <div>
+          {{ "1.1.1.ผลผลิตของงานที่คาดหวัง" }}
+        </div>
+        <q-input
+          filled
+          v-model="text1_1"
+          label="ผลผลิตของงานที่คาดหวัง"
+          lazy-rules
+          autogrow
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        />
+      </div>
+      <div>{{ "ระดับการประเมินพฤติกรรม" }}</div>
+
+      <q-rating
+        v-model="model"
+        max="5"
+        size="3.5em"
+        label="ระดับการประเมินพฤติกรรม"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "1.1.2.ผลผลิตของงานที่เกิดขึ้น" }}
+      </div>
+      <div class="q-gutter-y-md column" style="max-width: 650px">
+        <q-input
+          filled
+          v-model="text1_2"
+          label="ผลผลิตของงานที่เกิดขึ้น"
+          lazy-rules
+          autogrow
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        />
+      </div>
+      <div>{{ "ระดับการประเมินพฤติกรรม" }}</div>
+      <q-rating
+        v-model="model1"
+        max="5"
+        size="3.5em"
+        label="ระดับการประเมินพฤติกรรม"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>{{ "1.2 ความรู้ความสามารถ" }}</div>
+      <q-rating
+        v-model="model1_2"
+        max="5"
+        size="3.5em"
+        label="ความรู้ความสามารถ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>{{ "1. 3 ทักษะ" }}</div>
+      <q-rating
+        v-model="model1_3"
+        max="5"
+        size="3.5em"
+        label="ทักษะ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>{{ "1.4 สมรรถนะ" }}</div>
+      <q-rating
+        v-model="model1_4"
+        max="5"
+        size="3.5em"
+        label="สมรรถนะ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>{{ "1.5 ความสามารถในการเรียนรู้งาน" }}</div>
+      <q-rating
+        v-model="model1_5"
+        max="5"
+        size="3.5em"
+        label="ความสามารถในการเรียนรู้งาน"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>{{ "1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่" }}</div>
+      <q-rating
+        v-model="model1_6"
+        max="5"
+        size="3.5em"
+        label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        <q-radio
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          v-model="etc"
+          val="1"
+          label="1.7 อื่นๆ"
+        />
+      </div>
+      <div class="q-gutter-y-md column" style="max-width: 650px">
+        <div>
+          {{ "จุดเด่น (ไม่เกิน 5 บรรทัด)" }}
+        </div>
+        <q-input
+          filled
+          v-model="text2_1"
+          label="จุดเด่น (ไม่เกิน 5 บรรทัด)"
+          lazy-rules
+          autogrow
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        />
+        <div>
+          {{ "สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)" }}
+        </div>
+        <q-input
+          filled
+          v-model="text2_2"
+          autogrow
+          label="สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)"
+          lazy-rules
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        />
+      </div>
+    </q-card>
+    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+      <div>
+        {{ "2. พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ" }}
+      </div>
+      <div>
+        {{ "1.ความประพฤติ " }}
+      </div>
+      <div>{{ "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" }}</div>
+      <q-rating
+        v-model="model7"
+        max="5"
+        size="3.5em"
+        label="ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>{{ "มีความรับผิดชอบในการปฏิบัติบัติงาน" }}</div>
+      <q-rating
+        v-model="model8"
+        max="5"
+        size="3.5em"
+        label="มีความรับผิดชอบในการปฏิบัติบัติงาน"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{
+          "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน"
+        }}
+      </div>
+      <q-rating
+        v-model="model9"
+        max="5"
+        size="3.5em"
+        label="ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันยัหมั่นเพียร" }}
+      </div>
+      <q-rating
+        v-model="model10"
+        max="5"
+        size="3.5em"
+        label="ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันยัหมั่นเพียร"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "2.ความมีคุณธรรมจริยธรรม " }}
+      </div>
+      <div>
+        {{ "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ" }}
+      </div>
+      <q-rating
+        v-model="model11"
+        max="5"
+        size="3.5em"
+        label="อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" }}
+      </div>
+      <q-rating
+        v-model="model12"
+        max="5"
+        size="3.5em"
+        label="มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{
+          "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ"
+        }}
+      </div>
+      <q-rating
+        v-model="model13"
+        max="5"
+        size="3.5em"
+        label="ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "3.การรักษาวินัย " }}
+      </div>
+      <div>
+        {{ "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" }}
+      </div>
+      <q-rating
+        v-model="model14"
+        max="5"
+        size="3.5em"
+        label="มีความรับรัผิดชอบในการรักษาเวลาทำงาน"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ" }}
+      </div>
+      <q-rating
+        v-model="model15"
+        max="5"
+        size="3.5em"
+        label="แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{
+          "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน"
+        }}
+      </div>
+      <q-rating
+        v-model="model16"
+        max="5"
+        size="3.5em"
+        label="ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{
+          "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ"
+        }}
+      </div>
+      <q-rating
+        v-model="model17"
+        max="5"
+        size="3.5em"
+        label="ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        no-dimming
+      />
+      <div>
+        {{ "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ" }}
+      </div>
+      <q-rating
+        v-model="model18"
+        max="5"
+        size="3.5em"
+        label="ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ"
+        color="yellow"
+        icon="star_border"
+        icon-selected="star"
+        icon-half="star_half"
+        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>
+      </div>
+      <div class="q-gutter-y-md column" style="max-width: 650px">
+        <div>
+          {{ "จุดเด่น (ไม่เกิน 5 บรรทัด)" }}
+        </div>
+        <q-input
+          filled
+          v-model="text3_1"
+          autogrow
+          label="จุดเด่น (ไม่เกิน 5 บรรทัด)"
+          lazy-rules
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        />
+        <div>
+          {{ "สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)" }}
+        </div>
+        <q-input
+          filled
+          v-model="text3_2"
+          autogrow
+          label="สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)"
+          lazy-rules
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+        />
+      </div>
+    </q-card>
+    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+      <div>
+        {{ "การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ" }}
+      </div>
+      <div>
+        {{ "1. การปฐมนิเทศ" }}
+      </div>
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_1"
+        val="1"
+        label="ดำเนินการเเล้ว"
+      />
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_1"
+        val="0"
+        label=" ยังไม่ได้ดำเนินการ"
+      />
+      <div>
+        {{ "2. การเรียนรู้ด้วยตนเอง" }}
+      </div>
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_2"
+        val="1"
+        label="ดำเนินการเเล้ว"
+      />
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_2"
+        val="0"
+        label=" ยังไม่ได้ดำเนินการ"
+      />
+      <div>
+        {{ "3. การอบรมสัมนาร่วมกัน" }}
+      </div>
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_3"
+        val="1"
+        label="ดำเนินการเเล้ว"
+      />
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_3"
+        val="0"
+        label=" ยังไม่ได้ดำเนินการ"
+      />
+      <div>
+        {{ "4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)" }}
+      </div>
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_4"
+        val="1"
+        label="ดำเนินการเเล้ว"
+      />
+      <q-radio
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        v-model="radio_4"
+        val="0"
+        label=" ยังไม่ได้ดำเนินการ"
+      />
+    </q-card>
+    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+      <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>
+    </q-card>
+    <div>
+      <q-btn label="ส่งแบบประเมิน" type="submit" color="primary" />
+      <q-btn label="ยกเลิก" type="reset" color="primary" flat class="q-ml-sm" />
+    </div>
+    <q-space />
+  </q-form>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+
+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 text3_1 = ref<any>(null);
+const text3_2 = ref<any>(null);
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const dataStore = useDataStore();
+const route = useRoute();
+const edit = ref<boolean>(true);
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+const myform = ref<any>({});
+const Autherise = ref<any>(null);
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const model7 = ref<any>(0);
+const model8 = ref<any>(0);
+const model9 = ref<any>(0);
+const model10 = ref<any>(0);
+const model11 = ref<any>(0);
+const model12 = ref<any>(0);
+const model13 = ref<any>(0);
+const model14 = ref<any>(0);
+const model15 = ref<any>(0);
+const model16 = ref<any>(0);
+const model17 = ref<any>(0);
+const model18 = ref<any>(0);
+const dateAutherise = ref<any>(new Date());
+const etc = ref<any>(null);
+const etc_4 = ref<any>(null);
+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>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+</script>
+
+<style>
+.modalfix {
+  position: fixed !important;
+}
+.containerimage {
+  position: relative;
+  width: 100%;
+}
+
+.q-img {
+  display: block;
+  width: 100%;
+  max-height: 170px;
+  padding: 1%;
+  border-radius: 8px;
+  border: solid 2px rgba(168, 168, 168, 0.055) !important;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
+}
+
+.overlay {
+  position: absolute;
+  bottom: 0;
+  background: rgb(0, 0, 0);
+  background: rgba(0, 0, 0, 0.7);
+  color: #f1f1f1;
+  transition: 0.5s ease;
+  width: 100%;
+  height: 70px;
+  opacity: 0;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+  padding: 5% 0 5% 0;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.q-field__bottom {
+  padding: 5px 10px 0px 0px;
+}
+
+input[type="file"] {
+  display: none;
+}
+.custom-file-upload {
+  border: 1px solid #ccc;
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 133d0d1fa..afcba9e5d 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -25,6 +25,8 @@ const mainProbation = () =>
 
 const probationDetail = () =>
   import("@/modules/05_placement/components/probation/ProbationDetail.vue");
+const probationForm = () =>
+  import("@/modules/05_placement/components/probation/form.vue");
 export default [
   {
     path: "/placement",
@@ -106,4 +108,14 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/form",
+    name: "probationForm",
+    component: probationForm,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];