โครงาการ => ลักษณะโครงการ

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

@@ -66,43 +66,22 @@ const formData = reactive<FormProjectDetail>({
   developmentProjectTechniqueActuals: [],
   projectModalActual: null,
   projectModalPlanneds: null,
+  strategyChildPlannedId: null, //id ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildPlannedNode: 0, //node ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildActualId: null, //id ยุทธศาสตร์เป้าหมายตามจริง
+  strategyChildActualNode: 0, //node ยุทธศาสตร์เป้าหมายตามจริง
 });
 
-const nodes = ref<any>([
+const nodes = ref<any>([]);
-  {
-    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
-    level: "0",
-    children: [
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        level: "1",
-        children: [
-          {
-            orgTreeName: "ยุทธศาสตร์ที่ 2",
-            level: "2",
-            children: [
-              {
-                orgTreeName: "ยุทธศาสตร์ที่ 3",
-                level: "3",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]);
 const filter = ref<string>("");
 const filter2 = ref<string>("");
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
 const expanded = ref<Array<any>>([]);
 const expanded2 = ref<Array<any>>([]);
-const nodeId = ref<string>("");
+function fetchData() {
-const nodeId2 = ref<string>("");
-async function fetchData() {
   showLoader();
-  await http
+  http
     .get(config.API.developmentMainTab("tab3", projectId.value))
     .then((res) => {
       const data = res.data.result;
@@ -123,6 +102,26 @@ async function fetchData() {
       formData.projectNigthHoldActual = data.projectNigthHoldActual;
       formData.developmentProjectTechniqueActuals =
         data.developmentProjectTechniqueActuals;
+      formData.strategyChildPlannedId = data.strategyChildPlannedId;
+      formData.strategyChildPlannedNode = data.strategyChildPlannedNode;
+      formData.strategyChildActualId = data.strategyChildActualId;
+      formData.strategyChildActualNode = data.strategyChildActualNode;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchTree() {
+  showLoader();
+  http
+    .get(config.API.devStrategy)
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -135,10 +134,9 @@ async function fetchData() {
 async function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-
     await http
       .put(config.API.developmentMainTab("tab3", projectId.value), formData)
-      .then((res) => {
+      .then(() => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         fetchData();
       })
@@ -151,14 +149,17 @@ async function onSubmit() {
 
 function updateSelected(data: any, type: string) {
   if (type === "1") {
-    nodeId.value = data.orgTreeName;
+    formData.strategyChildPlannedId = data.id;
+    formData.strategyChildPlannedNode = data.level;
   } else if (type === "2") {
-    nodeId2.value = data.orgTreeName;
+    formData.strategyChildActualId = data.id;
+    formData.strategyChildActualNode = data.level;
   }
 }
 
 onMounted(() => {
   fetchData();
+  fetchTree();
 });
 </script>
 
@@ -216,8 +217,8 @@ onMounted(() => {
                   dense
                   :nodes="nodes"
                   selected-color="primary"
-                  node-key="orgTreeName"
+                  node-key="id"
-                  label-key="orgTreeName"
+                  label-key="id"
                   :filter="filter"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -227,13 +228,13 @@ onMounted(() => {
                     <q-item
                       clickable
                       @click.stop="updateSelected(prop.node, '1')"
-                      :active="nodeId == prop.node.orgTreeName"
+                      :active="formData.strategyChildPlannedId == prop.node.id"
-                      active-class="my-list-link text-white text-weight-medium bg-primary"
+                      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 }}
+                          {{ prop.node.name }}
                         </div>
                       </div>
                     </q-item>
@@ -266,8 +267,8 @@ onMounted(() => {
                 <q-tree
                   dense
                   :nodes="nodes"
-                  node-key="orgTreeName"
+                  node-key="id"
-                  label-key="orgTreeName"
+                  label-key="id"
                   :filter="filter2"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -277,13 +278,13 @@ onMounted(() => {
                     <q-item
                       clickable
                       @click.stop="updateSelected(prop.node, '2')"
-                      :active="nodeId2 == prop.node.orgTreeName"
+                      :active="formData.strategyChildActualId == prop.node.id"
-                      active-class="my-list-link text-white text-weight-medium bg-primary"
+                      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 }}
+                          {{ prop.node.name }}
                         </div>
                       </div>
                     </q-item>
@@ -498,4 +499,12 @@ onMounted(() => {
   </q-form>
 </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/interface/index/Main.ts

@@ -79,6 +79,10 @@ interface FormProjectDetail {
   developmentProjectTechniqueActuals: [];
   projectModalActual?: string | null;
   projectModalPlanneds?: string | null;
+  strategyChildPlannedId: string | null; //id ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildPlannedNode: number; //node ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildActualId: string | null; //id ยุทธศาสตร์เป้าหมายตามจริง
+  strategyChildActualNode: number; //node ยุทธศาสตร์เป้าหมายตามจริง
 }
 
 export type {

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

@@ -40,30 +40,7 @@ const ListMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-const nodes = ref<any>([
+const nodes = ref<any>([]);
-  // {
-  //   orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
-  //   level: "0",
-  //   children: [
-  //     {
-  //       orgTreeName: "ยุทธศาสตร์ที่ 1",
-  //       level: "1",
-  //       children: [
-  //         {
-  //           orgTreeName: "ยุทธศาสตร์ที่ 2",
-  //           level: "2",
-  //           children: [
-  //             {
-  //               orgTreeName: "ยุทธศาสตร์ที่ 3",
-  //               level: "3",
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // },
-]);
 const filter = ref<string>("");
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
@@ -78,7 +55,9 @@ function fetchDataTree() {
       const data = res.data.result;
       nodes.value = data;
     })
-    .catch((err) => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });