From 621f9651518959013212ca5931f17c34abf7ecfc Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 29 Mar 2024 18:05:19 +0700
Subject: [PATCH] =?UTF-8?q?page=20=E0=B8=A3=E0=B8=AD=20API=20//=20ui=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_organizational/views/MainTree.vue      |   2 +-
 .../04_registry/components/TableProfile.vue   |  80 +++++++++---
 .../04_registry/interface/index/Main.ts       |   1 +
 src/modules/04_registry/views/Main.vue        |   3 +-
 .../components/FollowResult.vue               | 121 ++++++++++++++++++
 .../15_development/components/MainTab.vue     |   6 +
 .../15_development/components/Other.vue       | 121 ++++++++++++++++++
 .../15_development/interface/request/Main.ts  |   8 ++
 8 files changed, 319 insertions(+), 23 deletions(-)
 create mode 100644 src/modules/15_development/components/FollowResult.vue
 create mode 100644 src/modules/15_development/components/Other.vue

diff --git a/src/modules/02_organizational/views/MainTree.vue b/src/modules/02_organizational/views/MainTree.vue
index dcdce2592..8bcfe1689 100644
--- a/src/modules/02_organizational/views/MainTree.vue
+++ b/src/modules/02_organizational/views/MainTree.vue
@@ -61,7 +61,7 @@
                     color="grey-6"
                     @click="goToUserRegistry()"
                   />
-                  <q-tooltip>ทะเบียนประวัติd</q-tooltip>
+                  <q-tooltip>ทะเบียนประวัติ</q-tooltip>
                 </q-btn>
               </div>
               <div class="q-pl-lg q-pt-sm q-gutter-xs textSub">
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 3a350fec3..7f97f0cc0 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-table
+  <d-table
     ref="table"
     flat
     :class="
@@ -11,10 +11,21 @@
     dense
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"
-    :pagination-label="paginationLabel"
-    :pagination="initialPagination"
-    :rows-per-page-options="[0]"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    v-model:pagination="pagination"
   >
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+
     <template v-slot:top="props">
       <div class="q-py-sm col-12 row">
         <q-space />
@@ -96,7 +107,7 @@
           />
         </div>
       </div>
-      <div class="items-center">
+      <div class="items-center full-width">
         <q-slide-transition
           v-show="searchPanel"
           class="q-mb-sm"
@@ -175,7 +186,7 @@
                     label="ชื่อ-นามสกุล"
                     @update:model-value="updateFullname"
                   />
-                  <datepicker
+                  <!-- <datepicker
                     class="col-2"
                     menu-class-name="modalfix"
                     :model-value="retireYear"
@@ -205,14 +216,6 @@
                         clearable
                         @clear="clearDate"
                       >
-                        <!-- <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template> -->
                       </q-input>
                     </template>
                   </datepicker>
@@ -298,7 +301,7 @@
                     label="ตำแหน่งเลขที่"
                     @update:model-value="updatePosNo"
                     class="col-3"
-                  />
+                  /> -->
                   <!-- <datepicker
                     class="col-2"
                     menu-class-name="modalfix"
@@ -363,7 +366,7 @@
                     class="col-4"
                   /> -->
 
-                  <q-toggle
+                  <!-- <q-toggle
                     dense
                     :model-value="isShowRetire"
                     color="primary"
@@ -380,6 +383,7 @@
                   >
                     ทดลองปฏิบัติหน้าที่ราชการ
                   </q-toggle>
+                  <q-space /> -->
                   <q-space />
                   <div>
                     <q-btn
@@ -387,7 +391,7 @@
                       color="primary"
                       icon="mdi-magnify"
                       label="ค้นหา"
-                      class="q-px-md"
+                      class="q-px-md full-height"
                       @click="doSearch"
                     />
                   </div>
@@ -441,23 +445,36 @@
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
-  </q-table>
+  </d-table>
   <PopupADdEmployee v-model:modal="modalEmployee" />
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, reactive,watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import PopupHistory from "./PopupHistory.vue";
 import PopupADdEmployee from "@/components/DialogAddEmployee.vue";
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const searchPanel = ref<boolean>(true);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+
+/**
+ *pagination ของตาราง
+ */
+ const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
 });
+
 const employeeClassOps = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
   //   { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
@@ -625,6 +642,27 @@ const modalEmployee = ref<boolean>(false);
 function ocClickAddEmployee() {
   modalEmployee.value = !modalEmployee.value;
 }
+
+function getList(){
+  console.log('GETok')
+}
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/04_registry/interface/index/Main.ts b/src/modules/04_registry/interface/index/Main.ts
index 0eaa8516e..b5032e628 100644
--- a/src/modules/04_registry/interface/index/Main.ts
+++ b/src/modules/04_registry/interface/index/Main.ts
@@ -1,5 +1,6 @@
 import type { zipCodeOption } from "../../components/profileType";
 interface Pagination {
+  page: number;
   rowsPerPage: number;
 }
 
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index 1cc834222..b7351492b 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -190,7 +190,8 @@ const employeePosition = ref<string>("");
 const employeeLevel = ref<string>("");
 const posNo = ref<string>("");
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+  page: 1,
+  rowsPerPage: 10,
 });
 const expanded = ref<string[]>([]);
 const selected = ref<string>("");
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
new file mode 100644
index 000000000..1524ea790
--- /dev/null
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+
+const formData = reactive<FormFollowResult>({
+  metricType: "",
+  indicators: "",
+  target: "",
+  calculation: "",
+});
+
+const metricTypeOp = ref<DataOption[]>([
+  {
+    id: "id1",
+    name: "name1",
+  },
+  {
+    id: "id2",
+    name: "name2",
+  },
+  {
+    id: "id3",
+    name: "name3",
+  },
+]);
+
+const options = ref<any>([
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+]);
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+onMounted(() => {
+  console.log("ข้อมูลเบื้องต้น");
+});
+</script>
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-select
+          dense
+          outlined
+          label="ประเภทตัวชี้วัด"
+          v-model="formData.metricType"
+          :options="metricTypeOp"
+          option-label="name"
+          option-value="id"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-input
+          dense
+          outlined
+          label="ตัวชี้วัด"
+          v-model="formData.indicators"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกตัวชี้วัด'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-input
+          dense
+          outlined
+          label="เป้าหมาย"
+          v-model="formData.target"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกเป้าหมาย'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.calculation"
+          label="วิธีการคำนวณ/เครื่องมือ"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกวิธีการคำนวณ/เครื่องมือ'}`,
+          ]"
+        />
+      </div>
+    </div>
+
+    <q-separator />
+    <div class="text-right q-pa-sm">
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index a1b7165f1..ea947bb0a 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -5,6 +5,8 @@ import { useRouter, useRoute } from "vue-router";
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
 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";
 
 const router = useRouter();
 const route = useRoute();
@@ -40,6 +42,8 @@ const tab = ref<string>("BasicInfo");
       <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
       <q-tab name="Target" label="เป้าหมาย" />
       <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+      <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
+      <q-tab name="Other" label="อื่นๆ" />
     </q-tabs>
     <q-separator />
     <div class="q-pa-sm" style="padding: 0px">
@@ -49,6 +53,8 @@ const tab = ref<string>("BasicInfo");
         </q-tab-panel>
         <q-tab-panel name="Target"> <Target /></q-tab-panel>
         <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-panels>
     </div>
   </q-card>
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
new file mode 100644
index 000000000..1524ea790
--- /dev/null
+++ b/src/modules/15_development/components/Other.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+
+const formData = reactive<FormFollowResult>({
+  metricType: "",
+  indicators: "",
+  target: "",
+  calculation: "",
+});
+
+const metricTypeOp = ref<DataOption[]>([
+  {
+    id: "id1",
+    name: "name1",
+  },
+  {
+    id: "id2",
+    name: "name2",
+  },
+  {
+    id: "id3",
+    name: "name3",
+  },
+]);
+
+const options = ref<any>([
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+]);
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+onMounted(() => {
+  console.log("ข้อมูลเบื้องต้น");
+});
+</script>
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-select
+          dense
+          outlined
+          label="ประเภทตัวชี้วัด"
+          v-model="formData.metricType"
+          :options="metricTypeOp"
+          option-label="name"
+          option-value="id"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-input
+          dense
+          outlined
+          label="ตัวชี้วัด"
+          v-model="formData.indicators"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกตัวชี้วัด'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-input
+          dense
+          outlined
+          label="เป้าหมาย"
+          v-model="formData.target"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกเป้าหมาย'}`,
+          ]"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.calculation"
+          label="วิธีการคำนวณ/เครื่องมือ"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกวิธีการคำนวณ/เครื่องมือ'}`,
+          ]"
+        />
+      </div>
+    </div>
+
+    <q-separator />
+    <div class="text-right q-pa-sm">
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index d96762933..e1b3d62f6 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -26,9 +26,17 @@ interface FormGroupRelate {
   amount: number | null;
 }
 
+interface FormFollowResult {
+  metricType:string
+  indicators:string
+  target:string
+  calculation:string
+}
+
 export type {
   FormQueryProject,
   FormBasicinfo,
   FormGroupTarget,
   FormGroupRelate,
+  FormFollowResult,
 };