Merge branch 'nice_dev' into develop

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/15_development/components/scholarship/DetailView.vue

@@ -85,6 +85,7 @@ const dataGuarantor = reactive({
 });
 
 const formBody = reactive<FormsSholarship>({
+  profileId: "",
   rank: "", //ยศ
   prefix: "", //คำนำหน้าชื่อ
   firstName: "", //ชื่อ
@@ -346,6 +347,9 @@ function onSelectGov(isGov: boolean) {
 
 function upDate(data: DataPerson) {
   if (isSelectGov.value) {
+    console.log(data);
+    formBody.profileId = data.id;
+    formBody.rank = data.rank;
     formBody.prefix = data.prefix;
     formBody.firstName = data.firstName;
     formBody.lastName = data.lastName;
@@ -364,6 +368,7 @@ function upDate(data: DataPerson) {
     dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
     isGov.value = true;
   } else {
+    formBody.guarantorRank = data.rank;
     formBody.guarantorPrefix = data.prefix;
     formBody.guarantorFirstName = data.firstName;
     formBody.guarantorLastName = data.lastName;

src/modules/15_development/interface/request/Scholarship.ts

@@ -1,4 +1,5 @@
 interface FormsSholarship {
+  profileId: string;
   rank: string; //ยศ
   prefix: string; //คำนำหน้าชื่อ
   firstName: string; //ชื่อ