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

src/components/Dialogs/AddPersonal.vue

@@ -154,11 +154,11 @@ function saveData() {
 /** input ค้นหา */
 function searchInput() {
   const data = dataObject.value;
-  if (type.value === "001") {
+  if (type.value === "idcard") {
     rows.value = data.filter((item: any) => item.cardId === search.value);
-  } else if (type.value === "002") {
+  } else if (type.value === "firstname") {
     rows.value = data.filter((item: any) => item.firstName === search.value);
-  } else if (type.value === "003") {
+  } else if (type.value === "lastname") {
     rows.value = data.filter((item: any) => item.lastName === search.value);
   }
 }

src/modules/11_discipline/components/1_Complaint/EditPage.vue

@@ -2,62 +2,88 @@
 import { onMounted, reactive, ref } from "vue";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
 import { useRouter, useRoute } from "vue-router";
-import type { FormData } from "@/modules/11_discipline/interface/request/complaint";
+import type {
+  FormData,
+  ArrayPerson,
+} from "@/modules/11_discipline/interface/request/complaint";
 
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
 /** ข้อมูล v-model ของฟอร์ม */
+const personOj = reactive<ArrayPerson>({
+  idcard: "",
+  name: "",
+  position: "",
+  positionLevel: "",
+  educationQualification: "",
+  organization: "",
+});
 const data = reactive<FormData>({
-  complainantType: "",
+  respondentType: "",
-  complainant: "",
   office: "",
-  agency: "",
+  consideredAgency: "",
-  topicComplaint: "",
+  title: "",
-  detail: "",
+  description: "",
-  datereceive: null,
+  dateReceived: null,
-  dateconsideration: null,
+  dateConsideration: null,
-  offenseDescription: "",
+  offenseDetails: "",
-  considerationLevel: "",
+  levelConsideration: "",
-  datewarn: null,
+  dateNotification: null,
-  receivecomplaints: "",
+  complaintFrom: "",
-  petitioner: "",
+  appellant: "",
-  files: null,
+  documentFile: null,
+  complaintStatus: "",
+  organizationId: "",
+  persons: [personOj],
+  personId:[],
+  respondentId:[]
 });
 
 /** ดึงค่าจาก api */
 const fetchData = async () => {
-  data.complainantType = "2"
+  data.respondentType = "PERSON";
-  data.complainant = "1"
+  data.office = "0";
-  data.office = "0"
+  data.consideredAgency = "2";
-  data.agency = "2"
+  data.title = "ทุจริตในหน้าที่";
-  data.topicComplaint = "test"
+  data.description = "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน";
-  data.detail = "test"
+  data.dateReceived = new Date("2023-11-05");
-  data.datereceive = new Date("2023-11-07T14:58:00")
+  data.dateConsideration = new Date("2023-11-07T14:58:00");
-  data.dateconsideration = new Date("2023-11-07T14:58:00")
+  data.offenseDetails = "NOT_SPECIFIED";
-  data.offenseDescription = "0"
+  data.levelConsideration = "NORMAL";
-  data.considerationLevel = "0"
+  data.dateNotification = new Date("2023-11-07T14:58:00");
-  data.datewarn = new Date("2023-11-07T14:58:00")
+  data.complaintFrom = "สตง";
-  data.receivecomplaints = "0"
+  data.appellant = "สมศรี สุขใจ";
-  data.petitioner = "test"
+  data.documentFile = "";
-  data.files = ""
+  data.complaintStatus = "NEW";
+  data.persons = [
+    {
+      idcard: "1529900022223",
+      name: "นางศิรินภา คงน้อย",
+      position: "ธุรการ",
+      positionLevel: "ต้น",
+      educationQualification: "ปริญญาตรี",
+      organization: "สกจ.",
+    },
+  ]
 };
 
 /** ฟังชั่น แก้ไข */
 async function onSubmit() {
   console.log("edit");
   router.push(`/discipline/complaints`);
-};
+}
 
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(() => {
+  console.log(data);
   fetchData();
 });
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
-    <div class="toptitle col-12 row items-center">
+    <div class="toptitle col-12 row items-end">
       <q-btn
         icon="mdi-arrow-left"
         unelevated
@@ -68,7 +94,25 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/complaints`)"
       />
-      แก้ไขเรื่องร้องเรียน {{ id }}#id
+      <div class="q-ma-none">แก้ไขเรื่องร้องเรียน {{ id }}#id</div>
+      <q-space />
+      <div class="q-gutter-x-sm">
+        <q-btn
+          v-if="data.complaintStatus === 'NEW'"
+          label="มีมูลส่งไปสืบสวน"
+          color="public"
+        />
+        <q-btn
+          v-if="data.complaintStatus === 'NEW'"
+          label="ยุติเรื่อง"
+          color="red-7"
+        />
+        <q-btn
+          v-if="data.complaintStatus === 'STOP'"
+          label="ยกเลิกการยุติเรื่อง"
+          color="red-7"
+        />
+      </div>
     </div>
 
     <Form :on-submit="onSubmit" :data="data" />

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -9,6 +9,7 @@ import type {
   FormData,
   MyObjectComplaintsRef,
   DataAddRequest,
+  ArrayPerson,
 } from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
@@ -28,20 +29,20 @@ const { date2Thai, dialogConfirm } = mixin;
 const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
 
 /** validateForm */
-const complainantTypeRef = ref<Object | null>(null);
+const respondentTypeRef = ref<Object | null>(null);
 const complainantRef = ref<Object | null>(null);
 const officeRef = ref<Object | null>(null);
-const agencyRef = ref<Object | null>(null);
+const consideredAgencyRef = ref<Object | null>(null);
-const topicComplaintRef = ref<Object | null>(null);
+const titleRef = ref<Object | null>(null);
-const detailRef = ref<Object | null>(null);
+const descriptionRef = ref<Object | null>(null);
-const datereceiveRef = ref<Object | null>();
+const dateReceivedRef = ref<Object | null>();
-const dateconsiderationRef = ref<Object | null>(null);
+const dateConsiderationRef = ref<Object | null>(null);
-const offenseDescriptionRef = ref<Object | null>(null);
+const offenseDetailsRef = ref<Object | null>(null);
-const considerationLevelRef = ref<Object | null>(null);
+const levelConsiderationRef = ref<Object | null>(null);
-const datewarnRef = ref<Object | null>(null);
+const dateNotificationRef = ref<Object | null>(null);
-const receivecomplaintsRef = ref<Object | null>(null);
+const complaintFromRef = ref<Object | null>(null);
-const petitionerRef = ref<Object | null>(null);
+const appellantRef = ref<Object | null>(null);
-const filesRef = ref<Object | null>(null);
+const documentFileRef = ref<Object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -56,60 +57,72 @@ const props = defineProps({
 });
 
 /** ข้อมูล form*/
+const personOj = reactive<ArrayPerson>({
+  idcard: "",
+  name: "",
+  position: "",
+  positionLevel: "",
+  educationQualification: "",
+  organization: "",
+});
+
 const formData = reactive<FormData>({
-  complainantType: "",
+  respondentType: "",
-  complainant: "",
   office: "",
-  agency: "",
+  consideredAgency: "",
-  topicComplaint: "",
+  title: "",
-  detail: "",
+  description: "",
-  datereceive: null,
+  dateReceived: null,
-  dateconsideration: null,
+  dateConsideration: null,
-  offenseDescription: "",
+  offenseDetails: "",
-  considerationLevel: "",
+  levelConsideration: "",
-  datewarn: null,
+  dateNotification: null,
-  receivecomplaints: "",
+  complaintFrom: "",
-  petitioner: "",
+  appellant: "",
-  files: null,
+  documentFile: null,
+  complaintStatus: "",
+  persons: [personOj],
+  personId: [],
+  organizationId: null,
+  respondentId: [],
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectComplaintsRef: MyObjectComplaintsRef = {
-  complainantType: complainantTypeRef,
+  respondentType: respondentTypeRef,
-  complainant: complainantRef,
   office: officeRef,
-  agency: agencyRef,
+  consideredAgency: consideredAgencyRef,
-  topicComplaint: topicComplaintRef,
+  title: titleRef,
-  detail: detailRef,
+  description: descriptionRef,
-  datereceive: datereceiveRef,
+  dateReceived: dateReceivedRef,
-  dateconsideration: dateconsiderationRef,
+  dateConsideration: dateConsiderationRef,
-  offenseDescription: offenseDescriptionRef,
+  offenseDetails: offenseDetailsRef,
-  considerationLevel: considerationLevelRef,
+  levelConsideration: levelConsiderationRef,
-  datewarn: datewarnRef,
+  dateNotification: dateNotificationRef,
-  receivecomplaints: receivecomplaintsRef,
+  complaintFrom: complaintFromRef,
-  petitioner: petitionerRef,
+  appellant: appellantRef,
-  files: filesRef,
+  documentFile: documentFileRef,
 };
 
 /** options ทั้งหมด*/
-const offenseDescriptiontoptions = ref<DataOption[]>([
+const offenseDetailstoptions = ref<DataOption[]>([
-  { id: "0", name: "ยังไม่ระบุ" },
+  { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
-  { id: "1", name: "ไม่ร้ายแรง" },
+  { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
-  { id: "2", name: "ร้ายแรง" },
+  { id: "DEADLY", name: "ร้ายแรง" },
 ]);
-const considerationLeveltoptions = ref<DataOption[]>([
+const levelConsiderationtoptions = ref<DataOption[]>([
-  { id: "0", name: "ปกติ" },
+  { id: "NORMAL", name: "ปกติ" },
-  { id: "1", name: "ด่วน" },
+  { id: "URGENT", name: "ด่วน" },
-  { id: "2", name: "ด่วนมาก" },
+  { id: "VERY_URGENT", name: "ด่วนมาก" },
 ]);
-const receivecomplaintstoptions = ref<DataOption[]>([
+const complaintFromtoptions = ref<DataOption[]>([
-  { id: "0", name: "สตง" },
+  { id: "สตง", name: "สตง" },
-  { id: "1", name: "ปปช" },
+  { id: "ปปช", name: "ปปช" },
-  { id: "2", name: "ปปท" },
+  { id: "ปปท", name: "ปปท" },
-  { id: "3", name: "จดหมาย" },
+  { id: "จดหมาย", name: "จดหมาย" },
-  { id: "4", name: "อีเมล" },
+  { id: "อีเมล", name: "อีเมล" },
-  { id: "5", name: "โทรศัพท์" },
+  { id: "โทรศัพท์", name: "โทรศัพท์" },
-  { id: "6", name: "บอกกล่าว" },
+  { id: "บอกกล่าว", name: "บอกกล่าว" },
 ]);
 
 /** หัวตาราง */
@@ -124,20 +137,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "cardId",
+    name: "idcard",
     align: "left",
     label: "เลขบัตรประชาชน",
     sortable: true,
-    field: "cardId",
+    field: "idcard",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "name",
     align: "left",
     label: "ชื่อ - นามสกุล",
     sortable: true,
-    field: "fullName",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -151,29 +164,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "positionLevel",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "level",
+    field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "degree",
+    name: "educationQualification",
     align: "left",
     label: "วุฒิการศึกษา",
     sortable: true,
-    field: "degree",
+    field: "educationQualification",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -182,12 +195,12 @@ const columns = ref<QTableProps["columns"]>([
 /** หัวข้อที่เเสดงในตาราง */
 const visibleColumns = ref<string[]>([
   "no",
-  "cardId",
+  "idcard",
-  "fullName",
+  "name",
   "position",
-  "level",
+  "positionLevel",
-  "degree",
+  "educationQualification",
-  "oc",
+  "organization",
 ]);
 
 /**
@@ -195,9 +208,8 @@ const visibleColumns = ref<string[]>([
  * @param val บุคคล หน่วยงาน กทม
  */
 async function selectComplainant(val: string) {
-  formData.complainant = "";
   formData.office = "";
-  formData.agency = "";
+  formData.consideredAgency = "";
   if (val === "0") {
     await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
   } else if (val === "1") {
@@ -229,10 +241,10 @@ async function fetchOffice() {}
 
 /**
  * ฟังชั่นอัปโหลดไฟล์
- * @param files ไฟล์ที่รับมา
+ * @param documentFile ไฟล์ที่รับมา
  */
-async function fileUploadDoc(files: any) {
+async function fileUploadDoc(documentFile: any) {
-  files.forEach((file: any) => {
+  documentFile.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
 }
@@ -251,12 +263,12 @@ function selectLevel(val: string) {
     dayNum = 45; // ปกติ
   }
   // วันแจ้งเตือนล่วงหน้า
-  if (formData.dateconsideration) {
+  if (formData.dateConsideration) {
-    const currentDate = new Date(formData.dateconsideration);
+    const currentDate = new Date(formData.dateConsideration);
     const newDate = new Date(
       currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000
     );
-    formData.datewarn = newDate;
+    formData.dateNotification = newDate;
   }
 }
 
@@ -299,40 +311,34 @@ async function addPerson() {
   const listData: DataAddRequest[] = [
     {
       id: "001",
-      cardId: "0000000000001",
+      idcard: "0000000000001",
-      prefix: "นาง",
+      name: "นางศิรินภา คงน้อย",
-      firstName: "ศิรินภา",
-      lastName: "คงน้อย",
       position: "ตำเเหน่ง1",
-      level: "level1",
+      positionLevel: "level1",
-      degree: "ป.ตรี",
+      educationQualification: "ป.ตรี",
-      oc: "สำนักงาน 1",
+      organization: "สำนักงาน 1",
     },
     {
       id: "002",
-      cardId: "0000000000002",
+      idcard: "0000000000002",
-      prefix: "นาย",
+      name: "นายแก้ว คำ",
-      firstName: "แก้ว",
-      lastName: "คำ",
       position: "ตำแหน่ง2",
-      level: "level2",
+      positionLevel: "level2",
-      degree: "ป.โท",
+      educationQualification: "ป.โท",
-      oc: "สำนักงาน 2",
+      organization: "สำนักงาน 2",
     },
     {
       id: "003",
-      cardId: "0000000000003",
+      idcard: "0000000000003",
-      prefix: "นาย",
+      name: "นายภัทรานุย คงนอย",
-      firstName: "ภัทรานุย",
-      lastName: "คงนอย",
       position: "ตำแหน่ง2",
-      level: "level3",
+      positionLevel: "level3",
-      degree: "ป.เอก",
+      educationQualification: "ป.เอก",
-      oc: "สำนักงาน 3",
+      organization: "สำนักงาน 3",
     },
   ];
   await complainstStore.fetchComplainstAdd(listData);
-  toggleModal()
+  toggleModal();
 }
 
 /**
@@ -341,29 +347,31 @@ async function addPerson() {
  * เก็บข้อมูลลง formData
  */
 watch(props.data, async () => {
-  formData.complainantType = props.data.complainantType;
+  console.log(props.data.persons);
-  formData.complainant = props.data.complainant;
+  formData.respondentType = props.data.respondentType;
   formData.office = props.data.office;
-  formData.agency = props.data.agency;
+  formData.consideredAgency = props.data.consideredAgency;
-  formData.topicComplaint = props.data.topicComplaint;
+  formData.title = props.data.title;
-  formData.detail = props.data.detail;
+  formData.description = props.data.description;
-  formData.datereceive = props.data.datereceive;
+  formData.dateReceived = props.data.dateReceived;
-  formData.dateconsideration = props.data.dateconsideration;
+  formData.dateConsideration = props.data.dateConsideration;
-  formData.offenseDescription = props.data.offenseDescription;
+  formData.offenseDetails = props.data.offenseDetails;
-  formData.considerationLevel = props.data.considerationLevel;
+  formData.levelConsideration = props.data.levelConsideration;
-  formData.datewarn = props.data.datewarn;
+  formData.dateNotification = props.data.dateNotification;
-  formData.receivecomplaints = props.data.receivecomplaints;
+  formData.complaintFrom = props.data.complaintFrom;
-  formData.petitioner = props.data.petitioner;
+  formData.appellant = props.data.appellant;
-  formData.files = props.data.files;
+  formData.documentFile = props.data.documentFile;
+  formData.complaintStatus = props.data.complaintStatus;
+  complainstStore.fetchComplainstAdd(props.data.persons);
 });
 
 /**
  * ฟังชั่น รับค่าจาก คอมโพเเนน
  * @param returnData ค่าที่ได้คืนมา
  */
-function handleSave(returnData:any) {
+function handleSave(returnData: any) {
-      console.log('returnData:', returnData);
+  console.log("returnData:", returnData);
-    }
+}
 
 onMounted(() => {
   complainstStore.columns = columns.value;
@@ -376,13 +384,17 @@ onMounted(() => {
       <form @submit.prevent="validateForm">
         <div class="col-12 row q-pa-md">
           <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
-            <div class="col-xs-12 col-sm-3" id="complainantType">
+            <div class="col-xs-12 col-sm-3" id="respondentType">
               <q-select
-                for="SelectcomplainantType"
+                for="SelectrespondentType"
-                v-model="formData.complainantType"
+                v-model="formData.respondentType"
-                ref="complainantTypeRef"
+                ref="respondentTypeRef"
                 dense
                 outlined
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 label="ผู้ถูกร้องเรียน"
                 option-value="id"
                 option-label="name"
@@ -393,11 +405,9 @@ onMounted(() => {
                 :options="complainstStore.complainantoptions"
                 :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                 lazy-rules
-                @update:model-value="
+                @update:model-value="selectComplainant(formData.respondentType)"
-                  selectComplainant(formData.complainantType)
-                "
                 @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
                 )"
               >
                 <template v-slot:no-option>
@@ -412,34 +422,47 @@ onMounted(() => {
 
             <div
               class="col-xs-12 col-sm-3"
-              v-if="formData.complainantType === '1'"
+              v-if="formData.respondentType === 'ORGANIZATION'"
               id="office"
             >
-              <q-input
+              <q-select
                 for="inputOffice"
                 name="office"
                 ref="officeRef"
                 dense
                 hide-bottom-space
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 outlined
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
                 v-model="formData.office"
+                :options="complainstStore.officeOp"
                 label="เลือกสำนักงาน"
                 :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                 lazy-rules
               />
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="agency">
+            <div class="col-xs-12 col-sm-3" id="consideredAgency">
               <q-select
-                ref="agencyRef"
+                ref="consideredAgencyRef"
                 for="selectAgency"
                 dense
                 outlined
-                v-model="formData.agency"
+                v-model="formData.consideredAgency"
-                :options="complainstStore.agencytoptions"
+                :options="complainstStore.consideredAgencytoptions"
                 label="หน่วยงานที่พิจารณา"
                 option-value="id"
                 option-label="name"
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 hide-bottom-space
                 emit-value
                 map-options
@@ -447,7 +470,7 @@ onMounted(() => {
                 lazy-rules
                 use-input
                 @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
                 )"
               >
                 <template v-slot:no-option>
@@ -460,10 +483,18 @@ onMounted(() => {
               </q-select>
             </div>
 
-            <div class="full-width" v-if="formData.complainantType === '0'">
+            <div class="full-width" v-if="formData.respondentType === 'PERSON'">
               <div class="row col-12 q-mb-xs">
                 <q-space />
-                <q-btn color="blue" outline @click="toggleModal">
+                <q-btn
+                  color="blue"
+                  outline
+                  @click="toggleModal"
+                  v-if="
+                    formData.complaintStatus === 'NEW' ||
+                    formData.complaintStatus === ''
+                  "
+                >
                   <q-icon left name="add" />
                   <div>เพิ่ม</div>
                 </q-btn>
@@ -520,14 +551,18 @@ onMounted(() => {
               </div>
             </div>
 
-            <div class="col-xs-12 col-sm-12" id="topicComplaint">
+            <div class="col-xs-12 col-sm-12" id="title">
               <q-input
                 for="inputTopicComplaint"
-                ref="topicComplaintRef"
+                ref="titleRef"
                 dense
                 outlined
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 hide-bottom-space
-                v-model="formData.topicComplaint"
+                v-model="formData.title"
                 :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                 lazy-rules
                 label="เรื่องร้องเรียน"
@@ -536,14 +571,18 @@ onMounted(() => {
               />
             </div>
 
-            <div class="col-xs-12 col-sm-12" id="detail">
+            <div class="col-xs-12 col-sm-12" id="description">
               <q-input
                 for="inputDetail"
-                ref="detailRef"
+                ref="descriptionRef"
                 dense
                 outlined
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 hide-bottom-space
-                v-model="formData.detail"
+                v-model="formData.description"
                 :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                 lazy-rules
                 label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
@@ -552,13 +591,17 @@ onMounted(() => {
               />
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="datereceive">
+            <div class="col-xs-12 col-sm-3" id="dateReceived">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.datereceive"
+                v-model="formData.dateReceived"
                 :locale="'th'"
                 autoApply
                 borderless
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 :enableTimePicker="false"
                 week-start="0"
               >
@@ -571,14 +614,18 @@ onMounted(() => {
                 <template #trigger>
                   <q-input
                     for="inputDatereceive"
-                    ref="datereceiveRef"
+                    ref="dateReceivedRef"
                     outlined
                     dense
+                    :readonly="
+                      formData.complaintStatus !== 'NEW' &&
+                      formData.complaintStatus !== ''
+                    "
                     hide-bottom-space
                     class="full-width datepicker"
                     :model-value="
-                      formData.datereceive != null
+                      formData.dateReceived != null
-                        ? date2Thai(formData.datereceive)
+                        ? date2Thai(formData.dateReceived)
                         : null
                     "
                     label="วันที่รับเรื่อง"
@@ -600,14 +647,18 @@ onMounted(() => {
               </datepicker>
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="considerationLevel">
+            <div class="col-xs-12 col-sm-3" id="levelConsideration">
               <q-select
                 for="selectConsiderationLevel"
-                ref="considerationLevelRef"
+                ref="levelConsiderationRef"
                 dense
                 outlined
-                v-model="formData.considerationLevel"
+                :readonly="
-                :options="considerationLeveltoptions"
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
+                v-model="formData.levelConsideration"
+                :options="levelConsiderationtoptions"
                 label="ระดับการพิจารณา"
                 option-value="id"
                 option-label="name"
@@ -616,16 +667,20 @@ onMounted(() => {
                 map-options
                 :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
                 lazy-rules
-                @update:model-value="selectLevel(formData.considerationLevel)"
+                @update:model-value="selectLevel(formData.levelConsideration)"
               />
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="dateconsideration">
+            <div class="col-xs-12 col-sm-3" id="dateConsideration">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.dateconsideration"
+                v-model="formData.dateConsideration"
-                @update:model-value="selectLevel(formData.considerationLevel)"
+                @update:model-value="selectLevel(formData.levelConsideration)"
                 :locale="'th'"
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 autoApply
                 borderless
                 :enableTimePicker="false"
@@ -640,15 +695,19 @@ onMounted(() => {
                 <template #trigger>
                   <q-input
                     for="inputDateconsideration"
-                    ref="dateconsiderationRef"
+                    ref="dateConsiderationRef"
                     outlined
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formData.dateconsideration != null
+                      formData.dateConsideration != null
-                        ? date2Thai(formData.dateconsideration)
+                        ? date2Thai(formData.dateConsideration)
                         : null
                     "
+                    :readonly="
+                      formData.complaintStatus !== 'NEW' &&
+                      formData.complaintStatus !== ''
+                    "
                     label="วันที่กำหนดวันพิจารณา"
                     hide-bottom-space
                     :rules="[
@@ -669,14 +728,18 @@ onMounted(() => {
               </datepicker>
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="offenseDescription">
+            <div class="col-xs-12 col-sm-3" id="offenseDetails">
               <q-select
                 for="selectOffenseDescription"
-                ref="offenseDescriptionRef"
+                ref="offenseDetailsRef"
                 dense
                 outlined
-                v-model="formData.offenseDescription"
+                :readonly="
-                :options="offenseDescriptiontoptions"
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
+                v-model="formData.offenseDetails"
+                :options="offenseDetailstoptions"
                 label="ลักษณะความผิด"
                 option-value="id"
                 option-label="name"
@@ -688,12 +751,16 @@ onMounted(() => {
               />
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="datewarn">
+            <div class="col-xs-12 col-sm-3" id="dateNotification">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.datewarn"
+                v-model="formData.dateNotification"
                 :locale="'th'"
                 autoApply
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 borderless
                 :enableTimePicker="false"
                 week-start="0"
@@ -707,14 +774,18 @@ onMounted(() => {
                 <template #trigger>
                   <q-input
                     for="inputDatewarn"
-                    ref="datewarnRef"
+                    ref="dateNotificationRef"
                     outlined
                     dense
+                    :readonly="
+                      formData.complaintStatus !== 'NEW' &&
+                      formData.complaintStatus !== ''
+                    "
                     hide-bottom-space
                     class="full-width datepicker"
                     :model-value="
-                      formData.datewarn != null
+                      formData.dateNotification != null
-                        ? date2Thai(formData.datewarn)
+                        ? date2Thai(formData.dateNotification)
                         : null
                     "
                     label="วันที่แจ้งเตือนล่วงหน้า"
@@ -737,14 +808,18 @@ onMounted(() => {
               </datepicker>
             </div>
 
-            <div class="col-xs-12 col-sm-3" id="receivecomplaints">
+            <div class="col-xs-12 col-sm-3" id="complaintFrom">
               <q-select
                 for="selectReceivecomplaints"
-                ref="receivecomplaintsRef"
+                ref="complaintFromRef"
                 dense
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 outlined
-                v-model="formData.receivecomplaints"
+                v-model="formData.complaintFrom"
-                :options="receivecomplaintstoptions"
+                :options="complaintFromtoptions"
                 label="รับเรื่องร้องเรียน"
                 option-value="id"
                 option-label="name"
@@ -756,13 +831,17 @@ onMounted(() => {
               />
             </div>
 
-            <div class="col-xs-12 col-sm-12" id="petitioner">
+            <div class="col-xs-12 col-sm-12" id="appellant">
               <q-input
                 for="inputPetitioner"
-                ref="petitionerRef"
+                ref="appellantRef"
                 dense
                 outlined
-                v-model="formData.petitioner"
+                v-model="formData.appellant"
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
                 label="ผู้ร้องเรียน"
                 :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
                 lazy-rules
@@ -772,14 +851,18 @@ onMounted(() => {
               />
             </div>
 
-            <div class="col-12" id="files">
+            <div class="col-12" id="documentFile">
               <q-file
                 for="inputFiles"
-                ref="filesRef"
+                ref="documentFileRef"
                 outlined
                 dense
                 class="fit"
-                v-model="formData.files"
+                :readonly="
+                  formData.complaintStatus !== 'NEW' &&
+                  formData.complaintStatus !== ''
+                "
+                v-model="formData.documentFile"
                 @added="fileUploadDoc"
                 label="ไฟล์เอกสารหลักฐาน"
                 hide-bottom-space
@@ -796,7 +879,13 @@ onMounted(() => {
           </div>
         </div>
         <q-separator />
-        <div class="row col-12 q-pa-sm">
+        <div
+          class="row col-12 q-pa-sm"
+          v-if="
+            formData.complaintStatus === 'NEW' ||
+            formData.complaintStatus === ''
+          "
+        >
           <q-space />
           <q-btn
             for="ButtonOnSubmit"

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -22,34 +22,36 @@ async function fetchListComplaints() {
   const listData: DataList[] = [
     {
       id: "001",
-      subject: "ทุจริตในหน้าที่",
+      title: "ทุจริตในหน้าที่",
-      detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
+      description: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
-      complainant: "นางศิรินภา คงน้อย",
+      respondent: "นางศิรินภา คงน้อย",
-      offenseDescription: "ร้ายแรง",
+      descMistake: "ร้ายแรง",
-      creationDate: new Date("2023-12-01"),
+      createdAt: new Date("2023-12-01"),
-      considerationLevel: "ด่วนมาก",
+      devLevel: "ด่วนมาก",
-      considerationDeadlineDate: new Date("2023-12-02"),
+      considerationDate: new Date("2023-12-02"),
+      complaintStatus: 'NEW',
     },
     {
       id: "002",
-      subject: "ทุจริตในหน้าที่",
+      title: "ทุจริตในหน้าที่",
-      detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
+      description: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
-      complainant: "นายแก้ว คำ",
+      respondent: "นายแก้ว คำ",
-      offenseDescription: "ร้ายแรง",
+      descMistake: "ร้ายแรง",
-      creationDate: new Date("2023-12-01"),
+      createdAt: new Date("2023-12-01"),
-      considerationLevel: "ด่วนมาก",
+      devLevel: "ด่วนมาก",
-      considerationDeadlineDate: new Date("2023-12-02"),
+      considerationDate: new Date("2023-12-02"),
+      complaintStatus: 'STOP',
     },
     {
       id: "003",
-      subject: "ทุจริตในหน้าที่",
+      title: "ทุจริตในหน้าที่",
-      detail:
+      description:"มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
-        "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
+      respondent: "นายภัทรานุย คงนอย",
-      complainant: "นายภัทรานุย คงนอย",
+      descMistake: "ร้ายแรง",
-      offenseDescription: "ร้ายแรง",
+      createdAt: new Date("2023-12-01"),
-      creationDate: new Date("2023-12-01"),
+      devLevel: "ด่วนมาก",
-      considerationLevel: "ด่วนมาก",
+      considerationDate: new Date("2023-12-02"),
-      considerationDeadlineDate: new Date("2023-12-02"),
+      complaintStatus: 'SEND_INVESTIGATE',
     },
   ];
   await fetchComplainst(listData);

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -29,65 +29,74 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "subject",
+    name: "title",
     align: "left",
     label: "เรื่อง",
     sortable: true,
-    field: "subject",
+    field: "title",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "detail",
+    name: "description",
     align: "left",
     label: "รายละเอียด",
     sortable: true,
-    field: "detail",
+    field: "description",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "complainant",
+    name: "respondent",
     align: "left",
     label: "ผู้ถูกร้องเรียน",
     sortable: true,
-    field: "complainant",
+    field: "respondent",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "offenseDescription",
+    name: "descMistake",
     align: "left",
     label: "ลักษณะความผิด",
     sortable: true,
-    field: "offenseDescription",
+    field: "descMistake",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "creationDate",
+    name: "createdAt",
     align: "left",
     label: "วันที่สร้างเรื่องร้องเรียน",
     sortable: true,
-    field: "creationDate",
+    field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "considerationLevel",
+    name: "devLevel",
     align: "left",
     label: "ระดับการพิจารณา",
     sortable: true,
-    field: "considerationLevel",
+    field: "devLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "considerationDeadlineDate",
+    name: "considerationDate",
     align: "left",
     label: "วันที่กำหนดพิจารณา",
     sortable: true,
-    field: "considerationDeadlineDate",
+    field: "considerationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "complaintStatus",
+    align: "left",
+    label: "สถานะเรื่องร้องเรียน",
+    sortable: true,
+    field: "complaintStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -96,13 +105,14 @@ const columns = ref<QTableProps["columns"]>([
 /** หัวข้อที่เเสดงในตาราง */
 const visibleColumns = ref<string[]>([
   "no",
-  "subject",
+  "title",
-  "detail",
+  "description",
-  "complainant",
+  "respondent",
-  "offenseDescription",
+  "descMistake",
-  "creationDate",
+  "createdAt",
-  "considerationLevel",
+  "devLevel",
-  "considerationDeadlineDate",
+  "considerationDate",
+  'complaintStatus'
 ]);
 
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
@@ -155,10 +165,10 @@ function OpenEdit(id:string){
         <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>
+        </div>
-          <div v-if="col.name == 'detail'">
+          <div v-if="col.name == 'description'">
             <div class="table_ellipsis">
-              {{ props.row.detail }}
+              {{ props.row.description }}
             </div>
           </div>
           <div v-else>

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -25,6 +25,7 @@ const data = reactive<FormData>({
   daysExtend: null,
   statusResult: "",
   causeText: "",
+  complaintStatus: ""
 });
 
 /** จำลองข้อมูลจาก api */
@@ -44,6 +45,7 @@ const fetchData = async () => {
   data.daysExtend = null;
   data.statusResult = "ไม่ระบุ";
   data.causeText = "";
+  data.complaintStatus = "NEW";
 };
 
 /**
@@ -75,7 +77,25 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/investigatefacts`)"
       />
-      แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id
+      <div class="q-ma-none">แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id</div>
+      <q-space />
+      <div class="q-gutter-x-sm">
+        <q-btn
+          v-if="data.complaintStatus === 'NEW'"
+          label="มีมูลส่งไปออกคำสั่ง"
+          color="public"
+        />
+        <q-btn
+          v-if="data.complaintStatus === 'NEW'"
+          label="ยุติเรื่อง"
+          color="red-7"
+        />
+        <q-btn
+          v-if="data.complaintStatus === 'STOP'"
+          label="ยกเลิกการยุติเรื่อง"
+          color="red-7"
+        />
+      </div>
     </div>
 
     <Form :on-submit="onSubmit" :data="data" />

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -65,6 +65,7 @@ const formData = reactive<FormData>({
   daysExtend: null,
   statusResult: "ยังไม่ระบุ",
   causeText: "",
+  complaintStatus:''
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -498,6 +499,7 @@ watch(props.data, async () => {
                 for="#fault"
                 outlined
                 dense
+                lazy-rules
                 ref="statusResultRef"
                 v-model="formData.statusResult"
                 :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"

src/modules/11_discipline/interface/request/complaint.ts

@@ -1,50 +1,61 @@
 interface FormData {
-    complainantType: string
+    respondentType: string
-    complainant: string
     office: string
-    agency: string
+    consideredAgency: string
-    topicComplaint: string
+    title: string
-    detail: string
+    description: string
-    datereceive: Date | null
+    dateReceived: Date | null
-    dateconsideration: Date | null
+    dateConsideration: Date | null
-    offenseDescription: string
+    offenseDetails: string
-    considerationLevel: string
+    levelConsideration: string
-    datewarn: Date | null
+    dateNotification: Date | null
-    receivecomplaints: string
+    complaintFrom: string
-    petitioner: string
+    appellant: string
-    files: any | null
+    documentFile: any | null
+    complaintStatus: string
+    persons: ArrayPerson[]
+    personId: Array
+    organizationId:string|null
+    respondentId:Array
 }
 
+interface ArrayPerson {
+    idcard: string,
+    name: string,
+    position: string,
+    positionLevel: string,
+    educationQualification: string,
+    organization: string,
+}
 interface MyObjectComplaintsRef {
-    complainantType: object | null;
+    respondentType: object | null;
-    complainant: object | null;
     office: object | null;
-    agency: object | null;
+    consideredAgency: object | null;
-    topicComplaint: object | null;
+    title: object | null;
-    datereceive: object | null;
+    description: object | null;
-    dateconsideration: object | null;
+    dateReceived: object | null;
-    offenseDescription: object | null;
+    dateConsideration: object | null;
-    considerationLevel: object | null;
+    offenseDetails: object | null;
-    datewarn: object | null;
+    levelConsideration: object | null;
-    receivecomplaints: object | null;
+    dateNotification: object | null;
-    petitioner: object | null;
+    complaintFrom: object | null;
-    files: object | null;
+    appellant: object | null;
+    documentFile: object | null;
     [key: string]: any;
 }
 
 interface DataAddRequest {
-    id:string
+    id: string
-    cardId:string
+    idcard: string
-    prefix:string
+    name: string
-    firstName:string
+    position: string
-    lastName:string
+    positionLevel: string
-    position:string
+    educationQualification: string
-    level:string
+    organization: string
-    degree:string
-    oc:string
 }
 export type {
     FormData,
     MyObjectComplaintsRef,
-    DataAddRequest
+    DataAddRequest,
+    ArrayPerson
 }

src/modules/11_discipline/interface/request/investigate.ts

@@ -13,6 +13,7 @@ interface FormData {
   investigation: string;
   statusResult: string;
   causeText: string;
+  complaintStatus:string
 }
 interface MyObjectInvestigateRef {
   complaint: object | null;

src/modules/11_discipline/interface/response/complaint.ts

@@ -1,41 +1,42 @@
 interface DataListRow {
-    subject: string
+    id:string
-    detail: string
+    title: string
-    complainant: string
+    description: string
-    offenseDescription: string
+    respondent: string
-    creationDate: string | null
+    descMistake: string
-    considerationLevel: string
+    createdAt: string
-    considerationDeadlineDate: string | null
+    devLevel: string
+    considerationDate: string
+    complaintStatus: string
 }
 interface DataAdd {
     id:string
-    cardId:string
+    idcard:string
-    fullName:string
+    name:string
     position:string
-    level:string
+    positionLevel:string
-    degree:string
+    educationQualification:string
-    oc:string
+    organization:string
 }
 interface DataAddResponse {
     id:string
-    cardId:string
+    idcard:string
-    prefix:string
+    name:string
-    firstName:string
-    lastName:string
     position:string
-    level:string
+    positionLevel:string
-    degree:string
+    educationQualification:string
-    oc:string
+    organization:string
 }
 interface DataList {
     id:string
-    subject: string
+    title: string
-    detail: string
+    description: string
-    complainant: string
+    respondent: string
-    offenseDescription: string
+    descMistake: string
-    creationDate: Date
+    createdAt: Date
-    considerationLevel: string
+    devLevel: string
-    considerationDeadlineDate: Date
+    considerationDate: Date
+    complaintStatus: string
 }
 
 

src/modules/11_discipline/store/ComplaintsStore.ts

@@ -3,7 +3,7 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
-import type { DataList, DataListRow,DataAdd,DataAddResponse } from "@/modules/11_discipline/interface/response/complaint"
+import type { DataList, DataListRow, DataAdd, DataAddResponse } from "@/modules/11_discipline/interface/response/complaint"
 import type { QTableProps } from "quasar";
 
 const mixin = useCounterMixin()
@@ -26,42 +26,58 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
     function fetchComplainstAdd(data: DataAddResponse[]) {
         let datalist = data.map((e: DataAddResponse) => ({
             id: e.id,
-            cardId: e.cardId,
+            idcard: e.idcard,
-            fullName:`${e.prefix}${e.firstName} ${e.lastName}`,
+            name: e.name,
             position: e.position,
-            level: e.level,
+            positionLevel: e.positionLevel,
-            degree: e.degree,
+            educationQualification: e.educationQualification,
-            oc: e.oc,
+            organization: e.organization,
         }))
         rowsAdd.value = datalist
     }
 
     function fetchComplainst(data: DataList[]) {
-        let datalist = data.map((e: DataList) => ({
+        let datalist: DataListRow[] = data.map((e: DataList) => ({
-            id: e.id,
+          id: e.id,
-            subject: e.subject,
+          title: e.title,
-            detail: e.detail,
+          description: e.description,
-            complainant: e.complainant,
+          respondent: e.respondent,
-            offenseDescription: e.offenseDescription,
+          descMistake: e.descMistake,
-            creationDate: date2Thai(e.creationDate),
+          createdAt: date2Thai(e.createdAt)!,
-            considerationLevel: e.considerationLevel,
+          devLevel: e.devLevel,
-            considerationDeadlineDate: date2Thai(e.considerationDeadlineDate),
+          considerationDate: date2Thai(e.considerationDate)!,
-        }))
+          complaintStatus: statusTothai(e.complaintStatus),
-        rows.value = datalist
+        }));
-    }
+        rows.value = datalist;
+      }
+      
     // filter options
     const complainantoptionsMain = ref<DataOption[]>([
-        { id: "0", name: "บุคคล" },
+        { id: "PERSON", name: "บุคคล" },
-        { id: "1", name: "หน่วยงาน" },
+        { id: "ORGANIZATION", name: "หน่วยงาน" },
-        { id: "2", name: "กรุงเทพมหานคร" },
+        { id: "BANGKOK", name: "กรุงเทพมหานคร" },
     ]);
     const complainantoptions = ref<DataOption[]>(complainantoptionsMain.value)
-    const agencytoptionsMain = ref<DataOption[]>([
+    const consideredAgencytoptions = ref<DataOption[]>([
         { id: "0", name: "หน่ายงานเอ" },
         { id: "1", name: "หน่ายงานบี" },
         { id: "2", name: "หน่ายงานชี" },
     ]);
-    const agencytoptions = ref<DataOption[]>(agencytoptionsMain.value)
+    const officeOp = ref<DataOption[]>([
+        { id: "0", name: "สำนักงาน1" },
+        { id: "1", name: "สำนักงาน2" },
+        { id: "2", name: "สำนักงาน3" },
+    ]);
+
+    const statusTothai = (val: string) => {
+        switch (val) {
+            case 'NEW': return "ใหม่";
+            case 'STOP': return "ยุติเรื่อง";
+            case 'SEND_INVESTIGATE': return "มีมูลส่งไปสืบสวนแล้ว";
+            default: return "-";
+        }
+    };
+    const agencytoptions = ref<DataOption[]>(consideredAgencytoptions.value)
     const optionListNameMain = ref<DataOption[]>([])
     const optionListName = ref<DataOption[]>([])
 
@@ -79,7 +95,7 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
                 );
 
             } else if (type === "filteragencytoptions") {
-                agencytoptions.value = agencytoptionsMain.value.filter(
+                agencytoptions.value = consideredAgencytoptions.value.filter(
                     (v: any) => v.name.toLowerCase().indexOf(needle) > -1
                 );
             } else if (type === "filtercomplainantOP") {
@@ -100,9 +116,10 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         selectComplainantTpye,
         filterSelector,
         complainantoptions,
-        agencytoptions,
+        consideredAgencytoptions,
         optionListName,
-        fetchComplainstAdd
+        fetchComplainstAdd,
+        officeOp
 
 
     }