SDK管理

src/pages/technical-support/sdk-manage/example/index.vue

+<template>
+  <div class="doc_manage_container">
+    <apass-list
+      ref="list"
+      search-placeholder="请输入关键字"
+      :list-padding-left="paddingLeft"
+      :hide-search="true"
+      :list-total="listTotal"
+      :list-header="listHeader"
+      :list-data="listData"
+      @list-action="init"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/doc_manage">
+          SDK管理
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          SDK示例管理
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <template slot="top">
+        <div class="top_fliter">
+          <show-more-filter class="filter_list">
+            <div class="filter_item">
+              <span class="filter_title">SDK类型：</span>
+              <el-select v-model="topFilter.type" placeholder="请选择">
+                <el-option label="全部" value=""></el-option>
+                <el-option
+                  v-for="(item, index) in types"
+                  :key="'top_type_' + index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">最后更新时间：</span>
+              <el-date-picker
+                v-model="topFilter.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+          </show-more-filter>
+          <div class="filter_action apaas_button">
+            <el-button type="primary" @click="topFilterAction">
+              查询
+            </el-button>
+            <el-button type="defalut" @click="topFilterClear">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <div class="main_top" slot="main-top">
+          xxx
+      </div>
+    </apass-list>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
+
+export default {
+  components: {
+    apassList,
+    apassDialog,
+    showMoreFilter,
+  },
+  data() {
+    return {
+      paddingLeft: 25,
+      listTotal: 0,
+      listHeader: [{}],
+      listData: [],
+      topFilter: {
+        type: "",
+        time: "",
+      },
+      types: [],
+      tempFilter: {},
+    };
+  },
+  methods: {
+    init(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+
+      this.tempFilter = filter;
+
+      console.log(fullFilter);
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        type: "",
+        time: "",
+      };
+      this.refreshPage();
+    },
+    topFilterAction() {
+      this.refreshPage();
+    },
+    refreshPage() {
+      this.$refs.list.resetCurrentPage();
+    },
+  },
+};
+</script>

src/pages/technical-support/sdk-manage/type/index.vue

@@ -61,6 +61,21 @@
           </div>
         </div>
       </template>
+
+      <div class="main_top_action apaas_button" slot="main-top">
+        <el-button class="delete_btn" type="danger" @click="deleteSlectedItem">
+          批量删除
+        </el-button>
+        <span class="selected_text">
+          已选择
+          <span>3</span>
+          项
+        </span>
+        <a class="clean_btn" @click.prevent="cleanSlectedItem">清空</a>
+        <el-button class="add_btn" type="primary" @click="addNewSdk">
+          新增SDK类型
+        </el-button>
+      </div>
     </apass-list>
   </div>
 </template>
@@ -81,7 +96,7 @@ export default {
     return {
       paddingLeft: 25,
       listTotal: 0,
-      listHeader: [],
+      listHeader: [{}],
       listData: [],
       topFilter: {
         type: "",
@@ -116,6 +131,38 @@ export default {
     refreshPage() {
       this.$refs.list.resetCurrentPage();
     },
+    deleteSlectedItem() {
+      console.log("deleteSlectedItem");
+    },
+    cleanSlectedItem() {
+      console.log("cleanSlectedItem");
+    },
+    addNewSdk() {
+      console.log("addNewSdk");
+    },
   },
 };
 </script>
+
+<style>
+.main_top_action {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.main_top_action .delete_btn {
+}
+.main_top_action .selected_text {
+  margin-left: 30px;
+}
+.main_top_action .clean_btn {
+  font-size: 14px;
+  line-height: 24px;
+  color: #2b4695;
+  text-decoration: underline;
+  margin-left: 30px;
+}
+.main_top_action .add_btn {
+  margin-left: auto;
+}
+</style>

src/router/index.js

@@ -188,7 +188,8 @@ export default new Router({
               path: "/technical_support/demo_center",
               name: "technicalSupportDemo",
               // redirect: "/technical_support/demo_center/index",
-              component: () => import("@/pages/technical-support/demo-center/index"),
+              component: () =>
+                import("@/pages/technical-support/demo-center/index"),
               // children: [
               //   {
               //     path: "/technical_support/doc_manage/list",
@@ -230,10 +231,34 @@ export default new Router({
                 {
                   path: "/technical_support/sdk/:type/:id",
                   name: "technicalSupportSdkDetail",
-                  component: () => import("@/pages/technical-support/sdk/detail"),
+                  component: () =>
+                    import("@/pages/technical-support/sdk/detail"),
                 }, // 问答中心列表
               ],
-            }, // 问答中心
+            }, // SDK中心
+            {
+              path: "/technical_support/sdk_manage",
+              name: "technicalSupportDoc",
+              redirect: "/technical_support/sdk_manage/type",
+              component: () =>
+                import("@/pages/technical-support/sdk-manage/index"),
+              children: [
+                {
+                  path: "/technical_support/sdk_manage/type",
+                  name: "technicalSupportSdkType",
+                  component: () =>
+                    import("@/pages/technical-support/sdk-manage/type/index"),
+                }, // SDK类型管理
+                {
+                  path: "/technical_support/sdk_manage/example",
+                  name: "technicalSupportSdkExample",
+                  component: () =>
+                    import(
+                      "@/pages/technical-support/sdk-manage/example/index"
+                    ),
+                }, // SDK示例管理
+              ],
+            }, // SDK管理
           ],
         }, // 技术支持
         {