UI User ฟอร์มประเมิน เพิ่มส่วนการพัฒนาตนเอง

src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { ref, reactive } from "vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const isEdit = defineModel<boolean>("isEdit", { required: true });
+
+const formData = reactive({
+  name: "",
+  group: [],
+  target: "",
+  isDevelopment70: false,
+  isDevelopment20: false,
+  isDevelopment10: false,
+  achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
+  achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
+  achievement0: "ไม่ได้ดำเนินการพัฒนา",
+});
+function close() {
+  modal.value = false;
+  isEdit.value = false;
+
+  formData.name =  ""
+  formData.group =  []
+  formData.target =  ""
+  formData.isDevelopment70 =  false
+  formData.isDevelopment20 =  false
+  formData.isDevelopment10 =  false
+  formData.achievement10 =  "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
+  formData.achievement5 =  "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
+  formData.achievement0 =  "ไม่ได้ดำเนินการพัฒนา"
+}
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="width: 80%">
+      <DialogHeader
+        :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
+        :close="close"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              v-model="formData.name"
+              outlined
+              dense
+              class="inputgreen"
+              label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
+            >
+            </q-input>
+          </div>
+          <div class="column">
+            <q-checkbox
+              v-model="formData.isDevelopment70"
+              label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+            />
+            <q-checkbox
+              v-model="formData.isDevelopment20"
+              label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+            />
+            <q-checkbox
+              v-model="formData.isDevelopment10"
+              label="10 การฝึกอบรมอื่นๆ"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              label="เป้าหมายการนำไปพัฒนางาน"
+              v-model="formData.target"
+              outlined
+              type="textarea"
+              dense
+              class="inputgreen"
+            ></q-input>
+          </div>
+          <div class="col-12">
+            <q-card bordered>
+              <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
+                <div class="col-4 text-center">
+                  <span>ระดับคะแนน</span>
+                </div>
+                <div class="col-8 text-start">
+                  <span>เกณฑ์การประเมิน</span>
+                </div>
+              </div>
+              <div class="row q-pa-sm">
+                <div class="col-4 text-center self-start text-body1">
+                  <span>10</span>
+                </div>
+                <div class="col-8">
+                  <q-input
+                    class="inputgreen"
+                    v-model="formData.achievement10"
+                    outlined
+                    dense
+                    label="เกณฑ์การประเมิน"
+                  ></q-input>
+                </div>
+              </div>
+              <q-separator />
+              <div class="row q-pa-sm bg-grey-2">
+                <div class="col-4 text-center self-start text-body1">
+                  <span>5</span>
+                </div>
+                <div class="col-8">
+                  <q-input
+                    class="inputgreen"
+                    v-model="formData.achievement5"
+                    outlined
+                    dense
+                    label="เกณฑ์การประเมิน"
+                  ></q-input>
+                </div>
+              </div>
+              <q-separator />
+              <div class="row q-pa-sm">
+                <div class="col-4 text-center self-start text-body1">
+                  <span>0</span>
+                </div>
+                <div class="col-8">
+                  <q-input
+                    class="inputgreen"
+                    v-model="formData.achievement0"
+                    outlined
+                    dense
+                    label="เกณฑ์การประเมิน"
+                  ></q-input>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </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-card>
+  </q-dialog>
+</template>