ปรับ ตัวชี้วัด ตามแผน รอ API

src/modules/14_KPI/components/DialogHistory.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = ref<any[]>([]);
+const visibleColumns = ref<string[]>(["fullName"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+function close() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="min-width: 50vw">
+      <DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
+      <q-separator />
+      <q-card-section>
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue

@@ -28,14 +28,15 @@ const {
 } = mixin;
 
 const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+const editCheck = ref<boolean>(route.params.id ? true : false);
 
 /**form ตัวชี้วัดตามแผนฯ*/
 const planData = reactive({
-  kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  period: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
   target: "", //ค่าเป้าหมาย
-  unit: null, //หน่วยนับ
+  unit: "", //หน่วยนับ
   weight: null, //น้ำหนัก
   achievement1: "", //ผลสำเร็จของงาน 1
   achievement2: "", //ผลสำเร็จของงาน 2
@@ -49,10 +50,14 @@ const planData = reactive({
   orgRevisionId: "", //RevisionId หน่วยงาน
   strategy: null, //ระดับยุทธศาสตร์
   strategyId: "", //id ยุทธศาสตร์
+  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
 });
 
-const year = ref<number>(0); // ปีงยประมาณ
-const roundOp = ref<DataOption[]>([]);
+const year = ref<number | null>(0); // ปีงยประมาณ
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
@@ -64,36 +69,6 @@ const expandedAgency = ref<string[]>([]);
 const editStatus = ref<boolean>(false);
 const inputRef = ref<any>(null);
 
-/** functiopn fetch รอบการประเมิน*/
-function fetchRoundOption(isId: number | null = null) {
-  http
-    .get(
-      config.API.kpiPeriod +
-        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
-    )
-    .then((res) => {
-      const data = res.data.result.data;
-      const list = data.map((e: any) => ({
-        id: e.id,
-        name:
-          e.durationKPI === "OCT"
-            ? "รอบตุลาคม"
-            : e.durationKPI === "APR"
-            ? "รอบเมษายน"
-            : "",
-      }));
-      roundOp.value = list;
-
-      if (isId) {
-        planData.kpiPeriodId = "";
-        inputRef.value.resetValidation();
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 /** function fetch หาโครงสร้างที่ใช้งาน*/
 function fetchOrganizationActive() {
   http
@@ -147,7 +122,7 @@ function fetchDataById(id: string) {
     .then((res) => {
       const data = res.data.result;
       year.value = data.year;
-      planData.kpiPeriodId = data.kpiPeriodId;
+      planData.period = data.round;
       planData.including = data.including;
       planData.includingName = data.includingName;
       planData.target = data.target;
@@ -189,8 +164,6 @@ function fetchDataById(id: string) {
       expandedPlan.value = arrayexpandedPlan
         .filter((e) => e !== null)
         .slice(0, -1);
-
-      fetchRoundOption();
     })
     .catch((err) => {
       messageError($q, err);
@@ -235,6 +208,27 @@ function onSubmit() {
     dialogConfirm(
       $q,
       async () => {
+        const body = {
+          year: year.value == 0 ? null : year.value,
+          period: planData.period,
+          includingName: planData.includingName,
+          target: planData.target,
+          unit: planData.unit,
+          weight: planData.weight,
+          achievement1: planData.achievement1,
+          achievement2: planData.achievement2,
+          achievement3: planData.achievement3,
+          achievement4: planData.achievement4,
+          achievement5: planData.achievement5,
+          meaning: planData.meaning,
+          formula: planData.formula,
+          node: planData.node,
+          nodeId: planData.nodeId,
+          orgRevisionId: planData.orgRevisionId,
+          strategy: planData.strategy,
+          strategyId: planData.strategyId,
+          documentInfoEvidence: planData.documentInfoEvidence,
+        };
         showLoader();
         // editStatus.value ? editData(id.value) : addData();
         try {
@@ -242,7 +236,7 @@ function onSubmit() {
             ? config.API.kpiPlanById(id.value)
             : config.API.kpiPlan;
           const method = editStatus.value ? "put" : "post";
-          const res = await http[method](url, planData);
+          const res = await http[method](url, body);
           success($q, "บันทึกข้อมูลสำเร็จ");
           editStatus.value
             ? fetchDataById(id.value)
@@ -272,6 +266,29 @@ onMounted(() => {
   <q-form @submit.prevent greedy @validation-success="onSubmit()">
     <div>
       <div class="row q-col-gutter-md q-pa-md">
+        <div class="col-2" v-if="editCheck">
+          <q-input
+            outlined
+            v-model="planData.including"
+            label="ลำดับ/รหัสตัวชี้วัด"
+            bg-color="white"
+            readonly
+            dense
+            class="inputgreen"
+          />
+        </div>
+        <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
+          <q-input
+            outlined
+            v-model="planData.includingName"
+            label="ชื่อตัวชี้วัด"
+            bg-color="white"
+            dense
+            class="inputgreen"
+            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
+            hide-bottom-space
+          />
+        </div>
         <div class="col-2">
           <datepicker
             menu-class-name="modalfix"
@@ -280,7 +297,7 @@ onMounted(() => {
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:modelValue="fetchRoundOption"
+            @update:modelValue="planData.period = ''"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -303,6 +320,17 @@ onMounted(() => {
                   >
                   </q-icon>
                 </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="year"
+                    name="cancel"
+                    class="cursor-pointer"
+                    @click.stop.prevent="
+                      year = 0;
+                      planData.period = '';
+                    "
+                  />
+                </template>
               </q-input>
             </template>
           </datepicker>
@@ -310,47 +338,17 @@ onMounted(() => {
         <div class="col-2">
           <q-select
             ref="inputRef"
-            :readonly="roundOp.length === 0"
+            :readonly="year == 0"
             dense
             outlined
-            v-model="planData.kpiPeriodId"
+            v-model="planData.period"
             :options="roundOp"
             label="รอบการประเมิน"
-            hide-bottom-space
             option-label="name"
             option-value="id"
             map-options
             emit-value
-            lazy-rules
             class="inputgreen"
-            :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
-              ]"
-          />
-        </div>
-        <div class="col-2">
-          <q-input
-            outlined
-            v-model="planData.including"
-            label="รหัสตัวชี้วัด"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-6">
-          <q-input
-            outlined
-            v-model="planData.includingName"
-            label="ชื่อตัวชี้วัด"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
-            hide-bottom-space
           />
         </div>
         <div class="col-4">
@@ -371,8 +369,8 @@ onMounted(() => {
             v-model="planData.unit"
             label="หน่วยนับ"
             bg-color="white"
-            type="number"
             dense
+            lazy-rules
             class="inputgreen"
             :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
             hide-bottom-space
@@ -644,6 +642,16 @@ onMounted(() => {
             </q-card-section>
           </q-card>
         </div>
+        <div class="col-12">
+          <q-input
+            class="inputgreen"
+            v-model="planData.documentInfoEvidence"
+            label="ข้อมูลเอกสารหลักฐาน"
+            outlined
+            dense
+            type="textarea"
+          ></q-input>
+        </div>
       </div>
       <q-separator color="grey-4" />
     </div>

src/modules/14_KPI/components/indicatorByRole/DetailView.vue

@@ -45,6 +45,7 @@ const form = reactive<FormDataRole>({
   weight: "", //น้ำหนัก
   meaning: "", //นิยามหรือความหมาย
   formula: "", //สูตรคำนวณ
+  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
 
   node: null,
   nodeId: null,
@@ -71,7 +72,10 @@ const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
 
 /** Option  รอบการประเมิน*/
-const roundOp = ref<DataOption[]>([]);
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
 /**
  * function ต้นหาข้อมูลของ Option
@@ -121,9 +125,9 @@ function onSubmit() {
     : config.API.kpiRoleMainList;
 
   const body = {
+    year: form.year == 0 ? null:form.year,
     position: form.position, //ตำแหน่ง
-    kpiPeriodId: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
-    including: form.including, //รหัสตัวชี้วัด
+    period: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
     includingName: form.includingName, //ชื่อตัวชี้วัด
     target: form.target, //ค่าเป้าหมาย
     unit: form.unit, //หน่วยนับ
@@ -135,6 +139,7 @@ function onSubmit() {
     achievement5: formScore.score5, //ผลสำเร็จของงาน 5
     meaning: form.meaning, //นิยามหรือความหมาย
     formula: form.formula, //สูตรคำนวณ
+    documentInfoEvidence: form.documentInfoEvidence, //ข้อมูลเอกสารหลักฐาน
 
     node: form.node, //ระดับหน่วยงาน
     nodeId: form.nodeId, //id หน่วยงาน
@@ -171,7 +176,7 @@ function getDetail() {
       const data = res.data.result;
       form.position = data.position;
       form.year = data.year == null ? 0 : data.year;
-      form.round = data.kpiPeriodId;
+      form.round = data.round;
       form.including = data.including;
       form.includingName = data.includingName;
       form.target = data.target;
@@ -244,21 +249,6 @@ function updateSelected(data: any) {
   form.orgRevisionId = data.orgRevisionId;
 }
 
-function getRound() {
-  showLoader();
-  http
-    .get(config.API.kpiPeriod + `?year=${form.year}`)
-    .then((res) => {
-      const data = res.data.result.data;
-      roundOp.value = data.map((item: any) => ({
-        id: item.id,
-        name: statusTothai(item.durationKPI),
-      }));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 
 function statusTothai(val: string) {
   switch (val) {
@@ -284,7 +274,6 @@ function setModel(val: string) {
 onMounted(() => {
   fetchActive();
   getOptions();
-  getRound();
   if (id.value !== "") {
     getDetail();
   }
@@ -345,7 +334,7 @@ onMounted(() => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="(form.round = ''), getRound()"
+              @update:model-value="form.round = ''"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -355,8 +344,6 @@ onMounted(() => {
                 <q-input
                   dense
                   class="inputgreen"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
-                  hide-bottom-space
                   outlined
                   :model-value="
                     form.year === 0 ? null : Number(form.year) + 543
@@ -371,12 +358,24 @@ onMounted(() => {
                     >
                     </q-icon>
                   </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="form.year"
+                      name="cancel"
+                      class="cursor-pointer"
+                      @click.stop.prevent="
+                        form.year = 0;
+                        form.round = '';
+                      "
+                    />
+                  </template>
                 </q-input>
               </template>
             </datepicker>
           </div>
           <div class="col-2">
             <q-select
+              :readonly="form.year == 0"
               dense
               outlined
               v-model="form.round"
@@ -388,21 +387,16 @@ onMounted(() => {
               input-class="text-red"
               label="รอบการประเมิน"
               class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการประเมิน'}`,]"
-              hide-bottom-space
             />
           </div>
-          <div class="col-2">
+          <div class="col-2" v-if="id">
             <q-input
-              label="รหัสตัวชี้วัด"
+              label="ลำดับ/รหัสตัวชี้วัด"
               v-model="form.including"
               outlined
+              readonly
               dense
               class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`,]"
-              hide-bottom-space
             />
           </div>
           <div class="col-4">
@@ -632,6 +626,16 @@ onMounted(() => {
               type="textarea"
             />
           </div>
+          <div class="col-12">
+          <q-input
+            class="inputgreen"
+            v-model="form.documentInfoEvidence"
+            label="ข้อมูลเอกสารหลักฐาน"
+            outlined
+            dense
+            type="textarea"
+          ></q-input>
+        </div>
         </div>
       </q-card-section>
       <q-separator />