From e8785cf3856833fb44fa51ac0f7cfded2e6b4ad8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 11:04:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20=3D>=20=20form?=
 =?UTF-8?q?=20=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=80=E0=B8=A8=E0=B8=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Tab/Dialog/03_Dialog.vue       | 325 +++++++++++++-----
 src/modules/08_KPI/interface/request/index.ts |   7 +
 2 files changed, 240 insertions(+), 92 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
index 3efe102..5e047e0 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
@@ -1,30 +1,38 @@
-<script setup lang="ts">
+divdivdiv<script setup lang="ts">
 import { ref, reactive } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import type { FormDataAssigned } from '@/modules/08_KPI/interface/request/index'
+import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";
 
 const modal = defineModel<boolean>("modal", { required: true });
 
 const formData = reactive<FormDataAssigned>({
-  indicator:'',//ชื่อตัวชี้วัด
-  target:'',//ค่าเป้าหมาย
-  unit:'',//หน่วยนับ
-  weigth:'',//น้ำหนัก (ร้อยละ)
-  definition:'',//นิยามหรือความหมายของตัวชี้วัด
-})
+  including: "", //รหัสตัวชี้วัด
+  indicator: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: "", //หน่วยนับ
+  weigth: "", //น้ำหนัก (ร้อยละ)
+  definition: "", //นิยามหรือความหมายของตัวชี้วัด
+  formula: "", //สูตรคำนวณ
+  achievement1: "", // ผลสำเร็จของงาน1
+  achievement2: "", // ผลสำเร็จของงาน2
+  achievement3: "", // ผลสำเร็จของงาน3
+  achievement4: "", // ผลสำเร็จของงาน4
+  achievement5: "", // ผลสำเร็จของงาน5
+});
 /** ปิด dialog */
 function closeDialog() {
   modal.value = false;
-  formData.indicator = ''
-  formData.target = ''
-  formData.unit = ''
-  formData.weigth = ''
-  formData.definition = ''
-}
-
-/** เรียกใช้ class */
-function getclass() {
-  return "inputgreen";
+  formData.including = "";
+  formData.indicator = "";
+  formData.target = "";
+  formData.unit = "";
+  formData.achievement1 = "";
+  formData.achievement2 = "";
+  formData.achievement3 = "";
+  formData.achievement4 = "";
+  formData.achievement5 = "";
+  formData.weigth = "";
+  formData.definition = "";
 }
 
 function onSubmit() {}
@@ -33,83 +41,216 @@ function onSubmit() {}
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 50%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <DialogHeader
-        :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
-        :close="closeDialog"
-      />
-      <q-separator />
+        <DialogHeader
+          :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
+          :close="closeDialog"
+        />
+        <q-separator />
 
-      <q-card-section >
-        <div class="row q-col-gutter-sm">
-          <div class="col-12">
-            <q-input
-            v-model="formData.indicator"
-            label="ชื่อตัวชี้วัด"
-            outlined
-            dense
-            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
-            hide-bottom-space
-            :class="getclass()"
-            />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-2">
+              <q-input
+                outlined
+                v-model="formData.including"
+                label="รหัสตัวชี้วัด"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-10">
+              <q-input
+                v-model="formData.indicator"
+                label="ชื่อตัวชี้วัด"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.target"
+                label="ค่าเป้าหมาย"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.unit"
+                label="หน่วยนับ"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.weigth"
+                label="น้ำหนัก (ร้อยละ)"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                mask="#"
+                reverse-fill-mask
+              />
+            </div>
+            <div class="col-12">
+              <q-card bordered>
+                <q-card>
+                  <q-card-actions class="bg-grey-3 row">
+                    <div class="col-4 flex justify-center items-center">
+                      <div>ระดับคะแนน</div>
+                    </div>
+                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                  </q-card-actions>
+                </q-card>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>5</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement5"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>4</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement4"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>3</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement3"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>2</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement2"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>1</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement1"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.definition"
+                label="นิยามหรือความหมายของตัวชี้วัด"
+                outlined
+                dense
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="formData.formula"
+                label="สูตรคำนวณ"
+                bg-color="white"
+                type="textarea"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+                hide-bottom-space
+              />
+            </div>
           </div>
-          <div class="col-4">
-            <q-input
-            v-model="formData.target"
-            label="ค่าเป้าหมาย"
-            outlined
-            dense
-            :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
-            hide-bottom-space
-            :class="getclass()"
-            />
-          </div>
-          <div class="col-4">
-            <q-input
-            v-model="formData.unit"
-            label="หน่วยนับ"
-            outlined
-            dense
-            :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
-            hide-bottom-space
-            :class="getclass()"
-            />
-          </div>
-          <div class="col-4">
-            <q-input
-            v-model="formData.weigth"
-            label="น้ำหนัก (ร้อยละ)"
-            outlined
-            dense
-            :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
-            hide-bottom-space
-            :class="getclass()"
-            />
-          </div>
-          <div class="col-12">
-            <q-input
-            v-model="formData.definition"
-            label="นิยามหรือความหมายของตัวชี้วัด"
-            outlined
-            dense
-            type="textarea"
-            :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
-            hide-bottom-space
-            :class="getclass()"
-            />
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
+        </q-card-section>
+        <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="บันทึก"
-          color="secondary"
-          type="submit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-    </q-form>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
index dd8d0e6..df624ae 100644
--- a/src/modules/08_KPI/interface/request/index.ts
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -12,10 +12,17 @@ interface FormProfile {
 }
 
 interface FormDataAssigned {
+  including: string;
   indicator: string;
   target: string;
   unit: string;
   weigth: string;
+  achievement1: string;
+  achievement2: string;
+  achievement3: string;
+  achievement4: string;
+  achievement5: string;
   definition: string;
+  formula: string;
 }
 export type { FormProfile, FormDataAssigned };