แก้ไขหน้าที่ของกรรมการ

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue

@@ -14,6 +14,7 @@ import type { Directors } from "@/modules/12_evaluatePersonal/interface/response
 
 /** importComponents*/
 import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";
+import DialogDuty from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDuty.vue";
 
 /**use*/
 const $q = useQuasar();
@@ -64,6 +65,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "duty",
+    align: "left",
+    label: "หน้าที่ของกรรมการ",
+    sortable: true,
+    field: "duty",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "email",
     align: "left",
@@ -180,6 +190,17 @@ async function getList() {
     });
 }
 
+const directorData = ref<Director>(); //ข้อมูลกรรมการที่ต้องการแก่ไขหน้าที่
+const modalDuty = ref<boolean>(false); //Dailog แก้ไขข้อมูลหน้าที่กรรมการ
+/**
+ * เปิด Dialog แก้ไขข้อมูลหน้าที่กรรมการ
+ * @param data ข้อมูลกรรมการที่ต้องการแก่ไขหน้าที่
+ */
+function onEditDuty(data: Director) {
+  directorData.value = data;
+  modalDuty.value = true;
+}
+
 /**
  * ทำงานเมื่อ props.data มีการเปลี่ยนแปลง
  */
@@ -197,6 +218,7 @@ watch(
         email: item.email == "" ? "-" : item.email,
         position: item.position == "" ? "-" : item.position,
         positionName: item.positionName == "-" ? "-" : item.positionName,
+        duty: !item.duty ? "-" : item.duty,
       }));
     }
   }
@@ -238,6 +260,7 @@ watch(
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -245,12 +268,24 @@ watch(
         </template>
         <template v-slot:body="props">
           <q-tr :props="props">
+            <q-td>
+              <q-btn
+                flat
+                round
+                denes
+                icon="edit"
+                color="edit"
+                @click.stop.pervent="onEditDuty(props.row)"
+              >
+                <q-tooltip>แก้ไขหน้าที่</q-tooltip>
+              </q-btn>
+            </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
-              <div>
-                {{ col.value }}
+              <div v-else>
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>
@@ -272,6 +307,13 @@ watch(
     :max-page="maxPage"
     :selected-row="rows"
   />
+
+  <!-- แก้ไขหน้าที่ของกรรมการ -->
+  <DialogDuty
+    v-model:modal="modalDuty"
+    :data="directorData"
+    :fetch-data="props.fetchData"
+  />
 </template>
 
 <style scoped></style>

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDuty.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, watch, type PropType } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
+import type { Director } from "@/modules/11_discipline/interface/request/Disciplinary";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm, showLoader, messageError, hideLoader, success } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  data: {
+    type: Object as PropType<Director>,
+  },
+  fetchData: {
+    type: Function,
+    required: true,
+  },
+});
+
+const duty = ref<string>(""); //หน้าที่ของกรรมการ
+
+/** ฟังก์ชันบันทึกข้อมูลหน้าที่ของกรรมการ*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.evaluateDirectorMain() + `/duty/${props?.data?.id}`, {
+        duty: duty.value,
+      })
+      .then(async () => {
+        await props.fetchData();
+        onCloseDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ฟังก์ชันปิด Doalog แก้ไขหน้าที่ของกรรมการ*/
+function onCloseDialog() {
+  modal.value = !modal.value;
+}
+
+watch(modal, (val) => {
+  if (val) {
+    duty.value = props.data?.duty ?? "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 40%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="แก้ไขหน้าที่ของกรรมการ" :close="onCloseDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <q-input
+            class="inputgreen"
+            outlined
+            dense
+            v-model="duty"
+            label="หน้าที่ของกรรมการ"
+          />
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึกข้อมูล" type="submit" color="public" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>