Merge branch 'develop' into devTee

src/modules/14_KPI/components/competency/AddPage.vue

@@ -86,33 +86,33 @@ function onSubmit() {
     <span class="toptitle text-dark">เพิ่มสมรรถนะ</span>
   </div>
   <q-card flat bordered>
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <q-card-section>
-        <div class="row q-col-gutter-sm">
-          <div class="col-12">
-            <q-select
-              v-model="formData.competencyType"
-              outlined
-              label="เลือกประเภทสมรรถนะ"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="competencyTypeOp"
-              emit-value
-              map-options
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
-              hide-bottom-space
-            />
-          </div>
-          <FormMain v-if="formData.competencyType === 'ID1'" />
-          <FormGroup v-else-if="formData.competencyType === 'ID2'" />
-          <FormExecutive v-else-if="formData.competencyType === 'ID3'" />
-          <FormExecutivePosition
-            v-else-if="formData.competencyType === 'ID4'"
+    <!-- @submit.prevent @validation-success="onSubmit" -->
+    <!-- <q-form greedy> -->
+    <q-card-section>
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <q-select
+            v-model="formData.competencyType"
+            outlined
+            label="เลือกประเภทสมรรถนะ"
+            dense
+            option-label="name"
+            option-value="id"
+            :options="competencyTypeOp"
+            emit-value
+            map-options
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
+            hide-bottom-space
           />
-          <FormExecutiveLevel v-else-if="formData.competencyType === 'ID5'" />
+        </div>
 
-          <!-- <div class="col-12">
+        <FormMain v-if="formData.competencyType === 'ID1'" />
+        <FormGroup v-else-if="formData.competencyType === 'ID2'" />
+        <FormExecutive v-else-if="formData.competencyType === 'ID3'" />
+        <FormExecutivePosition v-else-if="formData.competencyType === 'ID4'" />
+        <FormExecutiveLevel v-else-if="formData.competencyType === 'ID5'" />
+
+        <!-- <div class="col-12">
             <q-input
               v-model="formData.competencyName"
               dense
@@ -208,7 +208,7 @@ function onSubmit() {
             </q-card>
           </div> -->
 
-          <!-- <div class="col-12">
+        <!-- <div class="col-12">
             <q-input
               v-model="formData.definition"
               label="กำหนดเกณฑ์การประเมิน"
@@ -219,10 +219,9 @@ function onSubmit() {
               hide-bottom-space
             />
           </div> -->
-        </div>
-      </q-card-section>
-      <q-separator />
-      <!-- <div class="text-right q-pa-sm">
+      </div>
+    </q-card-section>
+    <!-- <div class="text-right q-pa-sm">
         <q-btn
           dense
           unelevated
@@ -235,6 +234,6 @@ function onSubmit() {
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
       </div> -->
-    </q-form>
+    <!-- </q-form> -->
   </q-card>
 </template>

src/modules/14_KPI/components/competency/Forms/01_FormMain.vue

@@ -1,5 +1,160 @@
+div
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  levels: [
+    {
+      level: "1",
+      description: "",
+    },
+  ],
+
+  evaluation: "",
+});
+
+function ocClickAdd() {
+  if (formData.levels.length !== 6) {
+    const levelName = formData.levels.length + 1;
+    const data = {
+      level: levelName.toString(),
+      description: "",
+    };
+    formData.levels.push(data);
+  }
+}
+
+function onSubmit() {
+  console.log(formData);
+}
+</script>
+
 <template>
-    <div>
-        สมรรถนะหลัก
+  <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <q-input
+          v-model="formData.competencyName"
+          dense
+          outlined
+          label="ชื่อสมรรถนะ"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          v-model="formData.definition"
+          label="คำจำกัดความ"
+          dense
+          type="textarea"
+          outlined
+          :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12">
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-4">
+            <div
+              class="row items-center text-dark text-body2 text-weight-medium"
+            >
+              <div class="col-3">
+                <div class="row items-center">
+                  <div class="col-1">
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      color="primary"
+                      icon="add"
+                      @click="ocClickAdd"
+                    >
+                      <q-tooltip>เพิ่ม</q-tooltip></q-btn
+                    >
+                  </div>
+                  <div class="col-11 text-center">
+                    <span>ระดับสมรรถนะ</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-4">
+                <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <div
+              class="row q-pa-sm"
+              v-for="(items, index) in formData.levels"
+              key="index"
+            >
+              <div
+                class="col-3 text-center self-center text-body1 text-weight-medium"
+              >
+                <span>{{ items.level }}</span>
+              </div>
+              <div class="col-9">
+                <q-editor
+                  v-model="formData.levels[index].description"
+                  :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>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-12">
+        <q-input
+          v-model="formData.evaluation"
+          label="กำหนดเกณฑ์การประเมิน"
+          dense
+          type="textarea"
+          outlined
+          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12 row justify-end">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          class="q-px-md"
+          type="submit"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
     </div>
-</template>
+  </q-form>
+</template>
+
+<style scoped></style>

src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue

@@ -1,5 +1,275 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  level: ["", "", "", "", "", ""],
+  form: [
+    {
+      posType: "",
+      posLevel: "",
+      description: "",
+      description2: "",
+    },
+  ],
+  evaluation: "",
+});
+
+const dataLevel = ref<any>([]);
+const typeOp = ref<any>([]);
+const levelOp = ref<any>([]);
+const typeOpsMain = ref<any>([]);
+const levelOpsMain = ref<any>([]);
+
+function ocClickAdd() {
+  if (formData.form.length !== 6) {
+    const data = {
+      posType: "",
+      posLevel: "",
+      description: "",
+      description2: "",
+    };
+    formData.form.push(data);
+  }
+}
+
+/** function เรียกรายการประเภทตำแหน่ง */
+function fetchType() {
+  showLoader();
+  http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      const data = res.data.result;
+      dataLevel.value = data;
+      typeOpsMain.value = data.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOp.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateSelectType(val: string, index: number) {
+  const listLevel = dataLevel.value.find((e: any) => e.id === val);
+  levelOpsMain.value = listLevel.posLevels.map((e: any) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOp.value = levelOpsMain.value;
+  formData.form[index].posLevel = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+  });
+}
+
+onMounted(() => {
+  fetchType();
+});
+</script>
+
 <template>
-    <div>
-        สมรรถนะประจำผู้บริหารกรุงเทพมหานคร
+  <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <q-input
+          v-model="formData.competencyName"
+          dense
+          outlined
+          label="ชื่อสมรรถนะ"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          v-model="formData.definition"
+          label="คำจำกัดความ"
+          dense
+          type="textarea"
+          outlined
+          :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12">
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-4">
+            <div
+              class="row items-center text-dark text-body2 text-weight-medium"
+            >
+              <div class="col-3">
+                <div class="row items-center">
+                  <div class="col-1">
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      color="primary"
+                      icon="add"
+                      @click="ocClickAdd"
+                    >
+                      <q-tooltip>เพิ่ม</q-tooltip></q-btn
+                    >
+                  </div>
+                  <div class="col-11 text-center">
+                    <span>ประเภทตำแหน่ง</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-3 text-center">
+                <span>ระดับตำแห่นง</span>
+              </div>
+              <div class="col-6">
+                <span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <div
+              class="row q-pa-sm q-col-gutter-sm"
+              v-for="(items, index) in formData.form"
+              key="index"
+            >
+              <div class="col-3 text-center">
+                <q-select
+                  v-model="formData.form[index].posType"
+                  outlined
+                  label="ประเภทตำแหน่ง"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="typeOp"
+                  emit-value
+                  map-options
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,]"
+                  hide-bottom-space
+                  @update:model-value="
+                    updateSelectType(formData.form[index].posType, index)
+                  "
+                />
+              </div>
+              <div class="col-3 text-center">
+                <q-select
+                  v-model="formData.form[index].posLevel"
+                  outlined
+                  label="ระดับตำแหน่ง"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="levelOp"
+                  emit-value
+                  map-options
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`,]"
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-editor
+                  v-model="formData.form[index].description"
+                  :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',
+                  }"
+                />
+                <q-editor
+                  v-model="formData.form[index].description2"
+                  :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 class="col-12"><q-separator /></div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-12">
+        <q-input
+          v-model="formData.evaluation"
+          label="กำหนดเกณฑ์การประเมิน"
+          dense
+          type="textarea"
+          outlined
+          :rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12 row justify-end">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          class="q-px-md"
+          type="submit"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
     </div>
-</template>
+  </q-form>
+</template>
+
+<style scoped></style>

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>
+  <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>

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>
+  <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>