RING:创建计划骨架搭建

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

@@ -126,35 +126,77 @@ export const PutDataTab: RouteConfig = {
 };
 
 // 计划管理
-const PlanAdGroup: RouteConfig = {
-  name: "PlanAdGroup",
-  path: "/put/plan-management/ad-group",
+export const PlanManagement: RouteConfig = {
+  name: "PlanManagement",
+  path: "/put/plan-management",
   meta: {
-    title: "广告组",
-    activeMenu: "/put/plan-management"
+    title: "计划管理",
+    noMenu: true
   },
-  component: () => import("@/views/put/plan-ad-group.vue")
+  component: () => import("@/views/put/plan-management.vue")
 };
 
-const PlanAdPlan: RouteConfig = {
-  name: "PlanAdPlan",
-  path: "/put/plan-management/ad-plan",
+// 建计划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"
+    title: "编辑计划",
+    activeMenu: "/put/plan-management",
   },
-  component: () => import("@/views/put/plan-ad-plan.vue")
+  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 PlanTab: RouteConfig = {
-  name: "PlanTab",
-  path: "/put/plan-management",
+export const PlanCreate: RouteConfig = {
+  name: "PlanCreate",
+  path: "/put/plan-create",
   meta: {
-    title: "计划管理",
+    title: "创建计划",
+    activeMenu: "/put/plan-management",
     noMenu: true
   },
-  children: [PlanAdGroup, PlanAdPlan],
-  component: () => import("@/views/put/plan-management.vue")
+  children: [AccountSelect, GroupSelect, EditPlan, CreativityAdd, PlanUpload],
+  component: () => import("@/views/put/plan-create-index.vue")
 };
 
 export const PutManager: RouteConfig = {
@@ -165,7 +207,7 @@ export const PutManager: RouteConfig = {
     title: "投放管理"
   },
   children: [
-    PlanTab,
+    PlanManagement,
     PutBook,
     PutAdAccount,
     PutDataTab,
@@ -279,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-ad-group.vue

@@ -1,33 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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-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

@@ -2,53 +2,111 @@
   <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 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 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>
-
-      <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";
+import usePagination from "@/hooks/usePagination";
+import {} from "@/api";
+import { PlanCloumn } from "../_pageOptions/table-put";
+import { message } from "ant-design-vue";
 
-const PutDataIndex = defineComponent({
-  setup(props, context) {
-    const { route, router } = useApp();
+const PlanManagement = defineComponent({
+  setup() {
+    let { meta, tablePageOptions, loading } = usePagination();
     const state = reactive({
-      defaultKey: route.name,
+      search: {
+        plan_name: "",
+        account: "",
+        group: "",
+        status: "",
+      },
+      list: [],
+      columns: PlanCloumn,
     });
-    const changeTab = (key: string) => {
-      router.replace({ name: key });
-    };
-    onBeforeRouteUpdate((to) => {
-      state.defaultKey = to.name;
-    });
-    return { ...toRefs(state), changeTab };
+    return { ...toRefs(state), meta, tablePageOptions, loading };
+  },
+  mounted() {},
+  methods: {
+    // 重置
+    resetSearch() {
+      this.search.plan_name = "";
+      this.search.account = "";
+      this.search.group = "";
+      this.search.status = "";
+    },
   },
 });
 
-export default PutDataIndex;
+export default PlanManagement;
 </script>
 <style lang="scss" scoped>
 @import "@/assets/common-style/frame.scss";
 .plan-management {
-  .main-box {
-    background: white;
+  .search-box {
+    display: block;
+    height: auto;
+    overflow: hidden;
+    .ant-btn {
+      margin: 0 20px 0 0;
+    }
   }
 }
 </style>