ปรับ ui

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive, watch,computed } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
@@ -108,6 +108,7 @@ const formData = reactive<FormData>({
   disciplinaryCauseText: "",
   disciplinaryResult: "",
   disciplinaryExtendHistory: [],
+  disciplinaryFaultLevelOther: "",
 });
 const disciplineDisciplinary_DocRelevants = ref<FileLists[]>([]); // ยังไม่มีรอ api
 const disciplineDisciplinary_DocSummaryEvidences = ref<FileLists[]>([]);
@@ -139,16 +140,16 @@ const disciplinaryResultRef = ref<Object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: DisciplinaryRef = {
-  respondentType: respondentTypeRef,
-  organizationId: organizationIdRef,
-  consideredAgency: consideredAgencyRef,
-  disciplinaryFaultLevel: disciplinaryFaultLevelRef,
-  date: dateRef,
-  dateEnd: dateEndRef,
-  daysExtend: daysExtendRef,
-  disciplinaryDateResult: disciplinaryDateResultRef,
-  disciplinaryStatusResult: disciplinaryStatusResultRef,
-  disciplinaryResult: disciplinaryResultRef,
+  // respondentType: respondentTypeRef,
+  // organizationId: organizationIdRef,
+  // consideredAgency: consideredAgencyRef,
+  // disciplinaryFaultLevel: disciplinaryFaultLevelRef,
+  // date: dateRef,
+  // dateEnd: dateEndRef,
+  // daysExtend: daysExtendRef,
+  // disciplinaryDateResult: disciplinaryDateResultRef,
+  // disciplinaryStatusResult: disciplinaryStatusResultRef,
+  // disciplinaryResult: disciplinaryResultRef,
 };
 
 const initialPagination = ref<any>({
@@ -172,6 +173,19 @@ const props = defineProps({
 });
 const emit = defineEmits(["submit:disciplinary"]);
 
+const dateEndInputStyle = computed(() => {
+  const currentDate = new Date();
+  const investigationDateEnd = new Date(formData.disciplinaryDateEnd as Date);
+
+  const isInNext7Days =
+    investigationDateEnd >= currentDate &&
+    investigationDateEnd <=
+      new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000);
+
+  console.log(isInNext7Days);
+  return isInNext7Days ? { textDecoration: "underline", color: "red" } : {};
+});
+
 /** เปิด dialog */
 function popup() {
   modal.value = true;
@@ -360,7 +374,6 @@ watch(
   }
 );
 
-
 /** function เรียกรายชื่อหน่วยงาน*/
 async function fetchOrganization() {
   await http
@@ -377,7 +390,6 @@ async function fetchOrganization() {
     });
 }
 
-
 /** function เรียกรายชื่อกรรมการ*/
 async function fetchDListDirector() {
   showLoader();
@@ -454,6 +466,9 @@ async function selectComplainant(val: string) {
 /** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
 function changeFormData() {
   isSave.value = true;
+  if(formData.disciplinaryFaultLevel !== 'อื่นๆ'){
+    formData.disciplinaryFaultLevelOther = ''
+  }
 }
 
 function calendarOpen() {
@@ -523,7 +538,6 @@ function emitPerson(data: PersonsArray[]) {
     });
 }
 
-
 function openEditDirector(idVal: string, duty: string) {
   editDirectorId.value = idVal;
   modalEditDirector.value = true;
@@ -534,7 +548,7 @@ function closeEditDirector() {
   modalEditDirector.value = false;
 }
 
-async function saveDuty(id: string, duty: string){
+async function saveDuty(id: string, duty: string) {
   showLoader();
   await http
     .put(config.API.disciplinaryEditDuty(props.data.id, id), { duty: duty })
@@ -549,7 +563,7 @@ async function saveDuty(id: string, duty: string){
       props.fetchData();
       hideLoader();
     });
-};
+}
 
 /** Hook */
 onMounted(async () => {
@@ -1103,6 +1117,7 @@ onMounted(async () => {
                                         `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
                                     ]"
                                     :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                                    :input-style="dateEndInputStyle"
                                   >
                                     <template v-slot:prepend>
                                       <q-icon
@@ -1320,7 +1335,10 @@ onMounted(async () => {
                                 round
                                 color="blue"
                                 @click="
-                                  openEditDirector(props.row.idRaw, props.row.duty)
+                                  openEditDirector(
+                                    props.row.idRaw,
+                                    props.row.duty
+                                  )
                                 "
                                 icon="mdi-pencil-outline"
                               >
@@ -1433,7 +1451,15 @@ onMounted(async () => {
                     @update:model-value="changeFormData()"
                   />
                 </div>
-
+                <div class="col-12" v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'">
+                  <q-input
+                    :class="inputEdit(isReadonly)"
+                    outlined
+                    dense
+                    label="ระดับโทษความผิดอื่นๆ"
+                    v-model="formData.disciplinaryFaultLevelOther"
+                  />
+                </div>
                 <div class="col-xs-12 col-sm-6">
                   <q-input
                     :readonly="isReadonly"

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref, useAttrs, watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 
+const dataInvestigateDis = useInvestigateDisStore();
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const currentPage = ref<number>(1);
+  const statusFilter = ref<string>('ALL')
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -104,10 +107,29 @@ watch(
     updateProp(pagination.value.rowsPerPage, currentPage.value);
   }
 );
+
+function dataUpdate(){
+console.log(statusFilter.value)
+}
+
 </script>
 
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
+    <div class="col-2">
+        <q-select
+          v-model="statusFilter"
+          label="สถานะ"
+          dense
+          outlined
+          emit-value
+          map-options
+          option-label="name"
+          option-value="id"
+          :options="dataInvestigateDis.statusOptions"
+          @update:model-value="dataUpdate"
+        />
+      </div>
     <q-space />
     <!-- ค้นหาข้อความใน table -->
     <q-input