Merge branch 'develop' into devTee

src/modules/03_recruiting/components/TableCandidate.vue

@@ -1,19 +1,51 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <q-card bordered flat class="col-12 row q-py-sm items-center bg-grey-1" v-show="statusPayment">
+    <q-card
+      bordered
+      flat
+      class="col-12 row q-py-sm items-center bg-grey-1"
+      v-show="statusPayment"
+    >
       <div class="col-12 row q-col-gutter-sm">
         <span class="text-subtitle1">{{ titleText }}</span>
-        <q-select dense outlined :model-value="inputvisibleFilter" :options="optionsFilter" option-value="id"
+        <q-select
-          option-label="name" map-options class="col-xs-12 col-sm-3" label="สถานะ" emit-value
+          dense
-          @update:model-value="updateVisibleFilter" v-if="optionsFilter != undefined && optionsFilter.length > 0" />
+          outlined
-        <q-file v-model="files" dense :label="setSeat == false ? 'อัปโหลดที่นั่งสอบ' : 'อัปโหลดคะแนนสอบ'" outlined
+          :model-value="inputvisibleFilter"
-          use-chips multiple class="col-xs-12 col-sm-4" v-if="statusPayment">
+          :options="optionsFilter"
+          option-value="id"
+          option-label="name"
+          map-options
+          class="col-xs-12 col-sm-3"
+          label="สถานะ"
+          emit-value
+          @update:model-value="updateVisibleFilter"
+          v-if="optionsFilter != undefined && optionsFilter.length > 0"
+        />
+        <q-file
+          v-model="files"
+          dense
+          :label="setSeat == false ? 'อัปโหลดที่นั่งสอบ' : 'อัปโหลดคะแนนสอบ'"
+          outlined
+          use-chips
+          multiple
+          class="col-xs-12 col-sm-4"
+          v-if="statusPayment"
+        >
           <template v-slot:prepend>
             <q-icon name="attach_file" color="blue" />
           </template>
         </q-file>
         <div>
-          <q-btn size="md" icon="mdi-upload" round flat color="blue" v-if="statusPayment" @click="uploadFile">
+          <q-btn
+            size="md"
+            icon="mdi-upload"
+            round
+            flat
+            color="blue"
+            v-if="statusPayment"
+            @click="uploadFile"
+          >
             <q-tooltip v-if="setSeat == false">อัปโหลดที่นั่งสอบ</q-tooltip>
             <q-tooltip v-if="setSeat == true">อัปโหลดคะแนนสอบ</q-tooltip>
           </q-btn>
@@ -22,15 +54,33 @@
     </q-card>
     <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
       <div class="col-xs-12 col-sm-3" v-show="!statusPayment">
-        <q-select dense outlined :model-value="inputvisibleFilter" :options="optionsFilter" option-value="id"
+        <q-select
-          option-label="name" map-options class="" label="สถานะ" emit-value @update:model-value="updateVisibleFilter"
+          dense
-          v-if="optionsFilter != undefined && optionsFilter.length > 0" />
+          outlined
+          :model-value="inputvisibleFilter"
+          :options="optionsFilter"
+          option-value="id"
+          option-label="name"
+          map-options
+          class=""
+          label="สถานะ"
+          emit-value
+          @update:model-value="updateVisibleFilter"
+          v-if="optionsFilter != undefined && optionsFilter.length > 0"
+        />
       </div>
       <div>
-        <q-btn size="md" icon="mdi-playlist-check" round flat color="primary" @click="candidateCheckProfileDialog"
+        <q-btn
+          size="md"
+          icon="mdi-playlist-check"
+          round
+          flat
+          color="primary"
+          @click="candidateCheckProfileDialog"
           :disabled="attrs.rows.filter((r: any) => r.status == 'checkRegister').length == 0 ||
             selected.length == 0
-            ">
+            "
+        >
           <q-tooltip>ตรวจสอบข้อมูล/ได้รับใบสมัครแล้ว</q-tooltip>
         </q-btn>
       </div>
@@ -42,11 +92,21 @@
               <q-item clickable v-close-popup @click="downloadFileDashboard">
                 <q-item-section>ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-item-section>
               </q-item>
-              <q-item clickable v-close-popup @click.stop.prevent="clickCandidateList()">
+              <q-item
+                clickable
+                v-close-popup
+                @click.stop.prevent="clickCandidateList()"
+              >
                 <q-item-section>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-item-section>
               </q-item>
-              <q-item clickable v-close-popup @click.stop.prevent="clickPassExam()">
+              <q-item
-                <q-item-section>ดาวน์โหลดรายชื่อผู้สอบคัดเลือกได้</q-item-section>
+                clickable
+                v-close-popup
+                @click.stop.prevent="clickPassExam()"
+              >
+                <q-item-section
+                  >ดาวน์โหลดรายชื่อผู้สอบคัดเลือกได้</q-item-section
+                >
               </q-item>
               <q-item clickable v-close-popup @click="downloadFile()">
                 <q-item-section>ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section>
@@ -59,8 +119,15 @@
         </q-btn>
       </div>
       <div>
-        <q-btn size="md" icon="mdi-content-save-move-outline" round flat color="indigo"
+        <q-btn
-          v-if="statusPayment && setSeat == true" @click="candidateToPlacement">
+          size="md"
+          icon="mdi-content-save-move-outline"
+          round
+          flat
+          color="indigo"
+          v-if="statusPayment && setSeat == true"
+          @click="candidateToPlacement"
+        >
           <q-tooltip>บรรจุผู้ผ่านการคัดเลือก</q-tooltip>
         </q-btn>
       </div>
@@ -68,29 +135,77 @@
       <div class="items-center gt-xs" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
         <!-- @keydown.enter.prevent:model-value="updateInput" -->
-        <q-input :model-value="inputfilter" @keydown.enter.prevent="submitInput" @update:model-value="updateInput"
+        <q-input
-          ref="filterRef" standout dense outlined debounce="300" placeholder="ค้นหา" style="max-width: 200px"
+          :model-value="inputfilter"
-          class="q-ml-sm">
+          @keydown.enter.prevent="submitInput"
+          @update:model-value="updateInput"
+          ref="filterRef"
+          standout
+          dense
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <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"
+        <q-select
-          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+          :model-value="inputvisible"
-          style="min-width: 150px" class="q-ml-sm" />
+          @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
+          style="min-width: 150px"
+          class="q-ml-sm"
+        />
       </div>
     </div>
 
-    <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
+    <q-table
-      :virtual-scroll-sticky-size-start="48" dense :pagination="initialPagination"
+      ref="table"
-      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []" row-key="id" selection="multiple"
+      flat
-      v-model:selected="selected" @update:pagination="updatePagination" :filter="false">
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination="initialPagination"
+      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+      row-key="id"
+      selection="multiple"
+      v-model:selected="selected"
+      @update:pagination="updatePagination"
+      :filter="false"
+    >
       <template v-slot:pagination="scope">
         ทั้งหมด {{ props.total }} รายการ
-        <q-pagination v-model="currentPage" active-color="primary" color="dark" :max-pages="5" size="sm" boundary-links
+        <q-pagination
-          direction-links :max="props.maxPage < 1 ? 1 : props.maxPage"></q-pagination>
+          v-model="currentPage"
+          active-color="primary"
+          color="dark"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+          :max="Number(props.maxPage)"
+        ></q-pagination>
       </template>
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -101,8 +216,12 @@
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
-          <q-th auto-width v-if="editvisible == true || nextPageVisible == true || history == true
+          <q-th
-            " />
+            auto-width
+            v-if="
+              editvisible == true || nextPageVisible == true || history == true
+            "
+          />
         </q-tr>
       </template>
       <template #body="props">
@@ -168,19 +287,19 @@ const props = defineProps({
   },
   pageSize: {
     type: Number,
-    defualt: 25
+    defualt: 25,
   },
   page: {
     type: Number,
-    defualt: 1
+    defualt: 1,
   },
   maxPage: {
     type: Number,
-    defualt: 1
+    defualt: 1,
   },
   total: {
     type: Number,
-    defualt: 0
+    defualt: 0,
   },
   nornmalData: {
     type: Boolean,
@@ -232,17 +351,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  changePage: {
-    type: Function,
-    default: () => console.log("not function"),
-  }
-});
-
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1)
-watch(currentPage, () => {
-  console.log(currentPage.value)
-  props.changePage(currentPage.value, props.pageSize, true);
 });
 
 // Pagination - initial pagination
@@ -253,10 +361,24 @@ const initialPagination = ref<any>({
   rowsPerPage: props.pageSize,
 });
 
-// Pagination - update rowsPerPage 
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1);
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    emit(
+      "update:change-page",
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      true
+    );
+  }
+);
+
+// Pagination - update rowsPerPage
 async function updatePagination(newPagination: any) {
-  props.changePage(1, newPagination.rowsPerPage, true);
+  initialPagination.value = newPagination;
-  initialPagination.value = newPagination
+  currentPage.value = 1;
 }
 
 const emit = defineEmits([
@@ -265,6 +387,7 @@ const emit = defineEmits([
   "update:editvisible",
   "update:titleText",
   "update:inputvisibleFilter",
+  "update:change-page",
 ]);
 
 const updateInput = async (value: any) => {
@@ -274,8 +397,8 @@ const updateInput = async (value: any) => {
 // search & get new data by keyword
 const submitInput = () => {
   setTimeout(() => {
-    props.changePage(1, props.pageSize);
+    emit("update:change-page", 1, initialPagination.value.rowsPerPage);
-    currentPage.value = 1
+    currentPage.value = 1;
   }, 500);
 };
 
@@ -326,8 +449,8 @@ const candidateToPlacement = async () => {
           router.go(-1);
         });
     })
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const uploadDataSeat = async () => {
@@ -490,8 +613,8 @@ const resetFilter = () => {
   filterRef.value.focus();
 
   // clear keyword & get new data
-  props.changePage(1, props.pageSize);
+  emit("update:change-page", 1, initialPagination.value.rowsPerPage);
-  currentPage.value = 1
+  currentPage.value = 1;
 };
 
 const downloadFileDashboard = async () => {

src/modules/03_recruiting/views/02_qualify/manageDetail.vue

@@ -1,16 +1,35 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
     {{ name }}
     {{
-      `ครั้งที่${round == null ? "" : round}/${yearly == null ? "" : yearly + 543
+      `ครั้งที่${round == null ? "" : round}/${
-        }`
+        yearly == null ? "" : yearly + 543
+      }`
     }}
     <q-space />
-    <q-btn @click="visible = !visible" dense round size="13px" :style="visible == false
+    <q-btn
+      @click="visible = !visible"
+      dense
+      round
+      size="13px"
+      :style="
+        visible == false
           ? 'transform: rotate(90deg);transition-duration: 0.8s;'
           : 'transform: rotate(0);transition-duration: 0.8s;'
-        " icon="mdi-pin" flat></q-btn>
+      "
+      icon="mdi-pin"
+      flat
+    ></q-btn>
   </div>
   <q-slide-transition>
     <q-card class="row col-12 q-mb-sm" v-show="visible">
@@ -20,16 +39,23 @@
           <div class="col-12 row">
             <div class="col-12">
               <div class="row col-12 q-col-gutter-sm fit">
-                <div style="width: 25%" v-for="(num, index) in dataNum" :key="index">
+                <div
+                  style="width: 25%"
+                  v-for="(num, index) in dataNum"
+                  :key="index"
+                >
                   <q-card bordered flat class="row fit cardNum items-center">
                     <div class="col-12 row items-center q-pa-sm">
-                      <div :class="'col-12 text-h5 text-weight-bold text-' +
+                      <div
-                        `${num.color}`
+                        :class="
-                        ">
+                          'col-12 text-h5 text-weight-bold text-' +
+                          `${num.color}`
+                        "
+                      >
                         {{
                           num.count != null
-                          ? num.count.toLocaleString("en-US")
+                            ? num.count.toLocaleString("en-US")
-                          : ""
+                            : ""
                         }}
                       </div>
                       <div class="col-12 text-dark ellipsis">
@@ -46,27 +72,57 @@
     </q-card>
   </q-slide-transition>
   <q-card flat bordered class="col-12 q-pt-sm">
-    <TableCandidate style="max-height: 80vh" :rows="rows" :columns="columns" :filter="filter"
+    <TableCandidate
-      :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+      style="max-height: 80vh"
-      v-model:inputvisibleFilter="status" v-model:optionsFilter="optionsStatus" :nornmalData="true" :paging="true"
+      :rows="rows"
-      :titleText="''" :statusPayment="statusPayment" :setSeat="setSeat" :fetchData="fetchDataCom" :history="true"
+      :columns="columns"
-      :page-size="pageSize" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:inputvisibleFilter="status"
+      v-model:optionsFilter="optionsStatus"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      :statusPayment="statusPayment"
+      :setSeat="setSeat"
+      :fetchData="fetchDataCom"
+      :history="true"
+      :page-size="pageSize"
+      :total="total"
+      :page="page"
+      @update:change-page="changePage"
+      :max-page="maxPage"
+    >
       <template #columns="props">
         <q-tr :props="props" class="cursor-pointer">
           <q-td auto-width>
             <q-checkbox v-model="props.selected" />
           </q-td>
-          <q-td v-for="col in props.cols" :key="col.name" :props="props"
+          <q-td
-            @click="viewDetail(props.row.id, props.row.status)">
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="viewDetail(props.row.id, props.row.status)"
+          >
             <div v-if="col.name == 'no'" class="table_ellipsis">
-              {{ ((page-1) * pageSize) + props.rowIndex + 1 }}
+              {{ (page - 1) * pageSize + props.rowIndex + 1 }}
             </div>
             <div v-else-if="col.name == 'fullname'">
               <div class="row col-12 items-center">
-                <img v-if="props.row.avatar == ''" src="@/assets/avatar_user.jpg" class="q-mr-sm col-4"
+                <img
-                  style="width: 28px; height: 28px; border-radius: 50%" />
+                  v-if="props.row.avatar == ''"
-                <img v-else :src="props.row.avatar" class="q-mr-sm col-4"
+                  src="@/assets/avatar_user.jpg"
-                  style="width: 28px; height: 28px; border-radius: 50%" />
+                  class="q-mr-sm col-4"
+                  style="width: 28px; height: 28px; border-radius: 50%"
+                />
+                <img
+                  v-else
+                  :src="props.row.avatar"
+                  class="q-mr-sm col-4"
+                  style="width: 28px; height: 28px; border-radius: 50%"
+                />
                 <div class="col-4">
                   <div class="text-weight-medium">
                     {{ props.row.fullname }}
@@ -99,13 +155,17 @@
                 </div>
               </div>
             </div>
-            <div v-else-if="col.name == 'status'" :class="props.row.status == 'checkRegister' ||
+            <div
-              props.row.status == 'checkPayment' ||
+              v-else-if="col.name == 'status'"
-              props.row.status == 'checkSeat' ||
+              :class="
-              props.row.status == 'checkPoint'
+                props.row.status == 'checkRegister' ||
-              ? 'text-blue'
+                props.row.status == 'checkPayment' ||
-              : ''
+                props.row.status == 'checkSeat' ||
-              ">
+                props.row.status == 'checkPoint'
+                  ? 'text-blue'
+                  : ''
+              "
+            >
               {{ statusCandidate(props.row.status) }}
             </div>
             <div v-else-if="col.name == 'registerDate'" class="table_ellipsis">
@@ -116,8 +176,16 @@
             </div>
           </q-td>
           <q-td auto-width>
-            <q-btn color="primary" flat dense round size="14px" icon="mdi-file-chart-outline"
+            <q-btn
-              v-if="props.row.status == 'done'" @click="clickPointRow(props.row)">
+              color="primary"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-chart-outline"
+              v-if="props.row.status == 'done'"
+              @click="clickPointRow(props.row)"
+            >
               <q-tooltip>ผลสอบ</q-tooltip>
             </q-btn>
           </q-td>
@@ -130,7 +198,14 @@
       <q-card-section class="row items-center q-py-sm">
         <div class="text-bold">ใบทานสอบข้อมูล</div>
         <q-space />
-        <q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
       </q-card-section>
       <q-separator />
       <q-card-section class="row items-center">
@@ -394,25 +469,34 @@ const fetchDataCom = async () => {
 };
 
 // paging
-const page = ref<number>(1)
+const page = ref<number>(1);
-const pageSize = ref<number>(25)
+const pageSize = ref<number>(25);
-const total = ref<number>(0)
+const total = ref<number>(0);
-const maxPage = ref<number>(1)
+const maxPage = ref<number>(1);
 
-async function changePage(pageVal: number, pageSizeVal: number, loading: boolean = false) {
+async function changePage(
-  page.value = await pageVal
+  pageVal: number,
-  pageSize.value = await pageSizeVal
+  pageSizeVal: number,
-  fetchData(loading)
+  loading: boolean = false
+) {
+  page.value = await pageVal;
+  pageSize.value = await pageSizeVal;
+  fetchData(loading);
 }
 
 const fetchData = async (loading: boolean = true) => {
-  loading === true ?? showLoader()
+  loading === true ?? showLoader();
   await http
-    .get(config.API.candidateOfPeriodExam(status.value, examId.value) + `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`)
+    .get(
+      config.API.candidateOfPeriodExam(status.value, examId.value) +
+        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+    )
     .then(async (res) => {
       const data = res.data.result;
-      total.value = data.total
+      total.value = data.total;
-      maxPage.value = await Math.ceil(data.total / pageSize.value)
+      maxPage.value = await Math.ceil(data.total / pageSize.value);
+      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
+
       rows.value = [];
       data.data.map((r: any) => {
         rows.value.push({

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(
+  modalPopup.value = true;
-    $q,
+  // dialogConfirm(
-    () => confirmSentInvestigate(),
+  //   $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>

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

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+
+const $q = useQuasar();
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+const complainstStore = useComplainstDataStore();
+
+const mixin = useCounterMixin();
+const { dialogConfirm, success } = mixin;
+
+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>([]);
+const inspectionResults = ref<string>("");
+const inputRef = ref<any>(null);
+
+function onclickSend() {
+  inputRef.value.validate();
+  if (!inputRef.value.hasError) {
+    dialogConfirm(
+      $q,
+      async () => {
+        success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ");
+        console.log(selected.value);
+
+        props.close?.();
+      },
+      "ยืนยันการส่งไปสืบสวน",
+      "ต้องการยืนยันการส่งไปสืบสวนหรือไม่"
+    );
+  }
+}
+
+function onClickClose() {
+  props.close?.();
+}
+
+watch([() => props.modal], () => {
+  inspectionResults.value = props.modal ? "" : "";
+  selected.value.push(complainstStore.rowsAdd);
+});
+</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"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.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="props.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">
+          <q-input
+            for="inputInspectionResults"
+            ref="inputRef"
+            dense
+            outlined
+            hide-bottom-space
+            v-model="inspectionResults"
+            :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" @click="onclickSend" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -152,7 +152,7 @@ onMounted(() => {
         />
       </div>
     </div>
-    <q-card flat bordered class="col-12">
+    <q-card flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
@@ -180,3 +180,9 @@ onMounted(() => {
     <!-- <Form :on-submit="onSubmit" :data="data" /> -->
   </div>
 </template>
+<style scoped>
+.q-tab-panel {
+  padding: 0;
+  background-color: #f0f3f3;
+}
+</style>

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import router from "@/router";
+import { useRouter, useRoute } from "vue-router";
-import { onMounted, ref, watch, reactive } from "vue";
+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,
@@ -11,12 +14,14 @@ import type {
 import { diffDates } from "@fullcalendar/core/internal";
 
 const $q = useQuasar();
+const route = useRoute();
 
 /**เรียกใช้ store */
 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);
@@ -49,6 +54,8 @@ const props = defineProps({
   },
 });
 
+const filter = ref<string>("");
+
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
@@ -67,6 +74,7 @@ const formData = reactive<FormData>({
   causeText: "",
   complaintStatus: "",
 });
+const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectInvestigate: MyObjectInvestigateRef = {
@@ -85,6 +93,14 @@ 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() {
   const hasError = [];
@@ -151,8 +167,23 @@ 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);
 });
 
 /**
@@ -181,11 +212,11 @@ watch(props.data, async () => {
 });
 </script>
 <template>
-  <q-card flat bordered class="q-mt-sm">
+  <q-card flat class="q-mt-sm">
     <form @submit.prevent="validateForm">
       <div class="q-pa-md q-col-gutter-md">
         <div class="col-xs-12 row items-center q-col-gutter-md">
-          <div class="col-6">
+          <!-- <div class="col-6">
             <q-select
               for="#fault"
               outlined
@@ -212,9 +243,9 @@ watch(props.data, async () => {
                 </q-item>
               </template>
             </q-select>
-          </div>
+          </div> -->
 
-          <div class="col-3">
+          <!-- <div class="col-3">
             <q-select
               for="#fault"
               outlined
@@ -241,10 +272,12 @@ watch(props.data, async () => {
                 </q-item>
               </template>
             </q-select>
-          </div>
+          </div> -->
 
           <div class="col-3">
             <q-select
+              :readonly="statusStep"
+              :disable="statusStep"
               for="#investigation"
               outlined
               hide-bottom-space
@@ -301,7 +334,7 @@ watch(props.data, async () => {
             >
               วันที่สืบสวน
               <q-checkbox
-                v-if="data != null"
+                v-if="formData.clickTime != null && statusStep === false"
                 for="#clickTime"
                 size="md"
                 v-model="formData.clickTime"
@@ -318,7 +351,7 @@ watch(props.data, async () => {
                 <div class="col-3" v-if="!formData.clickTime">
                   <datepicker
                     menu-class-name="modalfix"
-                    :readonly="isUpdate"
+                    :readonly="isUpdate && statusStep"
                     v-model="formData.date"
                     :locale="'th'"
                     autoApply
@@ -334,7 +367,7 @@ watch(props.data, async () => {
                         for="#date"
                         class="full-width cursor-pointer"
                         ref="dateRef"
-                        :readonly="isUpdate"
+                        :readonly="statusStep && isUpdate"
                         outlined
                         dense
                         lazy-rules
@@ -345,9 +378,9 @@ watch(props.data, async () => {
                         "
                         :rules="[
                           (val) =>
-                            !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                            !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
                         ]"
-                        :label="`${'วันที่เริ่มการสอบสวน'}`"
+                        :label="`${'วันที่เริ่มการสืบสวน'}`"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -399,7 +432,7 @@ watch(props.data, async () => {
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.dateEnd"
-                    :readonly="isUpdate"
+                    :readonly="statusStep && isUpdate"
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
@@ -414,7 +447,7 @@ watch(props.data, async () => {
                         for="#dateEnd"
                         ref="dateEndRef"
                         class="full-width cursor-pointer"
-                        :readonly="isUpdate"
+                        :readonly="statusStep && isUpdate"
                         outlined
                         dense
                         lazy-rules
@@ -425,9 +458,9 @@ watch(props.data, async () => {
                         "
                         :rules="[
                           (val) =>
-                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
                         ]"
-                        :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                        :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -446,7 +479,75 @@ watch(props.data, async () => {
           </q-card>
         </div>
 
-        <div class="col-12">
+        <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"
             class="full-width cursor-pointer"
@@ -463,9 +564,9 @@ watch(props.data, async () => {
             :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
             type="textarea"
           />
-        </div>
+        </div> -->
 
-        <div class="col-12">
+        <!-- <div class="col-12">
           <q-file
             for="#fileComplaint"
             outlined
@@ -481,7 +582,7 @@ watch(props.data, async () => {
               <q-icon name="attach_file" color="primary" />
             </template>
           </q-file>
-        </div>
+        </div> -->
 
         <div class="col-12">
           <q-input
@@ -500,30 +601,13 @@ watch(props.data, async () => {
           />
         </div>
 
-        <div class="col-12">
-          <q-file
-            for="#evidenceFiles"
-            outlined
-            dense
-            ref="evidenceFilesRef"
-            v-model="formData.evidenceFiles"
-            label="ไฟล์เอกสารหลักฐาน"
-            lazy-rules
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-
         <div class="row col-12 q-col-gutter-md">
           <div class="col-3">
             <q-select
               for="#fault"
               outlined
               dense
+              :readonly="statusStep"
               lazy-rules
               ref="statusResultRef"
               v-model="formData.statusResult"
@@ -578,14 +662,99 @@ watch(props.data, async () => {
       <q-separator />
       <div class="row col-12 q-pa-sm">
         <q-space />
-        <q-btn
+        <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
-          id="onSubmit"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
-          type="submit"
-          label="ยืนยันผลการสืบสวน"
-          color="secondary"
-          ><q-tooltip>ยืนยันผลการสืบสวน</q-tooltip></q-btn
         >
       </div>
     </form>
   </q-card>
+  <div class="col-12 row q-col-gutter-md q-mt-sm">
+    <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"
+        >
+          อัปโหลดไฟล์เอกสารหลักฐาน
+        </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"
+            for="#evidenceFiles"
+            outlined
+            dense
+            ref="evidenceFilesRef"
+            v-model="formData.evidenceFiles"
+            label="ไฟล์เอกสารหลักฐาน"
+            lazy-rules
+            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </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"
+              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+            >
+          </div>
+        </div>
+        <div class="col-xs-12 q-pa-sm row">
+          <q-list bordered separator class="full-width">
+            <q-item
+              clickable
+              v-ripple
+              v-for="(file, index) in evidenceFiles"
+              :key="index"
+            >
+              <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+              <q-item-section avatar>
+                <div class="row">
+                  <div>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      size="12px"
+                      color="blue"
+                      icon="mdi-download-outline"
+                    >
+                      <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      size="12px"
+                      color="red"
+                      icon="mdi-delete-outline"
+                      ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+      </q-card>
+    </div>
+  </div>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    :clickClose="clickClose"
+    :rows2="investigateDis.rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    v-model:type="type"
+  />
 </template>

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

@@ -158,7 +158,7 @@ onMounted(async () => {
         />
       </div>
     </div>
-    <q-card flat bordered class="col-12">
+    <q-card flat  class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
@@ -176,10 +176,10 @@ onMounted(async () => {
       <q-separator />
       <q-tab-panels v-model="store.tabMenu" animated>
         <q-tab-panel name="complaints">
-          <FormComplaints :on-submit="onSubmit" />
+          <FormComplaints :on-submit="onSubmit" :data="data" />
         </q-tab-panel>
         <q-tab-panel name="investigatefacts">
-          <FormInvestigatefacts :on-submit="onSubmit" />
+          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
         </q-tab-panel>
         <q-tab-panel name="disciplinary">
           <FormDisciplinary :on-submit="onSubmit" :data="data" />
@@ -189,3 +189,10 @@ onMounted(async () => {
     <!-- <Form :on-submit="onSubmit" :data="data" /> -->
   </div>
 </template>
+
+<style scoped>
+.q-tab-panel {
+  padding: 0;
+  background-color: #f0f3f3;
+}
+</style>

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

@@ -88,12 +88,16 @@ const formData = reactive<FormData>({
   recordAccuser: "",
   witnesses: "",
   InvestResults: "",
-  complaintStatus:"",
+  complaintStatus: "",
   filesEvidence: null,
   filesRecordAccuser: null,
   filesWitnesses: null,
   filesEtc: null,
 });
+const filesEvidence = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesRecordAccuser = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesWitnesses = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesEtc = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: disciplinaryRef = {
@@ -156,6 +160,7 @@ async function fileUploadDoc(files: any) {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
+  console.log(fileDocDataUpload.value);
 }
 
 /**
@@ -230,6 +235,10 @@ watch(props.data, async () => {
   formData.filesEtc = props.data.filesEtc;
 });
 
+function uploadData() {
+  console.log("อัปโหลไฟล");
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -260,10 +269,10 @@ onMounted(async () => {
   <div class="col-xs-12 col-sm-12 col-md-11">
     <form @submit.prevent="validateForm">
       <div class="col-12">
-        <q-card bordered>
+        <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-12">
                 <q-select
                   for="#fault"
                   outlined
@@ -286,9 +295,9 @@ onMounted(async () => {
                     </q-item>
                   </template>
                 </q-select>
-              </div>
+              </div> -->
 
-              <datepicker
+              <!-- <datepicker
                 menu-class-name="modalfix"
                 v-model="dateInvestigate"
                 ref="dateInvestigateRef"
@@ -330,14 +339,14 @@ onMounted(async () => {
                     </template>
                   </q-input>
                 </template>
-              </datepicker>
+              </datepicker> -->
 
               <datepicker
                 menu-class-name="modalfix"
                 ref="dateAllegationRef"
                 for="#dateAllegation"
                 v-model="dateAllegation"
-                class="col-xs-12 col-sm-4"
+                class="col-xs-12 col-sm-6"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -384,7 +393,7 @@ onMounted(async () => {
                 v-model="dateEvident"
                 :locale="'th'"
                 autoApply
-                class="col-xs-12 col-sm-4"
+                class="col-xs-12 col-sm-6"
                 borderless
                 :enableTimePicker="false"
                 week-start="0"
@@ -499,7 +508,7 @@ onMounted(async () => {
                 </q-card>
               </div>
               <q-input
-                class="col-xs-12 col-sm-6"
+                class="col-xs-12 col-sm-3"
                 dense
                 outlined
                 ref="casefaultRef"
@@ -512,7 +521,7 @@ onMounted(async () => {
               />
 
               <q-input
-                class="col-xs-12 col-sm-6"
+                class="col-xs-12 col-sm-3"
                 dense
                 hide-bottom-space
                 outlined
@@ -524,7 +533,7 @@ onMounted(async () => {
                 lazy-rules
               />
 
-              <q-select
+              <!-- <q-select
                 dense
                 class="col-xs-12 col-sm-3"
                 outlined
@@ -538,7 +547,7 @@ onMounted(async () => {
                 hide-bottom-space
                 :options="investigateDis.optionsTypefault"
                 label="ลักษณะความผิด"
-              />
+              /> -->
 
               <q-select
                 dense
@@ -557,7 +566,7 @@ onMounted(async () => {
               />
 
               <q-input
-                class="col-xs-12 col-sm-6"
+                class="col-xs-12 col-sm-3"
                 dense
                 for="#refLaw"
                 hide-bottom-space
@@ -571,7 +580,7 @@ onMounted(async () => {
                 lazy-rules
               />
 
-              <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 outlined
@@ -582,9 +591,9 @@ onMounted(async () => {
                 label="รายละเอียดเรื่องร้องเรียน"
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
-              />
+              /> -->
 
-              <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 outlined
@@ -595,148 +604,49 @@ onMounted(async () => {
                 label="รายละเอียดสืบสวนข้อเท็จจริง"
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
+              /> -->
+
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                for="#evidence"
+                ref="evidenceRef"
+                hide-bottom-space
+                v-model="formData.evidence"
+                label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
               />
 
-              <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"
-                  >
-                    หลักฐานสนับสนุนข้อกล่าวหา
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <q-input
-                      class="col-12"
-                      dense
-                      outlined
-                      for="#evidence"
-                      ref="evidenceRef"
-                      hide-bottom-space
-                      v-model="formData.evidence"
-                      label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                      type="textarea"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                    />
-
-                    <q-file
-                      class="col-12 q-mt-sm"
-                      outlined
-                      dense
-                      ref="filesEvidenceRef"
-                      for="#filesEvidence"
-                      v-model="formData.filesEvidence"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.doc"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </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"
-                  >
-                    บันทึกถ้อยคำของผู้กล่าวหา
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <q-input
-                      class="col-12"
-                      dense
-                      outlined
-                      ref="recordAccuserRef"
-                      for="#recordAccuser"
-                      v-model="formData.recordAccuser"
-                      label="บันทึกถ้อยคำของผู้กล่าวหา"
-                      hide-bottom-space
-                      type="textarea"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                    />
-
-                    <q-file
-                      class="col-12 q-mt-sm"
-                      outlined
-                      dense
-                      ref="filesRecordAccuserRef"
-                      for="#filesRecordAccuser"
-                      v-model="formData.filesRecordAccuser"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.doc"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </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"
-                  >
-                    พยานและการบันทึกถ้อยคำ
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <q-input
-                      class="col-12"
-                      dense
-                      outlined
-                      for="#witnesses"
-                      ref="witnessesRef"
-                      v-model="formData.witnesses"
-                      label="พยานและการบันทึกถ้อยคำ"
-                      hide-bottom-space
-                      type="textarea"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                    />
-
-                    <q-file
-                      class="col-12 q-mt-sm"
-                      outlined
-                      dense
-                      ref="filesWitnessesRef"
-                      for="#filesWitnesses"
-                      v-model="formData.filesWitnesses"
-                      @added="fileUploadDoc"
-                      label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                      hide-bottom-space
-                      lazy-rules
-                      accept=".pdf,.xlsx,.doc"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </q-card>
-              </div>
               <q-input
-                class="col-12"
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                ref="recordAccuserRef"
+                for="#recordAccuser"
+                v-model="formData.recordAccuser"
+                label="บันทึกถ้อยคำของผู้กล่าวหา"
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+              />
+
+              <q-input
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                for="#witnesses"
+                ref="witnessesRef"
+                v-model="formData.witnesses"
+                label="พยานและการบันทึกถ้อยคำ"
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+              />
+
+              <q-input
+                class="col-xs-12 col-sm-6"
                 dense
                 outlined
                 for="#InvestResults"
@@ -747,24 +657,6 @@ onMounted(async () => {
                 type="textarea"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
               />
-
-              <q-file
-                class="col-12"
-                outlined
-                dense
-                ref="filesEtcRef"
-                for="#filesEtc"
-                v-model="formData.filesEtc"
-                @added="fileUploadDoc"
-                label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-                hide-bottom-space
-                lazy-rules
-                accept=".pdf,.xlsx,.doc"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
             </div>
           </div>
           <q-separator />
@@ -780,6 +672,356 @@ onMounted(async () => {
             >
           </div>
         </q-card>
+
+        <div class="col-12 row q-col-gutter-md q-mt-sm">
+          <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"
+              >
+                อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
+              </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="filesEvidenceRef"
+                  for="#filesEvidence"
+                  v-model="formData.filesEvidence"
+                  @added="fileUploadDoc"
+                  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"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesEvidence"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </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"
+              >
+                อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา
+              </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="filesRecordAccuserRef"
+                  for="#filesRecordAccuser"
+                  v-model="formData.filesRecordAccuser"
+                  @added="fileUploadDoc"
+                  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"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesRecordAccuser"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </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"
+              >
+                อัปโหลดพยานและการบันทึกถ้อยคำ
+              </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="filesWitnessesRef"
+                  for="#filesWitnesses"
+                  v-model="formData.filesWitnesses"
+                  @added="fileUploadDoc"
+                  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"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesWitnesses"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </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"
+              >
+                อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ
+              </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="filesEtcRef"
+                  for="#filesEtc"
+                  v-model="formData.filesEtc"
+                  @added="fileUploadDoc"
+                  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"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+              <div class="col-xs-12 q-pa-sm row">
+                <q-list bordered separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="(file, index) in filesEtc"
+                    :key="index"
+                  >
+                    <q-item-section>{{
+                      file.name + (index + 1)
+                    }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </q-card>
+          </div>
+        </div>
       </div>
     </form>
   </div>

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: "อื่นๆ" },
     ]);