ui รายการอุทธรณ์ร้องทุกข์ *ยังไม่เสร็จดี

src/modules/11_discipline/components/8_AppealComplain/Form.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+
+import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
+
+import type { MyObjectAppealRef } from "@/modules/11_discipline/interface/response/appealComplain";
+
+const mainStore = useDisciplineMainStore();
+const router = useRouter();
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  getData: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const $q = useQuasar();
+const modalPerson = ref<boolean>(false);
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+const dataStore = useAppealComplainStore();
+
+const modalEdit = ref<boolean>(false);
+const formData = reactive<any>({
+  type: "",
+  status: "",
+
+  year: new Date().getFullYear().toString(),
+});
+
+/** ตัวแปร validate */
+const typeRef = ref<Object | null>(null);
+const statusRef = ref<Object | null>(null);
+
+const objectAppeal: MyObjectAppealRef = {
+  complaint: typeRef,
+  complaintdetail: statusRef,
+};
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectAppeal) {
+    if (Object.prototype.hasOwnProperty.call(objectAppeal, key)) {
+      const property = objectAppeal[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("ไม่ผ่าน ");
+    // console.log(hasError);
+  }
+}
+
+function toggleModal() {
+  modalPerson.value = true
+}
+
+async function addPerson(data: any) {
+
+  toggleModal();
+}
+
+function handleSave(returnData: any) {
+  console.log(returnData)
+  modalPerson.value = false
+  mainStore.rowsAdd = returnData
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log("add");
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+</script>
+<template>
+  <form @submit.prevent="validateForm">
+    <q-card bordered>
+      <div class="q-pa-md">
+        <div class="q-gutter-y-sm">
+          <div class="row q-gutter-x-sm">
+            <div class="col-3">
+              <q-select
+                ref="typeRef"
+                v-model="formData.type"
+                label="ประเภท"
+                dense
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="dataStore.typeOptions"
+                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+          </div>
+          <div class="row col-12">
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ผู้ยื่นอุทธณ์/ร้องทุกข์
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  class="q-ml-sm"
+                  icon="mdi-plus"
+                  @click="toggleModal"
+                >
+                  <q-tooltip>เพิ่มผู้ยื่นอุทธณ์/ร้องทุกข์</q-tooltip>
+                </q-btn>
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-xs-12 q-pa-sm">
+                <d-table
+                  ref="table"
+                  :columns="mainStore.columnsRespondent"
+                  :rows="mainStore.rowsAdd"
+                  row-key="idcard"
+                  flat
+                  bordered
+                  :paging="false"
+                  dense
+                  hide-bottom
+                  class="custom-header-table"
+                  :visible-columns="mainStore.visibleColumnsRespondent"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        style="color: #000000; font-weight: 500"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                      <q-th auto-width></q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+                        <div v-else-if="col.name == 'info'">
+                          <q-btn
+                            size="14px"
+                            flat
+                            round
+                            dense
+                            color="info"
+                            icon="info"
+                            @click="
+                              router.push(`/registry/${props.row.personId}`)
+                            "
+                            ><q-tooltip
+                              >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
+                            ></q-btn
+                          >
+                        </div>
+                        <div
+                          v-else-if="col.name === 'organization'"
+                          class="table_ellipsis"
+                        >
+                          {{ props.row.organization }}
+                        </div>
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="row col-12 q-pa-sm">
+        <q-space />
+        <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
+        >
+      </div>
+    </q-card>
+  </form>
+  <DialogAddPersonal
+    title="ผู้ถูกร้องเรียน"
+    :modal="modalPerson"
+    btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
+    :close="toggleModal"
+    :save="addPerson"
+    :selected-data="mainStore.rowsAdd"
+    @returnData="handleSave"
+    selecetSwitch="single"
+  />
+</template>