ui ช่องทางการร้องเรียน

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

@@ -106,8 +106,9 @@ const $q = useQuasar();
 const id = ref<string>(route.params.id as string);
 const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
-const dateStart = ref<Date>(new Date());
-const dateEnd = ref<Date>(new Date());
+const dateInvestigate = ref<Date>(new Date());
+const dateAllegation = ref<Date>(new Date());
+const dateEvident = ref<Date>(new Date());
 const filterKeyword2 = ref<string>("");
 const typefault = ref<string>("");
 const faultLevel = ref<string>("");
@@ -171,8 +172,8 @@ const fetchData = async () => {
   //           : null;
   //       yearly.value = data.period_year;
   //       datelast.value = data.period_amount;
-  //       dateStart.value = new Date(data.period_start);
-  //       dateEnd.value = new Date(data.period_end);
+  //       dateInvestigate.value = new Date(data.period_start);
+  //       dateAllegation.value = new Date(data.period_end);
   //       files.value = data.period_doc;
   //     })
   //     .catch((e) => {
@@ -239,11 +240,11 @@ const addData = async () => {
   //   formData.append("year", yearly.value.toString());
   //   formData.append("amount", datelast.value.toString());
   //   formData.append("round", roundInsig.value.value);
-  //   if (dateStart.value !== null) {
-  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   if (dateInvestigate.value !== null) {
+  //     formData.append("startDate", dateToISO(dateInvestigate.value));
   //   }
-  //   if (dateEnd.value !== null) {
-  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   if (dateAllegation.value !== null) {
+  //     formData.append("endDate", dateToISO(dateAllegation.value));
   //   }
   //   formData.append("file", files.value);
   //   showLoader();
@@ -269,11 +270,11 @@ const editData = async (id: string) => {
   //   formData.append("year", yearly.value.toString());
   //   formData.append("amount", datelast.value.toString());
   //   formData.append("round", roundInsig.value.value);
-  //   if (dateStart.value !== null) {
-  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   if (dateInvestigate.value !== null) {
+  //     formData.append("startDate", dateToISO(dateInvestigate.value));
   //   }
-  //   if (dateEnd.value !== null) {
-  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   if (dateAllegation.value !== null) {
+  //     formData.append("endDate", dateToISO(dateAllegation.value));
   //   }
   //   formData.append("file", files.value);
   //   showLoader();
@@ -328,7 +329,7 @@ const clickBack = () => {
                 />
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="dateStart"
+                  v-model="dateInvestigate"
                   :locale="'th'"
                   autoApply
                   class="col-xs-12 col-sm-4"
@@ -348,7 +349,9 @@ const clickBack = () => {
                       dense
                       class="full-width datepicker"
                       :model-value="
-                        dateStart != null ? date2Thai(dateStart) : null
+                        dateInvestigate != null
+                          ? date2Thai(dateInvestigate)
+                          : null
                       "
                       :label="`${'วันที่สอบสวน'}`"
                       :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบสวน'}`]"
@@ -366,7 +369,7 @@ const clickBack = () => {
                 </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="dateEnd"
+                  v-model="dateAllegation"
                   class="col-xs-12 col-sm-4"
                   :locale="'th'"
                   autoApply
@@ -385,7 +388,11 @@ const clickBack = () => {
                       outlined
                       dense
                       class="col-xs-12 col-sm-4"
-                      :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
+                      :model-value="
+                        dateAllegation != null
+                          ? date2Thai(dateAllegation)
+                          : null
+                      "
                       :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
                       :rules="[
                         (val) =>
@@ -405,7 +412,7 @@ const clickBack = () => {
                 </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="dateStart"
+                  v-model="dateEvident"
                   :locale="'th'"
                   autoApply
                   class="col-xs-12 col-sm-4"
@@ -425,7 +432,7 @@ const clickBack = () => {
                       dense
                       class="full-width datepicker"
                       :model-value="
-                        dateStart != null ? date2Thai(dateStart) : null
+                        dateEvident != null ? date2Thai(dateEvident) : null
                       "
                       :label="`${'วันที่สรุปพยานหลักฐาน'}`"
                       :rules="[

src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue

@@ -1,9 +1,285 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "subject",
+  "interrogated",
+  "fault",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "ชื่อประเภท",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const rows = ref<any>([
+  {
+    subject: " จดหมาย",
+  },
+  {
+    subject: " อีเมล์",
+  },
+  {
+    subject: " โทรศัพท์",
+  },
+  {
+    subject: " บอกเล่า",
+  },
+]);
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+const clickAdd = () => {
+  router.push(`/discipline/channel/add`);
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบช่องทาง",
+    message: "ต้องการลบช่องทางนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("delete");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+onMounted(() => {});
+</script>
 <template>
-  <div>
-    <h1>ช่องทางการร้องเรียน</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการช่องทางการร้องเรียน
   </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มช่องทางการร้องเรียน</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="subject" :props="props">
+                {{ props.row.subject }}
+              </q-td>
+              <q-td>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.id)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 </template>
 
-<style scoped></style>
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/11_discipline/components/ุ6_Information/Channel/addChannel.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+  dialogMessageNotify,
+} = mixin;
+const router = useRouter();
+const route = useRoute();
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const channel = ref<string>("");
+
+onMounted(async () => {
+  //   if (route.params.id) {
+  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
+  //     await fetchData();
+  //   }
+});
+// เรียกข้อมูลของรอบการเสนอขอ
+const fetchData = async () => {
+  //   edit.value = true;
+  //   showLoader();
+  //   await http
+  //     .get(config.API.getRoundInsignia(id.value))
+  //     .then((res) => {
+  //       const data = res.data.result;
+  //       id.value = data.period_id;
+  //       roundInsig.value =
+  //         options.value.filter((r: any) => r.value == data.period_round).length >
+  //         0
+  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
+  //           : null;
+  //       yearly.value = data.period_year;
+  //       datelast.value = data.period_amount;
+  //       dateStart.value = new Date(data.period_start);
+  //       dateEnd.value = new Date(data.period_end);
+  //       files.value = data.period_doc;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+};
+
+const deleteData = async (id: string) => {
+  //   showLoader();
+  //   await http
+  //     .delete(config.API.periodExamId(id))
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+
+// แก้ไขข้อมูล
+
+// คลิกบันทึก
+const checkSave = () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then(async (success) => {
+  //       if (success) {
+  //         dialogConfirm($q, () => SaveData());
+  //       } else if (Number(datelast.value) !== 0) {
+  //         dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
+  //       }
+  //     });
+  //   }
+};
+// บันทึกข้อมูล
+const SaveData = async () => {
+  //   if (edit.value) {
+  //     await editData(id.value);
+  //   } else {
+  //     await addData();
+  //     clickBack();
+  //   }
+};
+// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
+const addData = async () => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   }  ปี ${yearly.value + 543} `;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateStart.value !== null) {
+  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   }
+  //   if (dateEnd.value !== null) {
+  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .post(config.API.listRoundInsignia(), formData)
+  //     .then(() => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+// แก้ไขข้อมูล
+const editData = async (id: string) => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   } ปี ${yearly.value + 543}`;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateStart.value !== null) {
+  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   }
+  //   if (dateEnd.value !== null) {
+  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .put(config.API.editRoundInsignia(id), formData)
+  //     .then(() => {
+  //       success($q, "แก้ไขข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //       clickBack();
+  //     });
+};
+
+const clickBack = () => {
+  router.push(`/discipline/channel`);
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="clickBack"
+      />
+      {{ edit ? "ช่องทางการร้องเรียน" : "เพิ่มช่องทางการร้องเรียน" }}
+    </div>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="channel"
+                  label="กรอกชื่อช่องทาง"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
+                />
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              flat
+              round
+              color="public"
+              @click="checkSave"
+              icon="mdi-content-save-outline"
+            >
+              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
+            </q-btn>
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+</template>

src/modules/11_discipline/router.ts

@@ -1,18 +1,40 @@
-const complaintMain = () => import("@/modules/11_discipline/components/1_Complaint/MainPage.vue")
-const factsMain = () => import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue")
-const investigatefactsAdd = () => import("@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue")
-const disciplinaryMain = () => import("@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue")
-const oredrMain = () => import("@/modules/11_discipline/components/4_Order/MainPage.vue")
-const report = () => import("@/modules/11_discipline/components/5_Report/MainPage.vue")
-const directorMain = () => import("@/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue")
-const channelMain = () => import("@/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue")
-const complaintAdd = () => import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue")
-const reportType = () => import('@/modules/11_discipline/components/5_Report/reportDetail.vue')
+const complaintMain = () =>
+  import("@/modules/11_discipline/components/1_Complaint/MainPage.vue");
+const factsMain = () =>
+  import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
+const investigatefactsAdd = () =>
+  import(
+    "@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue"
+  );
+const disciplinaryMain = () =>
+  import(
+    "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
+  );
+const oredrMain = () =>
+  import("@/modules/11_discipline/components/4_Order/MainPage.vue");
+const report = () =>
+  import("@/modules/11_discipline/components/5_Report/MainPage.vue");
+const directorMain = () =>
+  import(
+    "@/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue"
+  );
+const channelMain = () =>
+  import(
+    "@/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue"
+  );
+const complaintAdd = () =>
+  import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
+const reportType = () =>
+  import("@/modules/11_discipline/components/5_Report/reportDetail.vue");
 
 const InvestigateDisciplinaryAdd = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue"
   );
+const channelAdd = () =>
+  import(
+    "@/modules/11_discipline/components/ุ6_Information/Channel/addChannel.vue"
+  );
 export default [
   {
     path: "/discipline/complaints",
@@ -134,4 +156,14 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/discipline/channel/add",
+    name: "/discipline-channelAdd",
+    component: channelAdd,
+    meta: {
+      Auth: true,
+      Key: [11.2],
+      Role: "coin",
+    },
+  },
 ];