รายละเอียดงานที่ได้รับมอบหมาย (ส่วนนึง)

src/modules/11_probation/component/02_RecordCareker.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบบันทึกผล (ผู้ดูแล)</div>
+    </div>
+  </div>
+  
+</template>

src/modules/11_probation/component/03_RecordCommander.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบบันทึกผล (ผู้บังคับบัญชา)</div>
+    </div>
+  </div>
+  
+</template>

src/modules/11_probation/component/04_EvaluateCommander.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+    </div>
+  </div>
+  
+</template>

src/modules/11_probation/component/05_EvaluateChairman.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบประเมินผล (คณะกรรมการ)</div>
+    </div>
+  </div>
+  
+</template>

src/modules/11_probation/component/06_EvaluateResult.vue

@@ -0,0 +1,735 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const assign = ref<any>([]);
+const person = ref<any>([]);
+const fullname = ref<string>("");
+const mentors = ref<any>([]);
+const date_start = ref<Date>(new Date());
+const date_finish = ref<Date>();
+const develop = ref<number>();
+const result = ref<number>();
+const director_id = ref<any>(null);
+const director_id2 = ref<any>(null);
+const director_id3 = ref<any>(null);
+const reson52 = ref<string>("");
+const ID = ref<string>("");
+const reson = ref<string>("");
+const director1_dated = ref<any>("");
+const director2_dated = ref<any>("");
+const chairman_dated = ref<Date>();
+const action = ref<string>("add");
+const expand_month = ref<string>();
+
+const commander = ref<any>([]);
+const optionDirector = ref<any>([]);
+
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+  date2Thai,
+} = mixin;
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+const mode = ref<any>($q.screen.gt.xs);
+const status = ref<boolean>(true);
+
+const options = ref<any>([
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
+]);
+const optionsResult = ref<any>([
+  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
+  { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+  {
+    value: 3,
+    label: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
+  },
+]);
+
+function onSubmit() {
+  dialogConfirm($q, async () => await postData("post"));
+}
+
+
+/** post/put  data
+ * @param action post put
+ */
+ async function postData(action: string) {
+  const data = await {
+    start_date: date_start.value,
+    date_finish: date_finish.value,
+    develop_complete: develop.value,
+    pass_result: result.value,
+    reson: reson.value,
+    chairman_dated: chairman_dated.value,
+    director1_dated: director1_dated.value,
+    director2_dated: director2_dated.value,
+    expand_month: expand_month.value,
+  };
+  if (action === "post") {
+    await http
+      .post(config.API.createformReport(id.value), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+        router.push(`/probation/detail/${profileId.value}/${id.value}`);
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        status.value = false;
+        fecthResult(id.value);
+      });
+  } else if (action === "put") {
+    await http
+      .put(config.API.createformReport(id.value), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+        router.push(`/probation/detail/${profileId.value}/${id.value}`);
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        status.value = false;
+        fecthResult(id.value);
+      });
+  }
+}
+
+/** แปลง val เป็นตัวหนังสือ
+ * @param val ตัวเลข
+ */
+async function changeReson52(val: number) {
+  switch (val) {
+    case 1:
+      reson52.value = "เห็นควรให้รับราชการต่อไป";
+      break;
+    case 2:
+      reson52.value = "เห็นควรให้ออกจากราชการ";
+      break;
+    case 3:
+      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`;
+      break;
+
+    default:
+      break;
+  }
+}
+
+/** แปลงรหัสไฟล์ */
+function downloadFile(response: any, filename: string) {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/**
+ * ดาว์โหลดไฟล์
+ * @param type docx/pdf
+ */
+async function clickdownloadFile(type: string) {
+  showLoader();
+  await http
+    .get(config.API.reportEvaluateResult(type, id.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      downloadFile(res, `แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get ข้อมูลรายการมอยหมาย เก็บไว้ตัวแปร
+ * @param id personal id
+ */
+async function fecthAssign(id: string) {
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then(async(res) => {
+      assign.value = res.data.data.assign;
+      person.value = res.data.data.person;
+      mentors.value = res.data.data.mentors;
+      date_start.value = res.data.data.assign.date_start;
+      date_finish.value = res.data.data.assign.date_finish;
+
+      if (
+        res.data.data.result.develop_complete != null &&
+        res.data.data.result.evaluate_result != null
+      ) {
+        develop.value = res.data.data.result.develop_complete;
+        result.value = res.data.data.result.evaluate_result;
+        await changeReson52(Number(res.data.data.result.evaluate_result));
+      }
+
+      director_id.value = res.data.data.chairman;
+      director_id2.value = res.data.data.commander;
+      if (mentors.value.length != 0) {
+        director_id3.value = mentors.value[0];
+      }
+      commander.value = res.data.data.commander;
+      optionDirector.value = mentors.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get ข้อมูล เก็บไว้ตัวแปร
+ * @param id personal id
+ */
+const fecthResult = async (id: string) => {
+  await http
+    .get(config.API.createformReport(id))
+    .then(async (res: any) => {
+      if (res.data.data != null) {
+        const data = await res.data.data.evaluate;
+        ID.value = data.id;
+        date_start.value = data.date_start;
+        date_finish.value = data.date_finish;
+        develop.value = await Number(data.develop_complete);
+        result.value = await Number(data.pass_result);
+        reson.value = await data.reson;
+        chairman_dated.value = await data.chairman_dated;
+        director1_dated.value = await data.director1_dated;
+        director2_dated.value = await data.director2_dated;
+        status.value = false;
+        action.value = "edit";
+        expand_month.value = data.expand_month;
+        await changeReson52(Number(data.pass_result));
+      }
+    })
+    .catch((e) => {});
+};
+
+/** ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ  */
+async function selectResult() {
+  if (result.value !== 3) {
+    expand_month.value = "";
+  }
+
+  await changeReson52(Number(result.value));
+}
+
+onMounted(async () => {
+  await fecthAssign(id.value);
+  await fecthResult(id.value);
+});
+</script>
+<template>
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบรายงานการประเมิน ฯ</div>
+    </div>
+  </div>
+  <div :class="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12">
+      <span class="toptitle text-dark">แบบรายงานการประเมินฯ</span>
+      <q-btn
+        v-if="!status"
+        size="12px"
+        flat
+        dense
+        round
+        icon="mdi-download"
+        color="primary"
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+        <q-menu>
+          <q-list style="min-width: 150px">
+            <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
+              <q-item-section avatar
+                ><q-icon color="red" name="mdi-file-pdf"
+              /></q-item-section>
+              <q-item-section>ไฟล์ .PDF</q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
+              <q-item-section avatar
+                ><q-icon color="blue" name="mdi-file-word"
+              /></q-item-section>
+              <q-item-section>ไฟล์ .docx</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+    </div>
+    <div class="row q-my-sm q-col-gutter-y-sm">
+      <div class="col-12 text-dark text-weight-medium">
+        <div class="col-12 row items-center q-col-gutter-y-xs">
+          <div class="col-12">
+            <q-icon name="mdi-label" color="grey-4" />
+            <span class="text-grey-6 q-pl-sm"
+              >ผู้ทดลองปฏิบัติหน้าที่ราชการ</span
+            >
+            <span class="text-dark q-pl-sm">{{ person.name }}</span>
+          </div>
+
+          <div class="col-12 q-pl-md">
+            <span class="text-grey-6 q-pl-sm">ตำแหน่งในสายงาน</span>
+            <span class="text-dark q-pl-sm">{{ person.PositionLineName }}</span>
+          </div>
+          <div class="col-12 q-pl-md">
+            <span class="text-grey-6 q-pl-sm">ระดับ</span>
+            <span class="text-dark q-pl-sm">
+              {{ person.PositionLevelName }}</span
+            >
+          </div>
+          <div class="col-12 q-pl-md">
+            <span class="text-grey-6 q-pl-sm">สังกัด</span>
+            <span class="text-dark q-pl-sm">{{ person.Oc }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 text-dark text-weight-medium row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        ประเมินผล
+        <span class="text-primary q-pr-sm"> ครั้งที่ 1 </span>
+      </div>
+
+      <div class="col-12 text-dark row text-weight-medium items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
+          "ครั้งที่ " + assign.round_no
+        }}</span>
+      </div>
+      <div class="col-12">
+        <q-form
+          greedy
+          @submit.prevent
+          @validation-success="onSubmit"
+          class="full-width"
+        >
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date_start"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :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
+                    hide-bottom-space
+                    :disable="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      date_start != null ? date2Thai(date_start) : 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 class="col-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date_finish"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                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
+                    hide-bottom-space
+                    :disable="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      date_finish != null ? date2Thai(date_finish) : 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 class="col-12 col-sm-6">
+              <q-select
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+                ]"
+                hide-bottom-space
+                :options="options"
+                dense
+                borderless
+                :disable="!status"
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="develop"
+                label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div :class="`col-12 col-sm-6`">
+              <q-select
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+                ]"
+                hide-bottom-space
+                :options="optionsResult"
+                :disable="!status"
+                dense
+                borderless
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="result"
+                class="selectPt"
+                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+                @update:model-value="selectResult"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div
+              v-if="result == 3"
+              :class="`col-12  ${result == 3 ? 'offset-sm-6 col-sm-6' : ''}`"
+            >
+              <q-input
+                outlined
+                hide-bottom-space
+                dense
+                v-model="expand_month"
+                label="จำนวนเดือน"
+                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
+                type="number"
+              />
+            </div>
+            <div class="col-12 col-sm-6">
+              <q-input
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                :disable="!status"
+                class="bg-white"
+                type="textarea"
+                v-model="reson"
+                lazy-rules
+                label="เหตุผล"
+                :rules="[
+                  (val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล',
+                ]"
+              />
+            </div>
+            <div class="col-12 col-sm-6">
+              <q-input
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                readonly
+                class="bg-white"
+                type="textarea"
+                v-model="reson52"
+                lazy-rules
+                label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
+                :rules="[
+                  (val) => (!!val && val.length > 0) || 'กรุณาความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52',
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <div class="col-12 text-dark text-weight-medium">
+              ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา
+              52
+            </div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-8">
+                  <q-select
+                    dense
+                    v-model="director_id"
+                    outlined
+                    :options="commander"
+                    label="ชื่อ-นามสกุล"
+                    option-label="label"
+                    disable
+                  />
+                </div>
+                <div class="col-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="chairman_dated"
+                    :locale="'th'"
+                    :readonly="!status"
+                    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
+                        hide-bottom-space
+                        :disable="!status"
+                        :model-value="
+                          chairman_dated != null
+                            ? date2Thai(chairman_dated)
+                            : 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 class="col-12 text-dark text-weight-medium">คณะกรรมการ</div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-8">
+                  <q-select
+                    dense
+                    v-model="director_id2"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    disable
+                    :options="optionDirector"
+                    option-label="label"
+                  />
+                </div>
+                <div class="col-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="director1_dated"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="!status"
+                    :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
+                        hide-bottom-space
+                        :disable="!status"
+                        :model-value="
+                          director1_dated != null
+                            ? date2Thai(director1_dated)
+                            : 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 class="col-12 text-dark text-weight-medium">คณะกรรมการ</div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-8">
+                  <q-select
+                    dense
+                    v-model="director_id3"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    :options="optionDirector"
+                    disable
+                    option-label="label"
+                  />
+                </div>
+                <div class="col-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="director2_dated"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="!status"
+                    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
+                        :disable="!status"
+                        hide-bottom-space
+                        :model-value="
+                          director2_dated != null
+                            ? date2Thai(director2_dated)
+                            : 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 class="col-12" align="right" v-if="action == 'add'">
+            <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+
+          </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>

src/modules/11_probation/component/07_EvaluateReport.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ผลการประเมินการ ฯ</div>
+    </div>
+  </div>
+  
+</template>

src/modules/11_probation/component/08_SurveyComment.vue

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import Criterion from "@/modules/11_probation/component/Criterion.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+const borderCustom = ref<boolean>(false);
+const store = useProbationStore();
+const router = useRouter();
+const route = useRoute();
+
+const status = ref<boolean>(false);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm,success } = mixin;
+const id = ref<string>(route.params.id as string);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+
+const answer1 = ref<string>("");
+const answer2 = ref<string>("");
+const answer3 = ref<number>(0);
+
+function onSubmit() {
+  if (answer3.value == 0) {
+    borderCustom.value = true;
+  } else {
+    dialogConfirm($q, () => {
+      http
+        .post(config.API.summarySurveyDetail(id.value), {
+          answer1: answer1.value,
+          answer2: answer2.value,
+          answer3: answer3.value,
+        })
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+          getData()
+        }).catch((e)=>{
+          messageError($q,e)
+        }).finally(()=>{
+
+        })
+    });
+  }
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.summarySurveyDetail(id.value))
+    .then((res) => {
+      const data = res.data.data;
+      if (data !== null) {
+        answer1.value = data.answer1;
+        answer2.value = data.answer2;
+        answer3.value = data.answer3;
+        status.value = true;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ถ้าเป็น 0 ใส่ class */
+watch(answer3, () => {
+  if (answer3.value !== 0) {
+    borderCustom.value = false;
+  }
+});
+
+onMounted(() => {
+  borderCustom.value = false;
+  getData();
+});
+</script>
+<template>
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบสํารวจความคิดเห็น</div>
+    </div>
+  </div>
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <q-form
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="full-width"
+    >
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <span class="toptitle text-dark"
+            >แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</span
+          >
+        </div>
+
+        <div class="col-12 text-weight-medium">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-input
+            :disable="status"
+            label="ความคิดเห็น"
+            bg-color="white"
+            dense
+            borderless
+            outlined
+            v-model="answer1"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
+
+        <div class="col-12 text-weight-medium">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-input
+            :disable="status"
+            label="ความคิดเห็น"
+            bg-color="white"
+            dense
+            borderless
+            outlined
+            v-model="answer2"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
+
+        <div
+          v-if="$q.screen.gt.xs"
+          :class="`col-12 row text-weight-medium items-center ${
+            borderCustom ? 'border_custom' : ''
+          }`"
+        >
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+          <q-space />
+
+          <q-rating
+            :disable="status"
+            v-model="answer3"
+            max="5"
+            size="sm"
+            color="grey"
+            :color-selected="store.ratingColors"
+            label="ระดับการประเมินพฤติกรรม"
+          >
+            <template v-slot:tip-1>
+              <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+            </template>
+            <template v-slot:tip-2>
+              <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+            </template>
+            <template v-slot:tip-3>
+              <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+            </template>
+            <template v-slot:tip-4>
+              <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+            </template>
+            <template v-slot:tip-5>
+              <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+            </template>
+          </q-rating>
+        </div>
+
+        <div v-else class="col-12 text-weight-medium">
+          <div class="col-12 row no-wrap text-weight-medium">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+            ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+          </div>
+
+          <div
+            :class="`col-12 text-center q-pa-sm q-mt-sm ${
+              borderCustom ? 'border_customMR' : 'border_customM'
+            }`"
+          >
+            <q-rating
+              :disable="status"
+              v-model="answer3"
+              max="5"
+              size="sm"
+              color="grey"
+              :color-selected="store.ratingColors"
+              label="ระดับการประเมินพฤติกรรม"
+            >
+              <template v-slot:tip-1>
+                <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+              </template>
+              <template v-slot:tip-2>
+                <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+              </template>
+              <template v-slot:tip-3>
+                <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+              </template>
+              <template v-slot:tip-4>
+                <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+              </template>
+              <template v-slot:tip-5>
+                <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+              </template>
+            </q-rating>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <Criterion />
+        <div class="col-12" align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit" v-if="!status"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </q-form>
+  </div>
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+  padding: 10px;
+}
+
+.border_customM {
+  border: 1px solid #ededed;
+  border-radius: 20px;
+}
+
+.border_customMR {
+  border: 2px solid #c10015;
+  border-radius: 20px;
+  padding: 10px;
+}
+</style>

src/modules/11_probation/component/Criterion.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="col-12 row q-pb-sm">
+        <div class="col-12 text-top0 items-center q-pa-md">
+        เกณฑ์การประเมินความคาดหวัง
+        </div>
+        <div class="q-gutter-sm row">
+            <div class="col-12 row">
+                <div class="col-2 row justify-center">
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
+                </div>
+                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
+                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
+            </div>
+            <div class="col-12 row">
+                <div class="col-2 row justify-center">
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
+                </div>
+                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
+                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
+            </div>
+            <div class="col-12 row">
+                <div class="col-2 row justify-center">
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
+                </div>
+                <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
+                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
+            </div>
+            <div class="col-12 row">
+                <div class="col-2 row justify-center">
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
+                </div>
+                <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
+                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
+            </div>
+            <div class="col-12 row">
+                <div class="col-2 row justify-center">
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
+                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10" aria-hidden="true" role="presentation">grade</i>
+                </div>
+                <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
+                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>