hrms-mgt/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";
// import keycloak from "@/plugins/keycloak";

import type { QForm } from "quasar";

const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();

const { messageError, showLoader, hideLoader,dialogConfirm ,success} = mixin;

const myForm = ref<QForm | null>(null);

// set คำถามที่ 1
const question1Desc = ref<string>(
  "เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)"
);
const question1Score = ref<number>(0);
const question1Answer = ref<any>([]);

// set คำถามที่ 2
const question2Desc = ref<string>(
  "สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด"
);
const question2Score = ref<number>(0);
const question2Answer = ref<any>([
  "น้อยกว่า 2 สัปดาห์",
  "1 เดือน - 3 เดือน",
  "3 เดือน - 6 เดือน",
  "6 เดือนขึ้นไป",
]);

// set คำถามที่ 3
const question3Desc = ref<string>(
  "ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)"
);
const question3Score = ref<number>(0);
const question3Answer = ref<any>([
  "อัตราเงินเดือน",
  "สวัสดิการ",
  "ลักษณะงาน",
  "ระบบการทำงาน",
  "ระบบสนับสนุนการปฏิบัติงาน",
  "การมอบหมายงานที่ชัดเจนและเหมาะสม",
  "การบริหารงานของผู้บังคับบัญช",
  "การทำงานเป็นทีมกับเพื่อนร่วมงาน",
  "ระบบบริหารงานภายในหน่วยงาน",
  "บรรยากาศในการทำงาน",
  "การปฏิบัติอย่างเป็นธรรม",
  "การยอมรับความแตกต่างหลากหลาย",
  "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
  "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
  "โอกาสความก้าวหน้า",
]);

// set คำถามที่ 4
const question4Desc = ref<string>(
  "อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)"
);
const question4Score = ref<number>(0);
const question4Answer = ref<any>([
  "อัตราเงินเดือน ",
  "สวัสดิการ",
  "ลักษณะงาน",
  "ระบบการทำงาน",
  "ระบบสนับสนุนการปฏิบัติงาน",
  "การมอบหมายงานที่ชัดเจนและเหมาะสม",
  "การบริหารงานของผู้บังคับบัญช",
  "การทำงานเป็นทีมกับเพื่อนร่วมงาน",
  "ระบบบริหารงานภายในหน่วยงาน",
  "บรรยากาศในการทำงาน",
  "การปฏิบัติอย่างเป็นธรรม",
  "การยอมรับความแตกต่างหลากหลาย",
  "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
  "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
  "โอกาสความก้าวหน้า",
]);

// set คำถามที่ 5
const question5Desc = ref<string>(
  "โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?"
);
const question5Answer = ref<any>([])
const question5Score = ref<number>(0);
// set คำถามที่ 6
const question6Desc = ref<string>(
  "ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร"
);
const question6Answer = ref<any>([])
const question6Score = ref<number>(0);
// set คำถามที่ 7
const question7Desc = ref<string>(
  "ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร"
);
const question7Score = ref<number>(0);
const question7Answer = ref<any>(["มี (ระบุ)", "ไม่มี"]);

// set คำถามที่ 8
const question8Desc = ref<string>(
  "ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
);
const question8Score = ref<number>(0);
const question8Answer = ref<any>(["แนะนำ", "ไม่แนะนำ (ระบุ)"]);

// set คำถามที่ 9
const question9Desc = ref<string>(
  "หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
);
const question9Score = ref<number>(0);
const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
// set คำถามที่ 10
const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ");
const question10Answer = ref<any>([])
const question10Score = ref<number>(0);

const exitFactor = ref<any>([]);
const reasonWork = ref<any>([]);
const adjust = ref<any>([]);
const timeThink = ref<any>();
const realReason = ref<any>("");
const notExitFactor = ref<any>("");
const haveJob = ref<any>();
const suggestFriends = ref<any>();
const futureWork = ref<any>();
const suggestion = ref<any>("");

const suggestFriendsReason = ref("");
const suggestFriends_option = ref<any>([
  { label: "แนะนำ  ", value: true },
  { label: "ไม่แนะนำ (ระบุ)", value: false },
]);
const haveJobReason = ref<any>("");
const haveJob_option = ref<any>([
  { label: "มี  (ระบุ) ", value: true },
  { label: "ไม่มี", value: false },
]);
const futureWorkReason = ref<any>("");
const futureWork_option = ref<any>([
  { label: "อยาก  ", value: true },
  { label: "ไม่อยาก (ระบุ)", value: false },
]);
const adjustOther = ref("");
const adjust_option = ref<any>([
  { label: "อัตราเงินเดือน ", value: 0 },
  { label: "สวัสดิการ", value: 1 },
  { label: "ลักษณะงาน ", value: 2 },
  { label: "ระบบการทำงาน ", value: 3 },
  { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
  { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
  { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
  { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
  { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
  { label: "บรรยากาศในการทำงาน  ", value: 9 },
  { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
  { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
  { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
  { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
  { label: "โอกาสความก้าวหน้า  ", value: 14 },
  // { label: "อื่น ๆ (ระบุ)  ", value: 15 },
]);

onMounted(async () => {
  await getData();
});

//นำข้อมูลมาแสดง
const getData = async () => {
  showLoader();
  await http
    .get(config.API.questionExitInterview())
    .then((res: any) => {
      const data = res.data.result;
      question1Score.value = data.question1Score ?? 0;
      question2Score.value = data.question2Score ?? 0;
      question3Score.value = data.question3Score ?? 0;
      question4Score.value = data.question4Score ?? 0;
      question5Score.value = data.question5Score ?? 0;
      question6Score.value = data.question6Score ?? 0;
      question7Score.value = data.question7Score ?? 0;
      question8Score.value = data.question8Score ?? 0;
      question9Score.value = data.question9Score ?? 0;
      question10Score.value = data.question10Score ?? 0;
      question1Desc.value = data.question1Desc
      question1Answer.value = data.question1Answer
      question2Desc.value = data.question1Desc
      question2Answer.value = data.question1Answer
      question3Desc.value = data.question1Desc
      question3Answer.value = data.question1Answer
      question4Desc.value = data.question1Desc
      question4Answer.value = data.question1Answer
      question5Desc.value = data.question1Desc
      question5Answer.value = data.question1Answer
      question6Desc.value = data.question1Desc
      question6Answer.value = data.question1Answer
      question7Desc.value = data.question1Desc
      question7Answer.value = data.question1Answer
      question8Desc.value = data.question1Desc
      question8Answer.value = data.question1Answer
      question9Desc.value = data.question1Desc
      question9Answer.value = data.question1Answer
      question10Desc.value = data.question1Desc
      question10Answer.value = data.question1Answer
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const confirmClick = () =>{
  dialogConfirm($q,()=>putData())
}
const putData = () => {
  const body = {
    question1Desc:question1Desc.value,
    question1Score:question1Score.value,
    question1Answer:question1Answer.value,

    question2Desc:question2Desc.value,
    question2Score:question2Score.value,
    question2Answer:question2Answer.value,

    question3Desc:question3Desc.value,
    question3Score:question3Score.value,
    question3Answer:question3Answer.value,

    question4Desc:question4Desc.value,
    question4Score:question4Score.value,
    question4Answer:question4Answer.value,

    question5Desc:question5Desc.value,
    question5Score:question5Score.value,
    question5Answer:question5Answer.value,

    question6Desc:question6Desc.value,
    question6Score:question6Score.value,
    question6Answer:question6Answer.value,

    question7Desc:question7Desc.value,
    question7Score:question7Score.value,
    question7Answer:question7Answer.value,

    question8Desc:question8Desc.value,
    question8Score:question8Score.value,
    question8Answer:question8Answer.value,

    question9Desc:question9Desc.value,
    question9Score:question9Score.value,
    question9Answer:question9Answer.value,

    question10Desc:question10Desc.value,
    question10Score:question10Score.value,
    question10Answer:question10Answer.value,



  };
  showLoader();
  http
    .put(config.API.questionExitInterview(), body)
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      router.push(`/exit-Interview`)
    });
}
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    แก้ไขคำถาม
  </div>

  <q-card bordered class="row col-12 text-dark q-mt-sm">
    <div class="col-12"><q-separator /></div>
    <q-form ref="myForm">
      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 1
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question1Desc"
                  label="คำถามข้อที่ 1"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question1Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question1Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question1Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 2
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question2Desc"
                  label="คำถามข้อที่ 2"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question2Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question2Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question2Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 3
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question3Desc"
                  label="คำถามข้อที่ 3"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question3Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question3Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question3Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 4
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question4Desc"
                  label="คำถามข้อที่ 4"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question4Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question4Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question4Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 5
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question5Desc"
                  label="คำถามข้อที่ 5"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question5Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 6
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question6Desc"
                  label="คำถามข้อที่ 6"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question6Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 7
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question7Desc"
                  label="คำถามข้อที่ 7"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question7Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question7Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question7Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 8
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question8Desc"
                  label="คำถามข้อที่ 8"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question8Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question8Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question8Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 9
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question9Desc"
                  label="คำถามข้อที่ 9"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question9Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question9Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question9Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div class="q-pa-xs bg-grey-2 row q-py-sm q-px-md text-bold">
              คำถามข้อที่ 10
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question10Desc"
                  label="คำถามข้อที่ 10"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question10Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12"><q-separator /></div>

      <q-card-actions class="text-primary q-pa-md">
        <q-space />
        <q-btn unelevated label="บันทึก" color="public" @click="confirmClick"> </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>
</template>

<style lang="scss" scope>
.q-img {
  border-radius: 5px;
  height: 70px;
}

.text-top {
  color: gray;
  font-weight: 400;
  padding-bottom: 3px;
}

.text-detail {
  font-weight: 500;
}
</style>