feat: add menus tree

src/router/marketplace.ts

@@ -34,7 +34,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
         meta: {
           title: "menus",
         },
-        component: () => import("@/views/administration/Menus.vue"),
+        component: () => import("@/views/marketplace/Menus.vue"),
       },
       {
         path: "/marketplace/settings",
@@ -42,7 +42,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
         meta: {
           title: "settings",
         },
-        component: () => import("@/views/administration/Settings.vue"),
+        component: () => import("@/views/marketplace/Settings.vue"),
       },
     ],
   },

src/types/components.d.ts

@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     Graph: typeof import('./../components/Graph.vue')['default']
     Icon: typeof import('./../components/Icon.vue')['default']
     Loading: typeof import('element-plus/es')['ElLoadingDirective']

src/views/marketplace/Menus.vue

@@ -13,20 +13,48 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="menus flex-v"> menus </div>
+  <div class="menus flex-v">
+    <el-tree
+      :data="menus"
+      show-checkbox
+      node-key="id"
+      :default-expanded-keys="[2, 3]"
+      :default-checked-keys="[5]"
+      :props="defaultProps"
+    />
+  </div>
 </template>
 <script lang="ts" setup>
+  import { ref } from "vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
   const appStore = useAppStoreWithOut();
+  const menus = ref<any[]>([]);
+  const expandedKeys = ref<string[]>([]);
+  const checkedKeys = ref<string[]>([]);
+  const defaultProps = {
+    children: "subItems",
+    label: "title",
+  };
 
   appStore.setPageTitle("Menus");
   getMenus();
 
   async function getMenus() {
-    const resp = await appStore.queryMenuItems();
-    const menus = resp.getMenuItems;
-    console.log(menus);
+    const resp = (await appStore.queryMenuItems()) || {};
+    menus.value = (resp.getMenuItems || []).map((d: any, index: number) => {
+      d.id = String(index);
+      expandedKeys.value.push(d.id);
+      checkedKeys.value.push(d.id);
+      d.subItem = d.subItems.map((item: any, subIndex: number) => {
+        item.id = `${index} + ${subIndex}`;
+        expandedKeys.value.push(item.id);
+        checkedKeys.value.push(item.id);
+        return item;
+      });
+      return d;
+    });
+    console.log(menus.value);
   }
   // window.localStorage.setItem("menus", lang.value);
 </script>
@@ -35,5 +63,6 @@ limitations under the License. -->
     flex-grow: 1;
     height: 100%;
     font-size: $font-size-smaller;
+    padding: 20px;
   }
 </style>