From 6bfc06106a63f81a0c1d86dca951c4ff462b0c0e Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Fri, 15 Dec 2023 09:25:29 +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=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=94=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=9A=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=84=E0=B8=84=E0=B8=A5=20=E0=B8=82=E0=B8=AD=E0=B8=87=20?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B8=E0=B8=93=E0=B8=AA=E0=B8=A1=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/viewstep/viewStep1.vue  | 303 ++++++++++++++
 src/modules/12_evaluate/store/Evaluate.ts     | 390 ++++++++++++++++++
 2 files changed, 693 insertions(+)
 create mode 100644 src/modules/12_evaluate/components/Detail/viewstep/viewStep1.vue
 create mode 100644 src/modules/12_evaluate/store/Evaluate.ts

diff --git a/src/modules/12_evaluate/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluate/components/Detail/viewstep/viewStep1.vue
new file mode 100644
index 000000000..79ce38798
--- /dev/null
+++ b/src/modules/12_evaluate/components/Detail/viewstep/viewStep1.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useEvalutuonStore } from "@/modules/12_evaluate/store/Evaluate";
+
+const storageEvalutuon = useEvalutuonStore();
+const {
+  row,
+  columnsLicense,
+  columnPeriodhistory,
+  columnTrainingHistory,
+  columnProjectsProposed,
+} = storeToRefs(storageEvalutuon);
+</script>
+
+<template>
+  <q-card class="bg-grey-2">
+    <div class="text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ml-md">
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="นาย" label="คำนำหน้าชื่อ" />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input
+          borderless
+          readonly
+          model-value="ธนพนธ์ แสงจันทร์"
+          label="ชื่อ - นามสกุล"
+        />
+      </div>
+
+      <div class="col-xs-6 col-sm-6 col-md-6">
+        <q-input
+          borderless
+          model-value="19/03/44"
+          readonly
+          label="วันเดือนปีเกิด"
+        >
+          <template v-slot:prepend>
+            <q-icon class="size-icon" name="o_calendar_today" />
+          </template>
+        </q-input>
+      </div>
+
+   
+    </q-card-actions>
+
+    <q-card-actions class="q-ml-md">
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="ไม่มี" label="ตำแหน่ง" />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input
+          borderless
+          readonly
+          model-value="กย.11"
+          label="ตำแหน่งเลขที่"
+        />
+      </div>
+
+      <div class="col-xs-9 col-sm-6 col-md-6">
+        <q-input
+          borderless
+          readonly
+          model-value="หน่วยใหม่กับหน่วยเก่า"
+          label="สังกัด"
+        />
+      </div>
+    </q-card-actions>
+
+    <q-card-actions class="q-ml-md">
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="" label="เงินเดือน" />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="" label="ระดับปัจจุบัน" />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="" label="ระดับที่ประเมิน" />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="1000 ปี" label="อายุราชการ" />
+      </div>
+    </q-card-actions>
+  </q-card>
+
+  <q-card class="bg-grey-2 q-mt-xl">
+    <div class=" text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ml-md">
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input
+          borderless
+          readonly
+          model-value="ปริญญาตรี"
+          label="ระดับศึกษา"
+        />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input
+          borderless
+          readonly
+          model-value="มหาวิทยาลัยก."
+          label="สถานศึกษา"
+        />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless model-value="19/03/44" readonly label="ตั้งแต่">
+          <template v-slot:prepend>
+            <q-icon class="size-icon" name="o_calendar_today" />
+          </template>
+        </q-input>
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless model-value="19/03/44" readonly label="ถึง">
+          <template v-slot:prepend>
+            <q-icon class="size-icon" name="o_calendar_today" />
+          </template>
+        </q-input>
+      </div>
+    </q-card-actions>
+
+    <q-card-actions class="q-ml-md">
+      <div class="col-xs-6 col-sm-6 col-md-6">
+        <q-input
+          borderless
+          model-value="19/03/44"
+          readonly
+          label="วันทราสำเร็จการศึกษา"
+        >
+          <template v-slot:prepend>
+            <q-icon class="size-icon" name="o_calendar_today" />
+          </template>
+        </q-input>
+      </div>
+
+      <div class="col-xs-6 col-sm-6 col-md-6">
+        <q-input
+          borderless
+          readonly
+          model-value="ปริญญาตรี"
+          label="วุฒิการศึกษาในตําแหน่ง"
+        />
+      </div>
+
+      <div class="col-xs-6 col-sm-6 col-md-6">
+        <q-input
+          borderless
+          readonly
+          model-value="ปริญญาตรี"
+          label="วุฒิการศึกษา"
+        />
+      </div>
+
+      <div class="col-xs-6 col-sm-6 col-md-6">
+        <q-input borderless readonly model-value="-" label="สาขาวิชา/ทาง" />
+      </div>
+    </q-card-actions>
+
+    <q-card-actions class="q-ml-md">
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="-" label="ทุน" />
+      </div>
+
+      <div class="col-xs-6 col-sm-3 col-md-3">
+        <q-input borderless readonly model-value="3.33" label="เกรดเฉลี่ย" />
+      </div>
+
+      <div class="col-xs-6 col-sm-6 col-md-6">
+        <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
+      </div>
+    </q-card-actions>
+  </q-card>
+
+  <q-card class="bg-grey-2 q-mt-xl">
+    <div class=" text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ma-md">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-table
+          table-header-class="bg-grey-4 "
+          flat
+          bordered
+          :rows="rows"
+          :columns="columnsLicense"
+        >
+        </q-table>
+      </div>
+    </q-card-actions>
+  </q-card>
+
+  <q-card class="bg-grey-2 q-mt-xl">
+    <div class=" text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ma-md">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-table
+          table-header-class="bg-grey-4 "
+          flat
+          bordered
+          :rows="rows"
+          :columns="columnPeriodhistory"
+        >
+        </q-table>
+      </div>
+    </q-card-actions>
+  </q-card>
+
+  <q-card class="bg-grey-2 q-mt-xl">
+    <div class=" text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ma-md">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-table
+          table-header-class="bg-grey-4 "
+          flat
+          bordered
+          :rows="rows"
+          :columns="columnTrainingHistory"
+        >
+        </q-table>
+      </div>
+    </q-card-actions>
+  </q-card>
+
+  <q-card class="bg-grey-2 q-mt-xl">
+    <div class=" text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ma-md">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-table
+          table-header-class="bg-grey-4 "
+          flat
+          bordered
+          :rows="rows"
+          :columns="columnTrainingHistory"
+        >
+        </q-table>
+      </div>
+    </q-card-actions>
+  </q-card>
+
+  <q-card class="bg-grey-2 q-mt-xl">
+    <div class=" text-weight-bold row items-center">
+      <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
+    </div>
+
+    <q-separator />
+
+    <q-card-actions class="q-ma-md">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-table
+          table-header-class="bg-grey-4 "
+          flat
+          bordered
+          :rows="rows"
+          :columns="columnProjectsProposed"
+        >
+        </q-table>
+      </div>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<style scoped lang="scss">
+
+.size-icon {
+    font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
+  }
+
+</style>
diff --git a/src/modules/12_evaluate/store/Evaluate.ts b/src/modules/12_evaluate/store/Evaluate.ts
new file mode 100644
index 000000000..a4732318c
--- /dev/null
+++ b/src/modules/12_evaluate/store/Evaluate.ts
@@ -0,0 +1,390 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/12_evaluate/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
+  /** function สถานะ*/
+  function convertStatus(val: string) {
+    switch (val) {
+      // case "NEW":
+      //   return "กำลังสรุปผลการพิจารณา";
+      // case "STOP":
+      //   return "ยุติเรื่อง";
+      case "DONE":
+        return "กำลังสรุปผลการพิจารณา";
+      case "REPORT":
+        return "ส่งไปออกคำสั่ง";
+    }
+  }
+
+  const visibleColumns = ref<String[]>([
+    "citizanId",
+    "fullName",
+    "position",
+    "level",
+    "positionNumber",
+    "agency",
+    "status",
+  ]);
+  const rows = ref<any[]>([]);
+
+  const columns = ref<QTableProps["columns"]>([
+    {
+      name: "citizanId",
+      align: "center",
+      label: "เลขประจำตัวประชาชน",
+      sortable: false,
+      field: "citizanId",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "fullName",
+      align: "left",
+      label: "ชื่อ-นามสกุล",
+      sortable: true,
+      field: "fullName",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "position",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "position",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "level",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "level",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionNumber",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "positionNumber",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "agency",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "agency",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "status",
+      align: "left",
+      label: "สถานะ(ตรวจสอบคุณสมบัติ)",
+      sortable: true,
+      field: "status",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnsLicense = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "ชื่อใบอนุณาต",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หน่วยงานผู้ออกใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เลขที่ใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันที่ออกใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันที่หมดอายุ",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+  ]);
+
+  const columnPeriodhistory = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "วัน เดือน ปี",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "สายงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ด้าน/สาขา",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งประเภท",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ด้านทางการบริหาร",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnTrainingHistory = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หัวข้อการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ปีที่อบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnProjectsProposed = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "วันที่ได้รับ",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ผู้มีอำนาจลงนาม",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "รายละเอียด",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+     
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เอกสารอ้างอิง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  return {
+    visibleColumns,
+    columns,
+    columnsLicense,
+    columnPeriodhistory,
+    columnTrainingHistory,
+    columnProjectsProposed,
+    rows,
+  };
+});