hrms-mgt/src/modules/14_KPI/components/indicatorByRole/DetailView.vue

<script setup lang="ts">
import { ref, reactive, onMounted,watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
import { useCounterMixin } from "@/stores/mixin";

import type { FormDataRole } from "@/modules/14_KPI/interface/request/Main";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();

const id = ref<string>(route.params.id ? route.params.id.toLocaleString():'');
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
  calculateDurationYmd,
} = useCounterMixin();
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");

const modalDialogSelect = ref<boolean>(false);
const form = reactive<FormDataRole>({
  position: "", //ตำแหน่งในสายงาน
  year: new Date().getFullYear(), //ปีงบประมาณ
  round: "", //รอบการประเมิน
  org: "", //หน่วยงาน/ส่วนราชการ
  including: "", //รหัสตัวชี้วัด
  includingName: "", //ชื่อตัวชี้วัด
  target: "", //ค่าเป้าหมาย
  unit: "", //หน่วยนับ
  weight: "", //น้ำหนัก
  meaning: "", //นิยามหรือความหมาย
  formula: "", //สูตรคำนวณ
});

const fieldLabels = {
  score5: "5",
  score4: "4",
  score3: "3",
  score2: "2",
  score1: "1",
};

const formScore = reactive<any>({
  score5: "",
  score4: "",
  score3: "",
  score2: "",
  score1: "",
});

const positionOp = ref<DataOption[]>([]);
const positionMainOp = ref<DataOption[]>([]);

/** Option  รอบการประเมิน*/
const roundOp = ref<DataOption[]>([
  { id: "APR", name: "รอบเมษายน" },
  {
    id: "OCT",
    name: "รอบตุลาคม",
  },
]);

/**
 * function ต้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
 * @param update  อัพเดทค่า
 * @param refData ดาต้าที่ต้องการฟิลเตอร์
 */
function filterOption(val: any, update: Function) {
  update(() => {
    positionOp.value = positionMainOp.value.filter(
      (v: any) => v.name.indexOf(val) > -1
    );
  });
}

/** ดึงข้อมูลตำแหน่ง */
function getOptions() {
  http.get(config.API.orgSalaryPosition).then((res) => {
    const dataOp = res.data.result;
    const uniqueNames = new Set();
    const filteredData = dataOp
      .filter((item: any) => {
        if (!uniqueNames.has(item.positionName)) {
          uniqueNames.add(item.positionName);
          return true;
        }
        return false;
      })
      .map((item: any) => ({
        id: item.positionName,
        name: item.positionName,
      }));

    positionMainOp.value = filteredData;
  });
}

/** เปิด Dialog หน่วยงาน */
function selectAgency() {
  modalDialogSelect.value = true;
}

function updateAgency(name: string) {
  form.org = name;
}

/** บันทึกข้อมูล */
function onSubmit() {
  // const url = id.value ? config.API.???:config.API.???
}

function getDetail(){
  // showLoader()
  // http
  // .get(config.API.???)
  // .then((res)=>{
  //   const data = res.data.result
  //     form.position = data.position
  //     form.year = data.year
  //     form.round = data.round
  //     form.org = data.org
  //     form.including = data.including
  //     form.includingName = data.includingName
  //     form.target = data.target
  //     form.unit = data.unit
  //     form.weight = data.weight
  //     form.meaning = data.meaning
  //     form.formula = data.formula
  // }).catch((e)=>{
  //   messageError($q,e)
  // }).finally(()=>{
  //   hideLoader()
  // })
}


onMounted(() => {
  getOptions();
  if(id.value !== ''){
    console.log('edit')
    getDetail()
  }
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      flat
      round
      dense
      class="q-mr-sm"
      icon="mdi-arrow-left"
      color="primary"
      @click="router.go(-1)"
    />
    {{ `${title}ตัวชี้วัดตามตำแหน่ง` }}
  </div>
  <q-card flat>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <div class="col-8">
            <q-select
              dense
              v-model="form.position"
              label="ตำแหน่งในสายงาน"
              outlined
              emit-value
              map-options
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
              hide-bottom-space
              option-label="name"
              option-value="id"
              class="inputgreen"
              :options="positionOp"
              use-input
              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
            >
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template></q-select
            >
          </div>
          <div class="col-2">
            <datepicker
              menu-class-name="modalfix"
              v-model="form.year"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  class="inputgreen"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
                  hide-bottom-space
                  outlined
                  :model-value="
                    form.year === 0 ? null : Number(form.year) + 543
                  "
                  :label="`${'ปีงบประมาณ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-2">
            <q-select
              dense
              outlined
              v-model="form.round"
              :options="roundOp"
              option-label="name"
              option-value="id"
              emit-value
              map-options
              input-class="text-red"
              label="รอบการประเมิน"
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการประเมิน'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-4">
            <q-input
              dense
              outlined
              class="inputgreen"
              v-model="form.org"
              inputgreen
              label="หน่วยงาน/ส่วนราชการ"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณาเลือกหน่วยงาน/ส่วนราชการ'}`,]"
              hide-bottom-space
              @click="selectAgency"
            />
          </div>
          <div class="col-2">
            <q-input
              label="รหัสตัวชี้วัด"
              v-model="form.including"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-6">
            <q-input
              label="ชื่อตัวชี้วัด"
              v-model="form.includingName"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-2">
            <q-input
              label="ค่าเป้าหมาย"
              v-model="form.target"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-2">
            <q-input
              label="หน่วยนับ"
              v-model="form.unit"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-2">
            <q-input
              label="น้ำหนัก"
              v-model="form.weight"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-12">
            <q-card flat bordered>
              <q-card-section class="bg-grey-4 q-pa-sm">
                <div class="row text-dark text-body2 text-weight-medium">
                  <div class="text-center col-4">ระดับคะแนน</div>
                  <div class="col-8">อ้างอิง</div>
                </div>
              </q-card-section>
              <q-card-section class="q-pa-none">
                <div
                  v-for="(field, index) in Object.keys(fieldLabels)"
                  :key="index + 1"
                >
                  <div class="row q-pa-sm">
                    <div
                      class="col-4 text-center text-body1 text-weight-bold self-center"
                    >
                      {{ fieldLabels[field as keyof typeof fieldLabels] }}
                    </div>
                    <div class="col-8 text-left">
                      <!-- <q-field
                    class="q_field_p_none"
                    ref="fieldRef"
                    v-model="formScore[field]"
                    label-slot
                    borderless
                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
                    hide-bottom-space
                  >
                    <template #control>
                      <q-editor
                        class="full-width"
                        v-model="formScore[field]"
                        :dense="$q.screen.lt.md"
                        min-height="5rem"
                        :toolbar="[
                          [
                            'bold',
                            'italic',
                            'strike',
                            'underline',
                            'subscript',
                            'superscript',
                          ],

                          ['unordered', 'ordered'],
                        ]"
                        :fonts="{
                          arial: 'Arial',
                          arial_black: 'Arial Black',
                          comic_sans: 'Comic Sans MS',
                          courier_new: 'Courier New',
                          impact: 'Impact',
                          lucida_grande: 'Lucida Grande',
                          times_new_roman: 'Times New Roman',
                          verdana: 'Verdana',
                        }"
                      />
                    </template>
                  </q-field> -->
                      <q-input
                        v-model="formScore[field]"
                        dense
                        outlined
                        class="inputgreen"
                        label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
                        :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
                        hide-bottom-space
                      />
                    </div>
                  </div>
                  <div
                    class="col-12"
                    v-if="index !== Object.keys(fieldLabels).length - 1"
                  >
                    <q-separator />
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>
          <div class="col-12">
            <q-input
              v-model="form.meaning"
              label="นิยามหรือความหมาย"
              dense
              outlined
              lazy-rules
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`,]"
              hide-bottom-space
              type="textarea"
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="form.formula"
              label="สูตรคำนวณ"
              dense
              outlined
              lazy-rules
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`,]"
              hide-bottom-space
              type="textarea"
            />
          </div>
        </div>
      </q-card-section>
      <q-separator/>
      <q-card-actions align="right">
        <q-btn color="public" label="บันทึก" type="submit" unelevated>
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>

  <DialogSelectAgency
    v-model:modal="modalDialogSelect"
    @update:updateAgency="updateAgency"
  />
</template>

<style scoped></style>