src/assets/common-style/frame.scss

@@ -1,3 +1,4 @@
+// @import "@/assets/common-style/frame.scss";
 .title-box-common {
   width: 100%;
   height: 70px;
@@ -24,7 +25,29 @@
     }
   }
   .table-box {
-    padding-top: 20px;
+    padding: 10px;
     background: white;
   }
 }
+
+.search-item {
+  width: 25%;
+  margin-left: 20px;
+  float: left;
+  display: flex;
+  // justify-content: center;
+  align-items: center;
+  height: 50px;
+  line-height: 50px;
+  .label {
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    display: block;
+    text-align: right;
+  }
+  .ant-input,
+  .ant-select-selector {
+    width: 200px;
+  }
+}

src/assets/common-style/scroll-bar.scss

@@ -0,0 +1,16 @@
+// @import "@/assets/common-style/scroll-bar.scss";
+.list-box::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+::-webkit-scrollbar {
+  width: 3px;
+}
+::-webkit-scrollbar-thumb {
+  background: #e4e4e4;
+  border-radius: 8px;
+}
+::-webkit-scrollbar-track-piece {
+  background: transparent;
+}

src/plugins/install.ts

@@ -36,7 +36,8 @@ import {
   Progress,
   Cascader,
   Breadcrumb,
-  Divider
+  Divider,
+  Empty
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -86,7 +87,8 @@ const install = (app: App<Element>) => {
     .use(Progress)
     .use(Cascader)
     .use(Breadcrumb)
-    .use(Divider);
+    .use(Divider)
+    .use(Empty);
 };
 
 export default install;

src/router/async.ts

@@ -125,6 +125,80 @@ export const PutDataTab: RouteConfig = {
   component: () => import("@/views/put/ad_datas.vue")
 };
 
+// 计划管理
+export const PlanManagement: RouteConfig = {
+  name: "PlanManagement",
+  path: "/put/plan-management",
+  meta: {
+    title: "计划管理",
+    noMenu: true
+  },
+  component: () => import("@/views/put/plan-management.vue")
+};
+
+// 建计划step1
+const AccountSelect: RouteConfig = {
+  name: "AccountSelect",
+  path: "/put/plan-create/account-select",
+  meta: {
+    title: "选择投放账号",
+    activeMenu: "/put/plan-management",
+  },
+  component: () => import("@/views/put/plan-create/account-select.vue")
+};
+// 建计划step2
+const GroupSelect: RouteConfig = {
+  name: "GroupSelect",
+  path: "/put/plan-create/group-select",
+  meta: {
+    title: "选择广告组",
+    activeMenu: "/put/plan-management",
+  },
+  component: () => import("@/views/put/plan-create/group-select.vue")
+};
+// 建计划step3
+const EditPlan: RouteConfig = {
+  name: "EditPlan",
+  path: "/put/plan-create/plan-edit",
+  meta: {
+    title: "编辑计划",
+    activeMenu: "/put/plan-management",
+  },
+  component: () => import("@/views/put/plan-create/plan-edit.vue")
+};
+// 建计划step4
+const CreativityAdd: RouteConfig = {
+  name: "CreativityAdd",
+  path: "/put/plan-create/creativity-add",
+  meta: {
+    title: "添加创意",
+    activeMenu: "/put/plan-management",
+  },
+  component: () => import("@/views/put/plan-create/creativity-add.vue")
+};
+// 建计划step5
+const PlanUpload: RouteConfig = {
+  name: "PlanUpload",
+  path: "/put/plan-create/plan-upload",
+  meta: {
+    title: "上传计划",
+    activeMenu: "/put/plan-management",
+  },
+  component: () => import("@/views/put/plan-create/plan-upload.vue")
+};
+
+export const PlanCreate: RouteConfig = {
+  name: "PlanCreate",
+  path: "/put/plan-create",
+  meta: {
+    title: "创建计划",
+    activeMenu: "/put/plan-management",
+    noMenu: true
+  },
+  children: [AccountSelect, GroupSelect, EditPlan, CreativityAdd, PlanUpload],
+  component: () => import("@/views/put/plan-create-index.vue")
+};
+
 export const PutManager: RouteConfig = {
   name: "PutManager",
   path: "/put",
@@ -133,6 +207,7 @@ export const PutManager: RouteConfig = {
     title: "投放管理"
   },
   children: [
+    PlanManagement,
     PutBook,
     PutAdAccount,
     PutDataTab,
@@ -246,7 +321,8 @@ export const ForgetPwd: RouteConfig = {
 
 
 
-const asyncRoutes: RouteConfig[] = [AccountManager, DataAnalysis, PutManager, Financial, QuickApp, PerformanceDetial, ForgetPwd, MaterialCenter];
+const asyncRoutes: RouteConfig[] = [AccountManager, DataAnalysis, PutManager,
+  PlanCreate, Financial, QuickApp, PerformanceDetial, ForgetPwd, MaterialCenter];
 // const asyncRoutes: RouteConfig[] = [AccountManager, PutManager, Financial, QuickApp, ForgetPwd, MaterialCenter];
 
 export default asyncRoutes;

src/views/_pageOptions/table-put.ts

@@ -1131,3 +1131,40 @@ export const landingCloumn: Array<colunm> = [
     },
   },
 ];
+
+// 计划管理
+export const PlanCloumn: Array<colunm> = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    width: 100,
+  },
+
+  {
+    title: "落地页名称",
+    dataIndex: "title",
+    width: 100,
+  },
+  {
+    title: "简介",
+    dataIndex: "name",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: "公众号",
+    dataIndex: "gzh_name",
+    width: 100,
+    slots: {
+      customRender: "gzh",
+    },
+  },
+  {
+    title: "操作",
+    dataIndex: "",
+    width: 160,
+    slots: {
+      customRender: "setting",
+    },
+  },
+];

src/views/put/plan-create-index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="create-plan">
+    <div class="title-box-common title-box">
+      <a-breadcrumb>
+        <a-breadcrumb-item
+          ><a href="javascript:;" @click="$router.push('/put/plan-management')"
+            >计划管理</a
+          ></a-breadcrumb-item
+        >
+        <a-breadcrumb-item>新建</a-breadcrumb-item>
+      </a-breadcrumb>
+      <h3>新建计划</h3>
+    </div>
+    <div class="padding-box-common">
+      <div class="main-box">
+        <div class="step-box">
+          <a-steps :current="current">
+            <a-step
+              v-for="item in steps"
+              :key="item.title"
+              :title="item.title"
+            />
+          </a-steps>
+        </div>
+        <router-view></router-view>
+        <div class="steps-action">
+          <a-button v-if="current === 0" @click="prev">取消</a-button>
+          <a-button v-if="current > 0" @click="prev">上一步</a-button>
+          <a-button
+            v-if="current < steps.length - 1"
+            type="primary"
+            @click="next"
+            >下一步</a-button
+          >
+          <a-button
+            v-if="current == steps.length - 1"
+            type="primary"
+            @click="$message.success('Processing complete!')"
+          >
+            完成
+          </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import useApp from "@/hooks/useApp";
+import { defineComponent, reactive, toRefs } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+const PlanCreate = defineComponent({
+  setup(props, context) {
+    const { route, router } = useApp();
+    const state = reactive({
+      defaultKey: route.name,
+      current: 0,
+      steps: [
+        { title: "选择投放账号" },
+        { title: "选择广告组" },
+        { title: "编辑计划" },
+        { title: "添加创意" },
+        { title: "上传计划" },
+      ],
+      routerList: [
+        "account-select",
+        "group-select",
+        "plan-edit",
+        "creativity-add",
+        "plan-upload",
+      ],
+    });
+    const changeTab = (key: string) => {
+      router.replace({ name: key });
+    };
+    onBeforeRouteUpdate((to) => {
+      state.defaultKey = to.name;
+    });
+    return { ...toRefs(state), changeTab };
+  },
+  mounted() {},
+  methods: {
+    next() {
+      this.current++;
+      this.$router.push("/put/plan-create/" + this.routerList[this.current]);
+    },
+    prev() {
+      if (this.current === 0) {
+        this.$router.push("/put/plan-management");
+        return;
+      }
+      this.current--;
+      this.$router.push("/put/plan-create/" + this.routerList[this.current]);
+    },
+  },
+});
+
+export default PlanCreate;
+</script>
+<style lang="scss" scoped>
+@import "@/assets/common-style/frame.scss";
+.create-plan {
+  .title-box {
+    display: block;
+    padding-top: 4px;
+    h3 {
+      margin-top: 10px;
+    }
+  }
+  .main-box {
+    background: white;
+    padding: 20px;
+  }
+  .step-box {
+    margin-bottom: 30px;
+  }
+  .steps-action {
+    margin-top: 30px;
+    border-top: 1px solid rgb(231, 230, 230);
+    .ant-btn {
+      margin: 10px 10px 0 0;
+    }
+  }
+}
+</style>

src/views/put/plan-create/account-select.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="account-select">
+    <a-input-search
+      v-model:value="ad_account"
+      placeholder="请输入广告主账号"
+      style="width: 200px"
+      @search="onSearch"
+    />
+    <div style="height: 10px"></div>
+    <div class="common-box">
+      <div class="title-box"><h3>头条账号</h3></div>
+      <div class="list-box"></div>
+    </div>
+    <div class="common-box">
+      <div class="title-box"><h3>广告主账号</h3></div>
+      <div class="list-box"></div>
+    </div>
+    <div class="common-box">
+      <div class="title-box"><h3>已选</h3></div>
+      <div class="list-box">
+        <a-empty />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import {} from "@/api";
+import { message } from "ant-design-vue";
+
+const AccountSelect = defineComponent({
+  setup() {
+    const state = reactive({
+      ad_account: "",
+    });
+    return { ...toRefs(state) };
+  },
+  mounted() {},
+  methods: {
+    onSearch() {
+      console.log("搜索");
+    },
+  },
+});
+
+export default AccountSelect;
+</script>
+<style lang="scss" scoped>
+@import "@/assets/common-style/scroll-bar.scss";
+.account-select {
+  overflow: hidden;
+  .common-box {
+    width: 230px;
+    height: 320px;
+    border: 1px solid rgb(220, 220, 220);
+    float: left;
+    margin-right: 10px;
+    .title-box {
+      border-bottom: 1px solid rgb(220, 220, 220);
+      height: 39px;
+      line-height: 39px;
+      padding-left: 10px;
+    }
+    .list-box {
+      height: 260px;
+      padding: 10px;
+      overflow: auto;
+    }
+  }
+}
+</style>

src/views/put/plan-create/creativity-add.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="creativity-add">添加创意</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import {} from "@/api";
+import { message } from "ant-design-vue";
+
+const CreativityAdd = defineComponent({
+  setup() {
+    const state = reactive({});
+    return { ...toRefs(state) };
+  },
+  mounted() {},
+  methods: {},
+});
+
+export default CreativityAdd;
+</script>
+<style lang="scss" scoped>
+</style>

src/views/put/plan-create/group-select.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="group-select">选择广告组</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import {} from "@/api";
+import { message } from "ant-design-vue";
+
+const GroupSelect = defineComponent({
+  setup() {
+    const state = reactive({});
+    return { ...toRefs(state) };
+  },
+  mounted() {},
+  methods: {},
+});
+
+export default GroupSelect;
+</script>
+<style lang="scss" scoped>
+</style>

src/views/put/plan-create/plan-edit.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="plan-edit">编辑计划</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import {} from "@/api";
+import { message } from "ant-design-vue";
+
+const PlanEdit = defineComponent({
+  setup() {
+    const state = reactive({});
+    return { ...toRefs(state) };
+  },
+  mounted() {},
+  methods: {},
+});
+
+export default PlanEdit;
+</script>
+<style lang="scss" scoped>
+</style>

src/views/put/plan-create/plan-upload.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="plan-upolad">上传计划</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import {} from "@/api";
+import { message } from "ant-design-vue";
+
+const PlanUpload = defineComponent({
+  setup() {
+    const state = reactive({});
+    return { ...toRefs(state) };
+  },
+  mounted() {},
+  methods: {},
+});
+
+export default PlanUpload;
+</script>
+<style lang="scss" scoped>
+</style>

src/views/put/plan-management.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="plan-management">
+    <div class="title-box-common">
+      <h3>计划管理</h3>
+      <a-button type="primary" @click="$router.push('/put/plan-create')">新建</a-button>
+    </div>
+    <div class="padding-box-common">
+      <div class="search-box">
+        <div class="search-item">
+          <span class="label">计划名称：</span>
+          <a-input
+            v-model:value="search.plan_name"
+            placeholder="请输入计划名称或ID"
+          ></a-input>
+        </div>
+        <div class="search-item">
+          <span class="label">所属账户：</span>
+          <a-input
+            v-model:value="search.account"
+            placeholder="请输入账户名称或ID"
+          >
+          </a-input>
+        </div>
+        <div class="search-item">
+          <span class="label">所属广告组：</span>
+          <a-input
+            v-model:value="search.group"
+            placeholder="请输入广告组名称或ID"
+          >
+          </a-input>
+        </div>
+        <div class="search-item">
+          <span class="label">状态：</span>
+          <a-select
+            placeholder="请选择"
+            style="width: 200px"
+            v-model:value="search.status"
+          >
+            <a-select-option value="">全部</a-select-option>
+            <a-select-option value="a">下发中</a-select-option>
+            <a-select-option value="x">下发失败</a-select-option>
+            <a-select-option value="s">下发成功</a-select-option>
+          </a-select>
+        </div>
+        <div class="search-item">
+          <span class="label"></span><a-button type="primary"> 搜索 </a-button>
+          <a-button @click="resetSearch"> 重置 </a-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <a-table
+          bordered
+          :data-source="list"
+          :columns="columns"
+          rowKey="id"
+          :loading="loading"
+          :pagination="tablePageOptions"
+        ></a-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+import usePagination from "@/hooks/usePagination";
+import {} from "@/api";
+import { PlanCloumn } from "../_pageOptions/table-put";
+import { message } from "ant-design-vue";
+
+const PlanManagement = defineComponent({
+  setup() {
+    let { meta, tablePageOptions, loading } = usePagination();
+    const state = reactive({
+      search: {
+        plan_name: "",
+        account: "",
+        group: "",
+        status: "",
+      },
+      list: [],
+      columns: PlanCloumn,
+    });
+    return { ...toRefs(state), meta, tablePageOptions, loading };
+  },
+  mounted() {},
+  methods: {
+    // 重置
+    resetSearch() {
+      this.search.plan_name = "";
+      this.search.account = "";
+      this.search.group = "";
+      this.search.status = "";
+    },
+  },
+});
+
+export default PlanManagement;
+</script>
+<style lang="scss" scoped>
+@import "@/assets/common-style/frame.scss";
+.plan-management {
+  .search-box {
+    display: block;
+    height: auto;
+    overflow: hidden;
+    .ant-btn {
+      margin: 0 20px 0 0;
+    }
+  }
+}
+</style>