From b361dc6bee6480f5a487a713a747a3be34f71735 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Sat, 24 Oct 2020 18:34:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E6=96=87=E6=A1=A3=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/side-nav-bar.vue               |  96 +++++++--
 .../technical-support/doc-manage/detail.vue   |  84 ++++++--
 .../technical-support/doc-manage/list.vue     | 198 ++++++++++++------
 src/pages/technical-support/doc/detail.vue    |  52 +++--
 src/pages/technical-support/doc/index.vue     |  71 ++++++-
 src/router/index.js                           |   9 +-
 6 files changed, 378 insertions(+), 132 deletions(-)

diff --git a/src/components/side-nav-bar.vue b/src/components/side-nav-bar.vue
index a918dae..f85461c 100644
--- a/src/components/side-nav-bar.vue
+++ b/src/components/side-nav-bar.vue
@@ -1,20 +1,47 @@
 <template>
-  <div class="side_nav_bar">
+  <div class="side_nav_bar apaas_scroll">
     <h3 class="side_nav_bar_title" @click="titleAction">
       <img :src="titleIcon" width="20" style="margin-right: 10px;" />
       <span v-text="title"></span>
     </h3>
     <ul class="side_nav_bar_list">
       <!-- active-class="current" -->
-      <router-link
-        tag="li"
-        v-for="(nav, index) in navList"
-        :class="{ current: $route.path.indexOf(nav.path) > -1 }"
-        :key="'nav' + index"
-        :to="nav.path"
-      >
-        <span v-text="nav.name"></span>
-      </router-link>
+      <template v-for="(nav, index) in navList">
+        <li v-if="nav.children && nav.children.length" :key="'nav_' + index">
+          <a class="text_clip toggle_bar" @click.prevent="toggleNav(nav)">
+            {{ nav.name }}
+
+            <i
+              :class="nav.open ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
+            ></i>
+          </a>
+          <ul class="second_list" v-show="nav.open">
+            <li v-for="(v, i) in nav.children" :key="'nav_' + index + 'v_' + i">
+              <router-link
+                class="text_clip"
+                :class="{ current: $route.path.indexOf(v.path) > -1 }"
+                :to="v.path"
+              >
+                {{ v.name }}
+              </router-link>
+            </li>
+          </ul>
+        </li>
+        <li v-else-if="nav.disabled" :key="'nav_' + index">
+          <a class="disabled text_clip">
+            {{ nav.name }}
+          </a>
+        </li>
+        <li v-else :key="'nav_' + index">
+          <router-link
+            class="text_clip"
+            :class="{ current: $route.path.indexOf(nav.path) > -1 }"
+            :to="nav.path"
+          >
+            {{ nav.name }}
+          </router-link>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
@@ -41,8 +68,8 @@ export default {
     },
     imgSrc: {
       type: String,
-      default: "tool_fuwu"
-    }
+      default: "tool_fuwu",
+    },
   },
   methods: {
     titleAction() {
@@ -50,6 +77,9 @@ export default {
         this.$router.push(this.titlePath);
       }
     },
+    toggleNav(nav) {
+      this.$set(nav, "open", !nav.open);
+    },
   },
 };
 </script>
@@ -57,6 +87,8 @@ export default {
 <style scoped>
 .side_nav_bar {
   background-color: #0d1847;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .side_nav_bar_title {
   height: 40px;
@@ -73,16 +105,48 @@ export default {
   font-size: 16px;
   color: #c3caf8;
 }
-.side_nav_bar_list > li {
+.side_nav_bar_list > li > a {
+  display: block;
   padding: 12px 10px 12px 42px;
   border-left: 5px solid #0d1847;
   font-size: 14px;
+  font-weight: bold;
   line-height: 24px;
-  color: #6573ae;
+  color: #e6ebfe;
+  text-decoration: none;
   cursor: pointer;
+  user-select: none;
+}
+.side_nav_bar_list > li > a.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.side_nav_bar_list > li > a:hover,
+.side_nav_bar_list > li > a.current {
+  border-left: 5px solid #e56600;
+  background-color: #182665;
+  color: #e6ebfe;
+}
+.toggle_bar {
+  padding-right: 30px !important;
+  position: relative;
+}
+.toggle_bar > i {
+  position: absolute;
+  top: 16px;
+  right: 8px;
+}
+.second_list > li > a {
+  display: block;
+  padding: 12px 10px 12px 56px;
+  border-left: 5px solid #0d1847;
+  font-size: 14px;
+  line-height: 24px;
+  color: #6573ae;
+  text-decoration: none;
 }
-.side_nav_bar_list > li:hover,
-.side_nav_bar_list > li.current {
+.second_list > li > a:hover,
+.second_list > li > a.current {
   border-left: 5px solid #e56600;
   background-color: #182665;
   color: #e6ebfe;
diff --git a/src/pages/technical-support/doc-manage/detail.vue b/src/pages/technical-support/doc-manage/detail.vue
index 41d5b91..7b72ec7 100644
--- a/src/pages/technical-support/doc-manage/detail.vue
+++ b/src/pages/technical-support/doc-manage/detail.vue
@@ -9,43 +9,77 @@
           开发文档
         </el-breadcrumb-item>
         <el-breadcrumb-item>
-          文档编辑
+          文档编辑 - {{ title }}
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
 
     <div class="editpage">
-      <wang-e v-model="editstr"></wang-e>
-      <div class="apaas_button" style="overflow:hidden;padding-top:30px;border-top:1px solid #e3e5ef;box-sizing:border-box;">
-        <el-button style="float:right;margin:0 30px;" type="primary" >保存</el-button>
-        <el-button style="float:right" >取消</el-button>
+      <wang-e v-model="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'
+import wangE from "@/components/wangE";
 export default {
   data() {
     return {
-      editstr:'',
+      title: "",
+      content: "",
     };
   },
-  components:{
-    wangE
-  },
-  computed: {
-    
+  components: {
+    wangE,
   },
   created() {
     if (this.$route.params.id) {
-      // 请求详情
-    } else {
-      // error
+      this.$http
+        .get("/apaas/support/document/get", {
+          params: {
+            id: this.$route.params.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.title = data.data.title;
+            this.content = data.data.content;
+          }
+        });
     }
   },
-  methods: {},
+  methods: {
+    cancelAction() {
+      this.$router.push("/technical_support/doc_manage");
+    },
+    submitAction() {
+      this.$http
+        .put("/apaas/support/document/put", {
+          id: parseFloat(this.$route.params.id),
+          content: this.content,
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.$message.success("保存成功");
+            this.$router.push("/technical_support/doc_manage")
+          } else {
+            this.$message.error(data.errMsg || "保存失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("保存失败");
+        });
+    },
+  },
 };
 </script>
 
@@ -60,17 +94,25 @@ export default {
   background-color: #fff;
   border-radius: 10px;
 }
-.editpage{
+.editpage {
   background-color: #fff;
   height: calc(100% - 45px);
   margin-bottom: 20px;
-  box-shadow: 0px 3px 6px 0px 
-		#f4f7fc;
-	border-radius: 12px;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
 }
-.editpage .wangeditor_class{
+.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>
diff --git a/src/pages/technical-support/doc-manage/list.vue b/src/pages/technical-support/doc-manage/list.vue
index cf892db..37749dc 100644
--- a/src/pages/technical-support/doc-manage/list.vue
+++ b/src/pages/technical-support/doc-manage/list.vue
@@ -83,9 +83,9 @@
           <p>注：同一文档类型下可维护多个文档名称</p>
         </div>
         <el-form ref="addForm" :model="addForm" :rules="addFormRules">
-          <el-form-item label="活动区域" prop="region">
+          <el-form-item label="活动区域" prop="style">
             <el-select
-              v-model="addForm.region"
+              v-model="addForm.style"
               placeholder="请选择文档类型"
               style="width: 100%;"
             >
@@ -98,9 +98,9 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="文档名称" prop="name">
+          <el-form-item label="文档名称" prop="title">
             <el-input
-              v-model="addForm.name"
+              v-model="addForm.title"
               placeholder="请输入文档名称"
             ></el-input>
           </el-form-item>
@@ -119,14 +119,14 @@
 
     <apass-dialog
       ref="detailDialog"
-      title="预览"
+      :title="detail.title"
       class="doc_manage_detail_dialog"
       width="1340px"
     >
       <div
         class="detail_content apaas_scroll"
         slot="content"
-        v-html="detailContent"
+        v-html="detail.content"
       ></div>
     </apass-dialog>
 
@@ -139,6 +139,7 @@
 </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";
@@ -152,28 +153,34 @@ export default {
   data() {
     return {
       paddingLeft: 25,
-      listTotal: 50,
+      listTotal: 0,
       listHeader: [
         {
           label: "文档名称",
-          prop: "name",
+          prop: "title",
           type: "button",
           callback: this.viewItem,
           width: 320,
         },
         {
           label: "文档类型",
-          prop: "type",
+          prop: "style",
+          getText: (item) => {
+            let type = this.types[item.style] || null;
+
+            return (type && type.label) || "";
+          },
           align: "center",
         },
         {
           label: "操作人",
-          prop: "person",
+          prop: "created_by",
           align: "center",
         },
         {
           label: "最后更新时间",
-          prop: "update_time",
+          prop: "updated",
+          getText: ({ updated }) => this.getTimeText(updated || ""),
           align: "center",
         },
         {
@@ -194,73 +201,90 @@ export default {
           ],
         },
       ],
-      listData: [
-        {
-          id: "1000001",
-          type: "平台简介",
-          name: "BD-aPaaS平台（V3.0）平台简介",
-          person: "江阳",
-          update_time: "2016-09-21  08:50:08",
-        },
-        {
-          id: "1000002",
-          type: "使用须知",
-          name: "BD-aPaaS平台（V3.0）使用须知",
-          person: "江阳",
-          update_time: "2016-09-21  08:50:08",
-        },
-        {
-          id: "1000003",
-          type: "术语说明",
-          name: "BD-aPaaS平台（V3.0）相关术语说明",
-          person: "江阳",
-          update_time: "2016-09-21  08:50:08",
-        },
-      ],
+      listData: [],
       topFilter: {
         name: "",
         type: "",
         time: "",
       },
       types: [
-        { label: "平台简介", value: "introductory" },
-        { label: "使用须知", value: "notice" },
-        { label: "术语说明", value: "trem" },
-        { label: "标准规范", value: "standard" },
-        { label: "操作指南", value: "guide" },
-        { label: "接口文档", value: "api" },
-        { label: "常见问题", value: "questions" },
+        {
+          label: "平台简介",
+          value: 0, // "introductory",
+        },
+        {
+          label: "使用须知",
+          value: 1, // "notice",
+        },
+        {
+          label: "术语说明",
+          value: 2, // "trem",
+        },
+        {
+          label: "标准规范",
+          value: 3, // "standard",
+        },
+        {
+          label: "操作指南",
+          value: 4, // "guide",
+        },
+        {
+          label: "接口文档",
+          value: 5, // "api",
+        },
+        {
+          label: "常见问题",
+          value: 6, // "questions",
+        },
       ],
       addForm: {
-        region: "",
-        name: "",
+        style: "",
+        title: "",
       },
       addFormRules: {
-        region: [
+        style: [
           { required: true, message: "请选择文档类型", trigger: "change" },
         ],
-        name: [
+        title: [
           { required: true, message: "请输入文档名称", trigger: "blur" },
           { max: 20, message: "长度应小于20个字符", trigger: "change" },
         ],
       },
-      detailContent: "",
+      detail: "",
       deleteDialogInfo: {
         msg: "",
         submit: null,
       },
+      tempFilter: {},
     };
   },
-  computed: {},
-  created() {},
   methods: {
     init(filter) {
       let fullFilter = {
         ...filter,
         ...this.topFilter,
       };
+      this.tempFilter = filter;
 
-      console.log(fullFilter);
+      this.$http
+        .get("/apaas/support/document/list", {
+          params: {
+            style: fullFilter.type,
+            start: fullFilter.time && fullFilter.time[0],
+            end: fullFilter.time && fullFilter.time[1],
+            limit: fullFilter.size,
+            page: fullFilter.page,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.listTotal = data.total;
+            this.listData = data.data || [];
+          }
+        });
+    },
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
     },
     topFilterAction() {
       this.refreshPage();
@@ -277,25 +301,51 @@ export default {
       this.$refs.list.resetCurrentPage();
     },
     viewItem(item) {
-      this.detailContent = `
-        <h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1><img src="http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg" style="font-size: 14px; max-width: 100%;"></h1><h1><a href="https://www.baidu.com" target="_blank" style="font-size: 14px;">链接</a></h1><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能</p><h1></h1>
-      `;
+      this.$http
+        .get("/apaas/support/document/get", {
+          params: {
+            id: item.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.detail = data.data;
+          }
+        });
+
       this.$refs.detailDialog.show();
     },
     editItem(item) {
       this.$router.push(`/technical_support/doc_manage/edit/${item.id}`);
     },
     deleteItem(item) {
-      this.deleteDialogInfo.msg = "是否删除该条文档？";
+      this.deleteDialogInfo.msg = `是否删除《${item.title}》？`;
       this.deleteDialogInfo.submit = () => {
-        console.log(`delete ${item.name}`);
+        this.$http
+          .delete("/apaas/support/document/delete", {
+            params: {
+              id: item.id,
+            },
+          })
+          .then(({ data }) => {
+            if (data.success === 1) {
+              this.$message.success("删除成功");
+              this.init(this.tempFilter);
+            } else {
+              this.$message.error("删除失败");
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            this.$message.error("删除失败");
+          });
       };
       this.$refs.deleteDialog.show();
     },
     addNew() {
       this.addForm = {
-        region: "introductory",
-        name: "",
+        style: 0,
+        title: "",
       };
       this.$refs.addDialog.show();
     },
@@ -305,8 +355,37 @@ export default {
     AddSubmitAction() {
       this.$refs.addForm.validate((valid) => {
         if (valid) {
-          console.log("AddSubmitAction");
-          this.$refs.addDialog.hide();
+          this.$http
+            .get("/apaas/support/document/checkTitle", {
+              params: this.addForm,
+            })
+            .then(({ data }) => {
+              if (data.success === 1) {
+                this.$http
+                  .post("/apaas/support/document/create", {
+                    ...this.addForm,
+                    content: "",
+                  })
+                  .then(({ data }) => {
+                    if (data.success === 1) {
+                      this.$message.success("新增成功");
+                      this.editItem(data.data);
+                    } else {
+                      this.$message.error(data.errMsg || "新增失败");
+                    }
+                  })
+                  .catch((error) => {
+                    console.log(error);
+                    this.$message.error("新增失败");
+                  });
+              } else {
+                this.$message.error("验证失败");
+              }
+            })
+            .catch((error) => {
+              console.log(error);
+              this.$message.error("验证失败");
+            });
         } else {
           return false;
         }
@@ -337,8 +416,9 @@ export default {
   background-position: left center;
 }
 .detail_content {
-  max-height: 650px;
+  height: 650px;
   overflow: auto;
+  text-align: left;
 }
 </style>
 
diff --git a/src/pages/technical-support/doc/detail.vue b/src/pages/technical-support/doc/detail.vue
index 6085429..a3dc274 100644
--- a/src/pages/technical-support/doc/detail.vue
+++ b/src/pages/technical-support/doc/detail.vue
@@ -17,8 +17,8 @@
     <div class="main_container">
       <div class="part doc_part">
         <h3 class="part_title">
-          <span>平台简介</span>
-          <span>更新时间：2020-10-20 19:00:00</span>
+          <span>{{ title || typeText }}</span>
+          <span>更新时间：{{ update_time }}</span>
         </h3>
         <div
           class="part_content doc_content apaas_scroll"
@@ -49,9 +49,13 @@
 </template>
 
 <script>
+import helper from "@/services/helper.js";
+
 export default {
   data() {
     return {
+      title: "",
+      update_time: "",
       content: "",
       navTree: [],
       curNav: "",
@@ -74,18 +78,8 @@ export default {
 
       return types[this.type];
     },
-    typeUrl() {
-      let types = {
-        introductory: "xxx",
-        notice: "xxx",
-        trem: "xxx",
-        standard: "xxx",
-        guide: "xxx",
-        api: "xxx",
-        questions: "xxx",
-      };
-
-      return types[this.type];
+    docId() {
+      return this.$route.params.id;
     },
   },
   created() {
@@ -94,9 +88,10 @@ export default {
   methods: {
     getContent() {
       let successCallback = (content) => {
-        let titles = content.match(
-          /<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
-        );
+        let titles =
+          content.match(
+            /<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
+          ) || [];
         let time = new Date().getTime();
         let pre_h1_index = 0;
         let pre_h2_index = 0;
@@ -145,10 +140,25 @@ export default {
         this.curNav = (newTitles[0] && newTitles[0].id) || "";
       };
 
-      let richTextContent = `
-        <h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1><img src="http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg" style="font-size: 14px; max-width: 100%;"></h1><h1><a href="https://www.baidu.com" target="_blank" style="font-size: 14px;">链接</a></h1><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能</p><h1></h1>
-      `;
-      successCallback(richTextContent);
+      this.$http
+        .get("/apaas/support/document/get", {
+          params: {
+            id: this.docId,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.title = data.data.title;
+            this.update_time = this.getTimeText(data.data.updated);
+
+            if (data.data.content) {
+              successCallback(data.data.content);
+            }
+          }
+        });
+    },
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
     },
     clickNav(item) {
       let target = document.querySelector(`#${item.id}`);
diff --git a/src/pages/technical-support/doc/index.vue b/src/pages/technical-support/doc/index.vue
index 3265659..9d1acf5 100644
--- a/src/pages/technical-support/doc/index.vue
+++ b/src/pages/technical-support/doc/index.vue
@@ -5,10 +5,10 @@
       imgSrc="tool_ic_kaifawendang"
       :nav-list="navList"
       :title-path="navList[0] && navList[0].path"
-      style="width: 200px;"
+      style="width: 250px;"
     ></side-nav-bar>
     <div class="main_container">
-      <router-view />
+      <router-view :key="$route.params.type + $route.params.id" />
     </div>
   </div>
 </template>
@@ -23,28 +23,41 @@ export default {
   data: () => ({
     navList: [],
   }),
-  watch: {
+  /* watch: {
     "$route.fullPath"(path) {
       this.initNavList();
     },
-  },
+  }, */
   methods: {
     initNavList() {
-      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
-        if (response.data.success == 1) {
-          let arr = response.data.data[0].Child;
+      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 < arr.length; i++) {
-            let first = arr[i];
+          for (let i = 0; i < menu.length; i++) {
+            let first = menu[i];
 
             if (first.visit_url == "/technical_support") {
               for (let j = 0; j < first.Child.length; j++) {
                 let second = first.Child[j];
 
                 if (second.visit_url == "/technical_support/doc") {
-                  this.navList = second.Child.map((item) => ({
+                  let paths = [
+                    "/technical_support/doc/introductory",
+                    "/technical_support/doc/notice",
+                    "/technical_support/doc/trem",
+                    "/technical_support/doc/standard",
+                    "/technical_support/doc/guide",
+                    "/technical_support/doc/api",
+                    "/technical_support/doc/questions",
+                  ];
+
+                  nav = second.Child.map((item, index) => ({
                     name: item.menu_name,
                     path: item.visit_url,
+                    style: paths.indexOf(item.visit_url),
                   }));
                   break;
                 }
@@ -52,6 +65,44 @@ export default {
               break;
             }
           }
+
+          Promise.all(
+            nav.map((item, index) => {
+              return this.$http.get("/apaas/support/document/menus", {
+                params: { style: item.style },
+              });
+            })
+          ).then((responses) => {
+            responses.forEach(({ data }, index) => {
+              let list = data.data || [];
+              let children = list.map((v) => ({
+                name: v.title,
+                path: nav[index].path + "/" + v.id,
+              }));
+
+              if (children.length === 0) {
+                this.$set(nav[index], "disabled", true);
+              } else {
+                if (activePath === "") {
+                  activePath = children[0].path;
+                }
+
+                this.$set(nav[index], "path", children[0].path);
+
+                if (children.length > 1) {
+                  this.$set(nav[index], "children", children);
+                  this.$set(nav[index], "open", true);
+                }
+              }
+            });
+
+            this.navList = nav;
+            if (activePath && this.$route.params.id === undefined) {
+              this.$router.push(activePath);
+            } else {
+              this.$message.error("您尚未创建任何文档");
+            }
+          });
         }
       });
     },
diff --git a/src/router/index.js b/src/router/index.js
index 2d26c8e..bd5f887 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -147,17 +147,16 @@ export default new Router({
         {
           path: "/technical_support",
           name: "technicalSupport",
-          redirect: "/technical_support/doc/",
+          redirect: "/technical_support/doc",
           component: () => import("@/pages/technical-support/index"),
           children: [
             {
-              path: "/technical_support/doc/",
+              path: "/technical_support/doc",
               name: "technicalSupportDoc",
-              redirect: "/technical_support/doc/introductory",
               component: () => import("@/pages/technical-support/doc/index"),
               children: [
                 {
-                  path: "/technical_support/doc/:type",
+                  path: "/technical_support/doc/:type/:id",
                   name: "technicalSupportDocDetail",
                   component: () =>
                     import("@/pages/technical-support/doc/detail"),
@@ -165,7 +164,7 @@ export default new Router({
               ],
             }, // 开发文档
             {
-              path: "/technical_support/doc_manage/",
+              path: "/technical_support/doc_manage",
               name: "technicalSupportDoc",
               redirect: "/technical_support/doc_manage/list",
               component: () => import("@/pages/technical-support/doc-manage/index"),
-- 
2.26.0