ui หน้าที่กรรมการ

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

@@ -13,6 +13,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
 import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
+import DialogDuty from "@/modules/11_discipline/components/DialogDuty.vue";
 
 import type {
   FormData,
@@ -274,7 +275,7 @@ watch(props.data, async () => {
 
     mainStore.rowsAdd = props.data.persons;
     mainStore.rowsCheck = mainStore.rowsAdd.filter(
-      (item: any) => item.isSend === 'NEW'
+      (item: any) => item.isSend === "NEW"
     );
 
     const dataMap = props.data.directors.map((item: any) => ({
@@ -550,6 +551,32 @@ function emitPerson(data: FormData[]) {
     });
 }
 
+const modalEditDirector = ref<boolean>(false);
+function openEditDirector(id: string) {
+  modalEditDirector.value = true;
+}
+
+function closeEditDirector(id: string) {
+  modalEditDirector.value = false;
+}
+
+async function saveDuty(id: string) {
+  // showLoader();
+  // await http
+  //   .put(config.API.reportresult(idPath.value, type.value as string), body)
+  //   .then((res: any) => {
+  //     success($q, `${props.title}สำเร็จ`);
+  //     props.closeModal?.();
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     props.getData?.();
+  //     hideLoader();
+  //   });
+}
+
 onMounted(async () => {
   mainStore.rowsAdd = [];
   getOc();
@@ -1121,6 +1148,25 @@ onMounted(async () => {
                             </div>
                           </q-td>
                           <q-td>
+                            <!-- แก้ไขกรรมการ -->
+                            <q-btn
+                              v-if="!isReadonly"
+                              dense
+                              size="12px"
+                              flat
+                              round
+                              color="blue"
+                              @click="openEditDirector(props.row.id)"
+                              icon="mdi-pencil-outline"
+                            >
+                              <q-tooltip>แก้ไข</q-tooltip>
+                            </q-btn>
+                            <DialogDuty
+                              :modal="modalEditDirector"
+                              :close-popup="closeEditDirector"
+                              @save="saveDuty(props.row.id)"
+                            />
+
                             <q-btn
                               v-if="!isReadonly"
                               dense

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

@@ -35,6 +35,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
+import DialogDuty from "@/modules/11_discipline/components/DialogDuty.vue";
 
 const calendarModal = ref<boolean>(false);
 const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
@@ -345,6 +346,23 @@ function deletePerson(id: string) {
   mainStore.rowsAdd = updatedRows;
 }
 
+async function saveDuty(id: string) {
+  // showLoader();
+  // await http
+  //   .put(config.API.reportresult(idPath.value, type.value as string), body)
+  //   .then((res: any) => {
+  //     success($q, `${props.title}สำเร็จ`);
+  //     props.closeModal?.();
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     props.getData?.();
+  //     hideLoader();
+  //   });
+}
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -525,6 +543,15 @@ function emitPerson(data: PersonsArray[]) {
     });
 }
 
+const modalEditDirector = ref<boolean>(false);
+function openEditDirector(id: string) {
+  modalEditDirector.value = true;
+}
+
+function closeEditDirector(id: string) {
+  modalEditDirector.value = false;
+}
+
 /** Hook */
 onMounted(async () => {
   mainStore.rowsAdd = [];
@@ -1285,6 +1312,25 @@ onMounted(async () => {
                               </div>
                             </q-td>
                             <q-td>
+                              <!-- แก้ไขกรรมการ -->
+                              <q-btn
+                                v-if="!isReadonly"
+                                dense
+                                size="12px"
+                                flat
+                                round
+                                color="blue"
+                                @click="openEditDirector(props.row.id)"
+                                icon="mdi-pencil-outline"
+                              >
+                                <q-tooltip>แก้ไข</q-tooltip>
+                              </q-btn>
+                              <DialogDuty
+                                :modal="modalEditDirector"
+                                :close-popup="closeEditDirector"
+                                @save="saveDuty(props.row.id)"
+                              />
+
                               <q-btn
                                 v-if="!isReadonly"
                                 dense

src/modules/11_discipline/components/DialogDuty.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+const props = defineProps({
+  modal: Boolean,
+  closePopup: Function,
+  save: {
+    type: Function,
+    default: ""
+  },
+});
+
+const duty = ref<string>("");
+const myForm = ref<QForm | null>(null);
+
+/**
+ * ฟังก์ชั่น Save
+ */
+ const submit = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => {
+            await props.save();
+          },
+          "ยืนยันการแก้ไขข้อมูล",
+          "ต้องการยืนยันการแก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายหรือไม่?"
+        );
+      }
+    });
+  }
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 30vw">
+      <q-form ref="myForm">
+        <DialogHeader title="แก้ไขหน้าที่กรรมการ" :close="props.closePopup" />
+        <q-separator />
+        <q-card-section>
+          <q-input
+            v-model="duty"
+            outlined
+            dense
+            class="col-12 q-mb-sm"
+            debounce="300"
+            placeholder="หน้าที่"
+            :rules="[(val) => !!val || `กรุณากรอกหน้าที่`]"
+          />
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" @click="submit()" color="public" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>