Merge branch 'develop' into devTee

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -223,8 +223,8 @@ const clickSave = async () => {
 
 // ค้นหาคนจากเลขประจำตัวประชาชน
 const searchcardid = async () => {
-  showLoader();
   if (cardid.value.length === 13) {
+    showLoader();
     const node = await listPerson.value.find(
       (e: any) => e.citizenId === cardid.value
     );

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -14,24 +14,22 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, date2Thai } = mixin;
 const currentDate = ref<Date | null>(new Date());
-const startTimeMorningRef = ref<Object | null>(null);
+const checkInRef = ref<Object | null>(null);
-const endTimeMorningRef = ref<Object | null>(null);
+const checkOutRef = ref<Object | null>(null);
 const checkInStatusRef = ref<Object | null>(null);
 const checkOutStatusRef = ref<Object | null>(null);
 
 const formData = reactive<dataRowRound>({
-  startTimeMorning: "",
+  checkIn: "",
-  endTimeMorning: "",
+  checkOut: "",
-  startTimeAfternoon: "",
-  endTimeAfternoon: "",
   note: "",
   checkInStatus: "",
   checkOutStatus: "",
 });
 
 const objectRound: MyObjectRoundRef = {
-  startTimeMorning: startTimeMorningRef,
+  checkIn: checkInRef,
-  endTimeMorning: endTimeMorningRef,
+  checkOut: checkOutRef,
   checkInStatus: checkInStatusRef,
   checkOutStatus: checkOutStatusRef,
 };
@@ -81,17 +79,13 @@ watch(
   () => props.modal,
   (newDetailData, oldDetailData) => {
     if (props.editCheck === "APPROVE") {
-      formData.startTimeMorning = "";
+      formData.checkIn = "";
-      formData.endTimeMorning = "";
+      formData.checkOut = "";
-      formData.startTimeAfternoon = "";
-      formData.endTimeAfternoon = "";
       formData.note = "";
     } else if (props.editCheck === "PENDING") {
       if (props.detailData) {
-        formData.startTimeMorning = props.detailData.startTimeMorning;
+        formData.checkIn = props.detailData.checkIn;
-        formData.endTimeMorning = props.detailData.endTimeMorning;
+        formData.checkOut = props.detailData.checkOut;
-        formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
-        formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
         formData.note = props.detailData.note;
       }
     }
@@ -174,27 +168,21 @@ watch(
             <div class="row justify-between q-my-sm items-start">
               <p class="q-ma-none mt">เวลาเข้างาน</p>
               <q-input
-                ref="startTimeMorningRef"
+                ref="checkInRef"
                 class="inputgreen"
                 dense
                 lazy-rules
                 borderless
                 outlined
-                v-model="formData.startTimeMorning"
+                v-model="formData.checkIn"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val) => {
-                    if (val && formData.endTimeMorning) {
+                    if (val && formData.checkOut) {
-                      if (val > formData.endTimeMorning) {
+                      if (val > formData.checkOut) {
                         return 'ต้องน้อยกว่าเวลาออกงาน';
                       }
-                      if (
+                      if (val === formData.checkOut) {
-                        val >= formData.startTimeAfternoon &&
-                        val <= formData.endTimeAfternoon
-                      ) {
-                        return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
-                      }
-                      if (val === formData.endTimeMorning) {
                         return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
                       }
                     }
@@ -210,27 +198,21 @@ watch(
             <div class="row items-start q-my-sm justify-between">
               <p class="q-ma-none mt">เวลาออกงาน</p>
               <q-input
-                ref="endTimeMorningRef"
+                ref="checkOutRef"
                 class="inputgreen"
                 dense
-                v-model="formData.endTimeMorning"
+                v-model="formData.checkOut"
                 lazy-rules
                 borderless
                 outlined
                 :rules="[
                   (val) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val) => {
-                    if (val && formData.startTimeMorning) {
+                    if (val && formData.checkIn) {
-                      if (val < formData.startTimeMorning) {
+                      if (val < formData.checkIn) {
                         return 'ต้องมากกว่าเวลาเข้างาน';
                       }
-                      if (
+                      if (val === formData.checkIn) {
-                        val >= formData.startTimeAfternoon &&
-                        val <= formData.endTimeAfternoon
-                      ) {
-                        return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
-                      }
-                      if (val === formData.startTimeMorning) {
                         return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
                       }
                     }

src/modules/09_leave/interface/request/specialTime.ts

@@ -10,5 +10,7 @@ interface ListData {
   status: string;
   checkInStatus: string;
   checkOutStatus: string;
+  checkOut: string;
+  checkIn: string;
 }
 export type { ListData };

src/modules/09_leave/interface/response/specialTime.ts

@@ -8,17 +8,15 @@ interface DataRows {
   status: string;
 }
 interface dataRowRound {
-  startTimeMorning: string;
+  checkIn: string;
-  endTimeMorning: string;
+  checkOut: string;
-  startTimeAfternoon: string;
-  endTimeAfternoon: string;
   checkInStatus: string;
   checkOutStatus: string;
   note: string;
 }
 interface MyObjectRoundRef {
-  startTimeMorning: object | null;
+  checkIn: object | null;
-  endTimeMorning: object | null;
+  checkOut: object | null;
   checkInStatus: object | null;
   checkOutStatus: object | null;
   [key: string]: any;

src/modules/09_leave/stores/SpecialTimeStore.ts

@@ -31,6 +31,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
       endTimeMorning: e.endTimeMorning,
       startTimeAfternoon: e.startTimeAfternoon,
       endTimeAfternoon: e.endTimeAfternoon,
+      checkIn: e.checkOut,
+      checkOut: e.checkOut,
       status: e.status,
       checkInStatus: convertStatus(e.checkInStatus),
       checkOutStatus: convertStatus(e.checkOutStatus),

src/modules/09_leave/views/SpecialTimeMain.vue

@@ -76,6 +76,8 @@ onMounted(async () => {
       status: "PENDING",
       checkInStatus: "normal",
       checkOutStatus: "late",
+      checkIn: "08:00",
+      checkOut: "12.00",
     },
     {
       id: "00000000-0000-0000-0000-000000000000",
@@ -89,6 +91,8 @@ onMounted(async () => {
       status: "APPROVE",
       checkInStatus: "normal",
       checkOutStatus: "late",
+      checkIn: "08:00",
+      checkOut: "12.00",
     },
     {
       id: "00000000-0000-0000-0000-000000000000",
@@ -102,6 +106,8 @@ onMounted(async () => {
       status: "REJECT",
       checkInStatus: "normal",
       checkOutStatus: "late",
+      checkIn: "08:00",
+      checkOut: "12.00",
     },
   ]);
 });

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

@@ -228,7 +228,7 @@ watch(props.data, async () => {
       <form @submit.prevent="validateForm">
         <div class="col-12 row q-pa-md">
           <div
-            class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
+            class="col-xs-12 col-sm-12 row q-col-gutter-md"
           >
             <div class="col-xs-12 col-sm-3" id="complainantType">
               <q-select
@@ -243,6 +243,7 @@ watch(props.data, async () => {
                 option-label="name"
                 emit-value
                 map-options
+                hide-bottom-space
                 :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                 lazy-rules
                 @update:model-value="
@@ -278,6 +279,7 @@ watch(props.data, async () => {
                 label="รายชื่อจากทะเบียรประวัติ"
                 option-value="id"
                 option-label="name"
+                hide-bottom-space
                 emit-value
                 map-options
                 :rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
@@ -305,6 +307,7 @@ watch(props.data, async () => {
                 name="office"
                 ref="officeRef"
                 dense
+                hide-bottom-space
                 outlined
                 v-model="formData.office"
                 label="เลือกสำนักงาน"
@@ -323,6 +326,7 @@ watch(props.data, async () => {
                 label="หน่วยงานที่พิจารณา"
                 option-value="id"
                 option-label="name"
+                hide-bottom-space
                 emit-value
                 map-options
                 :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
@@ -347,6 +351,7 @@ watch(props.data, async () => {
                 ref="topicComplaintRef"
                 dense
                 outlined
+                hide-bottom-space
                 v-model="formData.topicComplaint"
                 :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                 lazy-rules
@@ -361,6 +366,7 @@ watch(props.data, async () => {
                 ref="detailRef"
                 dense
                 outlined
+                hide-bottom-space
                 v-model="formData.detail"
                 :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                 lazy-rules
@@ -391,6 +397,7 @@ watch(props.data, async () => {
                     ref="datereceiveRef"
                     outlined
                     dense
+                    hide-bottom-space
                     class="full-width datepicker"
                     :model-value="
                       formData.datereceive != null
@@ -428,6 +435,7 @@ watch(props.data, async () => {
                 option-value="id"
                 option-label="name"
                 emit-value
+                hide-bottom-space
                 map-options
                 :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
                 lazy-rules
@@ -464,6 +472,7 @@ watch(props.data, async () => {
                         : null
                     "
                     label="วันที่กำหนดวันพิจารณา"
+                    hide-bottom-space
                     :rules="[
                       (val) => !!val || `${'กรุณาเลือกวันที่กำหนดวันพิจารณา'}`,
                     ]"
@@ -493,6 +502,7 @@ watch(props.data, async () => {
                 option-value="id"
                 option-label="name"
                 emit-value
+                hide-bottom-space
                 map-options
                 :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
                 lazy-rules
@@ -521,6 +531,7 @@ watch(props.data, async () => {
                     ref="datewarnRef"
                     outlined
                     dense
+                    hide-bottom-space
                     class="full-width datepicker"
                     :model-value="
                       formData.datewarn != null
@@ -557,6 +568,7 @@ watch(props.data, async () => {
                 label="รับเรื่องร้องเรียน"
                 option-value="id"
                 option-label="name"
+                hide-bottom-space
                 emit-value
                 map-options
                 :rules="[(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`]"
@@ -573,16 +585,18 @@ watch(props.data, async () => {
                 label="ผู้ร้องเรียน"
                 :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
                 lazy-rules
+                hide-bottom-space
                 type="textarea"
                 rows="5"
               />
             </div>
-            <div class="col-xs-12 col-sm-6" id="files">
+            <div class="col-12" id="files">
               <q-file
                 for="inputFiles"
                 ref="filesRef"
                 outlined
                 dense
+                class="fit"
                 v-model="formData.files"
                 @added="fileUploadDoc"
                 label="ไฟล์เอกสารหลักฐาน"

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

@@ -117,341 +117,341 @@ watch(props.data, async () => {
 </script>
 <template>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="q-pa-md">
       <form @submit.prevent="validateForm">
-        <div class="row col-12">
+        <div class="q-pa-md">
-          <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center q-col-gutter-md">
-            <div class="col-xs-12 row items-center">
+            <div class="col-12">
-              <div class="col-12">
+              <q-input
-                <q-input
+                for="#complaint"
-                  for="#complaint"
+                class="full-width inputgreen cursor-pointer"
-                  class="full-width inputgreen cursor-pointer"
+                ref="complaintRef"
-                  ref="complaintRef"
+                outlined
-                  outlined
+                dense
-                  dense
+                lazy-rules
-                  lazy-rules
+                borderless
-                  borderless
+                v-model="formData.complaint"
-                  v-model="formData.complaint"
+                :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+                hide-bottom-space
-                  hide-bottom-space
+                :label="`${'เรื่องร้องเรียน'}`"
-                  :label="`${'เรื่องร้องเรียน'}`"
+                type="textarea"
-                  type="textarea"
+              />
-                />
+            </div>
-              </div>
+            <div class="col-6">
-              <div class="row no-wrap col-12">
+              <q-select
-                <div class="col-4 q-my-md q-mr-xs">
+                for="#fault"
-                  <q-select
+                outlined
-                    for="#fault"
+                dense
-                    outlined
+                ref="faultRef"
-                    dense
+                v-model="formData.fault"
-                    ref="faultRef"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-                    v-model="formData.fault"
+                :options="investigateFactStore.faultOp"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                label="ลักษณะความผิด"
-                    :options="investigateFactStore.faultOp"
+                emit-value
-                    label="ลักษณะความผิด"
+                map-options
-                    emit-value
+                option-label="name"
-                    map-options
+                option-value="id"
-                    option-label="name"
+                hide-bottom-space
-                    option-value="id"
+                use-input
-                    use-input
+                @filter="(inputValue: any,
-                    @filter="(inputValue: any,
+                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
+                )"
-            )"
+                ><template v-slot:no-option>
-                    ><template v-slot:no-option>
+                  <q-item>
-                      <q-item>
+                    <q-item-section class="text-grey">
-                        <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
-                          ไม่มีข้อมูล
+                    </q-item-section>
-                        </q-item-section>
+                  </q-item>
-                      </q-item>
+                </template>
-                    </template>
+              </q-select>
-                  </q-select>
+            </div>
-                </div>
+            <div class="col-6">
-                <div class="col-4 q-my-md q-mr-xs">
+              <q-select
-                  <q-select
+                for="#investigation"
-                    for="#investigation"
+                outlined
-                    outlined
+                dense
-                    dense
+                ref="investigationRef"
-                    ref="investigationRef"
+                :rules="[
-                    :rules="[
+                  (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
-                      (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
+                ]"
-                    ]"
+                v-model="formData.investigation"
-                    v-model="formData.investigation"
+                :options="investigateFactStore.investigationOp"
-                    :options="investigateFactStore.investigationOp"
+                label="ลักษณะการสืบสวน"
-                    label="ลักษณะการสืบสวน"
+                emit-value
-                    emit-value
+                map-options
-                    map-options
+                option-label="name"
-                    option-label="name"
+                option-value="id"
-                    option-value="id"
+                hide-bottom-space
-                    use-input
+                use-input
-                    @filter="(inputValue: any,
+                @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
+        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
-            )"
+        )"
-                    ><template v-slot:no-option>
+                ><template v-slot:no-option>
-                      <q-item>
+                  <q-item>
-                        <q-item-section class="text-grey">
+                    <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
+                      ไม่มีข้อมูล
-                        </q-item-section>
+                    </q-item-section>
-                      </q-item>
+                  </q-item>
-                    </template>
+                </template>
-                  </q-select>
+              </q-select>
-                </div>
+            </div>
-              </div>
+            <div
-              <div
+              v-if="formData.investigation === '003'"
-                v-if="formData.investigation === '003'"
+              class="col-12"
-                class="col-12 q-mb-md"
+            >
+              <q-input
+                for="#other"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                ref="otherRef"
+                dense
+                borderless
+                v-model="formData.other"
+                hide-bottom-space
+                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                type="textarea"
+                :rules="[
+                  (val) =>
+                    formData.investigation === '003'
+                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                      : true,
+                ]"
+              />
+            </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-sm q-px-md">
+                    วันที่สืบสวน
+                    <q-checkbox
+                      for="#clickTime"
+                      size="md"
+                      v-model="formData.clickTime"
+                      label="ขยายเวลา"
+                      color="primary"
+                      dense
+                      class="text-weight-medium q-ml-sm"
+                      keep-color
+                    />
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 col-sm-12 q-pa-sm row">
+                    <div v-if="formData.clickTime !== true" class="q-col-gutter-sm row">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="formData.date"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              for="#date"
+                              class="full-width inputgreen cursor-pointer"
+                              ref="dateRef"
+                              outlined
+                              dense
+                              lazy-rules
+                              borderless
+                              hide-bottom-space
+                              :model-value="
+                                formData.date ? date2Thai(formData.date) : null
+                              "
+                              :rules="[
+                                (val) =>
+                                  !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                              ]"
+                              :label="`${'วันที่เริ่มการสอบสวน'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="formData.dateEnd"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              for="#dateEnd"
+                              ref="dateEndRef"
+                              class="full-width inputgreen cursor-pointer"
+                              outlined
+                              dense
+                              lazy-rules
+                              hide-bottom-space
+                              borderless
+                              :model-value="
+                                formData.dateEnd
+                                  ? date2Thai(formData.dateEnd)
+                                  : null
+                              "
+                              :rules="[
+                                (val) =>
+                                  !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                              ]"
+                              :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                    </div>
+                    <div v-else class="q-mx-xs col-xs-12 col-sm-6">
+                      <q-select
+                        for="#daysExtend"
+                        outlined
+                        dense
+                        lazy-rules
+                        ref="daysExtendRef"
+                        v-model="formData.daysExtend"
+                        :options="investigateFactStore.daysExtendOp"
+                        label="จำนวนวันที่ต้องการขยาย"
+                        emit-value
+                        hide-bottom-space
+                        map-options
+                        :rules="[
+                          (val) =>
+                            formData.clickTime === true
+                              ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                              : true,
+                        ]"
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        @filter="(inputValue: any,
+                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
+                )"
+                        ><template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                  </div>
+                </q-card>
+            </div>
+            <div class="col-12 ">
+              <q-input
+                for="#complaintdetail"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                ref="complaintdetailRef"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.complaintdetail"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-12">
+              <q-file
+                for="#fileComplaint"
+                outlined
+                ref="fileComplaintRef"
+                dense
+                v-model="formData.fileComplaint"
+                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="col-12">
+              <q-input
+                for="#detail"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                ref="detailRef"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                type="textarea"
+              />
+            </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 items-start">
+              <div class="col-4">
                 <q-input
-                  for="#other"
+                  for="#results"
-                  class="full-width inputgreen cursor-pointer"
+                  standout
-                  outlined
-                  ref="otherRef"
                   dense
-                  borderless
+                  ref="resultsRef"
-                  v-model="formData.other"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
+                  v-model="formData.results"
+                  outlined
+                  debounce="300"
+                  placeholder="ผลการสืบสวน"
                   hide-bottom-space
-                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-                  type="textarea"
-                  :rules="[
-                    (val) =>
-                      formData.investigation === '003'
-                        ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                        : true,
-                  ]"
-                />
-              </div>
-
-              <div class="row items-start col-12">
-                <p
-                  class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
                 >
-                  วันที่สืบสวน
+                </q-input>
-                </p>
+              </div>
-                <q-checkbox
+              <div class="col-4">
-                  for="#clickTime"
+                <q-btn
-                  size="md"
+                  id="#confirm"
-                  v-model="formData.clickTime"
+                  label="ยืนยันผลการสืบสวน"
-                  label="ขยายเวลา"
                   color="primary"
-                  class="text-weight-medium q-ml-sm"
+                  class="q-py-sm q-ml-sm"
-                  keep-color
-                />
-                <div v-if="formData.clickTime !== true" class="self-start row">
-                  <div class="q-mx-xs">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.date"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          for="#date"
-                          class="full-width inputgreen cursor-pointer"
-                          ref="dateRef"
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            formData.date ? date2Thai(formData.date) : null
-                          "
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
-                          ]"
-                          :label="`${'วันที่เริ่มการสอบสวน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              color="primary"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="q-mx-xs q-">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.dateEnd"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          for="#dateEnd"
-                          ref="dateEndRef"
-                          class="full-width inputgreen cursor-pointer"
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            formData.dateEnd
-                              ? date2Thai(formData.dateEnd)
-                              : null
-                          "
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
-                          ]"
-                          :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              color="primary"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                </div>
-                <div v-else class="q-mx-xs">
-                  <q-select
-                    for="#daysExtend"
-                    outlined
-                    dense
-                    lazy-rules
-                    ref="daysExtendRef"
-                    v-model="formData.daysExtend"
-                    :options="investigateFactStore.daysExtendOp"
-                    label="จำนวนวันที่ต้องการขยาย"
-                    emit-value
-                    map-options
-                    :rules="[
-                      (val) =>
-                        formData.clickTime === true
-                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                          : true,
-                    ]"
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
-            )"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-              </div>
-              <div class="col-12 q-my-xs">
-                <q-input
-                  for="#complaintdetail"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="complaintdetailRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.complaintdetail"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
-                  ]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-12 q-my-sm">
-                <q-file
-                  for="#fileComplaint"
-                  outlined
-                  ref="fileComplaintRef"
-                  dense
-                  v-model="formData.fileComplaint"
-                  label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
-                  lazy-rules
-                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-                  hide-bottom-space
                 >
-                  <template v-slot:prepend>
+                  <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
-                    <q-icon name="attach_file" color="primary" />
+                </q-btn>
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-12 q-my-sm">
-                <q-input
-                  for="#detail"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="detailRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.detail"
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียด'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-12 q-my-xs">
-                <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 items-start q-mt-sm">
-                <div class="col-4">
-                  <q-input
-                    for="#results"
-                    standout
-                    dense
-                    ref="resultsRef"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
-                    v-model="formData.results"
-                    outlined
-                    debounce="300"
-                    placeholder="ผลการสืบสวน"
-                  >
-                  </q-input>
-                </div>
-                <div class="col-4">
-                  <q-btn
-                    id="#confirm"
-                    label="ยืนยันผลการสืบสวน"
-                    color="public"
-                    class="q-py-sm q-ml-sm"
-                  >
-                    <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
-                  </q-btn>
-                </div>
               </div>
             </div>
           </div>
@@ -464,6 +464,5 @@ watch(props.data, async () => {
           >
         </div>
       </form>
-    </div>
   </q-card>
 </template>

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

@@ -22,6 +22,7 @@ const visibleColumns2 = ref<string[]>([
   "duty",
   "email",
   "telephone",
+  "role"
 ]);
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -90,6 +91,17 @@ const columns2 = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "role",
+    align: "left",
+    label: "จำนวนเรื่องสืบสวน",
+    sortable: true,
+    field: "role",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 const props = defineProps({
@@ -138,35 +150,28 @@ watchEffect(() => {
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
       <q-separator />
-      <q-card-section class="q-pt-none">
+      <q-card-section >
-        <div>
+        <q-input
-          <div>
+          borderless
-            <q-toolbar style="padding: 0">
+          outlined
-              <q-input
+          dense
-                borderless
+          class="col-12 q-mb-sm"
-                outlined
+          debounce="300"
-                dense
+          :model-value="filterKeyword2"
-                class="col-12"
+          @update:model-value="updateInput"
-                debounce="300"
+          placeholder="ค้นหารายชื่อ"
-                :model-value="filterKeyword2"
+          style="max-width: 100%"
-                @update:model-value="updateInput"
+        >
-                placeholder="ค้นหารายชื่อ"
+          <template v-slot:append>
-                style="max-width: 100%"
+            <q-icon v-if="filterKeyword2 == ''" name="search" />
-              >
+            <q-icon
-                <template v-slot:append>
+              v-if="filterKeyword2 !== ''"
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+              name="clear"
-                  <q-icon
+              class="cursor-pointer"
-                    v-if="filterKeyword2 !== ''"
+              @click="Reset"
-                    name="clear"
+            />
-                    class="cursor-pointer"
+          </template>
-                    @click="Reset"
+        </q-input>
-                  />
-                </template>
-              </q-input>
-            </q-toolbar>
-          </div>
-        </div>
-
         <d-table
           :columns="columns2"
           :rows="rows2"
@@ -208,6 +213,8 @@ watchEffect(() => {
         </d-table>
       </q-card-section>
 
+      <q-separator />
+
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="เพิ่มรายชื่อกรรมการ"

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

@@ -30,6 +30,7 @@ onMounted(async () => {
       duty: "ประธาน",
       email: "e@email.com",
       telephone: "0800808080",
+      role: "4",
     },
     {
       nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
@@ -37,6 +38,7 @@ onMounted(async () => {
       duty: "เลขานุการ",
       email: "g@gmail.com",
       telephone: "0614565145",
+      role: "6",
     },
   ]);
   await hideLoader();
@@ -213,10 +215,8 @@ watch(props.data, async () => {
     <form @submit.prevent="validateForm">
       <div class="col-12">
         <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
+          <div class="col-12 row q-pa-md">
-            <div class="col-xs-12 col-sm-12 row">
+              <div class="col-12 row q-col-gutter-md">
-              <q-separator />
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
                   class="col-12"
                   dense
@@ -225,6 +225,7 @@ watch(props.data, async () => {
                   for="#Complaint"
                   ref="complaintRef"
                   label="เรื่องร้องเรียน"
+                  hide-bottom-space
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
                 />
@@ -251,6 +252,7 @@ watch(props.data, async () => {
                       outlined
                       dense
                       class="full-width datepicker"
+                      hide-bottom-space
                       :model-value="
                         dateInvestigate != null
                           ? date2Thai(dateInvestigate)
@@ -293,6 +295,7 @@ watch(props.data, async () => {
                       outlined
                       dense
                       class="col-xs-12 col-sm-4"
+                      hide-bottom-space
                       :model-value="
                         dateAllegation != null
                           ? date2Thai(dateAllegation)
@@ -338,6 +341,7 @@ watch(props.data, async () => {
                       outlined
                       dense
                       class="full-width datepicker"
+                      hide-bottom-space
                       :model-value="
                         dateEvident != null ? date2Thai(dateEvident) : null
                       "
@@ -358,65 +362,72 @@ watch(props.data, async () => {
                     </q-input>
                   </template>
                 </datepicker>
-                <div class="col-xs-12 col-sm-12 text-bold">
+                <div class="row col-12">
-                  กรรมการ
+                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                  <q-btn
+                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                    size="12px"
+                      กรรมการ
-                    flat
+                      <q-btn
-                    round
+                        size="12px"
-                    color="add"
+                        flat
-                    @click="popup()"
+                        round
-                    icon="mdi-plus"
+                        dense
-                  >
+                        color="add"
-                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                        class="q-ml-sm"
-                  </q-btn>
+                        @click="popup()"
+                        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 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"
+                                @click="deleteData(props.row.id)"
+                                icon="mdi-delete"
+                              >
+                                <q-tooltip>ลบข้อมูล</q-tooltip>
+                              </q-btn>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </Table>
+                    </div>
+                  </q-card>
                 </div>
-                <div class="col-xs-12 col-sm-12 q-pb-md">
-                  <Table
-                    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"
-                            @click="deleteData(props.row.id)"
-                            icon="mdi-delete"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                          </q-btn>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </Table>
-                </div>
-
                 <q-input
                   class="col-xs-12 col-sm-6"
                   dense
@@ -425,12 +436,14 @@ watch(props.data, async () => {
                   v-model="formData.casefault"
                   for="#casefault"
                   label="กรณีมีความผิด"
+                  hide-bottom-space
                   :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                   lazy-rules
                 />
                 <q-input
                   class="col-xs-12 col-sm-6"
                   dense
+                  hide-bottom-space
                   outlined
                   for="#whereInvestigate"
                   ref="whereInvestigateRef"
@@ -450,6 +463,7 @@ watch(props.data, async () => {
                   option-value="id"
                   emit-value
                   map-options
+                  hide-bottom-space
                   :options="investigateDis.optionsTypefault"
                   label="ลักษณะความผิด"
                 />
@@ -464,13 +478,15 @@ watch(props.data, async () => {
                   option-value="id"
                   emit-value
                   map-options
+                  hide-bottom-space
                   :options="investigateDis.optionsfaultLevel"
                   label="ระดับโทษความผิด"
                 />
                 <q-input
-                  class="col-xs-12 col-sm-6 q-pb-md"
+                  class="col-xs-12 col-sm-6"
                   dense
                   for="#refLaw"
+                  hide-bottom-space
                   outlined
                   ref="refLawRef"
                   v-model="formData.refLaw"
@@ -484,6 +500,7 @@ watch(props.data, async () => {
                   class="col-12"
                   dense
                   outlined
+                  hide-bottom-space
                   for="#detailComplaint"
                   ref="detailComplaintRef"
                   v-model="formData.detailComplaint"
@@ -495,6 +512,7 @@ watch(props.data, async () => {
                   class="col-12"
                   dense
                   outlined
+                  hide-bottom-space
                   for="#trueDetail"
                   ref="trueDetailRef"
                   v-model="formData.trueDetail"
@@ -502,90 +520,123 @@ watch(props.data, async () => {
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
                 />
-                <q-input
+                <div class="row col-12">
-                  class="col-12"
+                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                  dense
+                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                  outlined
+                      หลักฐานสนับสนุนข้อกล่าวหา
-                  for="#evidence"
+                    </div>
-                  ref="evidenceRef"
+                    <div class="col-12"><q-separator /></div>
-                  v-model="formData.evidence"
+                    <div class="col-xs-12 q-pa-sm row">
-                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                      <q-input
-                  type="textarea"
+                        class="col-12"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                        dense
-                />
+                        outlined
-                <q-file
+                        for="#evidence"
-                  class="col-12 q-pb-md"
+                        ref="evidenceRef"
-                  outlined
+                        hide-bottom-space
-                  dense
+                        v-model="formData.evidence"
-                  ref="filesEvidenceRef"
+                        label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  for="#filesEvidence"
+                        type="textarea"
-                  v-model="formData.filesEvidence"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                  @added="fileUploadDoc"
+                      />
-                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                      <q-file
-                  hide-bottom-space
+                        class="col-12 q-mt-sm"
-                  lazy-rules
+                        outlined
-                  accept=".pdf,.xlsx,.doc"
+                        dense
-                >
+                        ref="filesEvidenceRef"
-                  <template v-slot:prepend>
+                        for="#filesEvidence"
-                    <q-icon name="attach_file" />
+                        v-model="formData.filesEvidence"
-                  </template>
+                        @added="fileUploadDoc"
-                </q-file>
+                        label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                <q-input
+                        hide-bottom-space
-                  class="col-12"
+                        lazy-rules
-                  dense
+                        accept=".pdf,.xlsx,.doc"
-                  outlined
+                      >
-                  ref="recordAccuserRef"
+                        <template v-slot:prepend>
-                  for="#recordAccuser"
+                          <q-icon name="attach_file" />
-                  v-model="formData.recordAccuser"
+                        </template>
-                  label="บันทึกถ้อยคำของผู้กล่าวหา"
+                      </q-file>
-                  type="textarea"
+                    </div>
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                  </q-card>
-                />
+                </div>
-                <q-file
+                <div class="row col-12">
-                  class="col-12 q-pb-md"
+                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                  outlined
+                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                  dense
+                      บันทึกถ้อยคำของผู้กล่าวหา
-                  ref="filesRecordAccuserRef"
+                    </div>
-                  for="#filesRecordAccuser"
+                    <div class="col-12"><q-separator /></div>
-                  v-model="formData.filesRecordAccuser"
+                    <div class="col-xs-12 q-pa-sm row">
-                  @added="fileUploadDoc"
+                      <q-input
-                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                        class="col-12"
-                  hide-bottom-space
+                        dense
-                  lazy-rules
+                        outlined
-                  accept=".pdf,.xlsx,.doc"
+                        ref="recordAccuserRef"
-                >
+                        for="#recordAccuser"
-                  <template v-slot:prepend>
+                        v-model="formData.recordAccuser"
-                    <q-icon name="attach_file" />
+                        label="บันทึกถ้อยคำของผู้กล่าวหา"
-                  </template>
+                        hide-bottom-space
-                </q-file>
+                        type="textarea"
-                <q-input
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                  class="col-12"
+                      />
-                  dense
+                      <q-file
-                  outlined
+                        class="col-12 q-mt-sm"
-                  for="#witnesses"
+                        outlined
-                  ref="witnessesRef"
+                        dense
-                  v-model="formData.witnesses"
+                        ref="filesRecordAccuserRef"
-                  label="พยานและการบันทึกถ้อยคำ"
+                        for="#filesRecordAccuser"
-                  type="textarea"
+                        v-model="formData.filesRecordAccuser"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+                        @added="fileUploadDoc"
-                />
+                        label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                <q-file
+                        hide-bottom-space
-                  class="col-12 q-pb-md"
+                        lazy-rules
-                  outlined
+                        accept=".pdf,.xlsx,.doc"
-                  dense
+                      >
-                  ref="filesWitnessesRef"
+                        <template v-slot:prepend>
-                  for="#filesWitnesses"
+                          <q-icon name="attach_file" />
-                  v-model="formData.filesWitnesses"
+                        </template>
-                  @added="fileUploadDoc"
+                      </q-file>
-                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                    </div>
-                  hide-bottom-space
+                  </q-card>
-                  lazy-rules
+                </div>
-                  accept=".pdf,.xlsx,.doc"
+                <div class="row col-12">
-                >
+                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-                  <template v-slot:prepend>
+                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-                    <q-icon name="attach_file" />
+                      พยานและการบันทึกถ้อยคำ
-                  </template>
+                    </div>
-                </q-file>
+                    <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"
                   dense
@@ -594,6 +645,7 @@ watch(props.data, async () => {
                   ref="InvestResultsRef"
                   v-model="formData.InvestResults"
                   label="ผลการสอบสวน"
+                  hide-bottom-space
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
                 />
@@ -615,7 +667,6 @@ watch(props.data, async () => {
                   </template>
                 </q-file>
               </div>
-            </div>
           </div>
           <q-separator />
           <div class="row col-12 q-pa-sm">

src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue

@@ -71,6 +71,7 @@ const clickBack = () => {
                   outlined
                   v-model="channel"
                   for="channel"
+                  hide-bottom-space
                   label="กรอกชื่อช่องทาง"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
                 />
@@ -78,17 +79,13 @@ const clickBack = () => {
             </div>
           </div>
           <q-separator />
-          <q-separator />
           <div class="row col-12 q-pa-sm">
             <q-space />
             <q-btn
-              flat
+              label="บันทึก"
-              round
               color="public"
               @click="checkSave"
-              icon="mdi-content-save-outline"
             >
-              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
             </q-btn>
           </div>
         </q-card>

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -81,117 +81,129 @@ function onValidate() {
 }
 </script>
 <template>
-  <form @submit.prevent.stop="onValidate" class="q-gutter-md">
+<form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md">
+    <q-card bordered>
-      <div v-if="data === null" class="row q-col-gutter-sm">
+      <div class="col-12 row q-pa-md">
-        <div class="col-3 row q-pa-md text-bold">
+        <div class="row q-col-gutter-md">
-          <label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
+          <div class="row col-12" v-if="data === null">
-        </div>
+            <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-        <div class="col-6">
+              <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          <q-input
+                ค้นหาบุคคลากรที่อยู่ในระบบ
-            dense
+              </div>
-            outlined
+              <div class="col-12"><q-separator /></div>
-            v-model="idCard"
+              <div class="col-xs-12 q-pa-sm row">
-            label="รหัสบัตรประชาชน"
+                <div class="col-6">
-            ref="idCardRef"
+                  <q-input
-            for="idCardRef"
+                    dense
-            :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
+                    outlined
-          />
+                    v-model="idCard"
-        </div>
+                    label="รหัสบัตรประชาชน"
-        <div class="col-2">
+                    ref="idCardRef"
-          <q-btn
+                    for="idCardRef"
-            unelevated
+                    hide-bottom-space
-            dense
+                    :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
-            color="primary"
+                  />
-            class="q-px-md q-py-sm"
+                </div>
-            @click="addEmployee"
+                <div class="col-2">
-            label="เพิ่มบุคลากร"
+                  <q-btn
-            id="addCustomer"
+                    unelevated
-          />
+                    dense
+                    color="primary"
+                    class="q-px-md q-py-sm q-ml-sm"
+                    @click="addEmployee"
+                    label="เพิ่มบุคลากร"
+                    id="addCustomer"
+                  />
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.prefix"
+              label="คำนำหน้า"
+              ref="prefixRef"
+              for="prefixRef"
+              hide-bottom-space
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.firstname"
+              label="ชื่อ"
+              ref="firstnameRef"
+              for="firstnameRef"
+              hide-bottom-space
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.lastname"
+              label="นามสกุล"
+              ref="lastnameRef"
+              for="lastnameRef"
+              hide-bottom-space
+              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.position"
+              label="ตำแหน่ง"
+              ref="positionRef"
+              for="positionRef"
+              hide-bottom-space
+              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.phone"
+              label="เบอร์โทร"
+              ref="phoneRef"
+              for="phoneRef"
+              hide-bottom-space
+              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              v-model="formData.email"
+              label="อีเมล"
+              ref="emailRef"
+              hide-bottom-space
+              for="emailRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
+            />
+          </div>
         </div>
       </div>
-
+    <q-separator />
-      <div class="row q-px-md q-col-gutter-sm">
+    <div class="row col-12 q-pa-sm">
-        <div class="col-3">
+      <q-space />
-          <q-input
+      <q-btn
-            dense
+        for="ButtonOnSubmit"
-            outlined
+        id="formSubmit"
-            v-model="formData.prefix"
+        color="secondary"
-            label="คำนำหน้า"
+        label="บันทึก"
-            ref="prefixRef"
+        type="submit"
-            for="prefixRef"
+        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-            :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
+      >
-          />
+    </div>
-        </div>
+  </q-card>
-        <div class="col-3">
+</form>
-          <q-input
-            dense
-            outlined
-            v-model="formData.firstname"
-            label="ชื่อ"
-            ref="firstnameRef"
-            for="firstnameRef"
-            :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            dense
-            outlined
-            v-model="formData.lastname"
-            label="นามสกุล"
-            ref="lastnameRef"
-            for="lastnameRef"
-            :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            dense
-            outlined
-            v-model="formData.position"
-            label="ตำแหน่ง"
-            ref="positionRef"
-            for="positionRef"
-            :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            dense
-            outlined
-            v-model="formData.phone"
-            label="เบอร์โทร"
-            ref="phoneRef"
-            for="phoneRef"
-            :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            dense
-            outlined
-            v-model="formData.email"
-            label="อีเมล"
-            ref="emailRef"
-            for="emailRef"
-            :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
-          />
-        </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>
-  </form>
 </template>

src/modules/11_discipline/interface/index/Main.ts

@@ -29,6 +29,7 @@ interface directorType {
   duty: string;
   email: string;
   telephone: string;
+  role: string;
 }
 
 export type {

src/modules/11_discipline/store/InvestigateDisStore.ts

@@ -51,6 +51,7 @@ export const useInvestigateDisStore = defineStore(
         duty: e.duty,
         email: e.email,
         telephone: e.telephone,
+        role: e.role,
       }));
       rows2.value = datalistDirector;
       selected.value = rows2.value;
@@ -204,6 +205,7 @@ export const useInvestigateDisStore = defineStore(
       "duty",
       "email",
       "telephone",
+      "role",
     ]);
     const columnsDirector = ref<QTableProps["columns"]>([
       {
@@ -260,6 +262,15 @@ export const useInvestigateDisStore = defineStore(
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
       },
+      {
+        name: "role",
+        align: "left",
+        label: "จำนวนเรื่องสืบสวน",
+        sortable: true,
+        field: "role",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
     ]);
     return {
       fecthList,