รายการอุทธรณ์ร้องทุกข์

src/modules/11_discipline/components/8_AppealComplain/Form.vue

@@ -8,11 +8,12 @@ import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
+import DialogHistory from '@/modules/11_discipline/components/8_AppealComplain/dialog/DialogEditStatus.vue'
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-import type { MyObjectAppealRef } from "@/modules/11_discipline/interface/response/appealComplain";
+import type { MyObjectAppealRef,HistoryStatusType } from "@/modules/11_discipline/interface/response/appealComplain";
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mainStore = useDisciplineMainStore();
 const router = useRouter();
@@ -33,6 +34,8 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
+const modalHistory = ref<boolean>(false)
+const statusCheck = ref<string>("");
 const modalPerson = ref<boolean>(false);
 const mixin = useCounterMixin();
 const {
@@ -47,6 +50,12 @@ const {
 const dataStore = useAppealComplainStore();
 
 const modalEdit = ref<boolean>(false);
+
+const historyStatusOb = reactive<HistoryStatusType[]>([{
+  status: "",
+  createdAt: "",
+}]);
+
 const formData = reactive<any>({
   profileId: "xx",
   title: "",
@@ -56,6 +65,7 @@ const formData = reactive<any>({
   type: "",
   file: null,
   disciplineComplaint_Appeal_Docs: [],
+  historyStatus: historyStatusOb,
   year: new Date().getFullYear().toString(),
 });
 
@@ -75,18 +85,10 @@ const objectAppeal: MyObjectAppealRef = {
 };
 
 /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
-const visibleColumns = ref<string[]>(["info", "no", "citizenId", "fullname"]);
+const visibleColumns = ref<string[]>(["no", "citizenId", "fullname"]);
 /** หัวตารางผู้ถูกร้องเรียน */
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "info",
-    align: "left",
-    label: "",
-    sortable: false,
-    field: "info",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
+
   {
     name: "no",
     align: "left",
@@ -226,6 +228,7 @@ watch(props.data, async () => {
     formData.title = props.data.title;
     formData.description = props.data.description;
     formData.status = props.data.status;
+    statusCheck.value = props.data.status;
     formData.type = props.data.type;
     formData.year = props.data.year;
     formData.caseType = props.data.caseType;
@@ -234,6 +237,7 @@ watch(props.data, async () => {
     formData.citizenId = props.data.citizenId;
     formData.profileId = props.data.profileId;
     formData.lastUpdatedAt = props.data.lastUpdatedAt;
+    formData.historyStatus = props.data.historyStatus;
     formData.disciplineComplaint_Appeal_Docs =
       props.data.disciplineComplaint_Appeal_Docs;
     dataStore.getRow([
@@ -245,6 +249,15 @@ watch(props.data, async () => {
     ]);
   }
 });
+
+function close() {
+  modalHistory.value = false;
+}
+
+function historyStatus(){
+  modalHistory.value = true
+}
+
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -281,7 +294,7 @@ onMounted(() => {
         <q-card bordered>
           <div class="q-pa-md">
             <div class="q-gutter-y-sm">
-              <div class="row">
+              <div class="row q-gutter-x-sm">
                 <div class="col-3">
                   <q-select
                     ref="typeRef"
@@ -301,6 +314,37 @@ onMounted(() => {
                     hide-bottom-space
                   />
                 </div>
+                <div class="col-3" v-if="isReadonly">
+                  <q-select
+                    ref="statusRef"
+                    v-model="formData.status"
+                    label="สถานะ"
+                    dense
+                    bg-color="white"
+                    outlined
+                    emit-value
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                    map-options
+                    hide-bottom-space
+                    option-label="name"
+                    option-value="id"
+                    :options="dataStore.statusOptionsEdit"
+                  />
+                </div>
+                <div class="col-2 self-center" v-if="isReadonly">
+                  <q-btn
+                    size="16px"
+                    flat
+                    round
+                    dense
+                    color="info"
+                    class="q-ml-sm"
+                    icon="mdi-history"
+                    @click="historyStatus"
+                  >
+                    <q-tooltip>ประวัติแก้ไขสถานะ</q-tooltip>
+                  </q-btn>
+                </div>
               </div>
               <div class="row col-12">
                 <q-card
@@ -364,22 +408,6 @@ onMounted(() => {
                             <div v-if="col.name == 'no'">
                               {{ props.rowIndex + 1 }}
                             </div>
-                            <div v-else-if="col.name == 'info'">
-                              <q-btn
-                                size="14px"
-                                flat
-                                round
-                                dense
-                                color="info"
-                                icon="info"
-                                @click="
-                                  router.push(`/registry/${props.row.personId}`)
-                                "
-                                ><q-tooltip
-                                  >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
-                                ></q-btn
-                              >
-                            </div>
                             <div
                               v-else-if="col.name === 'organization'"
                               class="table_ellipsis"
@@ -604,6 +632,12 @@ onMounted(() => {
     @returnData="handleSave"
     selecetSwitch="single"
   />
+
+  <DialogHistory
+  :modal="modalHistory"
+  :close="close"
+  :data="formData.historyStatus"
+  />
 </template>
 
 <style lang="scss">

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -86,7 +86,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "title",
     align: "left",
-    label: "เรื่องร้องเรียน",
+    label: "เรื่องอุทธรณ์/ร้องทุกข์",
     sortable: true,
     field: "title",
     headerStyle: "font-size: 14px",
@@ -427,7 +427,6 @@ onMounted(async () => {
             >
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
-            <q-th auto-width></q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
@@ -445,19 +444,6 @@ onMounted(async () => {
                 {{ col.value }}
               </div>
             </q-td>
-            <td auto-width>
-              <q-btn
-                icon="mdi-pencil"
-                size="10px"
-                color="primary"
-                flat
-                round
-                dense
-                @click="openEditStatus(props.row)"
-              >
-               <q-tooltip>แก้ไขสถานะ</q-tooltip>
-              </q-btn>
-            </td>
           </q-tr>
         </template>
       </d-table>

src/modules/11_discipline/components/8_AppealComplain/dialog/DialogEditStatus.vue

@@ -1,35 +1,52 @@
 <script setup lang="ts">
 import { ref, defineProps, watch, reactive } from "vue";
 import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
-import type { EditStatusRef } from "@/modules/11_discipline/interface/response/appealComplain";
 import { useQuasar } from "quasar";
 
+import type { HistoryStatusType } from "@/modules/11_discipline/interface/response/appealComplain";
+import type { QTableProps } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
+
 const $q = useQuasar();
 
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm,date2Thai } = mixin;
 const dataStore = useAppealComplainStore();
 
-interface status {
-  status: string;
-  reason: string;
-}
-
-/** ตัวแปร validate */
-const reasonRef = ref<Object | null>(null);
-const statusRef = ref<Object | null>(null);
-
-const objectEditStatus: EditStatusRef = {
-  reason: reasonRef,
-  status: statusRef,
-};
-
-const formData = reactive<status>({
-  status: "",
-  reason: "",
-});
-
+const rows = ref<HistoryStatusType[]>([]);
+/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+const visibleColumns = ref<string[]>(["no", "status", "createdAt"]);
+/** หัวตารางผู้ถูกร้องเรียน */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "แก้ไขเมื่อวันที่",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -45,49 +62,17 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["editStatusReturn"]);
-
 function clickClose() {
   props.close();
 }
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  console.log("1");
-  const hasError = [];
-  for (const key in objectEditStatus) {
-    if (Object.prototype.hasOwnProperty.call(objectEditStatus, key)) {
-      const property = objectEditStatus[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-
-  if (hasError.every((result) => result === true)) {
-    emit("editStatusReturn", formData);
-  } else {
-    console.log("ไม่ผ่าน ");
-    console.log(hasError);
-  }
-}
-
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      console.log("add");
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-
 watch(
   () => props.data,
   () => {
-    formData.status = props.data.status;
+    rows.value = props.data.map((item: HistoryStatusType) => ({
+      status: dataStore.statusTothai(item.status),
+      createdAt: date2Thai(item.createdAt),
+    }));
   }
 );
 </script>
@@ -95,65 +80,59 @@ watch(
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 30vw">
-      <form @submit.prevent="validateForm">
-        <q-toolbar>
-          <q-toolbar-title class="text-subtitle2 text-bold">
-            {{ `แก้ไขสถานะ ${props.data.fullname}` }}
-          </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="clickClose"
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-toolbar>
-        <q-separator />
-        <q-card-section class="q-pa-md bg-grey-1">
-          <div class="q-gutter-sm">
-            <q-select
-              ref="statusRef"
-              v-model="props.data.status"
-              label="สถานะ"
-              dense
-              bg-color="white"
-              outlined
-              emit-value
-              :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-              map-options
-              hide-bottom-space
-              option-label="name"
-              option-value="id"
-              :options="dataStore.statusOptionsEdit"
-            />
-            <q-input
-              ref="reasonRef"
-              v-model="formData.reason"
-              dense
-              outlined
-              :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-              bg-color="white"
-              type="textarea"
-              label="เหตุผล"
-              lazy-rules
-              hide-bottom-space
-            />
-          </div>
-        </q-card-section>
-        <q-separator />
-
-        <div class="row justify-end q-px-md q-py-sm items-center">
-          <q-btn
-            dense
-            color="public"
-            id="onSubmit"
-            type="submit"
-            class="q-px-md q-py-xs"
-            label="บันทึก"
-          />
-        </div>
-      </form>
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          ประวัติแก้ไขสถานะ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="clickClose"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <q-card-section class="q-pa-md bg-grey-1">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="idcard"
+          flat
+          bordered
+          dense
+          hide-bottom
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>

src/modules/11_discipline/interface/response/appealComplain.ts

@@ -52,7 +52,7 @@ interface EditDataList {
 
 interface HistoryStatusType {
     status: string
-    createdAt: string
+    createdAt: Date
 }
 interface FileObType {
     id:string
@@ -75,4 +75,4 @@ interface EditStatusRef {
 }
 
 
-export type { MainList, RowList, MyObjectAppealRef, EditStatusRef,EditDataList,HistoryStatusType,FileObType,RowAddList };
+export type { MainList, RowList, MyObjectAppealRef, EditStatusRef,EditDataList,FileObType,RowAddList,HistoryStatusType };

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

@@ -28,7 +28,7 @@ export const useAppealComplainStore = defineStore(
                 caseType: e.caseType,
                 caseNumber: e.caseNumber,
                 lastUpdatedAt: date2Thai(e.lastUpdatedAt),
-                status: statusTothai(e.status),
+                status: statusTothai(e.status)
             }));
             rows.value = dataList;
         }
@@ -37,7 +37,7 @@ export const useAppealComplainStore = defineStore(
                 rowsAdd.value = data
             }
         }
-        const statusTothai = (val: string) => {
+        function statusTothai(val: string){
             switch (val) {
                 case "NEW":
                     return "ใหม่";
@@ -96,24 +96,6 @@ export const useAppealComplainStore = defineStore(
             { id: "DONE", name: "ปิดคำร้อง" },
         ]);
 
-        // function filterSelector(val: string, update: Function, type: string) {
-        //     update(() => {
-        //         const needle = val.toLowerCase();
-        //         if (type === "yearSelect") {
-        //             complainantoptions.value = mainStore.complainantoptionsMain.filter(
-        //                 (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        //             );
-        //         } else if (type === "filteragencytoptions") {
-        //             agencytoptions.value = consideredAgencytoptions.value.filter(
-        //                 (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        //             );
-        //         } else if (type === "filtercomplainantOP") {
-        //             optionListName.value = optionListNameMain.value.filter(
-        //                 (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        //             );
-        //         }
-        //     });
-        // }
 
         return {
             rows,
@@ -126,7 +108,8 @@ export const useAppealComplainStore = defineStore(
             fiscalyearOP,
             getRow,
             rowsAdd,
-            statusOptionsEdit
+            statusOptionsEdit,
+            statusTothai
         };
     }
 );