SDK示例管理

src/components/apass-upload.vue

 <template>
   <el-upload
+    ref="upload"
     drag
     action="/apaas/static/file/upload"
     :data="{
@@ -34,6 +35,11 @@ export default {
       default: "",
     },
   },
+  data() {
+    return {
+      preUrl: "",
+    };
+  },
   computed: {
     fileList() {
       let list = [];
@@ -68,6 +74,7 @@ export default {
       const filtType = this.getFileType(file.name);
 
       if (filtType === "rar" || filtType === "zip") {
+        this.preUrl = this.url;
         return true;
       } else {
         this.$message.error("仅支持rar和zip格式!");
@@ -76,6 +83,21 @@ export default {
     },
     uploadSuccess({ data }) {
       this.$emit("change", data);
+
+      // 替换文件后要把旧文件删除掉
+      if (this.preUrl) {
+        this.$http
+          .delete("/apaas/static/file/delete", {
+            params: {
+              url: this.preUrl,
+            },
+          })
+          .then(({ data }) => {
+            if (data.success === 1) {
+              this.preUrl = "";
+            }
+          });
+      }
     },
   },
 };

src/pages/technical-support/doc-manage/detail.vue

@@ -8,9 +8,7 @@
         <el-breadcrumb-item to="/technical_support/doc_manage">
           开发文档
         </el-breadcrumb-item>
-        <el-breadcrumb-item>
-          文档编辑 - {{ title }}
-        </el-breadcrumb-item>
+        <el-breadcrumb-item> 文档编辑 - {{ title }} </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
 
@@ -31,21 +29,26 @@
 <script>
 import wangE from "@/components/wangE";
 export default {
+  components: {
+    wangE,
+  },
   data() {
     return {
       title: "",
       content: "",
     };
   },
-  components: {
-    wangE,
+  computed: {
+    id() {
+      return parseFloat(this.$route.params.id);
+    },
   },
   created() {
-    if (this.$route.params.id) {
+    if (this.id) {
       this.$http
         .get("/apaas/support/document/get", {
           params: {
-            id: this.$route.params.id,
+            id: this.id,
           },
         })
         .then(({ data }) => {
@@ -63,13 +66,13 @@ export default {
     submitAction() {
       this.$http
         .put("/apaas/support/document/put", {
-          id: parseFloat(this.$route.params.id),
+          id: this.id,
           content: this.content,
         })
         .then(({ data }) => {
           if (data.success === 1) {
             this.$message.success("保存成功");
-            this.$router.push("/technical_support/doc_manage")
+            this.$router.push("/technical_support/doc_manage");
           } else {
             this.$message.error(data.errMsg || "保存失败");
           }

src/pages/technical-support/doc-manage/list.vue

@@ -250,7 +250,10 @@ export default {
           { max: 20, message: "长度应小于20个字符", trigger: "change" },
         ],
       },
-      detail: "",
+      detail: {
+        title: "",
+        content: "",
+      },
       deleteDialogInfo: {
         msg: "",
         submit: null,
@@ -424,7 +427,7 @@ export default {
 
 <style>
 .doc_manage_detail_dialog .el-dialog__body {
-  padding: 10px;
+  padding: 15px;
 }
 .doc_manage_detail_dialog .el-dialog__footer {
   display: none;

src/pages/technical-support/doc/index.vue

@@ -21,20 +21,15 @@ export default {
     sideNavBar,
   },
   data: () => ({
+    activePath: "",
     navList: [],
   }),
-  /* watch: {
-    "$route.fullPath"(path) {
-      this.initNavList();
-    },
-  }, */
   methods: {
     initNavList() {
       this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(({ data }) => {
         if (data.success == 1) {
           let menu = data.data[0].Child;
           let nav = [];
-          let activePath = "";
 
           for (let i = 0; i < menu.length; i++) {
             let first = menu[i];
@@ -83,8 +78,8 @@ export default {
               if (children.length === 0) {
                 this.$set(nav[index], "disabled", true);
               } else {
-                if (activePath === "") {
-                  activePath = children[0].path;
+                if (this.activePath === "") {
+                  this.activePath = children[0].path;
                 }
 
                 this.$set(nav[index], "path", children[0].path);
@@ -97,9 +92,9 @@ export default {
             });
 
             this.navList = nav;
-            if (activePath && this.$route.params.id === undefined) {
-              this.$router.push(activePath);
-            } else if (activePath === "") {
+            if (this.activePath && this.$route.params.id === undefined) {
+              this.$router.push(this.activePath);
+            } else if (this.activePath === "") {
               this.$message.error("您尚未创建任何文档");
             }
           });

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

+<template>
+  <div class="doc_manage_container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/sdk_manage/example">
+          SDK管理
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          SDK示例编辑 - {{ detail.example_name }}
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="editpage">
+      <wang-e v-model="detail.content"></wang-e>
+      <div class="apaas_button">
+        <el-button type="defalut" size="mini" @click="cancelAction">
+          取消
+        </el-button>
+        <el-button type="primary" size="mini" @click="submitAction">
+          保存
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import wangE from "@/components/wangE";
+export default {
+  components: {
+    wangE,
+  },
+  data() {
+    return {
+      detail: {},
+    };
+  },
+  computed: {
+    id() {
+      return parseFloat(this.$route.params.id);
+    },
+  },
+  created() {
+    if (this.id) {
+      this.$http
+        .get("/apaas/support/sdk/example/detail", {
+          params: {
+            id: this.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.detail = data.data;
+          }
+        });
+    }
+  },
+  methods: {
+    cancelAction() {
+      this.$router.push("/technical_support/sdk_manage");
+    },
+    submitAction() {
+      this.$http
+        .put("/apaas/support/sdk/example/put", {
+          id: this.id,
+          style_id: this.detail.style_id,
+          example_name: this.detail.example_name,
+          content: this.detail.content,
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.$message.success("保存成功");
+            this.$router.push("/technical_support/sdk_manage/example");
+          } else {
+            this.$message.error(data.errMsg || "保存失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("保存失败");
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.doc_manage_container {
+  height: 100%;
+  padding: 0 20px 30px;
+  box-sizing: border-box;
+}
+.main_container {
+  height: calc(100% - 53px);
+  background-color: #fff;
+  border-radius: 10px;
+}
+.editpage {
+  background-color: #fff;
+  height: calc(100% - 45px);
+  margin-bottom: 20px;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+}
+.editpage .wangeditor_class {
+  height: calc(100% - 100px);
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.apaas_button {
+  border-top: 1px solid #e3e5ef;
+  box-sizing: border-box;
+  text-align: right;
+  padding-top: 30px;
+}
+.apaas_button .el-button + .el-button {
+  margin-right: 30px;
+}
+</style>

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

@@ -85,7 +85,7 @@
       :title="detailForm.type === 0 ? '新增' : '修改'"
     >
       <div class="add_content" slot="content">
-        <el-form ref="addForm" :model="detailForm" :rules="detailFormRules">
+        <el-form ref="detailForm" :model="detailForm" :rules="detailFormRules">
           <el-form-item
             label="SDK类型"
             prop="style_name"
@@ -103,10 +103,6 @@
             ></el-input>
           </el-form-item>
           <el-form-item label="SDK包上传" prop="file_url">
-            <!-- <el-input
-              v-model="detailForm.file_url"
-              placeholder="支持扩展名：.rar .zip"
-            ></el-input> -->
             <apass-upload
               v-model="detailForm.file_url"
               tip="支持扩展名：.rar .zip"
@@ -282,11 +278,23 @@ export default {
       this.$refs.list.resetCurrentPage();
     },
     deleteSlection() {
-      this.deleteDialogInfo.msg = `确认删除要删除所选项吗？`;
-      this.deleteDialogInfo.submit = () => {
-        this.deleteRequest(this.selection.map((row) => row.id));
-      };
-      this.$refs.deleteDialog.show();
+      if (this.selection.length) {
+        let names = [];
+        let ids = [];
+
+        this.selection.forEach((item) => {
+          names.push(item.style_name);
+          ids.push(item.id);
+        });
+
+        this.deleteDialogInfo.msg = `您确认要删除${names.join("，")}吗？`;
+        this.deleteDialogInfo.submit = () => {
+          this.deleteRequest(ids);
+        };
+        this.$refs.deleteDialog.show();
+      } else {
+        this.$message.warning("您尚未选中任何SDK类型");
+      }
     },
     clearSelection() {
       this.$refs.list.clearSelection();
@@ -307,58 +315,60 @@ export default {
       this.$refs.detailDialog.hide();
     },
     detailSubmitAction() {
-      if (this.detailForm.type === 0) {
-        this.$http
-          .post("/apaas/support/sdk/styles/create", {
-            style_name: this.detailForm.style_name,
-            version: this.detailForm.version,
-            file_url: this.detailForm.file_url,
-          })
-          .then(({ data }) => {
-            if (data.success === 1) {
-              this.$message.success("新增成功");
-              this.refreshPage();
-              this.$refs.detailDialog.hide();
-            } else {
-              this.$message.error("新增失败");
-            }
-          })
-          .catch((error) => {
-            console.log(error);
-            this.$message.error("新增失败");
-          });
-      } else {
-        this.$http
-          .put("/apaas/support/sdk/styles/put", {
-            id: this.detailForm.id,
-            style_name: this.detailForm.style_name,
-            version: this.detailForm.version,
-            file_url: this.detailForm.file_url,
-          })
-          .then(({ data }) => {
-            if (data.success === 1) {
-              this.$message.success("修改成功");
-              this.refreshPage();
-              this.$refs.detailDialog.hide();
-            } else {
-              this.$message.error("修改失败");
-            }
-          })
-          .catch((error) => {
-            console.log(error);
-            this.$message.error("修改失败");
-          });
-      }
+      this.$refs.detailForm.validate((valid) => {
+        if (valid) {
+          if (this.detailForm.type === 0) {
+            this.$http
+              .post("/apaas/support/sdk/styles/create", {
+                style_name: this.detailForm.style_name,
+                version: this.detailForm.version,
+                file_url: this.detailForm.file_url,
+              })
+              .then(({ data }) => {
+                if (data.success === 1) {
+                  this.$message.success("新增成功");
+                  this.refreshPage();
+                  this.$refs.detailDialog.hide();
+                } else {
+                  this.$message.error("新增失败");
+                }
+              })
+              .catch((error) => {
+                console.log(error);
+                this.$message.error("新增失败");
+              });
+          } else {
+            this.$http
+              .put("/apaas/support/sdk/styles/put", {
+                id: this.detailForm.id,
+                style_name: this.detailForm.style_name,
+                version: this.detailForm.version,
+                file_url: this.detailForm.file_url,
+              })
+              .then(({ data }) => {
+                if (data.success === 1) {
+                  this.$message.success("修改成功");
+                  this.refreshPage();
+                  this.$refs.detailDialog.hide();
+                } else {
+                  this.$message.error("修改失败");
+                }
+              })
+              .catch((error) => {
+                console.log(error);
+                this.$message.error("修改失败");
+              });
+          }
+        } else {
+          return false;
+        }
+      });
     },
     editItem(item) {
       this.detailForm = {
         type: 1,
-        id: item.id,
-        style_name: item.style_name,
-        version: item.version,
-        file_url: item.file_url,
       };
-      /* this.$http
+      this.$http
         .get("/apaas/support/sdk/styles/detail", {
           params: {
             id: item.id,
@@ -366,9 +376,12 @@ export default {
         })
         .then(({ data }) => {
           if (data.success === 1) {
-            this.detailForm = data.data;
+            this.detailForm = {
+              ...data.data,
+              type: 1,
+            };
           }
-        }); */
+        });
       this.$refs.detailDialog.show();
     },
     deleteItem(item) {

src/pages/technical-support/sdk/detail.vue

@@ -99,6 +99,7 @@ export default {
 .main_container {
   flex-grow: 1;
   height: calc(100% - 53px);
+  overflow: hidden;
 }
 .download_action {
   background-color: #fff;

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

@@ -4,7 +4,7 @@
       title="SDK中心"
       imgSrc="tool_ic_kaifawendang"
       :nav-list="navList"
-      :title-path="navList[0] && navList[0].path"
+      :title-path="activePath"
       style="width: 250px;"
     ></side-nav-bar>
     <div class="main_container">
@@ -21,76 +21,52 @@ export default {
     sideNavBar,
   },
   data: () => ({
+    activePath: "",
     navList: [],
   }),
   methods: {
     initNavList() {
-      let activePath = "";
-      let baseUrl = "/technical_support/sdk";
-      let data = [
-        {
-          name: "JavaScript SDK",
-          id: 1,
-          children: [
-            {
-              name: "在地图上添加图层",
-              id: 101,
-            },
-            {
-              name: "测测测自己创建测",
-              id: 102,
-            },
-          ],
-        },
-        {
-          name: "Android SDK",
-          id: 2,
-          children: [
-            {
-              name: "Android",
-              id: 201,
-            },
-            {
-              name: "测测测自己创建测",
-              id: 202,
-            },
-          ],
-        },
-      ];
+      this.$http.get("/apaas/support/sdk/menus").then(({ data }) => {
+        if (data.success === 1) {
+          let baseUrl = "/technical_support/sdk";
+          let menu = data.data || [];
 
-      this.navList = data.map((item) => {
-        let children = item.children;
-        let nav = {
-          name: item.name,
-          path: `${baseUrl}/${item.name}`,
-        };
+          this.navList = menu.map((item) => {
+            let children = item.children || [];
 
-        if (children.length > 0) {
-          nav.children = children.map((v) => {
-            let path = `${baseUrl}/${item.name}/${v.id}`;
+            let nav = {
+              name: item.name,
+              path: `${baseUrl}/${item.name}`,
+            };
+
+            if (children.length > 0) {
+              nav.children = children.map((v) => {
+                let path = `${baseUrl}/${item.name}/${v.id}`;
 
-            if (activePath === "") {
-              activePath = path;
+                if (this.activePath === "") {
+                  this.activePath = path;
+                }
+
+                return {
+                  name: v.name,
+                  path: path,
+                };
+              });
+              nav.open = true;
+            } else {
+              nav.disabled = true;
             }
 
-            return {
-              name: v.name,
-              path: path,
-            };
+            return nav;
           });
-          nav.open = true;
-        } else {
-          nav.disabled = true;
-        }
 
-        return nav;
+          if (this.activePath && this.$route.params.id === undefined) {
+            this.$router.push(this.activePath);
+          } else if (this.activePath === "") {
+            this.$message.error("您尚未创建任何SDK文档");
+          }
+        }
       });
-
-      if (activePath && this.$route.params.id === undefined) {
-        this.$router.push(activePath);
-      } else if (activePath === "") {
-        this.$message.error("您尚未创建任何SDK文档");
-      }
     },
   },
   mounted() {

src/router/index.js

@@ -257,6 +257,14 @@ export default new Router({
                       "@/pages/technical-support/sdk-manage/example/index"
                     ),
                 }, // SDK示例管理
+                {
+                  path: "/technical_support/sdk_manage/example/:id",
+                  name: "technicalSupportSdkExampleDetail",
+                  component: () =>
+                    import(
+                      "@/pages/technical-support/sdk-manage/example/detail"
+                    ),
+                }, // SDK示例详情
               ],
             }, // SDK管理
           ],