แก้หน้าเพิ่มเรื่องร้องเรียน

2023-11-14 11:18:52 +07:00 · 2023-11-14 11:18:52 +07:00 · b49cdaf913
commit b49cdaf913
parent 01cbfe6245
5 changed files with 243 additions and 42 deletions
--- 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"
--- 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
 }
--- 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
 }
--- 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


    }
--- 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"]>([