From e0a7c8e2becb9d85c1c7c5b5739ef5231164f0a6 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 10 Apr 2024 15:45:03 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=96=E0=B8=99=E0=B8=B0=2004,05?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Forms/04_FormExecutivePosition.vue        | 214 +++++++++++++++++-
 .../Forms/05_FormExecutiveLevel.vue           | 176 +++++++++++++-
 2 files changed, 382 insertions(+), 8 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
index 212191a98..105cc93e5 100644
--- a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
+++ b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
@@ -1,5 +1,211 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const router = useRouter();
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const mode = ref<string>("table");
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
+const L1Editor = ref<string>("");
+const competencyName = ref<string>("");
+async function onSubmit() {
+  dialogConfirm($q, async () => {});
+}
+</script>
+
 <template>
-    <div>
-        สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต
-    </div>
-</template>
\ No newline at end of file
+  <div class="full-width">
+    <q-form @submit.prevent greedy @validation-success="onSubmit()">
+      <div class="col-12">
+        <q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
+      </div>
+      <q-card-section class="col-12 q-px-none">
+        <div>
+          <q-editor
+            v-model="L1Editor"
+            :dense="$q.screen.lt.md"
+            min-height="7rem"
+            placeholder="คำจำกัดความ"
+            :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>
+      </q-card-section>
+      <div class="col-12">
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-4 q-py-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="col-6 q-pl-xl">ระบบตำแหน่ง</div>
+              <div class="col-6">
+                คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย
+              </div>
+            </div>
+          </q-card-section>
+          <div class="row items-center">
+            <q-card-section class="q-pa-none q-pl-xl col-6">
+              <span class="text-dark text-subtitle1 text-weight-medium">
+                L1 ระดับ หัวหน้าฝ่ายในสังกัด
+              </span>
+            </q-card-section>
+            <q-card-section class="q-pa-none col-6">
+              <div class="q-py-md q-mr-md">
+                <q-editor
+                  v-model="L1Editor"
+                  :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>
+            </q-card-section>
+          </div>
+          <div class="row items-center">
+            <q-card-section class="q-pa-none q-pl-xl col-6">
+              <span class="text-dark text-subtitle1 text-weight-medium">
+                L2 ระดับ ผู้ช่วยผู้อำนวยการเขต
+              </span>
+            </q-card-section>
+            <q-card-section class="q-pa-none col-6">
+              <div class="q-py-md q-mr-md">
+                <q-editor
+                  v-model="L1Editor"
+                  :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>
+            </q-card-section>
+          </div>
+          <div class="row items-center">
+            <q-card-section class="q-pa-none q-pl-xl col-6">
+              <span class="text-dark text-subtitle1 text-weight-medium">
+                L3 ระดับ ผู้อำนวยการเขต
+              </span>
+            </q-card-section>
+            <q-card-section class="q-pa-none col-6">
+              <div class="q-py-md q-mr-md">
+                <q-editor
+                  v-model="L1Editor"
+                  :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>
+            </q-card-section>
+          </div>
+        </q-card>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </div>
+    </q-form>
+  </div>
+</template>
diff --git a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
index 55efbd5f5..a4a0f6b24 100644
--- a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
+++ b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
@@ -1,5 +1,173 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const router = useRouter();
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const mode = ref<string>("table");
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
+const L1Editor = ref<string>("");
+const competencyName = ref<string>("");
+async function onSubmit() {
+  dialogConfirm($q, async () => {});
+}
+</script>
+
 <template>
-    <div>
-        สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ
-    </div>
-</template>
\ No newline at end of file
+  <div class="full-width">
+    <q-form @submit.prevent greedy @validation-success="onSubmit()">
+      <div class="col-12">
+        <q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
+      </div>
+      <q-card-section class="col-12 q-px-none">
+        <div>
+          <q-editor
+            v-model="L1Editor"
+            :dense="$q.screen.lt.md"
+            min-height="7rem"
+            placeholder="คำจำกัดความ"
+            :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>
+      </q-card-section>
+      <div class="col-12">
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-4 q-py-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="col-6 q-pl-xl">ระบบตำแหน่ง</div>
+              <div class="col-6">
+                คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย
+              </div>
+            </div>
+          </q-card-section>
+          <div class="row items-center">
+            <q-card-section class="q-pa-none q-pl-xl col-6">
+              <span class="text-dark text-subtitle1 text-weight-medium">
+                L1 ประเภทอำนวยการ ระดับสูง
+              </span>
+            </q-card-section>
+            <q-card-section class="q-pa-none col-6">
+              <div class="q-py-md q-mr-md">
+                <q-editor
+                  v-model="L1Editor"
+                  :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>
+            </q-card-section>
+          </div>
+          <div class="row items-center">
+            <q-card-section class="q-pa-none q-pl-xl col-6">
+              <span class="text-dark text-subtitle1 text-weight-medium">
+                L2 ประเภทบริหาร ระดับสูง
+              </span>
+            </q-card-section>
+            <q-card-section class="q-pa-none col-6">
+              <div class="q-py-md q-mr-md">
+                <q-editor
+                  v-model="L1Editor"
+                  :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>
+            </q-card-section>
+          </div>
+        </q-card>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </div>
+    </q-form>
+  </div>
+</template>