แต่งตั้งคณะกรรมการทดลองงาน

src/modules/05_placement/components/probation/MainProbation.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import router from "@/router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
@@ -22,6 +22,8 @@ import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder
 const $q = useQuasar(); //ใช้ noti quasar
 const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
+const route = useRoute();
+const router = useRouter();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
@@ -44,6 +46,12 @@ const Opfillter2 = ref<OpfillterTypeSt[]>([]);
 const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
 const maxPage = ref<number>(1);
 
+const modalAdd = ref<boolean>(false);
+const personId = ref<string>(""); //เก็บ id คน ตาม row
+const topic = ref<string>(
+  "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
+);
+
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -299,7 +307,7 @@ function clickAdd(data: any) {
     lastName: data.lastName,
     position: data.position,
     idcard: data.idcard,
-    order_number: data.refCommandNo ? data.refCommandNo:'',
+    order_number: data.refCommandNo ? data.refCommandNo : "",
     posLevelName: data.posLevelName,
     posTypeName: data.posTypeName,
     posNo: data.posNo,
@@ -324,7 +332,7 @@ function clickAdd(data: any) {
         .then(async () => {
           await http
             .get(config.API.orgProfileStatus(data.id))
-            .then(async(res) => {
+            .then(async (res) => {
               await getpersonalList();
               success($q, "เพิ่มข้อมูลสำเร็จ");
               clickClose();
@@ -397,6 +405,43 @@ function onCommand() {
   modalCommand.value = true;
 }
 
+function onSubmitAdd() {
+  dialogConfirm($q, () => {
+    const body = {
+      profileId: personId.value,
+      topic: topic.value,
+    };
+    showLoader();
+    http
+      .post(config.API.appointMain, body)
+      .then((res) => {
+        if (res) {
+          closeAdd();
+          hideLoader();
+          router.push(`/probation/assign/${res.data.data}`);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
+}
+
+/** แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ */
+function onAdd(id: string) {
+  modalAdd.value = true;
+  personId.value = id;
+}
+
+/** ปิด popup แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ */
+function closeAdd() {
+  modalAdd.value = false;
+  personId.value = "";
+  topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
+}
+
 watch([() => formProbation.page, () => formProbation.pageSize], () => {
   onclickAddProbation();
 });
@@ -415,11 +460,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
-  </div>
-
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+  <q-card flat>
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div class="row">
@@ -561,6 +602,19 @@ onMounted(async () => {
                 >
                   <q-tooltip>รายละเอียด</q-tooltip>
                 </q-btn>
+
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsCreate"
+                  @click="onAdd(props.row.personal_id)"
+                  flat
+                  round
+                  color="green"
+                  icon="mdi-check-decagram"
+                >
+                  <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'">
@@ -782,5 +836,33 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
+        <DialogHeader tittle="ฟอร์มเพิ่ม" :close="closeAdd" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                label="หัวข้อ"
+                v-model="topic"
+                class="inputgreen"
+              ></q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
   <DialogOrder v-model:modal="modalCommand" />
 </template>