From e86b9eaf9dee7e0e834618217622523cbddce7cc Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 6 Nov 2023 17:50:19 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A3=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../1_Complaint/AddComplaintPage.vue          | 631 +-----------------
 .../components/1_Complaint/EditPage.vue       |  74 ++
 .../components/1_Complaint/Form.vue           | 619 +++++++++++++++++
 .../components/1_Complaint/MainPage.vue       |   3 +
 .../components/1_Complaint/TableComplaint.vue |   8 +-
 .../interface/response/complaint.ts           |   1 +
 src/modules/11_discipline/router.ts           |  12 +
 .../11_discipline/store/ComplaintsStore.ts    |  40 +-
 8 files changed, 763 insertions(+), 625 deletions(-)
 create mode 100644 src/modules/11_discipline/components/1_Complaint/EditPage.vue
 create mode 100644 src/modules/11_discipline/components/1_Complaint/Form.vue

diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index a149ad18a..ff3324f56 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -1,617 +1,32 @@
 <script setup lang="ts">
-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 {
-  FormData,
-  MyObjectComplaintsRef,
-} from "@/modules/11_discipline/interface/request/complaint";
-// importStroe
-import { useCounterMixin } from "@/stores/mixin";
-import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
-
-const $q = useQuasar();
+import { useRoute, useRouter } from "vue-router";
+import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
 const router = useRouter();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก
 
-const complainstStore = useComplainstDataStore();
-const { selectComplainantTpye, filterSelector, fetchOptioin } = complainstStore; // function จาก store complainstStore
-
-// options ทั้งหมด
-const complainantoptions = ref<DataOption[]>([
-  { id: "0", name: "บุคคล" },
-  { id: "1", name: "หน่ายงาน" },
-  { id: "2", name: "กรุงเทพหมานคร" },
-]);
-const agencytoptions = ref<DataOption[]>([
-  { id: "0", name: "หน่ายงานเอ" },
-  { id: "1", name: "หน่ายงานบี" },
-  { id: "2", name: "หน่ายงานชี" },
-]);
-const offenseDescriptiontoptions = ref<DataOption[]>([
-  { id: "0", name: "ยังไม่ระบุ" },
-  { id: "1", name: "ไม่ร้ายแรง" },
-  { id: "2", name: "ร้ายแรง" },
-]);
-const considerationLeveltoptions = ref<DataOption[]>([
-  { id: "0", name: "ปกติ" },
-  { id: "1", name: "ด่วน" },
-  { id: "2", name: "ด่วนมาก" },
-]);
-const receivecomplaintstoptions = ref<DataOption[]>([
-  { id: "0", name: "สตง" },
-  { id: "1", name: "ปปช" },
-  { id: "2", name: "ปปท" },
-  { id: "3", name: "จดหมาย" },
-  { id: "4", name: "อีเมล" },
-  { id: "5", name: "โทรศัพท์" },
-  { id: "6", name: "บอกกล่าว" },
-]);
-// ข้อมูล form
-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(() => {
-  fetchOptioin(complainantoptions.value, agencytoptions.value);
-});
-// เลือกผู้ร้องเรียน
-async function selectComplainant(val: string) {
-  formData.complainant = "";
-  formData.office = "";
-  formData.agency = "";
-  if (val === "0") {
-    await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
-  } else if (val === "1") {
-    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
-  }
-}
-// เรียกรายชื่อ
-async function fetchListname() {
-  const listName = [
-    {
-      id: "1",
-      name: "นายเอ",
-    },
-    {
-      id: "2",
-      name: "นายบี",
-    },
-    {
-      id: "3",
-      name: "นายชี",
-    },
-  ];
-  selectComplainantTpye(listName);
-}
-// เรียกโครงสร้างสำนักงาน
-async function fetchOffice() {
-  // const listOffice = [
-  //   {
-  //     id: "1",
-  //     name: "สำนักเอ",
-  //   },
-  //   {
-  //     id: "2",
-  //     name: "สำนักเอ",
-  //   },
-  //   {
-  //     id: "3",
-  //     name: "สำนักเอ",
-  //   },
-  // ];
-}
-// อัพโหลดไฟล์
-const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
-// เลือกระดับการพิจารณา
-function selectLevel(val: string) {
-  let dayNum = 0;
-  if (val == "3") {
-    dayNum = 15; // ด่วนมาก
-  } else if (val == "1") {
-    dayNum = 30; // ด่วน
-  } else {
-    dayNum = 45; // ปกติ
-  }
-  // วันแจ้งเตือนล่วงหน้า
-  if (formData.dateconsideration) {
-    const currentDate = new Date(formData.dateconsideration);
-    const newDate = new Date(
-      currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000
-    );
-    formData.datewarn = newDate;
-  }
-}
-
-// validateForm
-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,
-  complainant: complainantRef,
-  office: officeRef,
-  agency: agencyRef,
-  topicComplaint: topicComplaintRef,
-  detail: detailRef,
-  datereceive: datereceiveRef,
-  dateconsideration: dateconsiderationRef,
-  offenseDescription: offenseDescriptionRef,
-  considerationLevel: considerationLevelRef,
-  datewarn: datewarnRef,
-  receivecomplaints: receivecomplaintsRef,
-  petitioner: petitionerRef,
-  files: filesRef,
-};
-function validateForm() {
-  const hasError = [];
-  for (const key in objectComplaintsRef) {
-    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
-      const property = objectComplaintsRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  } else {
-    console.log("ไม่ผ่าน ");
-  }
-}
 // บันทึกข้อมูล
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      console.log(formData);
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
+const onSubmit = async () => {
+  // post
+  console.log("add");
+  router.push(`/discipline/complaints`);
+};
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      for="backMainPageButton"
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/discipline/complaints`)"
-    />
-    เพิ่มเรื่องร้องเรียน
-  </div>
-  <div class="col-12 q-mt-sm">
-    <q-card flat bordered>
-      <form @submit.prevent="validateForm">
-        <div class="col-12 row q-pa-md">
-          <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-3" id="complainantType">
-              <q-select
-                for="SelectcomplainantType"
-                ref="complainantTypeRef"
-                dense
-                outlined
-                v-model="formData.complainantType"
-                :options="complainstStore.complainantoptions"
-                label="ผู้ถูกร้องเรียน"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-                lazy-rules
-                @update:model-value="
-                  selectComplainant(formData.complainantType)
-                "
-                use-input
-                @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
-                )"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        for="#backMaininvestigate"
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      เพิ่มเรื่องร้องเรียน
+    </div>
 
-            <div
-              class="col-xs-12 col-sm-3"
-              id="complainant"
-              v-if="formData.complainantType === '0'"
-            >
-              <q-select
-                for="selectComplainant"
-                ref="complainantRef"
-                dense
-                outlined
-                v-model="formData.complainant"
-                :options="complainstStore.optionListName"
-                label="รายชื่อจากทะเบียรประวัติ"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
-                lazy-rules
-                use-input
-                @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantOP'
-                )"
-                ><template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-            <div
-              class="col-xs-12 col-sm-3"
-              v-if="formData.complainantType === '1'"
-              id="office"
-            >
-              <q-input
-                for="inputOffice"
-                name="office"
-                ref="officeRef"
-                dense
-                outlined
-                v-model="formData.office"
-                label="เลือกสำนักงาน"
-                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                lazy-rules
-              />
-            </div>
-            <div class="col-xs-12 col-sm-3" id="agency">
-              <q-select
-                ref="agencyRef"
-                for="selectAgency"
-                dense
-                outlined
-                v-model="formData.agency"
-                :options="complainstStore.agencytoptions"
-                label="หน่วยงานที่พิจารณา"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                lazy-rules
-                use-input
-                @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
-                )"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-            <div class="col-xs-12 col-sm-12" id="topicComplaint">
-              <q-input
-                for="inputTopicComplaint"
-                ref="topicComplaintRef"
-                dense
-                outlined
-                v-model="formData.topicComplaint"
-                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-                lazy-rules
-                label="เรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-            <div class="col-xs-12 col-sm-12" id="detail">
-              <q-input
-                for="inputDetail"
-                ref="detailRef"
-                dense
-                outlined
-                v-model="formData.detail"
-                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-                lazy-rules
-                label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-            <div class="col-xs-12 col-sm-3" id="datereceive">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.datereceive"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    for="inputDatereceive"
-                    ref="datereceiveRef"
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.datereceive != null
-                        ? date2Thai(formData.datereceive)
-                        : null
-                    "
-                    label="วันที่รับเรื่อง"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`,
-                    ]"
-                    lazy-rules
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="considerationLevel">
-              <q-select
-                for="selectConsiderationLevel"
-                ref="considerationLevelRef"
-                dense
-                outlined
-                v-model="formData.considerationLevel"
-                :options="considerationLeveltoptions"
-                label="ระดับการพิจารณา"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
-                lazy-rules
-                @update:model-value="selectLevel(formData.considerationLevel)"
-              />
-            </div>
-            <div class="col-xs-12 col-sm-3" id="dateconsideration">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.dateconsideration"
-                @update:model-value="selectLevel(formData.considerationLevel)"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    for="inputDateconsideration"
-                    ref="dateconsiderationRef"
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateconsideration != null
-                        ? date2Thai(formData.dateconsideration)
-                        : null
-                    "
-                    label="วันที่กำหนดวันพิจารณา"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่กำหนดวันพิจารณา'}`,
-                    ]"
-                    lazy-rules
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-12 col-sm-3" id="offenseDescription">
-              <q-select
-                for="selectOffenseDescription"
-                ref="offenseDescriptionRef"
-                dense
-                outlined
-                v-model="formData.offenseDescription"
-                :options="offenseDescriptiontoptions"
-                label="ลักษณะความผิด"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-                lazy-rules
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="datewarn">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.datewarn"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    for="inputDatewarn"
-                    ref="datewarnRef"
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.datewarn != null
-                        ? date2Thai(formData.datewarn)
-                        : null
-                    "
-                    label="วันที่แจ้งเตือนล่วงหน้า"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่วงหน้า'}`,
-                    ]"
-                    lazy-rules
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-12 col-sm-3" id="receivecomplaints">
-              <q-select
-                for="selectReceivecomplaints"
-                ref="receivecomplaintsRef"
-                dense
-                outlined
-                v-model="formData.receivecomplaints"
-                :options="receivecomplaintstoptions"
-                label="รับเรื่องร้องเรียน"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`]"
-                lazy-rules
-              />
-            </div>
-            <div class="col-xs-12 col-sm-12" id="petitioner">
-              <q-input
-                for="inputPetitioner"
-                ref="petitionerRef"
-                dense
-                outlined
-                v-model="formData.petitioner"
-                label="ผู้ร้องเรียน"
-                :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
-                lazy-rules
-                type="textarea"
-                rows="5"
-              />
-            </div>
-            <div class="col-xs-12 col-sm-6" id="files">
-              <q-file
-                for="inputFiles"
-                ref="filesRef"
-                outlined
-                dense
-                v-model="formData.files"
-                @added="fileUploadDoc"
-                label="ไฟล์เอกสารหลักฐาน"
-                hide-bottom-space
-                lazy-rules
-                accept=".pdf,.xlsx,.doc"
-                clearable
-                :rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </div>
-        <q-separator />
-        <div class="row col-12 q-pa-sm">
-          <q-space />
-          <q-btn
-            for="ButtonOnSubmit"
-            id="onSubmit"
-            color="secondary"
-            label="บันทึก"
-            type="submit"
-            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-          >
-        </div>
-      </form>
-    </q-card>
+    <Form :on-submit="onSubmit" />
   </div>
 </template>
-
-<style scoped></style>
diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
new file mode 100644
index 000000000..2faab85dd
--- /dev/null
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/complaint";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+onMounted(() => {
+  fetchData();
+});
+
+// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+const data = reactive<FormData>({
+  complainantType: "",
+  complainant: "",
+  office: "",
+  agency: "",
+  topicComplaint: "",
+  detail: "",
+  datereceive: null,
+  dateconsideration: null,
+  offenseDescription: "",
+  considerationLevel: "",
+  datewarn: null,
+  receivecomplaints: "",
+  petitioner: "",
+  files: null,
+});
+const fetchData = async () => {
+  // ดึงค่าจาก api
+  data.complainantType = "2"
+  data.complainant = "1"
+  data.office = "0"
+  data.agency = "2"
+  data.topicComplaint = "test"
+  data.detail = "test"
+  data.datereceive = new Date("2023-11-07T14:58:00")
+  data.dateconsideration = new Date("2023-11-07T14:58:00")
+  data.offenseDescription = "0"
+  data.considerationLevel = "0"
+  data.datewarn = new Date("2023-11-07T14:58:00")
+  data.receivecomplaints = "0"
+  data.petitioner = "test"
+  data.files = ""
+};
+
+// แก้ไขข้อมูล
+const onSubmit = async () => {
+  // put
+  console.log("edit");
+  router.push(`/discipline/complaints`);
+};
+</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="$router.push(`/discipline/complaints`)"
+      />
+      แก้ไขเรื่องร้องเรียน {{ id }}#id
+    </div>
+
+    <Form :on-submit="onSubmit" :data="data" />
+  </div>
+</template>
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
new file mode 100644
index 000000000..d995f64a3
--- /dev/null
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -0,0 +1,619 @@
+<script setup lang="ts">
+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 {
+  FormData,
+  MyObjectComplaintsRef,
+} from "@/modules/11_discipline/interface/request/complaint";
+// importStroe
+import { useCounterMixin } from "@/stores/mixin";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก
+
+const complainstStore = useComplainstDataStore();
+const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
+
+// options ทั้งหมด
+
+
+const offenseDescriptiontoptions = ref<DataOption[]>([
+  { id: "0", name: "ยังไม่ระบุ" },
+  { id: "1", name: "ไม่ร้ายแรง" },
+  { id: "2", name: "ร้ายแรง" },
+]);
+const considerationLeveltoptions = ref<DataOption[]>([
+  { id: "0", name: "ปกติ" },
+  { id: "1", name: "ด่วน" },
+  { id: "2", name: "ด่วนมาก" },
+]);
+const receivecomplaintstoptions = ref<DataOption[]>([
+  { id: "0", name: "สตง" },
+  { id: "1", name: "ปปช" },
+  { id: "2", name: "ปปท" },
+  { id: "3", name: "จดหมาย" },
+  { id: "4", name: "อีเมล" },
+  { id: "5", name: "โทรศัพท์" },
+  { id: "6", name: "บอกกล่าว" },
+]);
+// ข้อมูล form
+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[]>([]);
+
+// เลือกผู้ร้องเรียน
+async function selectComplainant(val: string) {
+  formData.complainant = "";
+  formData.office = "";
+  formData.agency = "";
+  if (val === "0") {
+    await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
+  } else if (val === "1") {
+    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
+  }
+}
+// เรียกรายชื่อ
+async function fetchListname() {
+  const listName = [
+    {
+      id: "1",
+      name: "นายเอ",
+    },
+    {
+      id: "2",
+      name: "นายบี",
+    },
+    {
+      id: "3",
+      name: "นายชี",
+    },
+  ];
+  selectComplainantTpye(listName);
+}
+// เรียกโครงสร้างสำนักงาน
+async function fetchOffice() {
+  // const listOffice = [
+  //   {
+  //     id: "1",
+  //     name: "สำนักเอ",
+  //   },
+  //   {
+  //     id: "2",
+  //     name: "สำนักเอ",
+  //   },
+  //   {
+  //     id: "3",
+  //     name: "สำนักเอ",
+  //   },
+  // ];
+}
+// อัพโหลดไฟล์
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+// เลือกระดับการพิจารณา
+function selectLevel(val: string) {
+  let dayNum = 0;
+  if (val == "3") {
+    dayNum = 15; // ด่วนมาก
+  } else if (val == "1") {
+    dayNum = 30; // ด่วน
+  } else {
+    dayNum = 45; // ปกติ
+  }
+  // วันแจ้งเตือนล่วงหน้า
+  if (formData.dateconsideration) {
+    const currentDate = new Date(formData.dateconsideration);
+    const newDate = new Date(
+      currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000
+    );
+    formData.datewarn = newDate;
+  }
+}
+
+// validateForm
+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,
+  complainant: complainantRef,
+  office: officeRef,
+  agency: agencyRef,
+  topicComplaint: topicComplaintRef,
+  detail: detailRef,
+  datereceive: datereceiveRef,
+  dateconsideration: dateconsiderationRef,
+  offenseDescription: offenseDescriptionRef,
+  considerationLevel: considerationLevelRef,
+  datewarn: datewarnRef,
+  receivecomplaints: receivecomplaintsRef,
+  petitioner: petitionerRef,
+  files: filesRef,
+};
+function validateForm() {
+  const hasError = [];
+  for (const key in objectComplaintsRef) {
+    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
+      const property = objectComplaintsRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
+// บันทึกข้อมูล
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit()
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+watch(props.data, async () => {
+  formData.complainantType = props.data.complainantType;
+  formData.complainant = props.data.complainant;
+  formData.office = props.data.office;
+  formData.agency = props.data.agency;
+  formData.topicComplaint = props.data.topicComplaint;
+  formData.detail = props.data.detail;
+  formData.datereceive = props.data.datereceive;
+  formData.dateconsideration = props.data.dateconsideration;
+  formData.offenseDescription = props.data.offenseDescription;
+  formData.considerationLevel = props.data.considerationLevel;
+  formData.datewarn = props.data.datewarn;
+  formData.receivecomplaints = props.data.receivecomplaints;
+  formData.petitioner = props.data.petitioner;
+  formData.files = props.data.files;
+});
+</script>
+<template>
+  <div class="col-12 q-mt-sm">
+    <q-card flat bordered>
+      <form @submit.prevent="validateForm">
+        <div class="col-12 row q-pa-md">
+          <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-3" id="complainantType">
+              <q-select
+                for="SelectcomplainantType"
+                ref="complainantTypeRef"
+                dense
+                outlined
+                v-model="formData.complainantType"
+                :options="complainstStore.complainantoptions"
+                label="ผู้ถูกร้องเรียน"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                lazy-rules
+                @update:model-value="
+                  selectComplainant(formData.complainantType)
+                "
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
+                )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div
+              class="col-xs-12 col-sm-3"
+              id="complainant"
+              v-if="formData.complainantType === '0'"
+            >
+              <q-select
+                for="selectComplainant"
+                ref="complainantRef"
+                dense
+                outlined
+                v-model="formData.complainant"
+                :options="complainstStore.optionListName"
+                label="รายชื่อจากทะเบียรประวัติ"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
+                lazy-rules
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantOP'
+                )"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div
+              class="col-xs-12 col-sm-3"
+              v-if="formData.complainantType === '1'"
+              id="office"
+            >
+              <q-input
+                for="inputOffice"
+                name="office"
+                ref="officeRef"
+                dense
+                outlined
+                v-model="formData.office"
+                label="เลือกสำนักงาน"
+                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                lazy-rules
+              />
+            </div>
+            <div class="col-xs-12 col-sm-3" id="agency">
+              <q-select
+                ref="agencyRef"
+                for="selectAgency"
+                dense
+                outlined
+                v-model="formData.agency"
+                :options="complainstStore.agencytoptions"
+                label="หน่วยงานที่พิจารณา"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                lazy-rules
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
+                )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-12" id="topicComplaint">
+              <q-input
+                for="inputTopicComplaint"
+                ref="topicComplaintRef"
+                dense
+                outlined
+                v-model="formData.topicComplaint"
+                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+                lazy-rules
+                label="เรื่องร้องเรียน"
+                type="textarea"
+                rows="5"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12" id="detail">
+              <q-input
+                for="inputDetail"
+                ref="detailRef"
+                dense
+                outlined
+                v-model="formData.detail"
+                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+                lazy-rules
+                label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
+                type="textarea"
+                rows="5"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-3" id="datereceive">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.datereceive"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatereceive"
+                    ref="datereceiveRef"
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.datereceive != null
+                        ? date2Thai(formData.datereceive)
+                        : null
+                    "
+                    label="วันที่รับเรื่อง"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`,
+                    ]"
+                    lazy-rules
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-12 col-sm-3" id="considerationLevel">
+              <q-select
+                for="selectConsiderationLevel"
+                ref="considerationLevelRef"
+                dense
+                outlined
+                v-model="formData.considerationLevel"
+                :options="considerationLeveltoptions"
+                label="ระดับการพิจารณา"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
+                lazy-rules
+                @update:model-value="selectLevel(formData.considerationLevel)"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-3" id="dateconsideration">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateconsideration"
+                @update:model-value="selectLevel(formData.considerationLevel)"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDateconsideration"
+                    ref="dateconsiderationRef"
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.dateconsideration != null
+                        ? date2Thai(formData.dateconsideration)
+                        : null
+                    "
+                    label="วันที่กำหนดวันพิจารณา"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่กำหนดวันพิจารณา'}`,
+                    ]"
+                    lazy-rules
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-3" id="offenseDescription">
+              <q-select
+                for="selectOffenseDescription"
+                ref="offenseDescriptionRef"
+                dense
+                outlined
+                v-model="formData.offenseDescription"
+                :options="offenseDescriptiontoptions"
+                label="ลักษณะความผิด"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                lazy-rules
+              />
+            </div>
+
+            <div class="col-xs-12 col-sm-3" id="datewarn">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.datewarn"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatewarn"
+                    ref="datewarnRef"
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.datewarn != null
+                        ? date2Thai(formData.datewarn)
+                        : null
+                    "
+                    label="วันที่แจ้งเตือนล่วงหน้า"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่วงหน้า'}`,
+                    ]"
+                    lazy-rules
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-3" id="receivecomplaints">
+              <q-select
+                for="selectReceivecomplaints"
+                ref="receivecomplaintsRef"
+                dense
+                outlined
+                v-model="formData.receivecomplaints"
+                :options="receivecomplaintstoptions"
+                label="รับเรื่องร้องเรียน"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`]"
+                lazy-rules
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12" id="petitioner">
+              <q-input
+                for="inputPetitioner"
+                ref="petitionerRef"
+                dense
+                outlined
+                v-model="formData.petitioner"
+                label="ผู้ร้องเรียน"
+                :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
+                lazy-rules
+                type="textarea"
+                rows="5"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6" id="files">
+              <q-file
+                for="inputFiles"
+                ref="filesRef"
+                outlined
+                dense
+                v-model="formData.files"
+                @added="fileUploadDoc"
+                label="ไฟล์เอกสารหลักฐาน"
+                hide-bottom-space
+                lazy-rules
+                accept=".pdf,.xlsx,.doc"
+                clearable
+                :rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            for="ButtonOnSubmit"
+            id="onSubmit"
+            color="secondary"
+            label="บันทึก"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </form>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index a66d1273b..e6a5711dd 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -25,6 +25,7 @@ onMounted(async () => {
 async function fetchListComplaints() {
   const listData: DataList[] = [
     {
+      id:'001',
       subject: "ทุจริตในหน้าที่",
       detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
       complainant: "นางศิรินภา คงน้อย",
@@ -34,6 +35,7 @@ async function fetchListComplaints() {
       considerationDeadlineDate: new Date("2023-12-02"),
     },
     {
+      id:'002',
       subject: "ทุจริตในหน้าที่",
       detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
       complainant: "นายแก้ว คำ",
@@ -43,6 +45,7 @@ async function fetchListComplaints() {
       considerationDeadlineDate: new Date("2023-12-02"),
     },
     {
+      id:'003',
       subject: "ทุจริตในหน้าที่",
       detail:
         "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index 241823b92..8cb62b037 100644
--- 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 { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 // importStroe
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+import { useRoute, useRouter } from "vue-router";
+const router = useRouter();
 
 const complainstStore = useComplainstDataStore();
 
@@ -109,6 +111,10 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+function OpenEdit(id:string){
+  console.log(id)
+  router.push(`/discipline/complaints/${id}`)
+}
 </script>
 
 <template>
@@ -136,7 +142,7 @@ const pagination = ref({
     </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">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="OpenEdit(props.row.id)">
           <div v-if="col.name == 'no'">
             {{ props.rowIndex + 1 }}
           </div>
diff --git a/src/modules/11_discipline/interface/response/complaint.ts b/src/modules/11_discipline/interface/response/complaint.ts
index 2f885f2bf..42baf3b89 100644
--- a/src/modules/11_discipline/interface/response/complaint.ts
+++ b/src/modules/11_discipline/interface/response/complaint.ts
@@ -8,6 +8,7 @@ interface DataListRow {
     considerationDeadlineDate: string | null
 }
 interface DataList {
+    id:string
     subject: string
     detail: string
     complainant: string
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index b2d60b26c..895d1354d 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -36,6 +36,8 @@ const channelAdd = () =>
   );
 const complaintAdd = () =>
   import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
+const complaintEdit = () =>
+  import("@/modules/11_discipline/components/1_Complaint/EditPage.vue");
 const reportType = () =>
   import("@/modules/11_discipline/components/5_Report/DetailPage.vue");
 
@@ -66,6 +68,16 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/discipline/complaints/:id",
+    name: "/discipline-complaints-edit",
+    component: complaintEdit,
+    meta: {
+      Auth: true,
+      Key: [11.1],
+      Role: "coin",
+    },
+  },
   {
     path: "/discipline/investigatefacts",
     name: "/discipline-investigatefacts",
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index c2017a021..bff517417 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -16,6 +16,7 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
     const columns = ref<QTableProps["columns"]>([]);
     function fetchComplainst(data: DataList[]) {
         let datalist = data.map((e: DataList) => ({
+            id: e.id,
             subject: e.subject,
             detail: e.detail,
             complainant: e.complainant,
@@ -27,37 +28,45 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         rows.value = datalist
     }
     // filter options
-    const complainantoptionsMain = ref<DataOption[]>()
-    const complainantoptions = ref<DataOption[]>()
-    const agencytoptionsMain = ref<DataOption[]>()
-    const agencytoptions = ref<DataOption[]>()
+    const complainantoptionsMain = ref<DataOption[]>([
+        { id: "0", name: "บุคคล" },
+        { id: "1", name: "หน่ายงาน" },
+        { id: "2", name: "กรุงเทพหมานคร" },
+    ]);
+    const complainantoptions = ref<DataOption[]>(complainantoptionsMain.value)
+    const agencytoptionsMain = ref<DataOption[]>([
+        { id: "0", name: "หน่ายงานเอ" },
+        { id: "1", name: "หน่ายงานบี" },
+        { id: "2", name: "หน่ายงานชี" },
+    ]);
+    const agencytoptions = ref<DataOption[]>(agencytoptionsMain.value)
     const optionListNameMain = ref<DataOption[]>([])
     const optionListName = ref<DataOption[]>([])
-    function fetchOptioin(complainantoptions: any, agencytoptions: any) {
-        complainantoptionsMain.value = complainantoptions
-        agencytoptionsMain.value = agencytoptions
-    }
+
     function selectComplainantTpye(list: any) {
         optionListNameMain.value = list
         optionListName.value = list
     }
     function filterSelector(val: string, update: Function, type: string) {
         update(() => {
-            if (type === "filtercomplainantType" && complainantoptionsMain.value) {
+            const needle = val.toLowerCase();
+
+            if (type === "filtercomplainantType") {
                 complainantoptions.value = complainantoptionsMain.value.filter(
-                    (e) => e.name.search(val) !== -1
+                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
                 );
-            } else if (type === "filteragencytoptions" && agencytoptionsMain.value) {
+
+            } else if (type === "filteragencytoptions") {
                 agencytoptions.value = agencytoptionsMain.value.filter(
-                    (e) => e.name.search(val) !== -1
+                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
                 );
-            } else if (type === "filtercomplainantOP" && optionListNameMain.value) {
+            } else if (type === "filtercomplainantOP") {
                 optionListName.value = optionListNameMain.value.filter(
-                    (e) => e.name.search(val) !== -1
+                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
                 );
             }
 
-        })
+        });
     }
 
     return {
@@ -67,7 +76,6 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         fetchComplainst,
         selectComplainantTpye,
         filterSelector,
-        fetchOptioin,
         complainantoptions,
         agencytoptions,
         optionListName,