From dafe59cf27cfda1fbbb0b972a913cfd4fd98f6f6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 13:16:30 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=93=20=3D>=20=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicatorByPlan/IndicatorByPlan.vue       | 787 +++++++++---------
 .../competency/02ListLinkPosition.vue         |   4 +-
 .../components/competency/03ListLinkGroup.vue |   4 +-
 .../components/competency/04ListCriteria.vue  | 151 ++--
 .../components/competency/AddPage.vue         |  21 +-
 .../components/competency/Forms/Main.vue      | 267 +++---
 .../01_metadataNew/interface/request/Main.ts  |   2 +-
 .../01_metadataNew/views/Strategic.vue        |  16 +-
 8 files changed, 619 insertions(+), 633 deletions(-)

diff --git a/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue b/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
index bf1a832c1..fde9bee1d 100644
--- a/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
@@ -1,3 +1,4 @@
+divdivdivdivdivdivdiv
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -264,407 +265,411 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-form @submit.prevent greedy @validation-success="onSubmit()">
-    <div>
-      <div class="row q-col-gutter-md q-pa-md">
-        <div class="col-2" v-if="editCheck">
-          <q-input
-            outlined
-            v-model="planData.including"
-            label="ลำดับ/รหัสตัวชี้วัด"
-            bg-color="white"
-            readonly
-            dense
-            class="inputgreen"
-          />
-        </div>
-        <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
-          <q-input
-            outlined
-            v-model="planData.includingName"
-            label="ชื่อตัวชี้วัด"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-2">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="year"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                dense
-                outlined
-                class="inputgreen"
-                hide-bottom-space
-                :model-value="!!year ? year + 543 : null"
-                :label="`${'ปีงบประมาณ'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-                <template v-slot:append>
-                  <q-icon
-                    v-if="year"
-                    name="cancel"
-                    class="cursor-pointer"
-                    @click.stop.prevent="year = 0"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-2">
-          <q-select
-            ref="inputRef"
-            dense
-            outlined
-            v-model="planData.period"
-            :options="roundOp"
-            label="รอบการประเมิน"
-            option-label="name"
-            option-value="id"
-            map-options
-            emit-value
-            class="inputgreen"
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            outlined
-            v-model="planData.target"
-            label="ค่าเป้าหมาย"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            outlined
-            v-model="planData.unit"
-            label="หน่วยนับ"
-            bg-color="white"
-            dense
-            lazy-rules
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            outlined
-            v-model="planData.weight"
-            label="น้ำหนัก"
-            type="number"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกน้ำหนัก'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-12 row">
-          <div class="col-6">
-            <q-card flat bordered>
-              <q-card bordered>
-                <q-card-actions class="bg-grey-3 row">
+  <q-card>
+    <q-form @submit.prevent greedy @validation-success="onSubmit()">
+      <q-card-section>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="col-2" v-if="editCheck">
+            <q-input
+              outlined
+              v-model="planData.including"
+              label="ลำดับ/รหัสตัวชี้วัด"
+              bg-color="white"
+              readonly
+              dense
+              class="inputgreen"
+            />
+          </div>
+          <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
+            <q-input
+              outlined
+              v-model="planData.includingName"
+              label="ชื่อตัวชี้วัด"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  class="inputgreen"
+                  hide-bottom-space
+                  :model-value="!!year ? year + 543 : null"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="year"
+                      name="cancel"
+                      class="cursor-pointer"
+                      @click.stop.prevent="year = 0"
+                    />
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-2">
+            <q-select
+              ref="inputRef"
+              dense
+              outlined
+              v-model="planData.period"
+              :options="roundOp"
+              label="รอบการประเมิน"
+              option-label="name"
+              option-value="id"
+              map-options
+              emit-value
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              outlined
+              v-model="planData.target"
+              label="ค่าเป้าหมาย"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              outlined
+              v-model="planData.unit"
+              label="หน่วยนับ"
+              bg-color="white"
+              dense
+              lazy-rules
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              outlined
+              v-model="planData.weight"
+              label="น้ำหนัก"
+              type="number"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกน้ำหนัก'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12 row">
+            <div class="col-6">
+              <q-card flat bordered>
+                <q-card bordered>
+                  <q-card-actions class="bg-grey-3 row">
+                    <div class="col-4 flex justify-center items-center">
+                      <div>ระดับคะแนน</div>
+                    </div>
+                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                  </q-card-actions>
+                </q-card>
+                <div class="row">
                   <div class="col-4 flex justify-center items-center">
-                    <div>ระดับคะแนน</div>
+                    <div>5</div>
                   </div>
-                  <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
-                </q-card-actions>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement5"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>4</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement4"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>3</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement3"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>2</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement2"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>1</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement1"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
               </q-card>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>5</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement5"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>4</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement4"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>3</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement3"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>2</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement2"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>1</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement1"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              outlined
+              v-model="planData.meaning"
+              label="นิยามหรือความหมาย"
+              type="textarea"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              outlined
+              v-model="planData.formula"
+              label="สูตรคำนวณ"
+              bg-color="white"
+              type="textarea"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-6">
+            <q-card bordered class="col-12">
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                หน่วยงาน/ส่วนราชการ
               </div>
+              <q-separator />
+
+              <q-card-section class="q-pa-sm">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filterAgency"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filterAgency !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filterAgency = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-tree
+                  style="height: 350px; overflow: scroll"
+                  dense
+                  :nodes="nodeAgency"
+                  node-key="orgTreeId"
+                  label-key="orgTreeName"
+                  selected-color="primary"
+                  :filter="filterAgency"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
+                  v-model:expanded="expandedAgency"
+                  v-model:selected="planData.nodeId"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      @click.stop="updateSelectedAgency(prop.node)"
+                      :active="planData.nodeId == prop.node.orgTreeId"
+                      active-class="my-list-link text-primary text-weight-medium"
+                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    >
+                      <div>
+                        <div class="text-weight-medium">
+                          {{ prop.node.orgTreeName }}
+                        </div>
+                        <div class="text-weight-light text-grey-8">
+                          {{
+                            prop.node.orgCode == null ? null : prop.node.orgCode
+                          }}
+                          {{
+                            prop.node.orgTreeShortName == null
+                              ? null
+                              : prop.node.orgTreeShortName
+                          }}
+                        </div>
+                      </div>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-card-section>
             </q-card>
           </div>
-        </div>
-        <div class="col-12">
-          <q-input
-            outlined
-            v-model="planData.meaning"
-            label="นิยามหรือความหมาย"
-            type="textarea"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-12">
-          <q-input
-            outlined
-            v-model="planData.formula"
-            label="สูตรคำนวณ"
-            bg-color="white"
-            type="textarea"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-6">
-          <q-card bordered class="col-12">
-            <div
-              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-            >
-              หน่วยงาน/ส่วนราชการ
-            </div>
-            <q-separator />
+          <div class="col-6">
+            <q-card bordered class="col-12">
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ยุทธศาสตร์ / แผน
+              </div>
+              <q-separator />
 
-            <q-card-section class="q-pa-sm">
-              <q-input
-                dense
-                outlined
-                v-model="filterAgency"
-                label="ค้นหา"
-                class="inputgreen"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filterAgency !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filterAgency = ''"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-tree
-                style="height: 350px; overflow: scroll"
-                dense
-                :nodes="nodeAgency"
-                node-key="orgTreeId"
-                label-key="orgTreeName"
-                selected-color="primary"
-                :filter="filterAgency"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-                v-model:expanded="expandedAgency"
-                v-model:selected="planData.nodeId"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    clickable
-                    @click.stop="updateSelectedAgency(prop.node)"
-                    :active="planData.nodeId == prop.node.orgTreeId"
-                    active-class="my-list-link text-primary text-weight-medium"
-                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                  >
-                    <div>
-                      <div class="text-weight-medium">
-                        {{ prop.node.orgTreeName }}
+              <q-card-section class="q-pa-sm">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-tree
+                  style="height: 350px; overflow: scroll"
+                  dense
+                  :nodes="nodeplan"
+                  selected-color="primary"
+                  node-key="id"
+                  label-key="name"
+                  :filter="filter"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
+                  v-model:expanded="expandedPlan"
+                  v-model:selected="planData.strategyId"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      @click.stop="updateSelected(prop.node)"
+                      :active="planData.strategyId == prop.node.id"
+                      active-class="my-list-link text-primary text-weight-medium"
+                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    >
+                      <div>
+                        <div class="text-weight-medium">
+                          {{ prop.node.name }}
+                        </div>
                       </div>
-                      <div class="text-weight-light text-grey-8">
-                        {{
-                          prop.node.orgCode == null ? null : prop.node.orgCode
-                        }}
-                        {{
-                          prop.node.orgTreeShortName == null
-                            ? null
-                            : prop.node.orgTreeShortName
-                        }}
-                      </div>
-                    </div>
-                  </q-item>
-                </template>
-              </q-tree>
-            </q-card-section>
-          </q-card>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <q-input
+              class="inputgreen"
+              v-model="planData.documentInfoEvidence"
+              label="ข้อมูลเอกสารหลักฐาน"
+              outlined
+              dense
+              type="textarea"
+            ></q-input>
+          </div>
         </div>
-        <div class="col-6">
-          <q-card bordered class="col-12">
-            <div
-              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-            >
-              ยุทธศาสตร์ / แผน
-            </div>
-            <q-separator />
-
-            <q-card-section class="q-pa-sm">
-              <q-input
-                dense
-                outlined
-                v-model="filter"
-                label="ค้นหา"
-                class="inputgreen"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-tree
-                style="height: 350px; overflow: scroll"
-                dense
-                :nodes="nodeplan"
-                selected-color="primary"
-                node-key="id"
-                label-key="name"
-                :filter="filter"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-                v-model:expanded="expandedPlan"
-                v-model:selected="planData.strategyId"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    clickable
-                    @click.stop="updateSelected(prop.node)"
-                    :active="planData.strategyId == prop.node.id"
-                    active-class="my-list-link text-primary text-weight-medium"
-                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                  >
-                    <div>
-                      <div class="text-weight-medium">
-                        {{ prop.node.name }}
-                      </div>
-                    </div>
-                  </q-item>
-                </template>
-              </q-tree>
-            </q-card-section>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-input
-            class="inputgreen"
-            v-model="planData.documentInfoEvidence"
-            label="ข้อมูลเอกสารหลักฐาน"
-            outlined
-            dense
-            type="textarea"
-          ></q-input>
-        </div>
-      </div>
+      </q-card-section>
       <q-separator color="grey-4" />
-    </div>
-    <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>
-  </q-form>
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-form>
+  </q-card>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue b/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue
index 86d8a93b9..d2a865332 100644
--- a/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue
@@ -337,12 +337,10 @@ onMounted(async () => {
           />
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
-            unelevated
-            dense
             class="q-px-md items-center"
             color="public"
             label="บันทึก"
diff --git a/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue b/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue
index bfe5bba59..6eb54fd3a 100644
--- a/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue
@@ -571,12 +571,10 @@ onMounted(async () => {
           </div>
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
-            unelevated
-            dense
             class="q-px-md items-center"
             color="public"
             label="บันทึก"
diff --git a/src/modules/01_metadataNew/components/competency/04ListCriteria.vue b/src/modules/01_metadataNew/components/competency/04ListCriteria.vue
index b4cca12a9..0ec81be57 100644
--- a/src/modules/01_metadataNew/components/competency/04ListCriteria.vue
+++ b/src/modules/01_metadataNew/components/competency/04ListCriteria.vue
@@ -67,83 +67,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-card flat bordered>
+  <q-card>
     <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <q-card-section class="bg-grey-3 q-pa-sm">
-        <div class="row text-dark text-body2 text-weight-medium">
-          <div class="text-center col-8">เกณฑ์การประเมิน</div>
-          <div class="text-center col-4">ระดับคะแนน</div>
-        </div>
-      </q-card-section>
-      <q-card-section class="q-pa-none">
-        <div v-for="(field, index) in dataLevel" :key="field.id">
-          <div class="row q-pa-sm">
-            <div class="col-8 text-left">
-              <q-field
-                class="q_field_p_none"
-                ref="fieldRef"
-                v-model="field.description"
-                label-slot
-                borderless
-                :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
-                hide-bottom-space
-              >
-                <template #control>
-                  <q-editor
-                    class="full-width"
+      <q-card-section>
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-3">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-8">เกณฑ์การประเมิน</div>
+              <div class="text-center col-4">ระดับคะแนน</div>
+            </div>
+          </q-card-section>
+          <q-card-section class="q-pa-none">
+            <div v-for="(field, index) in dataLevel" :key="field.id">
+              <div class="row q-pa-sm">
+                <div class="col-8 text-left">
+                  <q-field
+                    class="q_field_p_none"
+                    ref="fieldRef"
                     v-model="field.description"
-                    :dense="$q.screen.lt.md"
-                    min-height="5rem"
-                    :toolbar="[
-                      [
-                        'bold',
-                        'italic',
-                        'strike',
-                        'underline',
-                        'subscript',
-                        'superscript',
-                      ],
+                    label-slot
+                    borderless
+                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                    hide-bottom-space
+                  >
+                    <template #control>
+                      <q-editor
+                        class="full-width"
+                        v-model="field.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',
-                    }"
-                  />
-                </template>
-              </q-field>
-              <!-- <q-input
-              v-model="formScore[field]"
-              dense
-              outlined
-              class="inputgreen"
-              label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
-              hide-bottom-space
-            /> -->
+                          ['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',
+                        }"
+                      />
+                    </template>
+                  </q-field>
+                  <!-- <q-input
+                  v-model="formScore[field]"
+                  dense
+                  outlined
+                  class="inputgreen"
+                  label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
+                  hide-bottom-space
+                /> -->
+                </div>
+                <div
+                  class="col-4 text-center text-body1 text-weight-bold self-center"
+                >
+                  {{ field.level }}
+                </div>
+              </div>
+              <div
+                class="col-12"
+                v-if="index !== Object.keys(fieldLabels).length - 1"
+              >
+                <q-separator />
+              </div>
             </div>
-            <div
-              class="col-4 text-center text-body1 text-weight-bold self-center"
-            >
-              {{ field.level }}
-            </div>
-          </div>
-          <div
-            class="col-12"
-            v-if="index !== Object.keys(fieldLabels).length - 1"
-          >
-            <q-separator />
-          </div>
-        </div>
+          </q-card-section>
+        </q-card>
       </q-card-section>
-      <q-card-actions align="right" class="bg-white text-teal">
+
+      <q-separator />
+
+      <q-card-actions align="right">
         <q-btn label="บันทึก" color="secondary" type="submit"
           ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
         >
diff --git a/src/modules/01_metadataNew/components/competency/AddPage.vue b/src/modules/01_metadataNew/components/competency/AddPage.vue
index 08cf1c1a2..047877f7d 100644
--- a/src/modules/01_metadataNew/components/competency/AddPage.vue
+++ b/src/modules/01_metadataNew/components/competency/AddPage.vue
@@ -3,11 +3,7 @@ import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 
 import Main from "@/modules/01_metadataNew/components/competency/Forms/Main.vue";
-// import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
-// import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
-// import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
-// import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
-// import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
+
 import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
 
 import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
@@ -88,11 +84,9 @@ function onSubmit() {
     />
     <span class="toptitle text-dark">เพิ่ม/แก้ไขสมรรถนะ</span>
   </div>
-  <q-card flat bordered>
-    <!-- @submit.prevent @validation-success="onSubmit" -->
-    <!-- <q-form greedy> -->
+  <q-card>
     <q-card-section>
-      <div class="row q-col-gutter-sm">
+      <div class="row">
         <div class="col-12">
           <q-select
             v-model="store.competencyTypeVal"
@@ -106,16 +100,11 @@ function onSubmit() {
             map-options
             :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
             hide-bottom-space
+            class="inputgreen"
           />
         </div>
-
-        <Main />
-        <!-- <FormMain v-if="store.competencyType === 'ID1'" />
-        <FormGroup v-else-if="store.competencyType === 'ID2'" />
-        <FormExecutive v-else-if="store.competencyType === 'ID3'" />
-        <FormExecutivePosition v-else-if="store.competencyType === 'ID4'" />
-        <FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" /> -->
       </div>
     </q-card-section>
+    <Main />
   </q-card>
 </template>
diff --git a/src/modules/01_metadataNew/components/competency/Forms/Main.vue b/src/modules/01_metadataNew/components/competency/Forms/Main.vue
index 1b79574ad..b919bc383 100644
--- a/src/modules/01_metadataNew/components/competency/Forms/Main.vue
+++ b/src/modules/01_metadataNew/components/competency/Forms/Main.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
@@ -107,19 +106,21 @@ onMounted(() => {
 
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
-    <div class="row">
-      <div class="col-12">
-        <q-input
-          v-model="formData.competencyName"
-          dense
-          outlined
-          label="ชื่อสมรรถนะ"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
-          hide-bottom-space
-        />
-      </div>
-      <q-card-section class="col-12 q-px-none">
-        <div>
+    <q-card-section class="q-pt-none">
+      <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
+            class="inputgreen"
+          />
+        </div>
+
+        <div class="col-12">
           <q-field
             class="q_field_p_none"
             ref="fieldRef"
@@ -162,133 +163,129 @@ onMounted(() => {
             </template>
           </q-field>
         </div>
-      </q-card-section>
-      <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="onClickAddLevels"
-                    >
-                      <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 align-center q-pr-lg">
-                <q-input
-                  :readonly="
-                    store.competencyTypeVal === 'HEAD' ||
-                    store.competencyTypeVal === 'GROUP'
-                  "
-                  v-model="formData.levels[index].level"
-                  dense
-                  outlined
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับสมรรถนะ'}`,]"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-9">
-                <div class="row q-col-gutter-md">
-                  <div class="col-11">
-                    <q-field
-                      class="q_field_p_none"
-                      ref="fieldRef"
-                      v-model="formData.levels[index].description"
-                      label-slot
-                      borderless
-                      :rules="[
-                        (val) =>
-                          !!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
-                      ]"
-                      hide-bottom-space
-                    >
-                      <template #control>
-                        <q-editor
-                          class="full-width"
-                          v-model="formData.levels[index].description"
-                          :dense="$q.screen.lt.md"
-                          min-height="5rem"
-                          :toolbar="[
-                            [
-                              'bold',
-                              'italic',
-                              'strike',
-                              'underline',
-                              'subscript',
-                              'superscript',
-                            ],
 
-                            ['unordered', 'ordered'],
-                          ]"
-                        />
-                      </template>
-                    </q-field>
+        <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="onClickAddLevels"
+                      >
+                        <q-tooltip>เพิ่ม</q-tooltip></q-btn
+                      >
+                    </div>
+                    <div class="col-11 text-center">
+                      <span>ระดับสมรรถนะ</span>
+                    </div>
                   </div>
-                  <div class="col-1 text-center">
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      color="red"
-                      icon="delete"
-                      @click="onDeleteLevels(index)"
-                      v-if="
-                        (store.competencyTypeVal === 'HEAD' && index > 4) ||
-                        (store.competencyTypeVal === 'GROUP' && index > 4) ||
-                        ((store.competencyTypeVal === 'EXECUTIVE' ||
-                          store.competencyTypeVal === 'DIRECTOR' ||
-                          store.competencyTypeVal === 'INSPECTOR') &&
-                          index > 0)
-                      "
-                    >
-                      <q-tooltip>ลบ</q-tooltip></q-btn
-                    >
+                </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 align-center q-pr-lg">
+                  <q-input
+                    :readonly="
+                      store.competencyTypeVal === 'HEAD' ||
+                      store.competencyTypeVal === 'GROUP'
+                    "
+                    v-model="formData.levels[index].level"
+                    dense
+                    outlined
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกระดับสมรรถนะ'}`,]"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-9">
+                  <div class="row q-col-gutter-md">
+                    <div class="col-11">
+                      <q-field
+                        class="q_field_p_none"
+                        ref="fieldRef"
+                        v-model="formData.levels[index].description"
+                        label-slot
+                        borderless
+                        :rules="[
+                          (val) =>
+                            !!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
+                        ]"
+                        hide-bottom-space
+                      >
+                        <template #control>
+                          <q-editor
+                            class="full-width"
+                            v-model="formData.levels[index].description"
+                            :dense="$q.screen.lt.md"
+                            min-height="5rem"
+                            :toolbar="[
+                              [
+                                'bold',
+                                'italic',
+                                'strike',
+                                'underline',
+                                'subscript',
+                                'superscript',
+                              ],
+
+                              ['unordered', 'ordered'],
+                            ]"
+                          />
+                        </template>
+                      </q-field>
+                    </div>
+                    <div class="col-1 text-center">
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click="onDeleteLevels(index)"
+                        v-if="
+                          (store.competencyTypeVal === 'HEAD' && index > 4) ||
+                          (store.competencyTypeVal === 'GROUP' && index > 4) ||
+                          ((store.competencyTypeVal === 'EXECUTIVE' ||
+                            store.competencyTypeVal === 'DIRECTOR' ||
+                            store.competencyTypeVal === 'INSPECTOR') &&
+                            index > 0)
+                        "
+                      >
+                        <q-tooltip>ลบ</q-tooltip></q-btn
+                      >
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </q-card-section>
-        </q-card>
+            </q-card-section>
+          </q-card>
+        </div>
       </div>
-      <div class="col-12 q-my-sm"><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>
+    </q-card-section>
+
+    <div class="col-12"><q-separator /></div>
+
+    <q-card-actions align="right">
+      <q-btn label="บันทึก" color="public" class="q-px-md" type="submit">
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-actions>
   </q-form>
 </template>
 
diff --git a/src/modules/01_metadataNew/interface/request/Main.ts b/src/modules/01_metadataNew/interface/request/Main.ts
index 613163525..0dec0732c 100644
--- a/src/modules/01_metadataNew/interface/request/Main.ts
+++ b/src/modules/01_metadataNew/interface/request/Main.ts
@@ -28,7 +28,7 @@ interface FormDataRole {
   includingName: string;
   target: string;
   unit: string;
-  weight: string;
+  weight: string | null;
   meaning: string;
   formula: string;
   documentInfoEvidence: string;
diff --git a/src/modules/01_metadataNew/views/Strategic.vue b/src/modules/01_metadataNew/views/Strategic.vue
index 80a52d532..a93591f84 100644
--- a/src/modules/01_metadataNew/views/Strategic.vue
+++ b/src/modules/01_metadataNew/views/Strategic.vue
@@ -328,8 +328,8 @@ onMounted(() => {
         />
         <q-separator />
 
-        <q-card-section class="q-pt-none">
-          <div class="row q-pa-md">
+        <q-card-section>
+          <div class="row">
             <div class="col">
               <q-input
                 dense
@@ -349,16 +349,8 @@ onMounted(() => {
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>