KPI

src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const route = useRoute();
+
+const work = ref<boolean>(false);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+
+function close() {
+  modal.value = false;
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.profilePosition() + `/${profileId.value}`)
+    .then((res) => {
+      const data = res.data.result.isProbation;
+      work.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+watch(
+  () => modal.value,
+  (n) => {
+    if (n == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 20vw">
+      <DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <div class="row">
+          <div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
+            <span class="text-weight-bold text-teal">{{
+              work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
+            }}</span>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>