แก้ เพิ่มตัวชี้วัดตามตำแหน่ง

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted,watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -15,7 +15,16 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
-const id = ref<string>(route.params.id ? route.params.id.toLocaleString():'');
+const filter = ref<string>("");
+const node = ref<any>([]);
+const expanded = ref<any>([]);
+const ticked = ref<any>([]);
+const orgName = ref<string>("");
+const nodeId = ref<string>("");
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
 const {
   dialogConfirm,
   showLoader,
@@ -40,6 +49,10 @@ const form = reactive<FormDataRole>({
   weight: "", //น้ำหนัก
   meaning: "", //นิยามหรือความหมาย
   formula: "", //สูตรคำนวณ
+
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
 });
 
 const fieldLabels = {
@@ -120,7 +133,7 @@ function onSubmit() {
   // const url = id.value ? config.API.???:config.API.???
 }
 
-function getDetail(){
+function getDetail() {
   // showLoader()
   // http
   // .get(config.API.???)
@@ -144,12 +157,58 @@ function getDetail(){
   // })
 }
 
+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((res) => {
+      const data = res.data.result;
+      node.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateTicked(val: any) {
+  console.log(expanded.value);
+
+  ticked.value = [];
+  ticked.value.push(val[val.length - 1]);
+}
+
+function updateSelected(data: any) {
+  console.log(data)
+  nodeId.value = data.orgTreeId;
+  orgName.value = data.orgTreeName;
+  form.node = data.orgLevel;
+  form.nodeId = data.orgTreeId;
+  form.orgRevisionId = data.orgRevisionId;
+}
 
 onMounted(() => {
+  fetchActive();
   getOptions();
-  if(id.value !== ''){
-    console.log('edit')
-    getDetail()
+  if (id.value !== "") {
+    console.log("edit");
+    getDetail();
   }
 });
 </script>
@@ -252,20 +311,6 @@ onMounted(() => {
               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="รหัสตัวชี้วัด"
@@ -278,7 +323,7 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-6">
+          <div class="col-4">
             <q-input
               label="ชื่อตัวชี้วัด"
               v-model="form.includingName"
@@ -326,9 +371,77 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-12">
+          <div class="col-8" style="height: 340px">
             <q-card flat bordered>
-              <q-card-section class="bg-grey-4 q-pa-sm">
+              <q-card-section class="bg-grey-3 q-pa-sm">
+                <div class="text-dark text-body2 text-weight-medium">
+                  หน่วยงาน/ส่วนราชการ
+                </div>
+              </q-card-section>
+              <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-scroll-area visible style="height: 223px; margin-top: 5px">
+                  <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="form.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-scroll-area>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-4" style="height: 340px">
+            <q-card flat bordered>
+              <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-4">ระดับคะแนน</div>
                   <div class="col-8">อ้างอิง</div>
@@ -435,7 +548,7 @@ onMounted(() => {
           </div>
         </div>
       </q-card-section>
-      <q-separator/>
+      <q-separator />
       <q-card-actions align="right">
         <q-btn color="public" label="บันทึก" type="submit" unelevated>
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
@@ -450,4 +563,12 @@ onMounted(() => {
   />
 </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/14_KPI/interface/request/Main.ts

@@ -35,6 +35,9 @@ interface FormDataRole {
   weight: string;
   meaning: string;
   formula: string;
+  node: number | null;
+  nodeId: string | null;
+  orgRevisionId: string | null;
 }
 
 export type { FormQueryRound, FormRound, FormCompetency, FormDataRole };