From 128603af753a6ef9c20ca8bc1512336eea798dfe Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 9 Apr 2024 14:28:37 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A1=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1Tab=20=E0=B8=9A=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=81=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/MainTab.vue     |   3 +
 .../15_development/components/Record.vue      | 258 ++++++++++++++++++
 2 files changed, 261 insertions(+)
 create mode 100644 src/modules/15_development/components/Record.vue

diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index c52f40b9b..272430de7 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -17,6 +17,7 @@ import Target from "@/modules/15_development/components/Target.vue";
 import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
 import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
+import Record from "@/modules/15_development/components/Record.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
@@ -252,6 +253,7 @@ onUnmounted(() => {
         <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
         <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
         <q-tab name="Other" label="อื่นๆ" />
+        <q-tab name="Record" label="บันทึกผล" />
       </q-tabs>
       <q-separator />
       <div class="q-pa-sm" style="padding: 0px">
@@ -263,6 +265,7 @@ onUnmounted(() => {
           <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
           <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
           <q-tab-panel name="Other"> <Other /> </q-tab-panel>
+          <q-tab-panel name="Record"> <Record /> </q-tab-panel>
         </q-tab-panels>
       </div>
     </q-card>
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
new file mode 100644
index 000000000..954df7897
--- /dev/null
+++ b/src/modules/15_development/components/Record.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+const mixin = useCounterMixin();
+
+const { date2Thai } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "idcard",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "FullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงานที่สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "idcard",
+  "fullName",
+  "position",
+  "posTypeName",
+  "posLevelName",
+  "posExecutive",
+  "org",
+  "refCommandNo",
+  "refCommandDate",
+]);
+const files = ref<File[]>([]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+const keyword = ref<string>("");
+const row = [
+  {
+    idcard: "1234567890121",
+    prefix: "นาง",
+    firstName: "ณัฐนิชา",
+    lastName: "เป็งกำปอง",
+    position: "นักวิชาการสถิติ",
+    posTypeName: "วิชาการ",
+    posLevelName: "ชำนาญการ",
+    posExecutive: "นักบริหาร",
+    org: "สาขาสถิติ",
+    refCommandNo: "25/2566",
+    refCommandDate: new Date(),
+  },
+  {
+    idcard: "2222222222222",
+    prefix: "นาย",
+    firstName: "สมศักดิ์",
+    lastName: "กำแหง",
+    position: "นักการไฟฟ้า",
+    posTypeName: "วิชาการ",
+    posLevelName: "สูง",
+    posExecutive: "นักการช่าง",
+    org: "อิเล็กทรอนิกส์",
+    refCommandNo: "12/2565",
+    refCommandDate: new Date(),
+  },
+];
+</script>
+
+<template>
+  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
+    <q-file
+      v-model="files"
+      dense
+      label="'อัปโหลดไฟล์"
+      outlined
+      use-chips
+      accept=".xlsx"
+      multiple
+      class="col-xs-12 col-sm-4"
+    >
+      <template v-slot:prepend>
+        <q-icon name="attach_file" color="blue" />
+      </template>
+    </q-file>
+    <q-btn size="md" icon="mdi-upload" round flat color="blue">
+      <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="q-mr-sm"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="row"
+    :paging="true"
+    :filter="keyword"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <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-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name === 'fullName'">
+            {{
+              props.row.prefix +
+              " " +
+              props.row.firstName +
+              " " +
+              props.row.lastName
+            }}
+          </div>
+          <div v-else>{{ col.value ? col.value : "-" }}</div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="primary"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="mdi-pencil-outline"
+            clickable
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn color="info" flat dense round size="14px" icon="mdi-history">
+            <q-tooltip>ประวัติบันทึกผล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>