From 7c8a9c77c0226e1bb3a3ef414f91d3d7fcdcd815 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 24 Aug 2023 18:06:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=AA=E0=B8=B3=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=88=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainDetail.vue       |  13 +
 .../components/probation/SummarySurvey.vue    | 230 ++++++++++++++++++
 2 files changed, 243 insertions(+)
 create mode 100644 src/modules/05_placement/components/probation/SummarySurvey.vue

diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index b20adb163..fa2aee5d4 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -21,6 +21,9 @@ const TabsTemplate3 = defineAsyncComponent(
 const SummaryScore = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/SummaryScore.vue")
 );
+const SummarySurvey = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/SummarySurvey.vue")
+);
 
 const router = useRouter();
 const route = useRoute();
@@ -105,6 +108,12 @@ const personalId = ref<string>(route.params.personalId.toString());
                 ผลการประเมินการ ฯ
               </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="activeTab = 'tab7'">
+              <q-item-section>
+                แบบสํารวจความคิดเห็น
+              </q-item-section>
+            </q-item>
 
           </q-list>
         </q-scroll-area>
@@ -135,6 +144,10 @@ const personalId = ref<string>(route.params.personalId.toString());
             <q-tab-panel name="tab6">
               <SummaryScore />
             </q-tab-panel>
+            
+            <q-tab-panel name="tab7">
+              <SummarySurvey />
+            </q-tab-panel>
 
           </q-tab-panels>
         </q-layout>
diff --git a/src/modules/05_placement/components/probation/SummarySurvey.vue b/src/modules/05_placement/components/probation/SummarySurvey.vue
new file mode 100644
index 000000000..7f9c94552
--- /dev/null
+++ b/src/modules/05_placement/components/probation/SummarySurvey.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const route = useRoute();
+
+const assignId = ref<string>(route.params.form.toString());
+const action = ref<string>("edit");
+const status = ref<boolean>(true);
+
+const score1 = ref<number>(0);
+const score2 = ref<number>(0);
+const score3 = ref<number>(0);
+const Allscore = ref<number>(0);
+
+const result = ref<any>();
+const result_option = ref<any>([
+  { name: "ผ่าน", value: 1 },
+  { name: "ไม่ผ่าน", value: 0 },
+]);
+
+const note = ref<string>("");
+const date = ref<Date>(new Date());
+
+const saveEdit = (id: string) => {
+  dialogConfirm($q, () => console.log("save"));
+};
+const edit = () => {
+  status.value = true;
+  // console.log(status.value);
+};
+const cancel = () => {
+  status.value = false;
+};
+
+onMounted(() => {
+  // fecthResult(assignId.value);
+});
+
+// const fecthResult = async (id: string) => {
+  // await http
+  //   .get(config.API.createformReport(id))
+  //   .then((res: any) => {
+  //     let data = res.data.data.evaluate;
+  //     console.log(data);
+  //     date_start.value = data.date_start;
+  //     date_finish.value = data.date_finish;
+  //     develop.value = Number(data.develop_complete);
+  //     result.value = Number(data.pass_result);
+  //     reson.value = data.reson;
+  //     chairman_dated.value = data.chairman_dated;
+  //     director1_dated.value = data.director1_dated;
+  //     director2_dated.value = data.director2_dated;
+  //     status.value = false;
+  //     action.value = 'edit';
+  //   })
+  //   .catch((e) => {
+  //     console.log(e);
+  //   });
+// };
+</script>
+
+<template>
+  <div class="row col-12 q-ma-xs">
+    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
+      <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
+      <!-- <q-space /> -->
+      <!-- <div v-if="action == 'edit'">
+        <div v-if="status == false">
+          <q-btn
+            dense
+            flat
+            round
+            color="primary"
+            @click="edit()"
+            icon="mdi-pencil-outline"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+        <div v-else>
+          <q-btn dense flat @click="cancel()" round color="red" icon="mdi-undo">
+            <q-tooltip>ยกเลิก</q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            round
+            class="q-ml-sm"
+            color="public"
+            @click="saveEdit(assignId)"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </div> -->
+    </div>
+    <div class="row col-12 q-gutter-lg">
+
+      <div class=" col-xs-12 col-sm-11 ">
+        <div class="col-12 text-top0 row items-center">
+          เหตุผลอื่น ๆ ในการพิจารณา
+        </div>
+        <q-input
+          outlined
+          dense
+          class="col-12"
+          v-model="note"
+          lazy-rules
+          autogrow
+          hide-bottom-space
+          label="กรอกเหตุผลอื่น ๆ ในการพิจารณา"
+          :row="5"
+          :disable="!status"
+        />
+      </div>
+
+      <div class=" col-xs-12 col-sm-11">
+        <div class="col-12 row q-col-gutter-md">
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              สรุปผลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12">
+              <q-select
+                class="col-12"
+                dense
+                v-model="result"
+                outlined
+                :options="result_option"
+                option-label="name"
+                option-value="value"
+                label="เลือกสรุปผลการทดลองปฏิบัติหน้าที่ราชการ"
+                map-options
+                emit-value
+                :disable="!status"
+              />
+            </div>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              วัน เดือน ปี ที่ประเมิน
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date"
+                :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"
+                    class="full-width datepicker"
+                    :model-value="
+                      date != null ? date2Thai(date) : 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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>