UI สมรรถนะ

src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue

@@ -1,5 +1,110 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+
+interface DetailLevelType {
+  level_01: any;
+  level_02: any;
+  level_03: any;
+  level_04: any;
+  level_05: any;
+}
+
+interface FormGroup {
+  name: string;
+  definition: string;
+  detailLevel: DetailLevelType[];
+}
+
+const fieldLabels = {
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "4",
+  score5: "5",
+};
+
+const formScore = reactive<any>({
+  score1: "",
+  score2: "",
+  score3: "",
+  score4: "",
+  score5: "",
+});
+
+const formData = reactive<FormGroup>({
+  name: "",
+  definition: "",
+  detailLevel: [],
+});
+</script>
 <template>
-    <div>
-        สมรรถนะประจำกลุ่มงาน
-    </div>
-</template>
+  <div class="col-12">
+    <q-input label="ชื่อสมรรถนะ" outlined v-model="formData.name" dense />
+  </div>
+  <div class="col-12">
+    <q-input
+      label="คำจำกัดความ"
+      outlined
+      v-model="formData.definition"
+      dense
+      type="textarea"
+    />
+  </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-editor
+                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',
+                }"
+              />
+            </div>
+          </div>
+          <div
+            class="col-12"
+            v-if="index !== Object.keys(fieldLabels).length - 1"
+          >
+            <q-separator />
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>