From 28409b1b5e613b433b4bd276aa32bfec8924f12f Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 10 Apr 2024 17:40:14 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../competency/02ListLinkPosition.vue         | 294 ++++++++++-
 .../components/competency/03ListLinkGroup.vue | 477 +++++++++++++++++-
 .../competency/Forms/02_FormGroup.vue         | 113 ++++-
 src/modules/14_KPI/views/competency.vue       |   4 +-
 4 files changed, 880 insertions(+), 8 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
index 5f8a88812..6d9c2e4f6 100644
--- a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
+++ b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
@@ -1,3 +1,295 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const modal = ref<boolean>(false);
+const router = useRouter();
+const rows = ref<any>();
+const groupName = ref<string>("");
+
+const editStatus = ref<boolean>(false);
+
+const competencyTypeOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "สมรรถนะหลัก",
+  },
+  {
+    id: "ID2",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID3",
+    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+  },
+  {
+    id: "ID4",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+  },
+  {
+    id: "ID5",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "groupName",
+    align: "left",
+    label: "รายการกลุ่มงาน",
+    sortable: true,
+    field: "groupName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+
+const competencyType = ref<string>("ID1");
+const filterKeyword = ref<string>("");
+
+const visibleColumns = ref<string[]>(["groupName"]);
+
+/** ดึงข้อมูล */
+async function getData() {
+  const data = [
+    {
+      id: "ID1",
+      groupName: "กลุ่มงาน 1",
+    },
+    {
+      id: "ID2",
+      groupName: "กลุ่มงาน 2",
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function editData(id: string) {
+  console.log(id);
+  // await http
+  //   .put(config.API.orgPrefixId(id), {
+  //     name: prefix.value,
+  //   })
+  //   .then(() => {
+  //     getData();
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function deleteData(id: string) {
+  console.log(id);
+  // await http
+  //   .delete(config.API.orgPrefixId(id))
+  //   .then(() => {
+  //     getData();
+  //     success($q, "ลบข้อมูลสำเร็จ");
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();w
+  //   });
+}
+
+/** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
+function onAdd() {
+  modal.value = true;
+}
+
+function close() {
+  modal.value = false;
+  editStatus.value = false;
+  groupName.value = ''
+}
+
+function onEdit(data: any) {
+  modal.value = true;
+  editStatus.value = true;
+  groupName.value = data.groupName
+}
+
+function onSubmit() {
+  console.log("save");
+  close()
+}
+
+onMounted(async () => {
+  getData();
+});
+</script>
+
 <template>
-  <div>เชื่อมโยงกับตําแหน่ง</div>
+  <q-toolbar style="padding: 0">
+    <!-- <q-select
+      v-model="competencyType"
+      outlined
+      label="ประเภทสมรรถนะ"
+      dense
+      option-label="name"
+      option-value="id"
+      :options="competencyTypeOp"
+      style="min-width: 200px"
+      emit-value
+      map-options
+    /> -->
+    <q-btn flat round color="primary" icon="add" @click="onAdd()">
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="rows"
+    :filter="filterKeyword"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="onEdit(props.row)"
+        >
+          {{ col.value }}
+        </q-td>
+        <q-td auto-width>
+          <!-- <q-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="12px"
+            icon="edit"
+            clickable
+            @click.stop="
+              () => {
+                dialogStatus = 'edit';
+                dialog = true;
+                prefix = props.row.name;
+                editId = props.row.id;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn> -->
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card flat bordered style="min-width: 50vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="editStatus ? 'แก้ไขกลุ่มงาน' : 'เพิ่มกลุ่มงาน'"
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <q-input
+            label="กลุ่มงาน"
+            v-model="groupName"
+            outlined
+            dense
+            class="inputgreen"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกกลุ่มงาน'}`,]"
+            hide-bottom-space
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="public"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
diff --git a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
index 3aa701266..72393cce5 100644
--- a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
+++ b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
@@ -1,3 +1,478 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import Header from "@/components/DialogHeader.vue";
+
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const modal = ref<boolean>(false);
+const router = useRouter();
+const rows = ref<any>();
+const editStatus = ref<boolean>(false);
+const groupName = ref<string>("");
+const position = ref<string>("");
+const competency = ref<string>("");
+
+const groupNameOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "กลุ่ม 1",
+  },
+  {
+    id: "ID2",
+    name: "กลุ่ม 2",
+  },
+]);
+const positionOp = ref<DataOption[]>([]);
+const positionMainOp = ref<DataOption[]>([]);
+const competencyOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "สมรรถนะ 1",
+  },
+  {
+    id: "ID2",
+    name: "สมรรถนะ 2",
+  },
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "groupName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "groupName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "competency",
+    align: "left",
+    label: "สมรรถนะประจำกลุ่มงาน",
+    sortable: true,
+    field: "competency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+
+const competencyType = ref<string>("ID1");
+const filterKeyword = ref<string>("");
+
+const visibleColumns = ref<string[]>(["groupName", "position", "competency"]);
+
+/** ดึงข้อมูล */
+async function getData() {
+  const data = [
+    {
+      id: "ID1",
+      groupName: "รายการสมรรถะ 1",
+      position: [
+        {
+          id: "SUB1",
+          name: "นักจัดการงานทั่วไป",
+        },
+        {
+          id: "SUB2",
+          name: "เจ้าพนักงานธุรการ",
+        },
+        {
+          id: "SUB3",
+          name: "เจ้าพนักงานพัสดุ",
+        },
+        {
+          id: "SUB4",
+          name: "นักวิชาการพัสดุ",
+        },
+      ],
+      competency: [
+        {
+          id: "SUB1",
+          name: "การจัดการและควบคุม",
+        },
+        {
+          id: "SUB2",
+          name: "ความละเอียดรอบคอบ",
+        },
+        {
+          id: "SUB3",
+          name: "การปรับตัวในการทำงานภายใต้ภาวะกดดัน",
+        },
+      ],
+    },
+    {
+      id: "ID2",
+      groupName: "รายการสมรรถะ 1",
+      position: [
+        {
+          id: "SUB1",
+          name: "นักวิชาการสถิติ",
+        },
+        {
+          id: "SUB2",
+          name: "เจ้าพนักงานสถิติ",
+        },
+        {
+          id: "SUB3",
+          name: "เจ้าพนักงานเวชสถิติ",
+        },
+      ],
+      competency: [
+        {
+          id: "SUB1",
+          name: "การคิดวิเคราะห์",
+        },
+        {
+          id: "SUB2",
+          name: "การสืบเสาะหาข้อมูล",
+        },
+        {
+          id: "SUB3",
+          name: "ความละเอียดรอบคอบ",
+        },
+      ],
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function editData(id: string) {
+  console.log(id);
+  // await http
+  //   .put(config.API.orgPrefixId(id), {
+  //     name: prefix.value,
+  //   })
+  //   .then(() => {
+  //     getData();
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function deleteData(id: string) {
+  console.log(id);
+  // await http
+  //   .delete(config.API.orgPrefixId(id))
+  //   .then(() => {
+  //     getData();
+  //     success($q, "ลบข้อมูลสำเร็จ");
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();w
+  //   });
+}
+
+/** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
+function onAdd() {
+  getOptions();
+  modal.value = true;
+}
+
+function onEdit(data: any) {
+  getOptions();
+  modal.value = true;
+  editStatus.value = true;
+}
+
+function onSubmit() {
+  console.log("save");
+  close();
+}
+
+function close() {
+  modal.value = false;
+  editStatus.value = false;
+}
+
+function getOptions() {
+  http.get(config.API.orgSalaryPosition).then((res) => {
+    const dataOp = res.data.result;
+    const uniqueNames = new Set();
+    const filteredData = dataOp
+      .filter((item: any) => {
+        if (!uniqueNames.has(item.positionName)) {
+          uniqueNames.add(item.positionName);
+          return true;
+        }
+        return false;
+      })
+      .map((item: any) => ({
+        id: item.positionName,
+        name: item.positionName,
+      }));
+
+    positionMainOp.value = filteredData;
+  });
+}
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: any, update: Function) {
+  update(() => {
+    positionOp.value = positionMainOp.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+onMounted(async () => {
+  getData();
+});
+</script>
+
 <template>
-  <div>เชื่อมโยงกับกลุ่มงาน</div>
+  <q-toolbar style="padding: 0">
+    <!-- <q-select
+      v-model="competencyType"
+      outlined
+      label="ประเภทสมรรถนะ"
+      dense
+      option-label="name"
+      option-value="id"
+      :options="competencyTypeOp"
+      style="min-width: 200px"
+      emit-value
+      map-options
+    /> -->
+    <q-btn flat round color="primary" icon="add" @click="onAdd()">
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      >
+      </q-select>
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="rows"
+    :filter="filterKeyword"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+    :separator="'cell'"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id" class="vertical-top">
+          <div v-if="col.name == 'position'">
+            <div v-if="col.value.length !== 0">
+              <div
+                v-for="(pos, index) in col.value"
+                :key="pos.id"
+                @click="onEdit(props.row)"
+              >
+                {{ pos ? `- ${pos.name}` : "-" }}
+              </div>
+            </div>
+            <div v-else>-</div>
+          </div>
+          <div v-else-if="col.name == 'competency'">
+            <div v-if="col.value.length !== 0">
+              <div v-for="competency in col.value" :key="competency.id">
+                {{ `- ${competency.name}` }}
+              </div>
+            </div>
+            <div v-else>-</div>
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <!-- <q-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="12px"
+            icon="edit"
+            clickable
+            @click.stop="
+              () => {
+                dialogStatus = 'edit';
+                dialog = true;
+                prefix = props.row.name;
+                editId = props.row.id;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn> -->
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card flat bordered style="min-width: 80vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="
+            editStatus ? 'แก้ไขกลุ่มงานและตำแหน่ง' : 'เพิ่มกลุ่มงานและตำแหน่ง'
+          "
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-4">
+              <q-select
+                dense
+                v-model="groupName"
+                label="กลุ่มงาน"
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="groupNameOp"
+              />
+            </div>
+            <div class="col-4">
+              <q-select
+                dense
+                v-model="position"
+                label="ตำแหน่ง"
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="positionOp"
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+            </div>
+            <div class="col-4">
+              <q-select
+                dense
+                v-model="competency"
+                label="สมรรถนะประจำกลุ่ม"
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="competencyOp"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="public"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
diff --git a/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue b/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue
index bfe6b55a3..be54053d0 100644
--- a/src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue
+++ b/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>
\ No newline at end of file
+  <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>
diff --git a/src/modules/14_KPI/views/competency.vue b/src/modules/14_KPI/views/competency.vue
index 4e574e0c2..ca2c075bc 100644
--- a/src/modules/14_KPI/views/competency.vue
+++ b/src/modules/14_KPI/views/competency.vue
@@ -11,8 +11,8 @@ const tabs = ref<Array<any>>([]);
 onMounted(() => {
   const tab = [
     { label: "รายการสมรรถนะ", value: "list_competency" },
-    { label: "เชื่อมโยงกับตําแหน่ง", value: "list_linkPosition" },
-    { label: "เชื่อมโยงกับกลุ่มงาน", value: "list_linkGroup" },
+    { label: "กลุ่มงาน", value: "list_linkPosition" },
+    { label: "เชื่อมโยงกับกลุ่มงานและตำแหน่ง", value: "list_linkGroup" },
   ];
   tabs.value = tab;
 });