RING:计划管理路由界面搭建

src/router/async.ts

@@ -125,6 +125,38 @@ export const PutDataTab: RouteConfig = {
   component: () => import("@/views/put/ad_datas.vue")
 };
 
+// 计划管理
+const PlanAdGroup: RouteConfig = {
+  name: "PlanAdGroup",
+  path: "/put/plan-management/ad-group",
+  meta: {
+    title: "广告组",
+    activeMenu: "/put/plan-management"
+  },
+  component: () => import("@/views/put/plan-ad-group.vue")
+};
+
+const PlanAdPlan: RouteConfig = {
+  name: "PlanAdPlan",
+  path: "/put/plan-management/ad-plan",
+  meta: {
+    title: "广告计划",
+    activeMenu: "/put/plan-management"
+  },
+  component: () => import("@/views/put/plan-ad-plan.vue")
+};
+
+export const PlanTab: RouteConfig = {
+  name: "PlanTab",
+  path: "/put/plan-management",
+  meta: {
+    title: "计划管理",
+    noMenu: true
+  },
+  children: [PlanAdGroup, PlanAdPlan],
+  component: () => import("@/views/put/plan-management.vue")
+};
+
 export const PutManager: RouteConfig = {
   name: "PutManager",
   path: "/put",
@@ -133,6 +165,7 @@ export const PutManager: RouteConfig = {
     title: "投放管理"
   },
   children: [
+    PlanTab,
     PutBook,
     PutAdAccount,
     PutDataTab,

src/views/put/plan-ad-group.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>广告组管理</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref, watchEffect } from "vue";
+
+import moment from "moment";
+import { TableColumnOfPutLog } from "../_pageOptions/table-put";
+
+import { opertaroLog } from "@/api";
+import usePagination from "@/hooks/usePagination";
+
+import { adPlanLog, PageOptions } from "#/api";
+import useApp from "@/hooks/useApp";
+
+const PlanAdGroup = defineComponent({
+  components: {},
+  setup() {
+    const { router } = useApp();
+    let { loading, meta, tablePageOptions } = usePagination();
+    const state = reactive({});
+
+    watchEffect(() => {});
+    return { ...toRefs(state) };
+  },
+  methods: {},
+});
+
+export default PlanAdGroup;
+</script>
+<style lang="scss" scoped>
+</style>

src/views/put/plan-ad-plan.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>广告计划管理</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref, watchEffect } from "vue";
+
+import moment from "moment";
+import { TableColumnOfPutLog } from "../_pageOptions/table-put";
+
+import { opertaroLog } from "@/api";
+import usePagination from "@/hooks/usePagination";
+
+import { adPlanLog, PageOptions } from "#/api";
+import useApp from "@/hooks/useApp";
+
+const PlanAdGroup = defineComponent({
+  components: {},
+  setup() {
+    const { router } = useApp();
+    let { loading, meta, tablePageOptions } = usePagination();
+    const state = reactive({});
+
+    watchEffect(() => {});
+    return { ...toRefs(state) };
+  },
+  methods: {},
+});
+
+export default PlanAdGroup;
+</script>
+<style lang="scss" scoped>
+</style>

src/views/put/plan-management.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="plan-management">
+    <div class="title-box-common">
+      <h3>计划管理</h3>
+    </div>
+    <div class="padding-box-common">
+      <div style="background: white">
+        <a-tabs
+          style="padding: 0 20px"
+          default-active-key="1"
+          @change="changeTab"
+          v-model:activeKey="defaultKey"
+        >
+          <a-tab-pane key="PlanAdGroup" tab="广告组"> </a-tab-pane>
+          <a-tab-pane key="PlanAdPlan" tab="广告计划"> </a-tab-pane>
+        </a-tabs>
+      </div>
+
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import useApp from "@/hooks/useApp";
+import { defineComponent, reactive, toRefs } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+const PutDataIndex = defineComponent({
+  setup(props, context) {
+    const { route, router } = useApp();
+    const state = reactive({
+      defaultKey: route.name,
+    });
+    const changeTab = (key: string) => {
+      router.replace({ name: key });
+    };
+    onBeforeRouteUpdate((to) => {
+      state.defaultKey = to.name;
+    });
+    return { ...toRefs(state), changeTab };
+  },
+});
+
+export default PutDataIndex;
+</script>
+<style lang="scss" scoped>
+@import "@/assets/common-style/frame.scss";
+.plan-management {
+  .main-box {
+    background: white;
+  }
+}
+</style>