no message

src/modules/11_discipline/components/1_Complaint/EditPage.vue

@@ -173,7 +173,6 @@ async function onSubmit(data: any) {
     .put(config.API.complaintbyId(id.value), data)
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
-      router.push(`/discipline/complaints`);
     })
     .catch((e) => {
       messageError($q, e);
@@ -217,9 +216,9 @@ function cancelInvestigate() {
 function confirmEndInvestigate() {
   showLoader();
   http
-    .put(config.API.complaintReject(id.value))
+    .get(config.API.complaintReject(id.value))
     .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
+      success($q, "ยุติเรื่องสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
@@ -286,7 +285,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/complaints`)"
       />
-      <div class="q-ma-none">แก้ไขเรื่องร้องเรียน {{ id }}#id</div>
+      <div class="q-ma-none">แก้ไขเรื่องร้องเรียน</div>
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -72,8 +72,6 @@ const props = defineProps({
   },
 });
 
-
-
 const fileListOj = reactive<ArrayFileList>({
   id: "",
   pathName: "",
@@ -96,12 +94,11 @@ const formData = reactive<FormData>({
   appellant: "",
   documentFile: null,
   status: "",
-  result: '',
+  result: "",
   persons: [],
   disciplineComplaintDocs: fileList.value ?? null,
 });
 
-
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectComplaintsRef: MyObjectComplaintsRef = {
   respondentType: respondentTypeRef,
@@ -142,6 +139,15 @@ const complaintFromtoptions = ref<DataOption[]>([
 
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "info",
+    align: "left",
+    label: "",
+    sortable: false,
+    field: "info",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "no",
     align: "left",
@@ -218,6 +224,7 @@ const columns = ref<QTableProps["columns"]>([
 
 /** หัวข้อที่เเสดงในตาราง */
 const visibleColumns = ref<string[]>([
+  "info",
   "no",
   "idcard",
   "name",
@@ -228,6 +235,22 @@ const visibleColumns = ref<string[]>([
   "organization",
 ]);
 
+/**
+ * รับค่าผู้ถูกร้องเรียน
+ * @param val บุคคล หน่วยงาน กทม
+ */
+async function selectComplainant(val: string) {
+  formData.organizationId = "";
+  formData.consideredAgency = "";
+
+  if (val === "1") {
+    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
+  }
+}
+
+/** เรียกโครงสร้างสำนักงาน */
+async function fetchOffice() {}
+
 /**
  * ฟังชั่นอัปโหลดไฟล์
  * @param documentFile ไฟล์ที่รับมา
@@ -564,7 +587,15 @@ onMounted(() => {
                           <div v-if="col.name == 'no'">
                             {{ props.rowIndex + 1 }}
                           </div>
-                          <div>
+                          <div v-else-if="col.name == 'info'">
+                            <router-link :to="`/registry/${props.row.personId}`"
+                              ><q-icon name="info" color="info" size="sm"
+                                ><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                              </q-icon></router-link
+                            >
+                            {{ col.value }}
+                          </div>
+                          <div v-else>
                             {{ col.value }}
                           </div>
                         </q-td>
@@ -602,7 +633,7 @@ onMounted(() => {
                 v-model="formData.description"
                 :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                 lazy-rules
-                label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
+                label="รายละเอียดเรื่องร้องเรียน"
                 type="textarea"
                 rows="5"
               />

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -3,8 +3,6 @@ import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-// import type
-import type { DataList } from "@/modules/11_discipline/interface/response/complaint";
 // importStroe
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 // impoet Components
@@ -29,10 +27,10 @@ const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
 
-async function updatePagingProp(rowPerpage:number,pageCurrent:number) {
-  rowsPerPage.value = rowPerpage
-  page.value = pageCurrent
-  await getList()
+async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
+  rowsPerPage.value = rowPerpage;
+  page.value = pageCurrent;
+  await getList();
 }
 
 async function getList() {
@@ -44,11 +42,10 @@ async function getList() {
         rowsPerPage.value,
         filterKeyword.value
       )
-
     )
-    // 
+    //
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total/ rowsPerPage.value);
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = res.data.result.data;
       fetchComplainst(data);
     })
@@ -62,7 +59,7 @@ async function getList() {
 
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageadd() {
-  complainstStore.fetchComplainstAdd([])
+  complainstStore.fetchComplainstAdd([]);
   router.push(`/discipline/complaints/add`);
 }
 

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -45,27 +45,27 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "title",
     align: "left",
-    label: "เรื่อง",
+    label: "เรื่องร้องเรียน",
     sortable: true,
     field: "title",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "description",
+    name: "dateReceived",
     align: "left",
-    label: "รายละเอียด",
+    label: "วันที่รับเรื่อง",
     sortable: true,
-    field: "description",
+    field: "dateReceived",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "appellant",
+    name: "respondentType",
     align: "left",
     label: "ผู้ถูกร้องเรียน",
     sortable: true,
-    field: "appellant",
+    field: "respondentType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -78,15 +78,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่สร้างเรื่องร้องเรียน",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "levelConsideration",
     align: "left",
@@ -108,7 +99,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "status",
     align: "left",
-    label: "สถานะเรื่องร้องเรียน",
+    label: "สถานะ",
     sortable: true,
     field: "status",
     headerStyle: "font-size: 14px",
@@ -120,8 +111,8 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>([
   "no",
   "title",
-  "description",
-  "appellant",
+  "dateReceived",
+  "respondentType",
   "offenseDetails",
   "createdAt",
   "levelConsideration",
@@ -216,11 +207,6 @@ watch(
           <div v-if="col.name == 'no'">
             {{ props.rowIndex + 1 }}
           </div>
-          <div v-if="col.name == 'description'">
-            <div class="table_ellipsis">
-              {{ props.row.description }}
-            </div>
-          </div>
           <div v-else>
             {{ col.value }}
           </div>

src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
 import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
 import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
@@ -19,6 +21,7 @@ const id = ref<string>(route.params.id as string);
 /** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
   complaint: "",
+  respondentType: "",
   dateInvestigate: null,
   dateAllegation: null,
   dateEvident: null,
@@ -38,8 +41,43 @@ const data = reactive<FormData>({
   filesWitnesses: null,
   filesEtc: null,
   complaintStatus: "NEW",
+  organizationId: "",
+  consideredAgency: "",
 });
 
+async function fetchDetailDisciplinary() {
+  await http
+    .get(config.API.disciplineDisciplinaryById(id.value))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+async function fetchDetailInvestigate() {
+  await http
+    .get(config.API.disciplineInvestigateById(id.value))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+async function fetchDetailComplaints() {
+  await http
+    .get(config.API.disciplineComplaintsById(id.value))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
 /** จำลองข้อมูลจาก api */
 const fetchData = async () => {
   data.complaint = "test1";
@@ -119,8 +157,32 @@ function confirmCancelInvestigate() {
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(async () => {
-  await fetchData();
+  store.tabMenu = 'disciplinary'
+  await fetchDetailDisciplinary();
 });
+
+watch(
+  () => store.tabMenu,
+  async () => {
+    const fetchFunction =
+      store.tabMenu === "disciplinary"
+        ? fetchDetailDisciplinary
+        : store.tabMenu === "investigatefacts"
+        ? fetchDetailInvestigate
+        : store.tabMenu === "complaints"
+        ? fetchDetailComplaints
+        : null;
+
+    if (fetchFunction) {
+      await fetchFunction();
+    }
+    //   if (store.tabMenu === "disciplinary") {
+    //     await fetchDetailDisciplinary();
+    //   } else if (store.tabMenu === "investigatefacts") {
+    //     await fetchDetailInvestigate();
+    //   } else if (store.tabMenu === "complaints") await fetchDetailComplaints();
+  }
+);
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -135,12 +197,12 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/disciplinary`)"
       />
-      <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id</div>
+      <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย</div>
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn
           v-if="data.complaintStatus === 'NEW'"
-          label="ส่งไปออกคำสั่ง"
+          label="ส่งไปสรุปผลการพิจารณา"
           color="public"
           @click="sentIssue"
         />
@@ -158,7 +220,7 @@ onMounted(async () => {
         />
       </div>
     </div>
-    <q-card flat  class="col-12">
+    <q-card flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
+import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
 
 import type {
   FormData,
   disciplinaryRef,
 } from "@/modules/11_discipline/interface/request/disciplinary";
+import type { FileLists } from "../../interface/index/Main";
 
+const complainstStore = useComplainstDataStore();
 const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
+const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
 
 const mixin = useCounterMixin();
 const { date2Thai, hideLoader, dialogConfirm } = mixin;
@@ -35,6 +42,7 @@ const fileDocDataUpload = ref<File[]>([]);
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const complaintRef = ref<Object | null>(null);
+const respondentTypeRef = ref<Object | null>(null);
 const dateInvestigateRef = ref<Object | null>(null);
 const dateAllegationRef = ref<Object | null>(null);
 const dateEvidentRef = ref<Object | null>(null);
@@ -74,6 +82,7 @@ const initialPagination = ref<any>({
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
+  respondentType: "",
   dateInvestigate: null,
   dateAllegation: null,
   dateEvident: null,
@@ -93,15 +102,27 @@ const formData = reactive<FormData>({
   filesRecordAccuser: null,
   filesWitnesses: null,
   filesEtc: null,
+  organizationId: "",
+  consideredAgency: "",
 });
-const filesEvidence = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
-const filesRecordAccuser = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
-const filesWitnesses = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
-const filesEtc = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesEvidence = ref<any>([
+  { fileName: "ชื่อไฟล" },
+  { fileName: "ชื่อไฟล" },
+]);
+const filesRecordAccuser = ref<any>([
+  { fileName: "ชื่อไฟล" },
+  { fileName: "ชื่อไฟล" },
+]);
+const filesWitnesses = ref<any>([
+  { fileName: "ชื่อไฟล" },
+  { fileName: "ชื่อไฟล" },
+]);
+const filesEtc = ref<any>([{ fileName: "ชื่อไฟล" }, { fileName: "ชื่อไฟล" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: disciplinaryRef = {
   complaint: complaintRef,
+  respondentType: respondentTypeRef,
   dateInvestigate: dateInvestigateRef,
   dateAllegation: dateAllegationRef,
   dateEvident: dateEvidentRef,
@@ -185,65 +206,96 @@ async function deleteData(id: string) {
   console.log("delete");
 }
 
-async function fetvhDatadetail() {
-  formData.complaint = props.data.complaint;
-  formData.dateInvestigate = props.data.dateInvestigate;
-  formData.dateAllegation = props.data.dateAllegation;
-  formData.dateEvident = props.data.dateEvident;
-  formData.casefault = props.data.casefault;
-  formData.typefault = props.data.typefault;
-  formData.faultLevel = props.data.faultLevel;
-  formData.refLaw = props.data.refLaw;
-  formData.detailComplaint = props.data.detailComplaint;
-  formData.whereInvestigate = props.data.whereInvestigate;
-  formData.trueDetail = props.data.trueDetail;
-  formData.evidence = props.data.evidence;
-  formData.recordAccuser = props.data.recordAccuser;
-  formData.witnesses = props.data.witnesses;
-  formData.InvestResults = props.data.InvestResults;
-  formData.filesEvidence = props.data.filesEvidence;
-  formData.filesRecordAccuser = props.data.filesRecordAccuser;
-  formData.filesWitnesses = props.data.filesWitnesses;
-  formData.filesEtc = props.data.filesEtc;
-
-  console.log(formData);
-}
+// async function fetvhDatadetail() {
+//   formData.complaint = props.data.complaint;
+//   formData.dateInvestigate = props.data.dateInvestigate;
+//   formData.dateAllegation = props.data.dateAllegation;
+//   formData.dateEvident = props.data.dateEvident;
+//   formData.casefault = props.data.casefault;
+//   formData.typefault = props.data.typefault;
+//   formData.faultLevel = props.data.faultLevel;
+//   formData.refLaw = props.data.refLaw;
+//   formData.detailComplaint = props.data.detailComplaint;
+//   formData.whereInvestigate = props.data.whereInvestigate;
+//   formData.trueDetail = props.data.trueDetail;
+//   formData.evidence = props.data.evidence;
+//   formData.recordAccuser = props.data.recordAccuser;
+//   formData.witnesses = props.data.witnesses;
+//   formData.InvestResults = props.data.InvestResults;
+//   formData.filesEvidence = props.data.filesEvidence;
+//   formData.filesRecordAccuser = props.data.filesRecordAccuser;
+//   formData.filesWitnesses = props.data.filesWitnesses;
+//   formData.filesEtc = props.data.filesEtc;
+//   console.log(formData);
+// }
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
 watch(props.data, async () => {
-  formData.complaint = props.data.complaint;
-  formData.dateInvestigate = props.data.dateInvestigate;
-  formData.dateAllegation = props.data.dateAllegation;
-  formData.dateEvident = props.data.dateEvident;
-  formData.casefault = props.data.casefault;
-  formData.typefault = props.data.typefault;
-  formData.faultLevel = props.data.faultLevel;
-  formData.refLaw = props.data.refLaw;
-  formData.detailComplaint = props.data.detailComplaint;
-  formData.whereInvestigate = props.data.whereInvestigate;
-  formData.trueDetail = props.data.trueDetail;
-  formData.evidence = props.data.evidence;
-  formData.recordAccuser = props.data.recordAccuser;
-  formData.witnesses = props.data.witnesses;
-  formData.InvestResults = props.data.InvestResults;
-  formData.filesEvidence = props.data.filesEvidence;
-  formData.filesRecordAccuser = props.data.filesRecordAccuser;
-  formData.filesWitnesses = props.data.filesWitnesses;
-  formData.filesEtc = props.data.filesEtc;
+  // formData.complaint = props.data.complaint;
+  // formData.dateInvestigate = props.data.dateInvestigate;
+  // formData.dateAllegation = props.data.dateAllegation;
+  // formData.dateEvident = props.data.dateEvident;
+  // formData.casefault = props.data.casefault;
+  // formData.typefault = props.data.typefault;
+  // formData.faultLevel = props.data.faultLevel;
+  // formData.refLaw = props.data.refLaw;
+  // formData.detailComplaint = props.data.detailComplaint;
+  // formData.whereInvestigate = props.data.whereInvestigate;
+  // formData.trueDetail = props.data.trueDetail;
+  // formData.evidence = props.data.evidence;
+  // formData.recordAccuser = props.data.recordAccuser;
+  // formData.witnesses = props.data.witnesses;
+  // formData.InvestResults = props.data.InvestResults;
+  // formData.filesEvidence = props.data.filesEvidence;
+  // formData.filesRecordAccuser = props.data.filesRecordAccuser;
+  // formData.filesWitnesses = props.data.filesWitnesses;
+  // formData.filesEtc = props.data.filesEtc;
 });
 
 function uploadData() {
   console.log("อัปโหลไฟล");
 }
 
+async function selectComplainant(val: string) {
+  formData.organizationId = "";
+  formData.consideredAgency = "";
+  if (val === "0") {
+    await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
+  } else if (val === "1") {
+    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
+  }
+}
+
+/** เรียกรายชื่อ */
+async function fetchListname() {
+  const listName = [
+    {
+      id: "1",
+      name: "นายเอ",
+    },
+    {
+      id: "2",
+      name: "นายบี",
+    },
+    {
+      id: "3",
+      name: "นายชี",
+    },
+  ];
+  selectComplainantTpye(listName);
+}
+
+/** เรียกโครงสร้างสำนักงาน */
+async function fetchOffice() {}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  await fetvhDatadetail();
+  // await fetvhDatadetail();
   await fecthDirector([
     {
       nameDirector: "นาง เกสินี เจียรสุมัย",
@@ -264,30 +316,50 @@ onMounted(async () => {
   ]);
   await hideLoader();
 });
+
+const files = ref<FileLists[]>([
+  { id: "1", fileName: "test", pathName: "xxx" },
+]);
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
+    <!-- <UploadFile
+      title="อัปโหลดเอกสาร"
+      label="เลือกเอกสาร"
+      :files="files"
+      id="xx"
+    /> -->
+
     <form @submit.prevent="validateForm">
       <div class="col-12">
         <q-card>
           <div class="col-12 row q-pa-md">
             <div class="col-12 row q-col-gutter-md">
-              <!-- <div class="col-12">
+              <div class="col-xs-12 col-sm-3">
                 <q-select
-                  for="#fault"
-                  outlined
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
                   dense
-                  ref="complaintRef"
-                  v-model="formData.complaint"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
-                  :options="complaintsOptions"
-                  label="เรื่องร้องเรียน"
-                  emit-value
-                  map-options
-                  option-label="name"
+                  outlined
+                  label="ผู้ถูกร้องเรียน"
                   option-value="id"
+                  option-label="name"
+                  emit-value
                   use-input
-                  ><template v-slot:no-option>
+                  map-options
+                  hide-bottom-space
+                  :options="complainstStore.complainantoptions"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                  lazy-rules
+                  @update:model-value="
+                    selectComplainant(formData.respondentType)
+                  "
+                  @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
+                )"
+                >
+                  <template v-slot:no-option>
                     <q-item>
                       <q-item-section class="text-grey">
                         ไม่มีข้อมูล
@@ -295,7 +367,137 @@ onMounted(async () => {
                     </q-item>
                   </template>
                 </q-select>
-              </div> -->
+              </div>
+              <div class="col-xs-12 col-sm-3" id="consideredAgency">
+                <q-select
+                  ref="consideredAgencyRef"
+                  for="selectAgency"
+                  dense
+                  outlined
+                  v-model="formData.consideredAgency"
+                  :options="complainstStore.consideredAgencytoptions"
+                  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, 'filterconsideredAgencytoptions'
+                  )"
+                >
+                  <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.respondentType === 'ORGANIZATION'"
+                id="organizationId"
+              >
+                <q-select
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="complainstStore.organizationIdOp"
+                  label="เลือกสำนักงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                  lazy-rules
+                />
+              </div>
+              <div
+                v-if="formData.respondentType !== 'ORGANIZATION'"
+                class="col-6"
+              ></div>
+              <div
+                class="row col-12"
+                v-if="formData.respondentType === 'PERSON'"
+              >
+                <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"
+                    >
+                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm">
+                    <d-table
+                      ref="table"
+                      :columns="complainstStore.columns"
+                      :rows="complainstStore.rowsAdd"
+                      row-key="idcard"
+                      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>
+                </q-card>
+              </div>
 
               <!-- <datepicker
                 menu-class-name="modalfix"
@@ -673,7 +875,32 @@ onMounted(async () => {
           </div>
         </q-card>
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <UploadFile
+          title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
+          label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+          :files="filesEvidence"
+          id="xx"
+        />
+        <UploadFile
+          title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
+          label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+          :files="filesRecordAccuser"
+          id="xx"
+        />
+        <UploadFile
+          title="อัปโหลดพยานและการบันทึกถ้อยคำ"
+          label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+          :files="filesWitnesses"
+          id="xx"
+        />
+        <UploadFile
+          title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+          label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+          :files="filesEtc"
+          id="xx"
+        />
+
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -762,9 +989,9 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -785,7 +1012,7 @@ onMounted(async () => {
                     dense
                     ref="filesRecordAccuserRef"
                     for="#filesRecordAccuser"
-                    v-model="formData.filesRecordAccuser"
+                    v-model="filesRecordAccuser"
                     @added="fileUploadDoc"
                     label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
                     hide-bottom-space
@@ -853,9 +1080,9 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -944,9 +1171,9 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -1035,7 +1262,7 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
       </div>
     </form>
   </div>

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -2,23 +2,54 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
-const $q = useQuasar(); // show dialog
-const router = useRouter();
-const filter = ref<string>(""); //search data table
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
-const { fecthList } = dataInvestigateDis;
+const { fetchList } = dataInvestigateDis;
 
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+
+const filter = ref<string>(""); //search data table
+const page = ref<number>(1);
+const maxPage = ref<number>(1);
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+  rowsPerPage: 10,
 });
 
+async function fetchListDisciplinary() {
+  showLoader();
+  await http
+    .get(
+      config.API.disciplineDisciplinary() +
+        `?page=${page.value}&pageSize=${initialPagination.value.rowsPerPage}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(
+        res.data.result.total / initialPagination.value.rowsPerPage
+      );
+      fetchList(data);
+      console.log(data);
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
@@ -32,54 +63,7 @@ function openEdit(id: string) {
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  showLoader();
-  fecthList([
-    {
-      id: "001",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "ศิรินภา คงน้อยี่",
-      fault: "1",
-      penaltyLevel: "7",
-      caseFault: "ทุจริตในหน้าที่",
-      dateInvestigate: "2023-12-01",
-      status: "0",
-      active: "2",
-    },
-    {
-      id: "002",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "ภัทรานุช คงน้อย",
-      fault: "1",
-      penaltyLevel: "7",
-      caseFault: "ทุจริตในหน้าที่",
-      dateInvestigate: "2023-11-30",
-      status: "0",
-      active: "0",
-    },
-    {
-      id: "003",
-      subject: "กระทำทุจริตเงินกองทุน",
-      interrogated: "ปรมาพร ศรีมี",
-      fault: "2",
-      penaltyLevel: "1",
-      caseFault: "พบการทุจริต",
-      dateInvestigate: "2023-09-14",
-      status: "1",
-      active: "1",
-    },
-    {
-      id: "004",
-      subject: "พูดจาไม่สุภาพ",
-      interrogated: "สมรัก ใจอารีย์",
-      fault: "2",
-      penaltyLevel: "1",
-      caseFault: "พูดจาไม่สุภาพกับผู้บังคับบัญชา",
-      dateInvestigate: "2023-08-11",
-      status: "0",
-      active: "1",
-    },
-  ]);
-  await hideLoader();
+  await fetchListDisciplinary();
 });
 </script>
 

src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue

@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<ResponseData[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+  "dateText",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    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: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2: String,
+
+  type: String,
+});
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.transferReport, body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+  "update:type",
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+
+const updateInputType = (value: any) => {
+  emit("update:type", value);
+};
+
+//----(ดึงข้อมูลประเภทคำสั่ง)------//
+const optionsType = ref<[]>([]);
+const fecthTypeOption = async () => {
+  showLoader();
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: OpType) =>
+          e.commandCode === "C-PM-25" || e.commandCode === "C-PM-26"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+
+onMounted(async () => {
+  await fecthTypeOption();
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select
+                outlined
+                dense
+                :model-value="type"
+                @update:model-value="updateInputType"
+                :options="optionsType"
+                label="ประเภทคำสั่ง"
+                style="width: 400px; max-width: auto"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-toolbar>
+          </div>
+
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="dateText" :props="props">
+                {{ props.row.dateText }}
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
+import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
+import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
+import FormResult from "@/modules/11_discipline/components/4_Result/Form.vue"; // สอบสวนความผิดทางวินัย
+import type { FormData } from "@/modules/11_discipline/interface/request/result";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
+import { useQuasar } from "quasar";
+import DialogSendToCommand from "@/modules/11_discipline/components/4_Result/DialogSendToCommand.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = useDisciplineResultStore();
+const { dialogConfirm } = mixin;
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const type = ref<string>("");
+
+/** ข้อมูล v-model ของฟอร์ม */
+const data = reactive<FormData>({
+  detail: "",
+});
+
+/** จำลองข้อมูลจาก api */
+const fetchData = async () => {
+  data.detail = "";
+};
+
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+const onSubmit = async (id: string) => {
+  console.log("edit");
+  router.push(`/discipline-result`);
+};
+
+const modal = ref<boolean>(false);
+const filterKeyword = ref<string>("");
+/** ฟังชั่นปิด dialog */
+function closeModal() {
+  modal.value = false;
+}
+
+function getData() {}
+
+/** ยืนยัน ส่งไปออกคำสั่ง */
+function sentIssue() {
+  modal.value = true;
+  // dialogConfirm(
+  //   $q,
+  //   () => {
+  //     console.log("sent api ออกคำสั่ง");
+  //   },
+  //   "ยืนยันส่งไปออกคำสั่ง",
+  //   "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  // );
+}
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  store.tabMenu = "result";
+  await fetchData();
+});
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline-result`)"
+      />
+      <div class="q-ma-none">แก้ไขผลการพิจารณาทางวินัย</div>
+      <q-space />
+      <div class="q-gutter-x-sm">
+        <q-btn label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
+      </div>
+    </div>
+    <q-card flat class="col-12">
+      <q-tabs
+        v-model="store.tabMenu"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="complaints" label="เรื่องร้องเรียน" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
+        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
+        <q-tab name="result" label="ผลการพิจารณาทางวินัย" />
+      </q-tabs>
+      <q-separator />
+      <q-tab-panels v-model="store.tabMenu" animated>
+        <q-tab-panel name="complaints">
+          <FormComplaints :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+        <q-tab-panel name="investigatefacts">
+          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+        <q-tab-panel name="disciplinary">
+          <FormDisciplinary :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+        <q-tab-panel name="result">
+          <FormResult :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
+  </div>
+
+  <DialogSendToCommand
+    v-model:Modal="modal"
+    :closeModal="closeModal"
+    :rows2="[]"
+    v-model:filterKeyword2="filterKeyword"
+    :getData="getData"
+    v-model:type="type"
+  />
+</template>
+
+<style scoped>
+.q-tab-panel {
+  padding: 0;
+  background-color: #f0f3f3;
+}
+</style>

src/modules/11_discipline/components/4_Result/Form.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/11_discipline/interface/request/result";
+
+const investigateDis = useInvestigateDisStore();
+const { fecthDirector } = investigateDis;
+
+const mixin = useCounterMixin();
+const { date2Thai, hideLoader, dialogConfirm } = mixin;
+const router = useRouter();
+const route = useRoute();
+
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const detailRef = ref<Object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formData = reactive<FormData>({
+  detail: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectdisciplinary: FormRef = {
+  detail: detailRef,
+};
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectdisciplinary) {
+    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
+      const property = objectdisciplinary[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log(hasError);
+  }
+}
+
+/**
+ * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
+ * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
+ * หากยกเลิกจะกลับไปหน้าฟอร์ม
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+async function fetchDatadetail() {
+  formData.detail = props.data.detail;
+}
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
+watch(props.data, async () => {
+  fetchDatadetail();
+});
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {
+  await fetchDatadetail();
+});
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <form @submit.prevent="validateForm">
+      <div class="col-12">
+        <q-card>
+          <div class="col-12 row q-pa-md">
+            <div class="col-12 row q-col-gutter-md">
+              <q-input
+                type="textarea"
+                class="col-12"
+                dense
+                outlined
+                ref="detailRef"
+                v-model="formData.detail"
+                for="#detail"
+                label="สรุปผลการพิจารณา"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                lazy-rules
+              />
+            </div>
+          </div>
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              for="ButtonOnSubmit"
+              id="formSubmit"
+              color="secondary"
+              label="บันทึก"
+              type="submit"
+              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+            >
+          </div>
+        </q-card>
+      </div>
+    </form>
+  </div>
+</template>

src/modules/11_discipline/components/4_Result/MainPage.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+const filter = ref<string>(""); //search data table
+const mixin = useCounterMixin();
+const dataInvestigateDis = useDisciplineResultStore();
+const { showLoader, hideLoader } = mixin;
+const { fecthList } = dataInvestigateDis;
+
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+/**
+ * ไปหน้าแก้ไข
+ * @param id ไอดีเฉพาะ รายบุคคล
+ */
+function openEdit(id: string) {
+  console.log(id);
+  router.push(`/discipline-result/${id}`);
+}
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {
+  showLoader();
+  fecthList([
+    {
+      id: "001",
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ศิรินภา คงน้อยี่",
+      fault: "1",
+      penaltyLevel: "7",
+      caseFault: "ทุจริตในหน้าที่",
+      dateInvestigate: "2023-12-01",
+      status: "0",
+      active: "2",
+    },
+    {
+      id: "002",
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ภัทรานุช คงน้อย",
+      fault: "1",
+      penaltyLevel: "7",
+      caseFault: "ทุจริตในหน้าที่",
+      dateInvestigate: "2023-11-30",
+      status: "0",
+      active: "0",
+    },
+    {
+      id: "003",
+      subject: "กระทำทุจริตเงินกองทุน",
+      interrogated: "ปรมาพร ศรีมี",
+      fault: "2",
+      penaltyLevel: "1",
+      caseFault: "พบการทุจริต",
+      dateInvestigate: "2023-09-14",
+      status: "1",
+      active: "1",
+    },
+  ]);
+  await hideLoader();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผลการพิจารณาทางวินัย
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="dataInvestigateDis.rows"
+        :columns="dataInvestigateDis.columns"
+        :filter="filter"
+        :visible-columns="dataInvestigateDis.visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="dataInvestigateDis.visibleColumns"
+        :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"
+              @click="openEdit(props.row.id)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
+
+<style></style>

src/modules/11_discipline/components/4_Result/Table.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+</script>
+
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <!-- <q-btn
+        to="/discipline-result/add"
+        size="12px"
+        flat
+        round
+        color="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn> -->
+    </div>
+    <q-space />
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      :model-value="inputfilter"
+      ref="filterRef"
+      @update:model-value="updateInput"
+      outlined
+      debounce="300"
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <template v-slot:append>
+        <q-icon v-if="inputfilter == ''" name="search" />
+        <q-icon
+          v-if="inputfilter !== ''"
+          name="clear"
+          class="cursor-pointer"
+          @click="resetFilter"
+        />
+      </template>
+    </q-input>
+    <!-- แสดงคอลัมน์ใน table -->
+    <q-select
+      :model-value="inputvisible"
+      @update:model-value="updateVisible"
+      :display-value="$q.lang.table.columns"
+      multiple
+      outlined
+      dense
+      :options="attrs.columns"
+      options-dense
+      option-value="name"
+      map-options
+      emit-value
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+    </q-select>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <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" v-html="col.label" />
+        </q-th>
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </d-table>
+</template>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/11_discipline/components/UploadFile.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type { FileLists } from "@/modules/11_discipline/interface/index/Main";
+
+const fileRef = ref<Object | null>(null);
+const file = ref<any>();
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: "อัปโหลด",
+  },
+  label: {
+    type: String,
+    default: "ไฟล์เอกสาร",
+  },
+  files: {
+    type: Array as () => FileLists[],
+    default: [],
+  },
+  uploadType: {
+    type: String,
+    required: true,
+    default: "support",
+  },
+});
+
+/**
+ * อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
+ */
+function uploadFile() {
+  //   const Data = new FormData();
+  //   Data.append("file", file.value);
+  //   showLoader();
+  //   http
+  //     .put(config.API.complaintFileUpload(props.id), Data)
+  //     .then((res) => {
+  //       console.log(res);
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+}
+function removeFile(id: string) {
+  console.log(id);
+}
+</script>
+
+<template>
+  <q-card flat class="q-pa-md q-mt-sm">
+    <div class="col-12 row q-col-gutter-md">
+      <div class="row col-12">
+        <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            {{ title }}
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-12 q-pa-sm row">
+            <q-file
+              class="col-11 q-mt-sm"
+              outlined
+              dense
+              ref="fileRef"
+              for="#files"
+              v-model="file"
+              :label="label"
+              hide-bottom-space
+              lazy-rules
+              accept=".pdf,.xlsx,.doc"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+            </q-file>
+            <div class="col-1 self-center">
+              <q-btn
+                size="14px"
+                flat
+                round
+                dense
+                color="add"
+                class="q-ml-sm q-mt-sm"
+                icon="mdi-upload"
+                @click="uploadFile()"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+
+          <div class="col-xs-12 q-pa-sm row">
+            <q-list
+              v-if="props.files.length > 0"
+              bordered
+              separator
+              class="full-width"
+            >
+              <q-item
+                v-for="(f, index) in props.files"
+                :key="index"
+                clickable
+                v-ripple
+              >
+                <q-item-section>{{ f.fileName }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        size="12px"
+                        color="blue"
+                        icon="mdi-download-outline"
+                        @href="f.pathName"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        size="12px"
+                        color="red"
+                        icon="mdi-delete-outline"
+                        @click="removeFile(f.id)"
+                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </q-card>
+</template>