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

src/modules/01_dashboard/views/Dashboard.vue

@@ -106,6 +106,14 @@ const items = ref<any>([
     path: "/scholarship",
     active: false,
   },
+  {
+    icon: "mdi-school",
+    title: "ทดลองงาน",
+    sub: "รายการงานที่ได้รับมอบหมาย",
+    color: "teal-2",
+    path: "/probation",
+    active: false,
+  },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
@@ -430,7 +438,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
     @update:modal="updateModalDetail"
   />
 </template>
-<style>
+<style scoped>
 .my-menu-notread {
   color: #1bb19b;
   background: #ebf9f7 !important;

src/modules/10_registry/tabs/01_information.vue

@@ -38,7 +38,7 @@ const router = useRouter();
     <Ability />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;

src/modules/10_registry/tabs/02_government.vue

@@ -35,7 +35,7 @@ const router = useRouter();
     <Duty />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;

src/modules/10_registry/tabs/03_salary.vue

@@ -32,7 +32,7 @@ const router = useRouter();
 
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;

src/modules/10_registry/tabs/04_Achievement.vue

@@ -35,7 +35,7 @@ const router = useRouter();
     <Assessments />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;

src/modules/10_registry/tabs/05_other.vue

@@ -30,7 +30,7 @@ const router = useRouter();
     <File />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;

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>

src/modules/11_probation/interface/index/assign.ts

@@ -0,0 +1,13 @@
+interface MonthOption {
+  value: number;
+  label: string;
+}
+interface CheckboxItem {
+  id: number;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
+}
+
+export type { MonthOption, CheckboxItem };

src/modules/11_probation/interface/index/main.ts

@@ -0,0 +1,13 @@
+interface ListMain {
+  id: string
+  round_no: number;
+  date_start: string
+  date_finish: string
+  mentors: string
+  commander: string
+  chairman: string
+}
+
+export type {
+    ListMain
+}

src/modules/11_probation/pages/addPage.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+/** component */
+import Assign from '@/modules/11_probation/component/01_Assign.vue'
+
+
+const router = useRouter();
+
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center no-wrap">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+  </div>
+<q-card class="q-pa-md">
+  <Assign/>
+</q-card>
+
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+
+
+</style>

src/modules/11_probation/pages/detailPage.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+import Assign from "@/modules/11_probation/component/01_Assign.vue";
+import RecordCareker from "@/modules/11_probation/component/02_RecordCareker.vue";
+import RecordCommander from "@/modules/11_probation/component/03_RecordCommander.vue";
+import EvaluateCommander from "@/modules/11_probation/component/04_EvaluateCommander.vue";
+import EvaluateChairman from "@/modules/11_probation/component/05_EvaluateChairman.vue";
+import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.vue";
+import EvaluateReport from "@/modules/11_probation/component/07_EvaluateReport.vue";
+import SurveyComment from "@/modules/11_probation/component/08_SurveyComment.vue";
+
+const drawer = ref<boolean>(true);
+const activeTab = ref<string>("tab1");
+const store = useProbationStore();
+const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string)
+const profileId = ref<string>(route.params.profileId as string)
+
+/**
+ * เปลี่ยน tab เมนู
+ * @param tab กำหนด tab
+ */
+function changeTab(tab: string) {
+  store.mainTab = tab;
+  activeTab.value = store.mainTab;
+}
+
+function onMobile(type: string) {
+  router.push(`/probation/${type}/${profileId.value}/${id.value}`);
+}
+
+</script>
+<template>
+  <div 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>
+  <q-card  bordered :class='!$q.screen.gt.xs ? `borderRadius`:``'>
+    <q-layout
+      v-if="$q.screen.gt.xs"
+      view="hHh Lpr lff"
+      container
+      class="shadow-2 rounded-borders page-relative"
+      style="height: 82vh"
+    >
+      <q-header class="bg-grey-1"> </q-header>
+      <q-drawer
+        v-model="drawer"
+        show-if-above
+        :width="150"
+        :breakpoint="500"
+        class="bg-grey-1"
+        bordered
+      >
+        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
+          <q-list class="text-grey-9">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab1'"
+              @click="changeTab('tab1')"
+            >
+              <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
+            </q-item>
+
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab2'"
+              @click="changeTab('tab2')"
+            >
+              <q-item-section>
+                แบบบันทึกผล
+                <br />
+                <div class="text-caption text-grey-7">(ผู้ดูแล)</div>
+              </q-item-section>
+            </q-item>
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab3'"
+              @click="changeTab('tab3')"
+            >
+              <q-item-section>
+                แบบบันทึกผล
+                <br />
+                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab4'"
+              @click="changeTab('tab4')"
+            >
+              <q-item-section>
+                แบบประเมินผล<br />
+                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab5'"
+              @click="changeTab('tab5')"
+            >
+              <q-item-section>
+                แบบประเมินผล<br />
+                <div class="text-caption text-grey-7">(คณะกรรมการ)</div>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab6'"
+              @click="changeTab('tab6')"
+            >
+              <q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab7'"
+              @click="changeTab('tab7')"
+            >
+              <q-item-section> ผลการประเมินการ ฯ </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab8'"
+              @click="changeTab('tab8')"
+            >
+              <q-item-section> แบบสํารวจ<br />ความคิดเห็น </q-item-section>
+            </q-item>
+          </q-list>
+        </q-scroll-area>
+      </q-drawer>
+      <q-page-container>
+        <q-layout view="hHh Lpr lFf" container style="height: 82vh">
+          <q-tab-panels
+            v-model="activeTab"
+            animated
+            class="shadow-2 rounded-borders"
+            vertical
+          >
+            <q-tab-panel name="tab1">
+              <Assign />
+            </q-tab-panel>
+            <q-tab-panel name="tab2">
+              <RecordCareker />
+            </q-tab-panel>
+            <q-tab-panel name="tab3">
+              <RecordCommander />
+            </q-tab-panel>
+            <q-tab-panel name="tab4">
+              <EvaluateCommander />
+            </q-tab-panel>
+            <q-tab-panel name="tab5">
+              <EvaluateChairman />
+            </q-tab-panel>
+            <q-tab-panel name="tab6">
+              <EvaluateResult />
+            </q-tab-panel>
+            <q-tab-panel name="tab7">
+              <EvaluateReport />
+            </q-tab-panel>
+            <q-tab-panel name="tab8">
+              <SurveyComment />
+            </q-tab-panel>
+
+          </q-tab-panels>
+        </q-layout>
+      </q-page-container>
+    </q-layout>
+    <q-list v-else separator>
+      <q-item clickable v-ripple @click="onMobile('assign-work')" style="border-radius: 20px 20px 0 0;">
+        <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('record-careker')">
+        <q-item-section>
+          <q-item-label>แบบบันทึกผล</q-item-label>
+          <q-item-label class="text-grey-6">(ผู้ดูแล)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('record-commander')">
+        <q-item-section>
+          <q-item-label>แบบบันทึกผล</q-item-label>
+          <q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-commander')">
+        <q-item-section>
+          <q-item-label>แบบประเมินผล</q-item-label>
+          <q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-chairman')">
+        <q-item-section>
+          <q-item-label>แบบประเมินผล</q-item-label>
+          <q-item-label class="text-grey-6">(คณะกรรมการ)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-result')">
+        <q-item-section>แบบรายงานการประเมิน ฯ</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-report')">
+        <q-item-section>ผลการประเมินการ ฯ</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('survey-comment')" style="border-radius: 0 0 20px 20px;">
+        <q-item-section>แบบสํารวจความคิดเห็น</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-card>
+</template>
+<style scoped>
+.text_left .q-tabs__content .q-tab {
+  justify-content: start;
+  padding-left: 20px;
+}
+
+.borderRadius{
+  border-radius: 20px!important;
+}
+</style>

src/modules/11_probation/router.ts

@@ -0,0 +1,117 @@
+// registry
+const probationPage = () => import("@/modules/11_probation/views/main.vue");
+
+const probationAdd = () => import("@/modules/11_probation/pages/addPage.vue");
+const probationDetailPage = () => import("@/modules/11_probation/pages/detailPage.vue");
+
+const probationAssign = () => import('@/modules/11_probation/component/01_Assign.vue')
+const probationRecordCareker = () => import('@/modules/11_probation/component/02_RecordCareker.vue')
+const probationRecordCommander = () => import('@/modules/11_probation/component/03_RecordCommander.vue')
+const probationEvaluateCommander = () => import('@/modules/11_probation/component/04_EvaluateCommander.vue')
+const probationEvaluateChairman = () => import('@/modules/11_probation/component/05_EvaluateChairman.vue')
+const probationEvaluateResult = () => import('@/modules/11_probation/component/06_EvaluateResult.vue')
+const probationEvaluateReport = () => import('@/modules/11_probation/component/07_EvaluateReport.vue')
+const probationSurveyComment = () => import('@/modules/11_probation/component/08_SurveyComment.vue')
+export default [
+  {
+    path: "/probation",
+    name: "probationMain",
+    component: probationPage,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/add/:profileId",
+    name: "probationAdd",
+    component: probationAdd,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/detail/:profileId/:id",
+    name: "probationDetail",
+    component: probationDetailPage,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/assign-work/:profileId/:id",
+    name: "probationAssign",
+    component: probationAssign,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+//////////////////////////////////////////////////
+  {
+    path: "/probation/record-careker/:profileId/:id",
+    name: "probationRecordCareker",
+    component: probationRecordCareker,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/record-commander/:profileId/:id",
+    name: "probationRecordCommander",
+    component: probationRecordCommander,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-commander/:profileId/:id",
+    name: "probationEvaluateCommander",
+    component: probationEvaluateCommander,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-chairman/:profileId/:id",
+    name: "probationEvaluateChairman",
+    component: probationEvaluateChairman,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-result/:profileId/:id",
+    name: "probationEvaluateResult",
+    component: probationEvaluateResult,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-report/:profileId/:id",
+    name: "probationEvaluateReport",
+    component: probationEvaluateReport,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/survey-comment/:profileId/:id",
+    name: "probationSurveyComment",
+    component: probationSurveyComment,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+
+];

src/modules/11_probation/store/probation.ts

@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+
+export const useProbationStore = defineStore(
+  "probationStore",
+  () => {
+    const profileId = ref<string>('')
+    const mainTab = ref<string>('')
+    const ratingColors = ref<string[]>([
+        "light-blue-3",
+        "light-blue-6",
+        "blue",
+        "blue-9",
+        "blue-10",
+      ]);
+
+    return { mainTab,ratingColors,profileId };
+  }
+);

src/modules/11_probation/views/main.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import avatar from "@/assets/avatar_user.jpg";
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import keycloak from "@/plugins/keycloak";
+
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar, type QTableProps } from "quasar";
+
+import type { ListMain } from "@/modules/11_probation/interface/index/main";
+
+const profileId = ref<string>("");
+const rows = ref<ListMain[]>([]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  dialogConfirm,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+} = mixin;
+
+const filter = ref<string>("");
+const mode = ref<any>($q.screen.gt.xs);
+const profileImg = ref<string>("");
+const router = useRouter();
+const formData = reactive<any>({
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  posExecutiveName: "",
+  posTypeName: "",
+  posLevelName: "",
+  org: "",
+});
+const sizeImg = ref<string>("");
+
+/** ข้อมูลที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "date_start",
+  "date_finish",
+  "mentors",
+  "commander",
+]);
+
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date_start",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "date_start",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "date_finish",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "date_finish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "mentors",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "mentors",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commander",
+    align: "left",
+    label: "ผู้บังคับบัญชา",
+    sortable: true,
+    field: "commander",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onResize(size: any) {
+  const width = size.width > 100 ? 100 : size.width;
+  sizeImg.value = `${width}px`;
+}
+
+function onMobile(type: string) {
+  router.push(`/registry/${type}`);
+}
+
+function getMain() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then(async (res) => {
+      const data = res.data.result;
+      formData.prefix = data.prefix;
+      formData.firstName = data.firstName;
+      formData.lastName = data.lastName;
+      formData.position = data.position;
+
+      formData.posTypeName = data.posTypeName;
+      formData.posExecutiveName = data.posExecutiveName;
+      formData.posLevelName = data.posLevelName;
+      formData.org = findOrgName(data);
+      profileId.value = data.profileId;
+      if (data.avatarName) {
+        getImg(data.profileId, data.avatarName);
+      } else {
+        profileImg.value = avatar;
+      }
+      await getList(data.profileId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getList(id: string) {
+  http
+    .get(config.API.probationMain(id))
+    .then((res) => {
+      const data = res.data.data
+      rows.value = data;
+    })
+    .catch((e) => {})
+    .finally(() => {});
+}
+function getImg(id: string, pathName: string) {
+  http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
+    .then((res) => {
+      profileImg.value = res.data.downloadUrl;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onDetail(id: string) {
+  router.push(`/probation/detail/${profileId.value}/${id}`);
+}
+
+onMounted(async () => {
+
+  await getMain();
+});
+</script>
+<template>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        รายละเอียดงานที่ได้รับมอบหมาย
+      </div>
+      <div class="row q-col-gutter-md">
+        <div v-if="$q.screen.gt.xs" class="col-12">
+          <q-card>
+            <div class="bg-grey-1 row q-pa-sm items-center">
+              <span class="text-teal text-weight-bold text-body2">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+            </div>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section class="q-pa-md">
+              <div class="row">
+                <div class="col-2 text-center self-center">
+                  <q-avatar :size="sizeImg" rounded>
+                    <img
+                      :src="profileImg"
+                      style="border-radius: 10px; object-fit: cover"
+                    />
+                  </q-avatar>
+                </div>
+                <div class="col-10 column justify-center no-wrap">
+                  <div class="row text-grey-6">
+                    <div class="col-4">ตำแหน่งในสายงาน</div>
+                    <div class="col-4">ระดับ</div>
+                    <div class="col-4">สังกัด</div>
+                  </div>
+                  <div class="row">
+                    <div class="col-4">
+                      {{ formData.position ? formData.position : "-" }}
+                    </div>
+                    <div class="col-4">
+                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                    </div>
+                    <div class="col-4">
+                      {{ formData.org ? formData.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div v-else class="col-12">
+          <q-card bordered>
+            <div class="bg-grey-1 row q-pa-sm items-center">
+              <span class="text-teal text-weight-bold text-body2">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+            </div>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="text-center q-mt-md">
+                <q-avatar :size="sizeImg" rounded>
+                  <img
+                    :src="profileImg"
+                    style="border-radius: 10px; object-fit: cover"
+                  />
+                </q-avatar>
+              </div>
+            </q-card-section>
+
+            <q-list class="q-mt-md">
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6"
+                    >ตำแหน่งในสายงาน</q-item-label
+                  >
+                  <q-item-label>{{
+                    formData.position ? formData.position : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6">ระดับ</q-item-label>
+                  <q-item-label>{{
+                    formData.posLevelName ? formData.posLevelName : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6">สังกัด</q-item-label>
+                  <q-item-label>{{
+                    formData.org ? formData.org : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+        <div class="col-12 row">
+          <q-card bordered class="col-12 q-pa-md">
+            <div class="row">
+              <q-btn
+                @click="router.push(`/probation/add/${profileId}`)"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
+              </q-btn>
+              <q-space />
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="filter"
+                label="ค้นหา"
+                :style="mode ? `max-width: 200px`:`max-width: 150px`"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                  <q-icon
+                    v-else
+                    name="search"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-if="$q.screen.gt.xs"
+                class="q-ml-sm"
+                dense
+                multiple
+                outlined
+                emit-value
+                map-options
+                options-cover
+                options-dense
+                option-value="name"
+                style="min-width: 150px"
+                v-model="visibleColumns"
+                :options="columns"
+                :display-value="$q.lang.table.columns"
+              />
+            </div>
+            <div class="q-mt-sm">
+              <d-table
+                flat
+                dense
+                bordered
+                ref="table"
+                virtual-scroll
+                :rows="rows"
+                :columns="columns"
+                :grid="!$q.screen.gt.xs"
+                :filter="filter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :visible-columns="visibleColumns"
+                :virtual-scroll-sticky-size-start="48"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+
+                <template v-if="$q.screen.gt.xs" v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td v-for="(col, index) in props.cols" :key="col.name" @click="onDetail(props.row.id)">
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div v-else-if="col.name == 'status'">
+                        {{ props.row.status ? props.row.status : "-" }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-else v-slot:item="props">
+                  <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                    <q-card bordered flat>
+                      <q-list dense class="q-mt-lg relative-position">
+                        <q-btn
+                          icon="info"
+                          color="info"
+                          flat
+                          dense
+                          round
+                          size="14px"
+                          class="absolute_button"
+                          @click="onDetail(props.row.id)"
+                        >
+                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                        </q-btn>
+                        <q-item v-for="col in props.cols" :key="col.name">
+                          <q-item-section class="fix_top">
+                            <q-item-label
+                              class="text-grey-6 text-weight-medium"
+                              >{{ col.label }}</q-item-label
+                            >
+                          </q-item-section>
+                          <q-item-section class="fix_top">
+                            <q-item-label
+                              class="text-dark text-weight-medium"
+                              >{{ col.value ? col.value : "-" }}</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-card>
+                  </div>
+                </template>
+                <template v-slot:no-data>
+                  <div
+                    class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+                  >
+                    <span> ไม่พบข้อมูลตำแหน่ง/เงินเดือน </span>
+                  </div>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>