แก้ assess เป็น evaluate

src/modules/06_evaluate/components/Tab1.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
+import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
+import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
+import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
+import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
+import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
+import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
+import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
+import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
+import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
+
+import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
+import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
+import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
+
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const store = useEvaluateStore();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const $q = useQuasar();
+
+function onCilckNextStep() {
+  store.step < 9 &&
+    dialogConfirm(
+      $q,
+      async () => {
+        const functionCreateDoc: (() => Promise<void>) | null =
+          store.step === 1
+            ? await saveStep1
+            : store.step === 2
+            ? await saveStep2
+            : store.step === 3
+            ? await saveStep3
+            : store.step === 4
+            ? await saveStep4
+            : store.step === 5
+            ? await saveStep5
+            : store.step === 5
+            ? await saveStep5
+            : store.step === 6
+            ? await saveStep6
+            : store.step === 7
+            ? await saveStep7
+            : store.step === 8
+            ? await saveStep8
+            : store.step === 9
+            ? await saveStep9
+            : null;
+
+        functionCreateDoc?.();
+        store.step++;
+      },
+      "ยืนยันการดำเนินการ",
+      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+    );
+}
+
+function onCilckprPeviousStep() {
+  store.step > 1 &&
+    dialogConfirm(
+      $q,
+      () => {
+        store.step--;
+      },
+      "ยืนยันการย้อนกลับ",
+      "ต้องการย้อนกลับใช่หรือไม่?"
+    );
+}
+
+function updatedFormStep2() {}
+
+async function saveStep1() {
+  console.log("Save 1");
+}
+async function saveStep2() {
+  console.log("Save 2");
+}
+async function saveStep3() {
+  console.log("Save 3");
+}
+async function saveStep4() {
+  console.log("Save 4");
+}
+async function saveStep5() {
+  console.log("Save 5");
+}
+async function saveStep6() {
+  console.log("Save 6");
+}
+async function saveStep7() {
+  console.log("Save 7");
+}
+async function saveStep8() {
+  console.log("Save 8");
+}
+async function saveStep9() {
+  console.log("Save 9");
+}
+
+onMounted(() => {
+  store.step = 1;
+});
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-xs-12 col-sm-3">
+      <div class="toptitle">ประเมินชำนาญการ</div>
+      <Stepper />
+    </div>
+
+    <div class="col-xs-12 col-sm-9">
+      <div class="col-12 row">
+        <div class="col-9">
+          <div class="toptitle">
+            {{ store.step }}.{{ store.titel[store.step - 1] }}
+          </div>
+        </div>
+        <div class="col-3 text-right">
+          <router-link to="https://accreditation.ocsc.go.th/accreditation/search/curriculum">ไปยัง ก.พ. เพื่อตรวจสอบข้อมูล</router-link>
+        </div>
+      </div>
+
+      <div class="row q-col-gutter-md col-12">
+        <div
+          :class="
+            store.step === 2 ||
+            store.step === 4 ||
+            store.step === 5 ||
+            store.step === 6 ||
+            store.step === 8 ||
+            store.step === 9
+              ? 'col-xs-12 col-sm-12 row'
+              : 'col-xs-12 col-sm-5 row'
+          "
+        >
+          <q-card flat bordered class="col-12 q-pa-md">
+            <q-card-section>
+              <Step1 v-if="store.step === 1" />
+              <Step2
+                v-if="store.step === 2"
+                @update:updatedForm="updatedFormStep2"
+              />
+              <Step3 v-if="store.step === 3" />
+              <Step4 v-if="store.step === 4" />
+              <Step5 v-if="store.step === 5" />
+              <Step6 v-if="store.step === 6" />
+              <Step7 v-if="store.step === 7" />
+              <Step8 v-if="store.step === 8" />
+              <Step9 v-if="store.step === 9" />
+            </q-card-section>
+          </q-card>
+        </div>
+        <div
+          class="col-xs-12 col-sm-7 row"
+          v-if="store.step === 1 || store.step === 3 || store.step === 7"
+        >
+          <q-card flat bordered class="col-12">
+            <q-card-section>
+              <ViewStep1 v-if="store.step === 1" />
+              <ViewStep3 v-if="store.step === 3" />
+              <ViewStep7 v-if="store.step === 7" /> </q-card-section
+          ></q-card>
+        </div>
+      </div>
+      <div class="q-mt-md q-gutter-md" align="right">
+        <q-btn
+          v-if="store.step !== 1"
+          unelevated
+          outline
+          label="ย้อนกลับ"
+          color="public"
+          @click="onCilckprPeviousStep"
+        />
+        <q-btn
+          unelevated
+          label="ดำเนินการต่อ"
+          color="public"
+          @click="onCilckNextStep"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.q-stepper--vertical .q-stepper__step-inner {
+  padding: 0;
+}
+</style>