hrms-mgt/src/modules/05_placement/components/probation/SummarySurvey.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/store";
import http from "@/plugins/http";
import config from "@/app.config";
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  notifyError,
  messageError,
  success,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;
const route = useRoute();

const assignId = ref<string>(route.params.form.toString());
const action = ref<string>("edit");
const status = ref<boolean>(true);

const score1 = ref<number>(0);
const score2 = ref<number>(0);
const score3 = ref<number>(0);
const Allscore = ref<number>(0);

const comment_1 = ref<string>("");
const comment_2 = ref<string>("");

const result = ref<any>();
const result_option = ref<any>([
  { name: "ผ่าน", value: 1 },
  { name: "ไม่ผ่าน", value: 0 },
]);

const note = ref<string>("");
const date = ref<Date>(new Date());

const saveEdit = (id: string) => {
  dialogConfirm($q, () => console.log("save"));
};
const edit = () => {
  status.value = true;
  // console.log(status.value);
};
const cancel = () => {
  status.value = false;
};

onMounted(() => {
  // fecthResult(assignId.value);
});

// const fecthResult = async (id: string) => {
// await http
//   .get(config.API.createformReport(id))
//   .then((res: any) => {
//     let data = res.data.data.evaluate;
//     console.log(data);
//     date_start.value = data.date_start;
//     date_finish.value = data.date_finish;
//     develop.value = Number(data.develop_complete);
//     result.value = Number(data.pass_result);
//     reson.value = data.reson;
//     chairman_dated.value = data.chairman_dated;
//     director1_dated.value = data.director1_dated;
//     director2_dated.value = data.director2_dated;
//     status.value = false;
//     action.value = 'edit';
//   })
//   .catch((e) => {
//     console.log(e);
//   });
// };
</script>

<template>
  <div class="row col-12 q-ma-xs">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
      <!-- <q-space /> -->
      <!-- <div v-if="action == 'edit'">
        <div v-if="status == false">
          <q-btn
            dense
            flat
            round
            color="primary"
            @click="edit()"
            icon="mdi-pencil-outline"
          >
            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
          </q-btn>
        </div>
        <div v-else>
          <q-btn dense flat @click="cancel()" round color="red" icon="mdi-undo">
            <q-tooltip>ยกเลิก</q-tooltip>
          </q-btn>
          <q-btn
            dense
            flat
            round
            class="q-ml-sm"
            color="public"
            @click="saveEdit(assignId)"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </div> -->
    </div>
    <div class="col-12 row">
      <div class="col-12 text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
      </div>
      <div class="col-12">
        <q-input
          label="ความคิดเห็น"
          class="bg-white"
          dense
          borderless
          outlined
          v-model="comment_1"
          type="textarea"
        />
      </div>
    </div>
    <div class="col-12 row q-mt-md">
      <div class="col-12 text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
      </div>
      <div class="col-12">
        <q-input
          label="ความคิดเห็น"
          class="bg-white"
          dense
          borderless
          outlined
          v-model="comment_2"
          type="textarea"
        />
      </div>
    </div>

    <div class="col-12 row q-mt-md">
      <div class="text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
      </div>
      <q-space />
      <q-rating
        :disable="!status"
        v-model="knowledge_level"
        max="5"
        size="sm"
        color="grey"
        :color-selected="ratingColors"
        label="ระดับการประเมินพฤติกรรม"
      >
        <template v-slot:tip-1>
          <q-tooltip>ไม่พึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-2>
          <q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-3>
          <q-tooltip>พึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-4>
          <q-tooltip>พึงพอใจมาก</q-tooltip>
        </template>
        <template v-slot:tip-5>
          <q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
        </template>
      </q-rating>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.q-rating__icon {
  text-shadow: transparent !important;
}

.q-card {
  box-shadow: 0px 0px 0px 0px !important;
}
</style>