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

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

@@ -47,7 +47,7 @@ const pagination = ref({
 
 const formData = reactive<any>({
   type: "ALL",
-  status: "",
+  status: "ALL",
   year: new Date().getFullYear().toString(),
 });
 
@@ -55,11 +55,11 @@ const visibleColumns = ref<string[]>([
   "no",
   "type",
   "title",
-  "name",
-  "idCard",
+  "fullname",
+  "citizenId",
   "caseType",
-  "caseNo",
-  "dateEdit",
+  "caseNumber",
+  "lastUpdatedAt",
   "status",
 ]);
 
@@ -93,22 +93,22 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullname",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "idCard",
+    name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
     sortable: true,
-    field: "idCard",
+    field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -126,22 +126,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "caseNo",
+    name: "caseNumber",
     align: "left",
     label: "คดีเลขที่",
     sortable: true,
-    field: "caseNo",
+    field: "caseNumber",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "dateEdit",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "dateEdit",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -201,11 +201,15 @@ watch(
 
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageadd() {
+  dataStore.rowsAdd = []
   router.push(`/discipline-appealcomplain/add`);
 }
 
+function editPage(id: string) {
+  router.push(`/discipline-appealcomplain/${id}`);
+}
 function filterFn() {
-  // getList();
+  getData()
   console.log("enter", filterKeyword.value);
 }
 
@@ -225,27 +229,43 @@ function editStatusReturn(data: any) {
   });
   console.log(data);
 }
+
+function getData() {
+  showLoader();
+  http
+    .get(
+      config.API.appealMainList(
+        formData.status,
+        formData.type,
+        formData.year,
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      fetchAppealComplain(res.data.result.data)
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function dataUpdate(){
+  getData()
+}
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
+  getData()
   // await getList();
   dataStore.visibleColumns = visibleColumns.value;
   dataStore.columns = columns.value;
-  const data = [
-    {
-      id: "xxx-xxx-xxx",
-      type: "อุทธรณ์",
-      title: "โดนหัวหน้าตัดสินโดยไม่ยุติธรรม",
-      prefix: "นาง",
-      firstName: "สมใจ",
-      lastName: "ดีใจ",
-      idCard: "1234567890123",
-      caseType: "YYYY",
-      caseNo: "YYYY",
-      dateEdit: new Date("2023-12-08T06:55:00"),
-      status: "NEW",
-    },
-  ];
-  await fetchAppealComplain(data);
+
 });
 </script>
 
@@ -279,6 +299,7 @@ onMounted(async () => {
           autoApply
           year-picker
           :enableTimePicker="false"
+          @update:model-value="dataUpdate"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -291,6 +312,7 @@ onMounted(async () => {
               outlined
               :model-value="Number(formData.year) + 543"
               :label="`${'ปีงบประมาณ'}`"
+
             >
               <template v-slot:prepend>
                 <q-icon
@@ -316,6 +338,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="type"
+          @update:model-value="dataUpdate"
         />
       </div>
       <div class="col-2">
@@ -329,6 +352,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="dataStore.statusOptions"
+          @update:model-value="dataUpdate"
         />
       </div>
       <q-space />
@@ -372,8 +396,7 @@ onMounted(async () => {
         ref="table"
         :columns="dataStore.columns"
         :rows="dataStore.rows"
-        :filter="filterKeyword"
-        row-key="interrogated"
+        row-key="id"
         flat
         bordered
         :paging="true"
@@ -409,7 +432,12 @@ onMounted(async () => {
         </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">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="editPage(props.row.id)"
+            >
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>