แก้ไขตัวชี้วัดตามแผน (U)

src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue

@@ -101,11 +101,15 @@ function updateSelected(data: any) {
   planData.strategyChildPlannedId = data.id;
   planData.strategyChildPlannedNode = data.level;
 }
+function updateSelectedAgency(data: any) {
+  planData.agencyId = data.orgTreeId;
+  planData.agencyLevel = data.orgLevel;
+}
 
-onMounted(() => {
+onMounted(async () => {
   //   fetchData();
-  fetchTree();
+  await fetchTree();
-  fetchOrganizationActive();
+  await fetchOrganizationActive();
   setTimeout(async () => {
     store.activeId && (await fetchDataTree(store.activeId));
   }, 200);
@@ -116,38 +120,6 @@ onMounted(() => {
   <q-form @submit.prevent greedy @validation-success="onSubmit()">
     <div>
       <div class="row q-col-gutter-md q-pa-md">
-        <div class="col-8">
-          <q-input
-            outlined
-            v-model="planData.tree"
-            label="หน่วยงาน/ส่วนราชการ"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'หน่วยงาน/ส่วนราชการ'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-2">
-          <q-select
-            dense
-            outlined
-            v-model="planData.round"
-            :options="roundOp"
-            label="รอบการประเมิน"
-            hide-bottom-space
-            option-label="name"
-            option-value="id"
-            map-options
-            emit-value
-            lazy-rules
-            class="inputgreen"
-            :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
-              ]"
-          />
-        </div>
         <div class="col-2">
           <datepicker
             menu-class-name="modalfix"
@@ -179,7 +151,27 @@ onMounted(() => {
             </template>
           </datepicker>
         </div>
-        <div class="col-3">
+        <div class="col-2">
+          <q-select
+            dense
+            outlined
+            v-model="planData.round"
+            :options="roundOp"
+            label="รอบการประเมิน"
+            hide-bottom-space
+            option-label="name"
+            option-value="id"
+            map-options
+            emit-value
+            lazy-rules
+            class="inputgreen"
+            :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
+              ]"
+          />
+        </div>
+        <div class="col-2">
           <q-input
             outlined
             v-model="planData.Data1"
@@ -257,11 +249,11 @@ onMounted(() => {
                 <q-input
                   outlined
                   v-model="planData.point5"
-                  label="ระดับคะแนน"
+                  label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
                   class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกระดับคะแนน'}`]"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
                   hide-bottom-space
                 />
               </div>
@@ -274,11 +266,11 @@ onMounted(() => {
                 <q-input
                   outlined
                   v-model="planData.point4"
-                  label="ระดับคะแนน"
+                  label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
                   class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกระดับคะแนน'}`]"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
                   hide-bottom-space
                 />
               </div>
@@ -291,11 +283,11 @@ onMounted(() => {
                 <q-input
                   outlined
                   v-model="planData.point3"
-                  label="ระดับคะแนน"
+                  label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
                   class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกระดับคะแนน'}`]"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
                   hide-bottom-space
                 />
               </div>
@@ -308,11 +300,11 @@ onMounted(() => {
                 <q-input
                   outlined
                   v-model="planData.point2"
-                  label="ระดับคะแนน"
+                  label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
                   class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกระดับคะแนน'}`]"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
                   hide-bottom-space
                 />
               </div>
@@ -325,11 +317,11 @@ onMounted(() => {
                 <q-input
                   outlined
                   v-model="planData.point1"
-                  label="ระดับคะแนน"
+                  label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
                   class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกระดับคะแนน'}`]"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
                   hide-bottom-space
                 />
               </div>
@@ -367,7 +359,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 />
 
@@ -384,11 +376,12 @@ onMounted(() => {
                 </template>
               </q-input>
               <q-tree
+                style="height: 350px; overflow: scroll"
                 dense
                 :nodes="nodeAgency"
                 node-key="orgTreeId"
                 label-key="labelName"
-                default-expand-all
+                selected-color="primary"
                 :filter="filterAgency"
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
@@ -397,8 +390,8 @@ onMounted(() => {
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
+                    @click.stop="updateSelectedAgency(prop.node)"
                     :active="nodeId == prop.node.orgTreeId"
-                    @click.stop="updateSelected(prop.node)"
                     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"
                   >
@@ -445,6 +438,7 @@ onMounted(() => {
                 </template>
               </q-input>
               <q-tree
+                style="height: 350px; overflow: scroll"
                 dense
                 :nodes="nodeplan"
                 selected-color="primary"

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

@@ -5,11 +5,13 @@ import { useRouter } from "vue-router";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-
+import http from "@/plugins/http";
+import config from "@/app.config";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
 
 /** หัวตาราง */
 const rows = ref<any>([]);
@@ -42,6 +44,10 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const node = ref<any>([]);
+const expanded = ref<any>([]);
+const filter = ref<string>("");
+const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>([
   "indicatorNo",
   "indicatorPass",
@@ -66,6 +72,11 @@ const formFilter = reactive({
   keyword: "",
 });
 
+const nodeData = reactive<any>({
+  node: null,
+  nodeId: null,
+});
+
 function fetchList() {
   showLoader();
   const data = [
@@ -101,8 +112,49 @@ function onClickDelete(id: number) {
   });
 }
 
+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 updateSelectedTreeMain(data: any) {
+  if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
+    nodeData.node = null;
+    nodeData.nodeId = null;
+  } else {
+    nodeData.node = data.orgLevel;
+    nodeData.nodeId = data.orgTreeId;
+  }
+}
+
 onMounted(() => {
   fetchList();
+  fetchActive();
 });
 </script>
 
@@ -111,22 +163,79 @@ onMounted(() => {
     รายการตัวชี้วัดตามแผนฯ
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar class="q-pa-none">
+    <div class="row q-col-gutter-sm">
-      <div class="row q-gutter-x-sm">
+      <q-card bordered class="col-4">
-        <div>
+        <q-card-section class="q-py-sm">
-          <q-select
+          <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-            dense
+        </q-card-section>
-            outlined
+        <div class="col-xs-12 col-sm-3 row">
-            v-model="formFilter.org"
+          <div class="col-12 row no-wrap">
-            :options="orgOp"
+            <div class="col-12 q-py-sm q-px-sm">
-            label="หน่วยงาน/ส่วนราชการ"
+              <div class="q-gutter-sm">
-            option-label="name"
+                <q-input dense outlined v-model="filterMain" label="ค้นหา">
-            option-value="id"
+                  <template v-slot:append>
-            emit-value
+                    <q-icon
-            map-options
+                      v-if="filterMain !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filterMain = ''"
                     />
-        </div>
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
                 <div>
+                  <q-tree
+                    class="tree-container"
+                    dense
+                    :nodes="node"
+                    node-key="orgTreeName"
+                    label-key="labelName"
+                    v-model:expanded="expanded"
+                    :filter="filterMain"
+                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                    no-nodes-label="ไม่มีข้อมูล"
+                    v-model:selected="nodeData.nodeId"
+                  >
+                    <template v-slot:default-header="prop">
+                      <q-item
+                        clickable
+                        @click.stop="updateSelectedTreeMain(prop.node)"
+                        :active="nodeData.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>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 row">
+              <q-separator :vertical="!$q.screen.lt.md" />
+            </div>
+          </div>
+        </div>
+      </q-card>
+      <div class="col-8">
+        <div class="row q-col-gutter-sm q-mb-sm">
+          <div class="col-3">
             <q-select
               dense
               outlined
@@ -139,8 +248,7 @@ onMounted(() => {
               map-options
             />
           </div>
-      </div>
+          <div class="col-2">
-      <q-toolbar-title>
             <q-btn
               flat
               round
@@ -151,11 +259,8 @@ onMounted(() => {
             >
               <q-tooltip>เพิ่ม</q-tooltip>
             </q-btn>
-      </q-toolbar-title>
+          </div>
-
+          <div class="col-4">
-      <q-space />
-      <div class="row q-gutter-sm">
-        <div>
             <q-input
               standout
               dense
@@ -176,7 +281,7 @@ onMounted(() => {
               </template>
             </q-input>
           </div>
-        <div>
+          <div class="col-3">
             <q-select
               v-model="visibleColumns"
               multiple
@@ -193,8 +298,6 @@ onMounted(() => {
             />
           </div>
         </div>
-    </q-toolbar>
-
         <div class="col-12">
           <d-table
             for="table"
@@ -243,7 +346,24 @@ onMounted(() => {
             </template>
           </d-table>
         </div>
+      </div>
+    </div>
   </q-card>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.tree-container {
+  overflow: auto;
+  height: 65vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.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>