From e5c91bcbeda2676678482a4b11e3d5a3932473b6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 22 Nov 2023 18:05:59 +0700
Subject: [PATCH] =?UTF-8?q?form=20=E0=B8=AA=E0=B8=B7=E0=B8=9A=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=99=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/EditPage.vue       |  22 +-
 .../components/1_Complaint/Popup.vue          | 205 ++++++++++++++++++
 .../components/2_InvestigateFacts/Form.vue    | 118 +++++++++-
 .../store/InvestigateFactStore.ts             |   2 +-
 4 files changed, 329 insertions(+), 18 deletions(-)
 create mode 100644 src/modules/11_discipline/components/1_Complaint/Popup.vue

diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index ca49efa96..129b9603e 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
+import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type {
@@ -17,6 +18,8 @@ const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
+const modalPopup = ref<boolean>(false);
+
 /** ข้อมูล v-model ของฟอร์ม */
 const personOj = reactive<ArrayPerson>({
   idcard: "",
@@ -126,12 +129,17 @@ async function onSubmit() {
 
 /** ยืนยัน มีมูลส่งไปสืบสวน */
 function sentInvestigate() {
-  dialogConfirm(
-    $q,
-    () => confirmSentInvestigate(),
-    "ยืนยันส่งไปสืบสวน",
-    "ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?"
-  );
+  modalPopup.value = true;
+  // dialogConfirm(
+  //   $q,
+  //   () => confirmSentInvestigate(),
+  //   "ยืนยันส่งไปสืบสวน",
+  //   "ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?"
+  // );
+}
+
+function closePopup() {
+  modalPopup.value = false;
 }
 
 /** ยืนยัน ยุติเรื่อง */
@@ -212,5 +220,7 @@ onMounted(() => {
     </div>
 
     <Form :on-submit="onSubmit" :data="data" />
+
+    <Popup :modal="modalPopup" :close="closePopup" />
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/Popup.vue b/src/modules/11_discipline/components/1_Complaint/Popup.vue
new file mode 100644
index 000000000..535d65795
--- /dev/null
+++ b/src/modules/11_discipline/components/1_Complaint/Popup.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+const complainstStore = useComplainstDataStore();
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  close: {
+    type: Function,
+    require: true,
+  },
+});
+
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: true,
+    field: "idcard",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "positionNo",
+    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: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+/** หัวข้อที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "idcard",
+  "name",
+  "positionNo",
+  "position",
+  "positionLevel",
+  "salary",
+  "organization",
+]);
+
+const selected = ref<any>([]);
+
+console.log(complainstStore.rowsAdd);
+
+function onClickClose() {
+  props.close?.();
+}
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text">มีมูลส่งไปสืบสวน </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="onClickClose"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-mt-md">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="complainstStore.rowsAdd"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="selected"
+                />
+              </q-th>
+              <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>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="selected"
+                />
+              </q-td>
+              <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 class="col-xs-12 col-sm-12 q-mt-sm" id="title">
+          <q-input
+            for="input"
+            dense
+            outlined
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+            lazy-rules
+            label="เรื่องร้องเรียน"
+            type="textarea"
+            rows="5"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="มีมูลส่งไปสืบสวน" color="public" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index be5ff6298..939201bf7 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -2,7 +2,10 @@
 import { useRouter, useRoute } from "vue-router";
 import { onMounted, ref, watch, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
+import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import type {
   FormData,
@@ -18,6 +21,7 @@ const investigateFactStore = useInvestigateFactStore();
 const mixin = useCounterMixin();
 const { filterFnOptionsType } = investigateFactStore;
 const { date2Thai, dialogConfirm } = mixin;
+const investigateDis = useInvestigateDisStore();
 
 const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);
@@ -50,6 +54,8 @@ const props = defineProps({
   },
 });
 
+const filter = ref<string>("");
+
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
@@ -87,9 +93,13 @@ const objectInvestigate: MyObjectInvestigateRef = {
   causeText: causeTextRef,
 };
 
+const rows = ref([]);
 const statusStep = computed(() => {
   return route.name === "/discipline-disciplinaryEdit" ? true : false;
 });
+const initialPagination = ref<any>({
+  rowsPerPage: 0,
+});
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
@@ -157,6 +167,20 @@ async function fetchDataDetail() {
     formData.causeText = props.data.results;
   }
 }
+
+const modal = ref<boolean>(false);
+const filterKeyword2 = ref<string>("");
+const type = ref<string>("");
+/** เปิด dialog */
+function onClickOpenPopup() {
+  modal.value = true;
+  filterKeyword2.value = "";
+}
+/** ฟังชั่นปิด dialog */
+function clickClose() {
+  modal.value = false;
+}
+
 onMounted(async () => {
   await fetchDataDetail();
   console.log(route.name);
@@ -310,7 +334,7 @@ watch(props.data, async () => {
             >
               วันที่สืบสวน
               <q-checkbox
-                v-if="data != null && statusStep === false"
+                v-if="formData.clickTime != null && statusStep === false"
                 for="#clickTime"
                 size="md"
                 v-model="formData.clickTime"
@@ -354,9 +378,9 @@ watch(props.data, async () => {
                         "
                         :rules="[
                           (val) =>
-                            !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                            !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
                         ]"
-                        :label="`${'วันที่เริ่มการสอบสวน'}`"
+                        :label="`${'วันที่เริ่มการสืบสวน'}`"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -434,9 +458,9 @@ watch(props.data, async () => {
                         "
                         :rules="[
                           (val) =>
-                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
                         ]"
-                        :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                        :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -455,6 +479,74 @@ watch(props.data, async () => {
           </q-card>
         </div>
 
+        <div class="row col-12">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div
+              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+            >
+              กรรมการ
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="add"
+                class="q-ml-sm"
+                icon="mdi-plus"
+                @click="onClickOpenPopup"
+              >
+                <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-12 q-pa-sm row">
+              <Table
+                class="col-12"
+                style="max-height: 80vh"
+                :rows="rows"
+                :columns="investigateDis.columnsDirector"
+                :filter="filter"
+                :visible-columns="investigateDis.visibleColumnsDirector"
+                v-model:inputfilter="filter"
+                v-model:inputvisible="investigateDis.visibleColumnsDirector"
+                :pagination="initialPagination"
+                :nornmalData="true"
+                :paging="true"
+                :titleText="''"
+              >
+                <template #columns="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'" class="table_ellipsis2">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div v-else class="table_ellipsis2">
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                    <q-td>
+                      <q-btn
+                        dense
+                        size="12px"
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-delete"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </Table>
+            </div>
+          </q-card>
+        </div>
+
         <!-- <div class="col-12">
           <q-input
             for="#complaintdetail"
@@ -570,12 +662,8 @@ watch(props.data, async () => {
       <q-separator />
       <div class="row col-12 q-pa-sm">
         <q-space />
-        <q-btn
-          id="onSubmit"
-          type="submit"
-          label="ยืนยันผลการสืบสวน"
-          color="secondary"
-          ><q-tooltip>ยืนยันผลการสืบสวน</q-tooltip></q-btn
+        <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
         >
       </div>
     </form>
@@ -661,4 +749,12 @@ watch(props.data, async () => {
       </q-card>
     </div>
   </div>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    :clickClose="clickClose"
+    :rows2="investigateDis.rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    v-model:type="type"
+  />
 </template>
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index caf1bdb87..dd32c58d5 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -21,7 +21,7 @@ export const useInvestigateFactStore = defineStore(
       { id: 60, name: "60 วัน" },
     ]);
     const investigationOps = ref<DataOption[]>([
-      { id: "001", name: "เเต่งตั้งการสืบสวน" },
+      { id: "001", name: "แต่งตั้งกรรมการสืบสวน" },
       { id: "002", name: "สืบสวนทางลับ" },
       { id: "003", name: "อื่นๆ" },
     ]);