รายการเรื่องร้องเรียน

2024-08-07 17:55:05 +07:00 · 2024-08-07 17:55:05 +07:00 · eb981b07fa
commit eb981b07fa
parent 6aa405e688
5 changed files with 98 additions and 52 deletions
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@ -26,6 +26,8 @@ const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);

+const checkRoutePermisson = ref<boolean>(route.name == "disciplineComplaintsDetail");
+
 const modalPopup = ref<boolean>(false);

 /** ข้อมูล v-model ของฟอร์ม */
@ -349,9 +351,9 @@ onMounted(() => {
        class="q-mr-sm"
        @click="$router.push(`/discipline/complaints`)"
      />
-      <div class="q-ma-none">แก้ไขเรื่องร้องเรียน</div>
+      <div class="q-ma-none">{{ checkRoutePermisson ? 'รายละเอียดเรื่องร้องเรียน':'แก้ไขเรื่องร้องเรียน'}}</div>
      <q-space />
-      <div class="q-gutter-x-sm">
+      <div class="q-gutter-x-sm" v-if="!checkRoutePermisson">
        <q-btn
          v-if="data.status === 'NEW'"
          label="มีมูลส่งไปสืบสวน"
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@ -11,6 +11,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";

+import { useRouter, useRoute } from "vue-router";
+
 import config from "@/app.config";
 import http from "@/plugins/http";

@ -21,7 +23,7 @@ import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 const $q = useQuasar();
 const fileDocDataUpload = ref<File[]>([]);
 const channelOptions = ref<DataOption[]>([]);
-
+const route = useRoute();
 /** เรียกใช้ store */
 const mixin = useCounterMixin();
 const mainStore = useDisciplineMainStore();
@ -30,7 +32,9 @@ const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const organization = ref<OptionData>();
 const consideredAgency = ref<OptionData>();
-
+const checkRoutePermisson = ref<boolean>(
+  route.name == "disciplineComplaintsDetail"
+);
 /**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
 const modal = ref<boolean>(false);
 const toggleModal = () => (modal.value = !modal.value);
@ -430,7 +434,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  ref="respondentTypeRef"
                  dense
                  outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly ||checkRoutePermisson"
                  label="ผู้ถูกร้องเรียน"
                  option-value="id"
                  option-label="name"
@ -467,7 +471,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  ref="organizationIdRef"
                  dense
                  hide-bottom-space
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                  outlined
                  option-label="name"
                  option-value="id"
@ -504,7 +508,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  label="หน่วยงานที่พิจารณา"
                  option-value="id"
                  option-label="name"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                  hide-bottom-space
                  map-options
                  :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
@ -536,7 +540,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  >
                    ผู้ถูกร้องเรียน
                    <q-btn
-                      v-if="!isReadonly"
+                      v-if="!isReadonly && !checkRoutePermisson"
                      size="12px"
                      flat
                      round
@ -577,22 +581,31 @@ function filterOptionFnAgency(val: string, update: Function) {
                              col.label
                            }}</span>
                          </q-th>
-                          <q-th auto-width></q-th>
                        </q-tr>
                      </template>
                      <template v-slot:body="props">
                        <q-tr :props="props" class="cursor-pointer">
-                          <td>
+                          <td auto-width>
                            <q-btn
                              dense
                              flat
                              round
                              color="info"
-                              icon="info"
+                              icon="mdi-eye"
                              @click="onclickViewinfo(props.row.personId)"
                            >
                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
                            </q-btn>
+                            <q-btn
+                              v-if="!isReadonly && !checkRoutePermisson"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              icon="mdi-delete"
+                              @click="deletePerson(props.row.personId)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
                          </td>
                          <q-td
                            v-for="col in props.cols"
@ -629,20 +642,6 @@ function filterOptionFnAgency(val: string, update: Function) {
                              {{ col.value }}
                            </div>
                          </q-td>
-                          <q-td auto-width>
-                            <q-btn
-                              v-if="!isReadonly"
-                              size="12px"
-                              flat
-                              round
-                              dense
-                              color="red"
-                              class="q-ml-sm"
-                              icon="mdi-delete-outline"
-                              @click="deletePerson(props.row.personId)"
-                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                            >
-                          </q-td>
                        </q-tr>
                      </template>
                    </d-table>
@ -657,7 +656,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  dense
                  :class="inputEdit(isReadonly)"
                  outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                  hide-bottom-space
                  v-model="formData.title"
                  :rules="[(val) => !!val || 'กรุณากรอกเรื่องร้องเรียน']"
@ -675,7 +674,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  ref="descriptionRef"
                  dense
                  outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                  hide-bottom-space
                  v-model="formData.description"
                  label="รายละเอียดเรื่องร้องเรียน"
@ -692,7 +691,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  :locale="'th'"
                  autoApply
                  borderless
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                  :enableTimePicker="false"
                  week-start="0"
                  @update:model-value="changeFormData()"
@ -710,7 +709,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                      outlined
                      dense
                      :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
+                      :readonly="isReadonly|| checkRoutePermisson"
                      hide-bottom-space
                      :model-value="
                        formData.dateReceived != null
@ -742,7 +741,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  ref="levelConsiderationRef"
                  dense
                  outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                  v-model="formData.levelConsideration"
                  :options="complainstStore.levelConsiderationtOptions"
                  label="ระดับการพิจารณา"
@ -765,7 +764,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  v-model="formData.dateConsideration"
                  @update:model-value="changeFormData()"
                  :locale="'th'"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                  autoApply
                  borderless
                  :enableTimePicker="false"
@ -789,7 +788,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                          ? date2Thai(formData.dateConsideration)
                          : null
                      "
-                      :readonly="isReadonly"
+                      :readonly="isReadonly|| checkRoutePermisson"
                      label="วันที่กำหนดพิจารณา"
                      hide-bottom-space
                    >
@ -802,7 +801,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                        </q-icon>
                      </template>
                      <template
-                        v-if="formData.dateConsideration && !isReadonly"
+                        v-if="formData.dateConsideration && !isReadonly && !checkRoutePermisson"
                        v-slot:append
                      >
                        <q-icon
@ -825,7 +824,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  ref="offenseDetailsRef"
                  dense
                  outlined
-                  :readonly="isReadonly"
+                  :readonly="isReadonly|| checkRoutePermisson"
                  v-model="formData.offenseDetails"
                  :options="mainStore.offenseDetailstOptions"
                  label="ลักษณะความผิด"
@ -845,7 +844,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  v-model="formData.dateNotification"
                  :locale="'th'"
                  autoApply
-                  :readonly="isReadonly"
+                  :readonly="isReadonly||checkRoutePermisson"
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
@ -864,7 +863,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                      outlined
                      :class="inputEdit(isReadonly)"
                      dense
-                      :readonly="isReadonly"
+                      :readonly="isReadonly||checkRoutePermisson"
                      hide-bottom-space
                      :model-value="
                        formData.dateNotification != null
@ -882,7 +881,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                        </q-icon>
                      </template>
                      <template
-                        v-if="formData.dateNotification && !isReadonly"
+                        v-if="formData.dateNotification && !isReadonly && !checkRoutePermisson"
                        v-slot:append
                      >
                        <q-icon
@ -902,7 +901,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  for="selectReceivecomplaints"
                  ref="complaintFromRef"
                  dense
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                  outlined
                  v-model="formData.complaintFrom"
                  :options="channelOptions"
@ -925,7 +924,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  dense
                  outlined
                  v-model="formData.appellant"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly ||checkRoutePermisson"
                  label="ผู้ร้องเรียน"
                  hide-bottom-space
                  type="textarea"
@ -936,7 +935,7 @@ function filterOptionFnAgency(val: string, update: Function) {
              <div class="col-xs-12 col-sm-12">
                <q-input
                  :class="inputEdit(isReadonly)"
-                  :readonly="isReadonly"
+                  :readonly="isReadonly || checkRoutePermisson"
                  for="result"
                  ref="resultRef"
                  dense
@ -976,7 +975,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                  <div class="col-12"><q-separator /></div>
                  <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
                    <div
-                      v-if="!isReadonly && formData.id !== ''"
+                      v-if="!checkRoutePermisson && !isReadonly && formData.id !== ''"
                      class="col-12 row"
                    >
                      <q-file
@ -1039,7 +1038,7 @@ function filterOptionFnAgency(val: string, update: Function) {
                              ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                            >
                            <q-btn
-                              v-if="!isReadonly"
+                              v-if="!isReadonly && !checkRoutePermisson"
                              size="12px"
                              flat
                              round
@ -1067,8 +1066,8 @@ function filterOptionFnAgency(val: string, update: Function) {
          </div>
        </div>

-        <div class="col-12"><q-separator /></div>
-        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
+        <div class="col-12" v-if="!checkRoutePermisson"><q-separator /></div>
+        <div class="row col-12 q-pa-sm" v-if="!isReadonly && !checkRoutePermisson">
          <q-space />
          <q-btn
            for="ButtonOnSubmit"
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@ -106,7 +106,7 @@ onMounted(async () => {
    รายการเรื่องร้องเรียน
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
      <div class="col-4">
        <q-select
          v-model="statusFilter"
@ -145,7 +145,7 @@ onMounted(async () => {
          v-if="checkPermission($route)?.attrIsCreate"
          id="addComplaints"
          for="addComplaints"
-          size="12px"
+          dense
          flat
          round
          color="primary"
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@ -4,6 +4,8 @@ import type { QTableProps } from "quasar";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRouter } from "vue-router";

+import { checkPermission } from "@/utils/permissions";
+
 const currentPage = ref<number>(1);
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
@ -158,6 +160,14 @@ watch(
  }
 );

+/**
+ * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
+ * @param id ไอดีระบุ
+ */
+ function onDetail(id: string) {
+  router.push(`/discipline/complaints-detail/${id}`);
+}
+
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
  complainstStore.columns = columns.value;
@ -184,6 +194,7 @@ onMounted(() => {
  >
    <template v-slot:header="props">
      <q-tr :props="props">
+        <q-th auto-width></q-th>
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-weight-medium">{{ col.label }}</span>
        </q-th>
@ -191,12 +202,33 @@ onMounted(() => {
    </template>
    <template v-slot:body="props">
      <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props"
-          @click="OpenEdit(props.row.id)"
-        >
+        <q-td>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
+            id="addComplaints"
+            for="addComplaints"
+            dense
+            flat
+            round
+            color="info"
+            icon="mdi-eye"
+            @click="onDetail(props.row.id)"
+            ><q-tooltip>รายละเอียด</q-tooltip></q-btn
+          >
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate && checkPermission($route)?.attrIsGet"
+            id="addComplaints"
+            for="addComplaints"
+            dense
+            flat
+            round
+            color="edit"
+            icon="edit"
+            @click="OpenEdit(props.row.id)"
+            ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+          >
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name == 'no'">
            {{
              (currentPage - 1) * Number(pagination.rowsPerPage) +
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@ -44,6 +44,8 @@ const complaintAdd = () =>
  import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
 const complaintEdit = () =>
  import("@/modules/11_discipline/components/1_Complaint/EditPage.vue");
+const complaintDetail = () =>
+  import("@/modules/11_discipline/components/1_Complaint/EditPage.vue");
 const reportType = () =>
  import("@/modules/11_discipline/components/5_Report/DetailPage.vue");
 // const InvestigateDisciplinaryAdd = () =>
@ -108,6 +110,17 @@ export default [
      Role: "STAFF",
    },
  },
+  {
+    path: "/discipline/complaints-detail/:id",
+    name: "disciplineComplaintsDetail",
+    component: complaintDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_DISCIPLINE_COMPLAIN",
+      Role: "STAFF",
+    },
+  },
+
  {
    path: "/discipline/investigatefacts",
    name: "disciplineInvestigatefacts",