Merge commit '76d4f91da6' into oat_dev

src/modules/14_KPI/components/competency/04ListCriteria.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>หลักเกณฑ์</div>
+</template>

src/modules/14_KPI/components/competency/05ListDetail.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>การประเมิน</div>
+</template>

src/modules/14_KPI/components/indicatorByRole/DetailView.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { FormDataRole } from "@/modules/14_KPI/interface/request/Main";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
 const $q = useQuasar();
-const router = useRouter();
 const route = useRoute();
+const router = useRouter();
+
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString():'');
 const {
   dialogConfirm,
   showLoader,
@@ -21,7 +27,131 @@ const {
 } = useCounterMixin();
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 
-onMounted(() => {});
+const modalDialogSelect = ref<boolean>(false);
+const form = reactive<FormDataRole>({
+  position: "", //ตำแหน่งในสายงาน
+  year: new Date().getFullYear(), //ปีงบประมาณ
+  round: "", //รอบการประเมิน
+  org: "", //หน่วยงาน/ส่วนราชการ
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: "", //หน่วยนับ
+  weight: "", //น้ำหนัก
+  meaning: "", //นิยามหรือความหมาย
+  formula: "", //สูตรคำนวณ
+});
+
+const fieldLabels = {
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+};
+
+const formScore = reactive<any>({
+  score5: "",
+  score4: "",
+  score3: "",
+  score2: "",
+  score1: "",
+});
+
+const positionOp = ref<DataOption[]>([]);
+const positionMainOp = ref<DataOption[]>([]);
+
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  {
+    id: "OCT",
+    name: "รอบตุลาคม",
+  },
+]);
+
+/**
+ * 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
+    );
+  });
+}
+
+/** ดึงข้อมูลตำแหน่ง */
+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;
+  });
+}
+
+/** เปิด Dialog หน่วยงาน */
+function selectAgency() {
+  modalDialogSelect.value = true;
+}
+
+function updateAgency(name: string) {
+  form.org = name;
+}
+
+/** บันทึกข้อมูล */
+function onSubmit() {
+  // const url = id.value ? config.API.???:config.API.???
+}
+
+function getDetail(){
+  // showLoader()
+  // http
+  // .get(config.API.???)
+  // .then((res)=>{
+  //   const data = res.data.result
+  //     form.position = data.position
+  //     form.year = data.year
+  //     form.round = data.round
+  //     form.org = data.org
+  //     form.including = data.including
+  //     form.includingName = data.includingName
+  //     form.target = data.target
+  //     form.unit = data.unit
+  //     form.weight = data.weight
+  //     form.meaning = data.meaning
+  //     form.formula = data.formula
+  // }).catch((e)=>{
+  //   messageError($q,e)
+  // }).finally(()=>{
+  //   hideLoader()
+  // })
+}
+
+
+onMounted(() => {
+  getOptions();
+  if(id.value !== ''){
+    console.log('edit')
+    getDetail()
+  }
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -36,6 +166,288 @@ onMounted(() => {});
     />
     {{ `${title}ตัวชี้วัดตามตำแหน่ง` }}
   </div>
+  <q-card flat>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-8">
+            <q-select
+              dense
+              v-model="form.position"
+              label="ตำแหน่งในสายงาน"
+              outlined
+              emit-value
+              map-options
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
+              hide-bottom-space
+              option-label="name"
+              option-value="id"
+              class="inputgreen"
+              :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-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="form.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
+                  class="inputgreen"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
+                  hide-bottom-space
+                  outlined
+                  :model-value="
+                    form.year === 0 ? null : Number(form.year) + 543
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              v-model="form.round"
+              :options="roundOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              input-class="text-red"
+              label="รอบการประเมิน"
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการประเมิน'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              dense
+              outlined
+              class="inputgreen"
+              v-model="form.org"
+              inputgreen
+              label="หน่วยงาน/ส่วนราชการ"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกหน่วยงาน/ส่วนราชการ'}`,]"
+              hide-bottom-space
+              @click="selectAgency"
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="รหัสตัวชี้วัด"
+              v-model="form.including"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-6">
+            <q-input
+              label="ชื่อตัวชี้วัด"
+              v-model="form.includingName"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="ค่าเป้าหมาย"
+              v-model="form.target"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="หน่วยนับ"
+              v-model="form.unit"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              label="น้ำหนัก"
+              v-model="form.weight"
+              outlined
+              dense
+              class="inputgreen"
+              lazy-rules
+              :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`,]"
+              hide-bottom-space
+            />
+          </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-field
+                    class="q_field_p_none"
+                    ref="fieldRef"
+                    v-model="formScore[field]"
+                    label-slot
+                    borderless
+                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                    hide-bottom-space
+                  >
+                    <template #control>
+                      <q-editor
+                        class="full-width"
+                        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',
+                        }"
+                      />
+                    </template>
+                  </q-field> -->
+                      <q-input
+                        v-model="formScore[field]"
+                        dense
+                        outlined
+                        class="inputgreen"
+                        label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="col-12"
+                    v-if="index !== Object.keys(fieldLabels).length - 1"
+                  >
+                    <q-separator />
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="form.meaning"
+              label="นิยามหรือความหมาย"
+              dense
+              outlined
+              lazy-rules
+              class="inputgreen"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`,]"
+              hide-bottom-space
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              v-model="form.formula"
+              label="สูตรคำนวณ"
+              dense
+              outlined
+              lazy-rules
+              class="inputgreen"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`,]"
+              hide-bottom-space
+              type="textarea"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator/>
+      <q-card-actions align="right">
+        <q-btn color="public" label="บันทึก" type="submit" unelevated>
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-form>
+  </q-card>
+
+  <DialogSelectAgency
+    v-model:modal="modalDialogSelect"
+    @update:updateAgency="updateAgency"
+  />
 </template>
 
 <style scoped></style>

src/modules/14_KPI/interface/request/Main.ts

@@ -23,4 +23,18 @@ interface FormCompetency {
   evaluation: string;
 }
 
-export type { FormQueryRound, FormRound, FormCompetency };
+interface FormDataRole {
+  position: string;
+  year: number;
+  round: string;
+  org: string;
+  including: string;
+  includingName: string;
+  target: string;
+  unit: string;
+  weight: string;
+  meaning: string;
+  formula: string;
+}
+
+export type { FormQueryRound, FormRound, FormCompetency, FormDataRole };

src/modules/14_KPI/views/competency.vue

@@ -3,7 +3,8 @@ import { ref, onMounted } from "vue";
 import ListCompetency from "@/modules/14_KPI/components/competency/01ListCompetency.vue";
 import ListLinkPosition from "@/modules/14_KPI/components/competency/02ListLinkPosition.vue";
 import ListLinkGroup from "@/modules/14_KPI/components/competency/03ListLinkGroup.vue";
-
+import ListCriteria from "@/modules/14_KPI/components/competency/04ListCriteria.vue";
+import ListDetail from "@/modules/14_KPI/components/competency/05ListDetail.vue";
 
 const currentTab = ref<string>("list_competency");
 const tabs = ref<Array<any>>([]);
@@ -13,15 +14,15 @@ onMounted(() => {
     { label: "รายการสมรรถนะ", value: "list_competency" },
     { label: "กลุ่มงาน", value: "list_linkPosition" },
     { label: "เชื่อมโยงกับกลุ่มงานและตำแหน่ง", value: "list_linkGroup" },
+    { label: "เกณฑ์การประเมิน", value: "list_criteria" },
+    { label: "การประเมินพฤติกรรมการปฏิบัติราชการ", value: "list_detail" },
   ];
   tabs.value = tab;
 });
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
+  <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>
-    สมรรถนะ
-  </div>
 
   <q-card flat bordered>
     <div class="text-subtitle1 text-grey-9">
@@ -56,6 +57,12 @@ onMounted(() => {
         <q-tab-panel name="list_linkGroup">
           <ListLinkGroup v-if="currentTab == 'list_linkGroup'" />
         </q-tab-panel>
+        <q-tab-panel name="list_criteria">
+          <ListCriteria v-if="currentTab == 'list_criteria'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_detail">
+          <ListDetail v-if="currentTab == 'list_detail'" />
+        </q-tab-panel>
       </q-tab-panels>
     </div>
   </q-card>

src/modules/15_development/components/BasicInfo.vue

@@ -30,21 +30,19 @@ const projectId = ref<string>(route.params.id.toLocaleString());
 
 const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
-  org: "",
   projectName: "",
   reason: "",
   objective: "",
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
 });
 
-const rows = ref<FormBasicinfo[]>([]);
+const orgName = ref<string>("");
-
+const node = ref<any>([]);
-const modalDialogSelect = ref<boolean>(false);
+const nodeId = ref<string>("");
-function selectAgency() {
+const filter = ref<string>("");
-  modalDialogSelect.value = true;
+const expanded = ref<any>([]);
-}
-function updateAgency(name: string) {
-  formData.org = name;
-}
 
 async function fetchData(id: string) {
   showLoader();
@@ -56,6 +54,17 @@ async function fetchData(id: string) {
       formData.reason = data.reason;
       formData.projectName = data.projectName;
       formData.objective = data.objective;
+      formData.nodeId = data.nodeId;
+
+      const test = await searchAndReplace(node.value, formData?.nodeId);
+      console.log(test);
+
+      const parts = test.orgName.split("/");
+      for (let i = 0; i < parts.length; i++) {
+        const arrangedParts = parts[i];
+        expanded.value.push(arrangedParts);
+      }
+      updateSelected(test);
     })
     .catch((err) => {
       messageError($q, err);
@@ -67,12 +76,7 @@ async function fetchData(id: string) {
 
 async function editData(id: string) {
   await http
-    .put(config.API.developmentMainTab("tab1", id), {
+    .put(config.API.developmentMainTab("tab1", id), formData)
-      year: formData.year,
-      reason: formData.reason,
-      projectName: formData.projectName,
-      objective: formData.objective,
-    })
     .then(() => {
       fetchData(id);
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -93,106 +97,229 @@ function onSubmit() {
   });
 }
 
+function fetchActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchTree(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+async function fetchTree(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then(async (res) => {
+      const data = res.data.result;
+      node.value = data;
+      fetchData(projectId.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateSelected(data: any) {
+  console.log(expanded.value);
+
+  nodeId.value = data.orgTreeId;
+  orgName.value = data.orgTreeName;
+  formData.node = data.orgLevel;
+  formData.nodeId = data.orgTreeId;
+  formData.orgRevisionId = data.orgRevisionId;
+}
+
+function searchAndReplace(orgTreeData: any, treeId: string | null) {
+  for (let orgTree of orgTreeData) {
+    if (orgTree.orgTreeId === treeId) {
+      return orgTree;
+    }
+    let foundOrg: any = searchAndReplace(orgTree.children, treeId);
+    if (foundOrg) {
+      return foundOrg;
+    }
+  }
+  return null;
+}
+
 onMounted(async () => {
-  fetchData(projectId.value);
+  fetchActive();
+  // setTimeout(() => {
+  //   fetchData(projectId.value);
+  // }, 500);
 });
 </script>
 
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <div class="row col-12 q-col-gutter-md q-pa-md">
+    <q-card bordered class="col-12 row caedNone">
-      <div class="col-xs-6 col-sm-2 col-md-2">
+      <div class="col-xs-12 col-sm-3 row">
-        <datepicker
+        <div class="col-12 row no-wrap bg-grey-1">
-          menu-class-name="modalfix"
+          <div class="col-12 q-py-sm q-px-sm">
-          v-model="formData.year"
+            <q-card-section
-          :locale="'th'"
+              class="q-pt-none q-pa-sm scroll"
-          autoApply
+              style="max-height: 65vh"
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              class="inputgreen"
-              :model-value="Number(formData.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
             >
-              <template v-slot:prepend>
+              <q-input dense outlined v-model="filter" label="ค้นหา">
-                <q-icon
+                <template v-slot:append>
-                  name="event"
+                  <q-icon
-                  class="cursor-pointer"
+                    v-if="filter !== ''"
-                  style="color: var(--q-primary)"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                  <q-icon v-else name="search" color="grey-5" />
+                </template>
+              </q-input>
+              <q-tree
+                dense
+                :nodes="node"
+                node-key="orgTreeName"
+                label-key="orgTreeName"
+                v-model:expanded="expanded"
+                :filter="filter"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+              >
+                <template v-slot:default-header="prop">
+                  <q-item
+                    clickable
+                    @click.stop="updateSelected(prop.node)"
+                    :active="formData.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>
+          </div>
+
+          <div class="col-12 row">
+            <q-separator :vertical="!$q.screen.lt.md" />
+          </div>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-9 q-pa-md row">
+        <div class="col-12 row">
+          <div class="col-12">
+            <div class="row col-12 q-col-gutter-md q-pa-md">
+              <div class="col-xs-6 col-sm-2 col-md-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.year"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
                 >
-                </q-icon>
+                  <template #year="{ year }">{{ year + 543 }}</template>
-              </template>
+                  <template #year-overlay-value="{ value }">{{
-            </q-input>
+                    parseInt(value + 543)
-          </template>
+                  }}</template>
-        </datepicker>
+                  <template #trigger>
-      </div>
+                    <q-input
-      <div class="col-xs-10 col-sm-10 col-md-10">
+                      dense
-        <q-input
+                      lazy-rules
-          dense
+                      outlined
-          outlined
+                      class="inputgreen"
-          class="inputgreen"
+                      :model-value="Number(formData.year) + 543"
-          v-model="formData.org"
+                      :label="`${'ปีงบประมาณ'}`"
-          inputgreen
+                    >
-          label="ชื่อหน่วยงานที่รับผิดชอบ"
+                      <template v-slot:prepend>
-          hide-bottom-space
+                        <q-icon
-          lazy-rules
+                          name="event"
-          @click="selectAgency"
+                          class="cursor-pointer"
-        />
+                          style="color: var(--q-primary)"
-        <!-- :rules="[
+                        >
-          (val:string) =>
+                        </q-icon>
-            !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
+                      </template>
-        ]" -->
+                    </q-input>
-      </div>
+                  </template>
-      <div class="col-xs-12 col-sm-12 col-md-12">
+                </datepicker>
-        <q-input
+              </div>
-          outlined
+              <div class="col-xs-10 col-sm-10 col-md-10">
-          class="inputgreen"
+                <q-input
-          dense
+                  dense
-          v-model="formData.projectName"
+                  outlined
-          label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+                  class="inputgreen"
-          rows="6"
+                  v-model="orgName"
-          type="textarea"
+                  inputgreen
-          hide-bottom-space
+                  label="ชื่อหน่วยงานที่รับผิดชอบ"
-          :rules="[
+                  hide-bottom-space
+                  lazy-rules
+                  readonly
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  v-model="formData.projectName"
+                  label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+                  rows="6"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
           ]"
-        />
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  v-model="formData.reason"
+                  label="หลักการและเหตุผล"
+                  rows="6"
+                  hide-bottom-space
+                  type="textarea"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  v-model="formData.objective"
+                  label="วัตถุประสงค์"
+                  rows="6"
+                  hide-bottom-space
+                  type="textarea"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
+    </q-card>
-        <q-input
-          outlined
-          class="inputgreen"
-          dense
-          v-model="formData.reason"
-          label="หลักการและเหตุผล"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          class="inputgreen"
-          dense
-          v-model="formData.objective"
-          label="วัตถุประสงค์"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-        />
-      </div>
-    </div>
 
     <q-separator />
     <div class="text-right q-pa-sm">
@@ -210,10 +337,18 @@ onMounted(async () => {
     </div>
   </q-form>
 
-  <DialogSelectAgency
+  <!-- <DialogSelectAgency
     v-model:modal="modalDialogSelect"
     @update:updateAgency="updateAgency"
-  />
+  /> -->
 </template>
 
-<style scoped></style>
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/15_development/components/ProjectDetail.vue

@@ -200,7 +200,7 @@ onMounted(() => {
       <div
         class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
       >
-        ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์ / แผน
+        ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน
       </div>
       <q-separator />
 
@@ -211,7 +211,7 @@ onMounted(() => {
               <div
                 class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
               >
-                ยุทธศาสตร์ / แผน
+                ยุทธศาสตร์/แผน
               </div>
               <q-separator />
 
@@ -262,7 +262,7 @@ onMounted(() => {
               <div
                 class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
               >
-                ยุทธศาสตร์ / แผน
+                ยุทธศาสตร์/แผน
               </div>
               <q-separator />
 

src/modules/15_development/components/history/AddPage.vue

@@ -180,6 +180,7 @@ function getDataEdit() {
       formMain.type = data.posTypeName ? data.posTypeName : null;
       formMain.level = data.posLevelName ? data.posLevelName : null;
       formMain.positionSide = data.posExecutive ? data.posExecutive : null;
+      formMain.oc = data.org ? data.org : null;
 
       formMainProject.id = data.developmentId;
       formMainProject.project = data.projectName;
@@ -210,6 +211,7 @@ onMounted(() => {
   }
 });
 </script>
+
 <template>
   <div class="toptitle text-dark">
     <q-btn

src/modules/15_development/components/historyEmployee/AddPage.vue

@@ -168,6 +168,7 @@ function getDataEdit() {
       formMain.type = data.posTypeName ? data.posTypeName : null;
       formMain.level = data.posLevelName ? data.posLevelName : null;
       formMain.positionSide = data.positionSide ? data.positionSide : null;
+      formMain.oc = data.org ? data.org : null;
 
       formMainProject.id = data.developmentId;
       formMainProject.project = data.projectName;
@@ -198,6 +199,7 @@ onMounted(() => {
   }
 });
 </script>
+
 <template>
   <div class="toptitle text-dark">
     <q-btn

src/modules/15_development/components/scholarship/DetailView.vue

@@ -48,15 +48,19 @@ const scholarshipTypeOp = ref<DataOption[]>([
   { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
   {
     id: "NOABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
   },
   {
     id: "ABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
   },
   {
     id: "EXECUTIVE",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+  {
+    id: "RESEARCH",
+    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
   },
 ]);
 const fundTypeOp = ref<DataOption[]>([
@@ -418,7 +422,7 @@ async function checkFileBackReceived(id: string) {
     });
 }
 
-function downloadFileBackReceived() {
+function downloadFileBackReceived(id: string) {
   showLoader();
   http
     .get(
@@ -465,13 +469,13 @@ onMounted(() => {
     </div>
     <q-space />
     <q-btn
-      v-if="fileBackReceived != ''"
+      v-if="scholarshipId != null && fileBackReceived != ''"
       flat
       round
       dense
       icon="download"
       color="blue"
-      @click="downloadFileBackReceived()"
+      @click="downloadFileBackReceived(scholarshipId)"
     >
       <q-tooltip>ดาวน์โหลด</q-tooltip>
     </q-btn>
@@ -557,7 +561,55 @@ onMounted(() => {
           </div>
         </q-card>
       </div>
+
       <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
+        <div class="col-9">
+          <q-select
+            dense
+            outlined
+            hide-bottom-space
+            lazy-rules
+            v-model="formBody.scholarshipType"
+            :options="scholarshipTypeOp"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            class="inputgreen"
+            label="เลือกประเภททุน"
+            :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
+          />
+        </div>
+        <div
+          class="col-3"
+          v-if="
+            formBody.scholarshipType !== '' &&
+            formBody.scholarshipType !== 'EXECUTIVE'
+          "
+        >
+          <q-select
+            dense
+            outlined
+            hide-bottom-space
+            lazy-rules
+            class="inputgreen"
+            v-model="formBody.fundType"
+            :options="fundTypeOp"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            label="ประเภททุน"
+            :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
+          />
+        </div>
+
         <div class="col-12">
           <q-radio
             v-model="formBody.planType"
@@ -667,11 +719,11 @@ onMounted(() => {
             outlined
             class="inputgreen"
             v-model="formBody.bookNo"
-            label="เลขที่หนังสิออนุมัติ"
+            label="เลขที่หนังสืออนุมัติ"
             hide-bottom-space
             :rules="[
               (val: string) =>
-                !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
+                !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
             ]"
           />
         </div>
@@ -779,52 +831,7 @@ onMounted(() => {
             ]"
           />
         </div>
-        <div class="col-9">
+
-          <q-select
-            dense
-            outlined
-            hide-bottom-space
-            lazy-rules
-            v-model="formBody.scholarshipType"
-            :options="scholarshipTypeOp"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            class="inputgreen"
-            label="เลือกประเภททุน"
-            :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกประเภททุน'}`,
-            ]"
-          />
-        </div>
-        <div
-          class="col-3"
-          v-if="
-            formBody.scholarshipType !== '' &&
-            formBody.scholarshipType !== 'EXECUTIVE'
-          "
-        >
-          <q-select
-            dense
-            outlined
-            hide-bottom-space
-            lazy-rules
-            class="inputgreen"
-            v-model="formBody.fundType"
-            :options="fundTypeOp"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            label="ประเภททุน"
-            :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกประเภททุน'}`,
-            ]"
-          />
-        </div>
         <div
           class="col-12"
           v-if="

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

@@ -9,10 +9,12 @@ interface FormQueryListProject {
 
 interface FormBasicinfo {
   year: number;
-  org: string;
   projectName: string;
   reason: string;
   objective: string;
+  node: number | null;
+  nodeId: string | null;
+  orgRevisionId: string | null;
 }
 
 interface FormGroupTarget {

src/modules/15_development/views/History.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   DataOption,
   FormFilter,
 } from "@/modules/15_development/interface/index/Main";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
 
 import genReportXLSX from "@/plugins/genreportxlsx";
 

src/modules/15_development/views/Scholarship.vue

@@ -90,21 +90,22 @@ const visibleColumns = ref<string[]>([
 ]);
 
 const scholarshipTypeOp = ref<DataOption[]>([
-  {
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
-    id: "DOMESTICE",
-    name: "การศึกษาในประเทศ",
-  },
   {
     id: "NOABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
   },
   {
     id: "ABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
   },
   {
     id: "EXECUTIVE",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+    name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+  {
+    id: "RESEARCH",
+    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
   },
 ]);
 const itemDownload = ref<ItemsDownload[]>([
@@ -186,21 +187,18 @@ watch(
 
 function onDownload() {
   showLoader();
-    http
+  http
-      .get(config.API.developmentReportScholarship())
+    .get(config.API.developmentReportScholarship())
-      .then((res) => {
+    .then((res) => {
-        const dataList = res.data.result;
+      const dataList = res.data.result;
-        genReportXLSX(
+      genReportXLSX(dataList, "รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม");
-          dataList,
+    })
-          "รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม"
+    .catch((e) => {
-        );
+      messageError($q, e);
-      })
+    })
-      .catch((e) => {
+    .finally(() => {
-        messageError($q, e);
+      hideLoader();
-      })
+    });
-      .finally(() => {
-        hideLoader();
-      });
 }
 
 onMounted(() => {
@@ -217,7 +215,7 @@ onMounted(() => {
       <div class="row q-gutter-sm">
         <div>
           <datepicker
-          style="width: 150px;"
+            style="width: 150px"
             menu-class-name="modalfix"
             v-model="formQuery.year"
             :locale="'th'"
@@ -236,16 +234,16 @@ onMounted(() => {
                 lazy-rules
                 outlined
                 :model-value="
-                  formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
+                  formQuery.year === 0
+                    ? 'ทั้งหมด'
+                    : Number(formQuery.year) + 543
                 "
                 :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-if="formQuery.year" v-slot:append>
                   <q-icon
                     name="cancel"
-                    @click.stop.prevent="
+                    @click.stop.prevent="(formQuery.year = 0), fetchNewList()"
-                      (formQuery.year = 0), fetchNewList()
-                    "
                     class="cursor-pointer"
                   />
                 </template>
@@ -273,7 +271,7 @@ onMounted(() => {
             option-label="name"
             label="เลือกประเภททุน"
             @update:model-value="fetchNewList"
-            style="width: 350px;"
+            style="width: 350px"
           />
         </div>
       </div>