From b49cdaf913a0582594fa9b58c382a0dd13cd0174 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 14 Nov 2023 11:18:52 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/Form.vue           | 217 +++++++++++++++---
 .../interface/request/complaint.ts            |  14 +-
 .../interface/response/complaint.ts           |  24 +-
 .../11_discipline/store/ComplaintsStore.ts    |  28 ++-
 .../store/InvestigateFactStore.ts             |   2 +-
 5 files changed, 243 insertions(+), 42 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index d12fdcb90..5ead0b113 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -2,12 +2,12 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-
+import type { QTableProps } from "quasar";
 /** import Type */
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type {
   FormData,
-  MyObjectComplaintsRef,
+  MyObjectComplaintsRef,DataAddRequest
 } from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
@@ -109,6 +109,84 @@ const receivecomplaintstoptions = ref<DataOption[]>([
   { id: "6", name: "บอกกล่าว" },
 ]);
 
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "cardId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: true,
+    field: "cardId",
+    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",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** หัวข้อที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "cardId",
+  "fullName",
+  "position",
+  "level",
+  "degree",
+  "oc",
+]);
+
 /**
  * รับค่าผู้ถูกร้องเรียน
  * @param val บุคคล หน่วยงาน กทม
@@ -211,7 +289,48 @@ function onSubmit() {
   );
 }
 
-/** 
+/**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
+async function addDatainTable() {
+  console.log("test");
+  const listData: DataAddRequest[] = [
+    {
+      id: "001",
+      cardId: "0000000000001",
+      prefix: "นาง",
+      firstName: "ศิรินภา",
+      lastName: "คงน้อย",
+      position: "ตำเเหน่ง1",
+      level: "level1",
+      degree: "ป.ตรี",
+      oc: "สำนักงาน 1",
+    },
+    {
+      id: "002",
+      cardId: "0000000000002",
+      prefix: "นาย",
+      firstName: "แก้ว",
+      lastName: "คำ",
+      position: "ตำแหน่ง2",
+      level: "level2",
+      degree: "ป.โท",
+      oc: "สำนักงาน 2",
+    },
+    {
+      id: "003",
+      cardId: "0000000000003",
+      prefix: "นาย",
+      firstName: "ภัทรานุย",
+      lastName: "คงนอย",
+      position: "ตำแหน่ง2",
+      level: "level3",
+      degree: "ป.เอก",
+      oc: "สำนักงาน 3",
+    },
+  ];
+  await complainstStore.fetchComplainstAdd(listData);
+}
+
+/**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
@@ -232,6 +351,11 @@ watch(props.data, async () => {
   formData.petitioner = props.data.petitioner;
   formData.files = props.data.files;
 });
+
+onMounted(() => {
+  complainstStore.columns = columns.value;
+  complainstStore.visibleColumns = visibleColumns.value;
+});
 </script>
 <template>
   <div class="col-12 q-mt-sm">
@@ -273,40 +397,6 @@ watch(props.data, async () => {
               </q-select>
             </div>
 
-            <div
-              class="col-xs-12 col-sm-3"
-              id="complainant"
-              v-if="formData.complainantType === '0'"
-            >
-              <q-select
-                for="selectComplainant"
-                ref="complainantRef"
-                dense
-                outlined
-                v-model="formData.complainant"
-                :options="complainstStore.optionListName"
-                label="รายชื่อจากทะเบียรประวัติ"
-                option-value="id"
-                option-label="name"
-                hide-bottom-space
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
-                lazy-rules
-                use-input
-                @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantOP'
-                )"
-                ><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-xs-12 col-sm-3"
               v-if="formData.complainantType === '1'"
@@ -357,6 +447,59 @@ watch(props.data, async () => {
               </q-select>
             </div>
 
+            <div class="full-width" v-if="formData.complainantType === '0'">
+              <div class="row col-12 q-mb-xs">
+                <q-space />
+                <q-btn color="blue" outline @click="addDatainTable">
+                  <q-icon left name="add" />
+                  <div>เพิ่ม</div>
+                </q-btn>
+              </div>
+              <div class="col-12">
+                <d-table
+                  ref="table"
+                  :columns="complainstStore.columns"
+                  :rows="complainstStore.rowsAdd"
+                  row-key="interrogated"
+                  flat
+                  bordered
+                  :paging="true"
+                  dense
+                  class="custom-header-table"
+                  :visible-columns="complainstStore.visibleColumns"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        style="color: #000000; font-weight: 500"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </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.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+                        <div>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+
             <div class="col-xs-12 col-sm-12" id="topicComplaint">
               <q-input
                 for="inputTopicComplaint"
diff --git a/src/modules/11_discipline/interface/request/complaint.ts b/src/modules/11_discipline/interface/request/complaint.ts
index e2d9ebe94..087ea7a3c 100644
--- a/src/modules/11_discipline/interface/request/complaint.ts
+++ b/src/modules/11_discipline/interface/request/complaint.ts
@@ -32,7 +32,19 @@ interface MyObjectComplaintsRef {
     [key: string]: any;
 }
 
+interface DataAddRequest {
+    id:string
+    cardId:string
+    prefix:string
+    firstName:string
+    lastName:string
+    position:string
+    level:string
+    degree:string
+    oc:string
+}
 export type {
     FormData,
-    MyObjectComplaintsRef
+    MyObjectComplaintsRef,
+    DataAddRequest
 }
\ No newline at end of file
diff --git a/src/modules/11_discipline/interface/response/complaint.ts b/src/modules/11_discipline/interface/response/complaint.ts
index 42baf3b89..d045fafb8 100644
--- a/src/modules/11_discipline/interface/response/complaint.ts
+++ b/src/modules/11_discipline/interface/response/complaint.ts
@@ -7,6 +7,26 @@ interface DataListRow {
     considerationLevel: string
     considerationDeadlineDate: string | null
 }
+interface DataAdd {
+    id:string
+    cardId:string
+    fullName:string
+    position:string
+    level:string
+    degree:string
+    oc:string
+}
+interface DataAddResponse {
+    id:string
+    cardId:string
+    prefix:string
+    firstName:string
+    lastName:string
+    position:string
+    level:string
+    degree:string
+    oc:string
+}
 interface DataList {
     id:string
     subject: string
@@ -22,5 +42,7 @@ interface DataList {
 
 export type {
     DataList,
-    DataListRow
+    DataListRow,
+    DataAdd,
+    DataAddResponse
 }
\ No newline at end of file
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index bff517417..e036c358e 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -3,17 +3,39 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
-import type { DataList, DataListRow } from "@/modules/11_discipline/interface/response/complaint"
+import type { DataList, DataListRow,DataAdd,DataAddResponse } from "@/modules/11_discipline/interface/response/complaint"
 import type { QTableProps } from "quasar";
 
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 
-
+// id
+// cardId
+// prefix
+// firstName
+// lastName
+// position
+// level
+// oc
 export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
     const rows = ref<DataListRow[]>([])
+    const rowsAdd = ref<DataAdd[]>([])
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
+
+    function fetchComplainstAdd(data: DataAddResponse[]) {
+        let datalist = data.map((e: DataAddResponse) => ({
+            id: e.id,
+            cardId: e.cardId,
+            fullName:`${e.prefix}${e.firstName} ${e.lastName}`,
+            position: e.position,
+            level: e.level,
+            degree: e.degree,
+            oc: e.oc,
+        }))
+        rowsAdd.value = datalist
+    }
+
     function fetchComplainst(data: DataList[]) {
         let datalist = data.map((e: DataList) => ({
             id: e.id,
@@ -71,6 +93,7 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
 
     return {
         rows,
+        rowsAdd,
         visibleColumns,
         columns,
         fetchComplainst,
@@ -79,6 +102,7 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         complainantoptions,
         agencytoptions,
         optionListName,
+        fetchComplainstAdd
 
 
     }
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 56922c41b..e1114459f 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -42,7 +42,7 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         "interrogated",
         "fault",
         "status",
-    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    ]);
 
     // หัวตาราง
     const columns = ref<QTableProps["columns"]>([