ปรับ interfeac

2023-10-19 15:39:18 +07:00 · 2023-10-19 15:39:18 +07:00 · cfc073e30c
commit cfc073e30c
parent 09b1b9f492
16 changed files with 462 additions and 277 deletions
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";

 // import Type
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type {
-  DataOption,
+  FormData,
  MyObjectComplaintsRef,
-} from "../../interface/index/Main";
-
+} from "@/modules/11_discipline/interface/request/complaint";
 // importStroe
 import { useCounterMixin } from "@/stores/mixin";
-import { useComplainstDataStore } from "../../store/ComplaintsStore";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";

 const $q = useQuasar();
 const router = useRouter();
@ -19,7 +19,7 @@ const mixin = useCounterMixin();
 const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก

 const complainstStore = useComplainstDataStore();
-const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore; // function จาก store complainstStore
+const { selectComplainantTpye, filterSelector, fetchOptioin } = complainstStore; // function จาก store complainstStore

 // options ทั้งหมด
 const complainantoptions = ref<DataOption[]>([
@ -52,38 +52,40 @@ const receivecomplaintstoptions = ref<DataOption[]>([
  { id: "6", name: "บอกกล่าว" },
 ]);
 // ข้อมูล form
-const complainantType = ref<string>("");
-const complainant = ref<string>(""); //  รายชื่อจากทะเบียน
-const office = ref<string>(""); // สำนักงาน
-const agency = ref<string>("");
-const topicComplaint = ref<string>("");
-const detail = ref<string>("");
-const datereceive = ref<Date>();
-const dateconsideration = ref<Date>();
-const offenseDescription = ref<string>("");
-const considerationLevel = ref<string>("");
-const datewarn = ref<Date>();
-const receivecomplaints = ref<string>("");
-const petitioner = ref<string>("");
-const files = ref<any>();
+const formData = reactive<FormData>({
+  complainantType: "",
+  complainant: "",
+  office: "",
+  agency: "",
+  topicComplaint: "",
+  detail: "",
+  datereceive: null,
+  dateconsideration: null,
+  offenseDescription: "",
+  considerationLevel: "",
+  datewarn: null,
+  receivecomplaints: "",
+  petitioner: "",
+  files: null,
+});
 const fileDocDataUpload = ref<File[]>([]);

 onMounted(() => {
-  fectOptioin(complainantoptions.value, agencytoptions.value);
+  fetchOptioin(complainantoptions.value, agencytoptions.value);
 });
 // เลือกผู้ร้องเรียน
 async function selectComplainant(val: string) {
-  complainant.value = "";
-  office.value = "";
-  agency.value = "";
+  formData.complainant = "";
+  formData.office = "";
+  formData.agency = "";
  if (val === "0") {
-    await fectListname(); // ถ้าเลือกบุกคลจะเรียก function fectListname เรียกรายชื่อจากทะเบียน
+    await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
  } else if (val === "1") {
-    await fectOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fectOffice  เรียกโครงสร้างสำนักงาน
+    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
  }
 }
 // เรียกรายชื่อ
-async function fectListname() {
+async function fetchListname() {
  const listName = [
    {
      id: "1",
@ -101,7 +103,7 @@ async function fectListname() {
  selectComplainantTpye(listName);
 }
 // เรียกโครงสร้างสำนักงาน
-async function fectOffice() {
+async function fetchOffice() {
  // const listOffice = [
  //   {
  //     id: "1",
@ -134,29 +136,35 @@ function selectLevel(val: string) {
    dayNum = 15; // ด่วนมาก
  }
  // วันแจ้งเตือนล่วงหน้า
-  if (dateconsideration.value) {
-    const currentDate = new Date(dateconsideration.value);
+  if (formData.dateconsideration) {
+    const currentDate = new Date(formData.dateconsideration);
    const newDate = new Date(
      currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000
    );
-    datewarn.value = newDate;
+    formData.datewarn = newDate;
  }
 }
+watch(formData, () => {
+  if (formData.considerationLevel !== "") {
+    selectLevel(formData.considerationLevel);
+  }
+});
+
 // validateForm
-const complainantTypeRef = ref<any>(null);
-const complainantRef = ref<any>(null);
-const officeRef = ref<any>(null);
-const agencyRef = ref<any>(null);
-const topicComplaintRef = ref<any>(null);
-const detailRef = ref<any>(null);
-const datereceiveRef = ref<any>();
-const dateconsiderationRef = ref<any>(null);
-const offenseDescriptionRef = ref<any>(null);
-const considerationLevelRef = ref<any>(null);
-const datewarnRef = ref<any>(null);
-const receivecomplaintsRef = ref<any>(null);
-const petitionerRef = ref<any>(null);
-const filesRef = ref<any>(null);
+const complainantTypeRef = ref<Object | null>(null);
+const complainantRef = ref<Object | null>(null);
+const officeRef = ref<Object | null>(null);
+const agencyRef = ref<Object | null>(null);
+const topicComplaintRef = ref<Object | null>(null);
+const detailRef = ref<Object | null>(null);
+const datereceiveRef = ref<Object | null>();
+const dateconsiderationRef = ref<Object | null>(null);
+const offenseDescriptionRef = ref<Object | null>(null);
+const considerationLevelRef = ref<Object | null>(null);
+const datewarnRef = ref<Object | null>(null);
+const receivecomplaintsRef = ref<Object | null>(null);
+const petitionerRef = ref<Object | null>(null);
+const filesRef = ref<Object | null>(null);

 const objectComplaintsRef: MyObjectComplaintsRef = {
  complainantType: complainantTypeRef,
@ -195,7 +203,9 @@ function validateForm() {
 function onSubmit() {
  dialogConfirm(
    $q,
-    async () => {},
+    async () => {
+      console.log(formData);
+    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
@ -222,12 +232,13 @@ function onSubmit() {
          <div
            class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
          >
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="complainantType">
              <q-select
+                for="complainantType"
                ref="complainantTypeRef"
                dense
                outlined
-                v-model="complainantType"
+                v-model="formData.complainantType"
                :options="complainstStore.complainantoptions"
                label="ผู้ร้องเรียน"
                option-value="id"
@ -236,7 +247,9 @@ function onSubmit() {
                map-options
                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                lazy-rules
-                @update:model-value="selectComplainant(complainantType)"
+                @update:model-value="
+                  selectComplainant(formData.complainantType)
+                "
                use-input
                @filter="(inputValue: any,
                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
@ -252,12 +265,17 @@ function onSubmit() {
              </q-select>
            </div>

-            <div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
+            <div
+              class="col-xs-12 col-sm-2"
+              id="complainant"
+              v-if="formData.complainantType === '0'"
+            >
              <q-select
+                for="complainant"
                ref="complainantRef"
                dense
                outlined
-                v-model="complainant"
+                v-model="formData.complainant"
                :options="complainstStore.optionListName"
                label="รายชื่อจากทะเบียรประวัติ"
                option-value="id"
@ -279,23 +297,30 @@ function onSubmit() {
                </template>
              </q-select>
            </div>
-            <div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
+            <div
+              class="col-xs-12 col-sm-2"
+              v-if="formData.complainantType === '1'"
+              id="office"
+            >
              <q-input
+                for="office"
+                name="office"
                ref="officeRef"
                dense
                outlined
-                v-model="office"
+                v-model="formData.office"
                label="เลือกสำนักงาน"
                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                lazy-rules
              />
            </div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="agency">
              <q-select
                ref="agencyRef"
+                for="agency"
                dense
                outlined
-                v-model="agency"
+                v-model="formData.agency"
                :options="complainstStore.agencytoptions"
                label="หน่วยงานที่พิจารณา"
                option-value="id"
@ -318,12 +343,13 @@ function onSubmit() {
                </template>
              </q-select>
            </div>
-            <div class="col-xs-12 col-sm-12">
+            <div class="col-xs-12 col-sm-12" id="topicComplaint">
              <q-input
+                for="topicComplaint"
                ref="topicComplaintRef"
                dense
                outlined
-                v-model="topicComplaint"
+                v-model="formData.topicComplaint"
                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                lazy-rules
                label="เรื่องร้องเรียน"
@ -331,12 +357,13 @@ function onSubmit() {
                rows="5"
              />
            </div>
-            <div class="col-xs-12 col-sm-12">
+            <div class="col-xs-12 col-sm-12" id="detail">
              <q-input
+                for="detail"
                ref="detailRef"
                dense
                outlined
-                v-model="detail"
+                v-model="formData.detail"
                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                lazy-rules
                label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
@ -344,10 +371,10 @@ function onSubmit() {
                rows="5"
              />
            </div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="datereceive">
              <datepicker
                menu-class-name="modalfix"
-                v-model="datereceive"
+                v-model="formData.datereceive"
                :locale="'th'"
                autoApply
                borderless
@ -362,12 +389,15 @@ function onSubmit() {
                </template>
                <template #trigger>
                  <q-input
+                    for="datereceive"
                    ref="datereceiveRef"
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
-                      datereceive != null ? date2Thai(datereceive) : null
+                      formData.datereceive != null
+                        ? date2Thai(formData.datereceive)
+                        : null
                    "
                    label="วันที่รับเรื่อง"
                    :rules="[
@ -387,10 +417,10 @@ function onSubmit() {
                </template>
              </datepicker>
            </div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="dateconsideration">
              <datepicker
                menu-class-name="modalfix"
-                v-model="dateconsideration"
+                v-model="formData.dateconsideration"
                :locale="'th'"
                autoApply
                borderless
@ -405,13 +435,14 @@ function onSubmit() {
                </template>
                <template #trigger>
                  <q-input
+                    for="dateconsideration"
                    ref="dateconsiderationRef"
                    outlined
                    dense
                    class="full-width datepicker"
                    :model-value="
-                      dateconsideration != null
-                        ? date2Thai(dateconsideration)
+                      formData.dateconsideration != null
+                        ? date2Thai(formData.dateconsideration)
                        : null
                    "
                    label="วันที่กำหนดวันพิจารณา"
@ -432,12 +463,13 @@ function onSubmit() {
                </template>
              </datepicker>
            </div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="offenseDescription">
              <q-select
+                for="offenseDescription"
                ref="offenseDescriptionRef"
                dense
                outlined
-                v-model="offenseDescription"
+                v-model="formData.offenseDescription"
                :options="offenseDescriptiontoptions"
                label="ลักษณะความผิด"
                option-value="id"
@ -448,12 +480,13 @@ function onSubmit() {
                lazy-rules
              />
            </div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="considerationLevel">
              <q-select
+                for="considerationLevel"
                ref="considerationLevelRef"
                dense
                outlined
-                v-model="considerationLevel"
+                v-model="formData.considerationLevel"
                :options="considerationLeveltoptions"
                label="ระดับการพิจารณา"
                option-value="id"
@ -462,14 +495,14 @@ function onSubmit() {
                map-options
                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
                lazy-rules
-                @update:model-value="selectLevel(considerationLevel)"
+                @update:model-value="selectLevel(formData.considerationLevel)"
              />
            </div>
            <div class="col-xs-12 col-sm-3"></div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="datewarn">
              <datepicker
                menu-class-name="modalfix"
-                v-model="datewarn"
+                v-model="formData.datewarn"
                :locale="'th'"
                autoApply
                borderless
@ -484,11 +517,16 @@ function onSubmit() {
                </template>
                <template #trigger>
                  <q-input
+                    for="datewarn"
                    ref="datewarnRef"
                    outlined
                    dense
                    class="full-width datepicker"
-                    :model-value="datewarn != null ? date2Thai(datewarn) : null"
+                    :model-value="
+                      formData.datewarn != null
+                        ? date2Thai(formData.datewarn)
+                        : null
+                    "
                    label="วันที่แจ้งเตือนล่วงหน้า"
                    :rules="[
                      (val) =>
@ -508,12 +546,13 @@ function onSubmit() {
                </template>
              </datepicker>
            </div>
-            <div class="col-xs-12 col-sm-2">
+            <div class="col-xs-12 col-sm-2" id="receivecomplaints">
              <q-select
+                for="receivecomplaints"
                ref="receivecomplaintsRef"
                dense
                outlined
-                v-model="receivecomplaints"
+                v-model="formData.receivecomplaints"
                :options="receivecomplaintstoptions"
                label="รับเรื่องร้องเรียน"
                option-value="id"
@ -525,24 +564,26 @@ function onSubmit() {
              />
            </div>
            <div class="col-xs-12 col-sm-6"></div>
-            <div class="col-xs-12 col-sm-4">
+            <div class="col-xs-12 col-sm-4" id="petitioner">
              <q-input
+                id="petitioner"
                ref="petitionerRef"
                dense
                outlined
-                v-model="petitioner"
+                v-model="formData.petitioner"
                label="ผู้ร้องเรียน"
                :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
                lazy-rules
              />
            </div>
-            <div class="col-xs-12 col-sm-4">
+            <div class="col-xs-12 col-sm-4" id="files">
              <q-file
+                for="files"
                ref="filesRef"
                class="col-xs-12 col-sm-10"
                outlined
                dense
-                v-model="files"
+                v-model="formData.files"
                @added="fileUploadDoc"
                label="ไฟล์เอกสารหลักฐาน"
                hide-bottom-space
@ -562,6 +603,7 @@ function onSubmit() {
        <div class="row col-12 q-pa-sm">
          <q-space />
          <q-btn
+            id="onSubmit"
            flat
            round
            color="secondary"
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@ -2,12 +2,15 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
+
+import type { DataList } from "@/modules/11_discipline/interface/response/complaint";
 // importStroe
-import { useComplainstDataStore } from "../../store/ComplaintsStore";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+
 const router = useRouter();

 const complainstStore = useComplainstDataStore();
-const { fectComplainst } = complainstStore; // function จาก stores
+const { fetchComplainst } = complainstStore; // function จาก stores

 //ข้อมูล Table
 const filterTable = ref<string>("");
@ -96,12 +99,12 @@ const visibleColumns = ref<string[]>([
  "considerationDeadlineDate",
 ]);
 onMounted(async () => {
-  await fecthListComplaints();
+  await fetchListComplaints();
 });

 // เรีนกรายการเรื่องร้องเรียน
-async function fecthListComplaints() {
-  const listData = [
+async function fetchListComplaints() {
+  const listData: DataList[] = [
    {
      subject: "ทุจริตในหน้าที่",
      detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
@ -131,7 +134,7 @@ async function fecthListComplaints() {
      considerationDeadlineDate: "2023-11-01",
    },
  ];
-  await fectComplainst(listData);
+  await fetchComplainst(listData);
 }
 function redirectToPageadd() {
  router.push(`/discipline/complaints/add`);
@ -157,6 +160,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
      <div class="q-pa-md">
        <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
          <q-btn
+            id="addComplaints"
            flat
            dense
            round
@ -167,10 +171,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
          >
          <q-space />
          <div class="col-2">
-            <q-input dense outlined v-model="filterTable" label="ค้นหา" />
+            <q-input
+              id="filterTable"
+              for="filterTable"
+              dense
+              outlined
+              v-model="filterTable"
+              label="ค้นหา"
+            />
          </div>
          <div class="col-2">
            <q-select
+              id="visibleColumns"
+              for="visibleColumns"
              v-model="visibleColumns"
              multiple
              outlined
@ -186,6 +199,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
          </div>
        </q-toolbar>
        <d-table
+          id="table"
          ref="table"
          :columns="columns"
          :rows="complainstStore.rows"
@ -209,46 +223,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="subject" :props="props">
-                {{ props.row.subject }}
-              </q-td>
-              <q-td key="detail" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.detail }}
+              <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-if="col.name == 'detail'">
+                  <div class="table_ellipsis">
+                    {{ props.row.detail }}
+                  </div>
+                </div>
+                <div v-else>
+                  {{ col.value }}
                </div>
-              </q-td>
-              <q-td key="complainant" :props="props">
-                {{ props.row.complainant }}
-              </q-td>
-              <q-td key="offenseDescription" :props="props">
-                {{ props.row.offenseDescription }}
-              </q-td>
-              <q-td key="creationDate" :props="props">
-                {{ props.row.creationDate }}
-              </q-td>
-              <q-td key="considerationLevel" :props="props">
-                {{ props.row.considerationLevel }}
-              </q-td>
-              <q-td key="considerationDeadlineDate" :props="props">
-                {{ props.row.considerationDeadlineDate }}
              </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> -->
        </d-table>
      </div>
    </q-card>