From 36e511d3fd64fef627aed19683934ef7902f0222 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 18 Apr 2024 11:38:42 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1/=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=95=E0=B8=B1=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B5=E0=B9=89=E0=B8=A7=E0=B8=B1=E0=B8=94=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/indicatorByRole/DetailView.vue | 418 +++++++++++++++++-
 src/modules/14_KPI/interface/request/Main.ts  |  16 +-
 2 files changed, 430 insertions(+), 4 deletions(-)

diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index be5955b11..241e429da 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+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 router = useRouter();
 const route = useRoute();
+const router = useRouter();
+
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString():'');
 const {
   dialogConfirm,
   showLoader,
@@ -21,7 +27,131 @@ const {
 } = useCounterMixin();
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 
-onMounted(() => {});
+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">
@@ -36,6 +166,288 @@ onMounted(() => {});
     />
     {{ `${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>
diff --git a/src/modules/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
index 52248c95f..5ff08cce9 100644
--- a/src/modules/14_KPI/interface/request/Main.ts
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -23,4 +23,18 @@ interface FormCompetency {
   evaluation: string;
 }
 
-export type { FormQueryRound, FormRound, FormCompetency };
+interface FormDataRole {
+  position: string;
+  year: number;
+  round: string;
+  org: string;
+  including: string;
+  includingName: string;
+  target: string;
+  unit: string;
+  weight: string;
+  meaning: string;
+  formula: string;
+}
+
+export type { FormQueryRound, FormRound, FormCompetency, FormDataRole };