diff --git a/src/pages/technical-support/doc-manage/list.vue b/src/pages/technical-support/doc-manage/list.vue
index a866ee870ab07e14c3b29e8001f360ccdc967d1a..cf892db4c3392393917b46f3a0a104c4af1ae2af 100644
--- a/src/pages/technical-support/doc-manage/list.vue
+++ b/src/pages/technical-support/doc-manage/list.vue
@@ -76,6 +76,65 @@
         </div>
       </template>
     </apass-list>
+
+    <apass-dialog ref="addDialog" title="新增">
+      <div class="add_content" slot="content">
+        <div class="add_notice">
+          <p>注：同一文档类型下可维护多个文档名称</p>
+        </div>
+        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
+          <el-form-item label="活动区域" prop="region">
+            <el-select
+              v-model="addForm.region"
+              placeholder="请选择文档类型"
+              style="width: 100%;"
+            >
+              <el-option
+                v-for="(item, index) in types"
+                :key="'add_type_' + index"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="文档名称" prop="name">
+            <el-input
+              v-model="addForm.name"
+              placeholder="请输入文档名称"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template slot="action">
+        <el-button type="defalut" size="mini" @click="AddCancelAction">
+          取消
+        </el-button>
+        <el-button type="primary" size="mini" @click="AddSubmitAction">
+          确定
+        </el-button>
+      </template>
+    </apass-dialog>
+
+    <apass-dialog
+      ref="detailDialog"
+      title="预览"
+      class="doc_manage_detail_dialog"
+      width="1340px"
+    >
+      <div
+        class="detail_content apaas_scroll"
+        slot="content"
+        v-html="detailContent"
+      ></div>
+    </apass-dialog>
+
+    <apass-dialog
+      ref="deleteDialog"
+      :msg="deleteDialogInfo.msg"
+      :submit="deleteDialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
 
@@ -145,15 +204,15 @@ export default {
         },
         {
           id: "1000002",
-          type: "平台简介",
-          name: "BD-aPaaS平台（V3.0）平台简介",
+          type: "使用须知",
+          name: "BD-aPaaS平台（V3.0）使用须知",
           person: "江阳",
           update_time: "2016-09-21  08:50:08",
         },
         {
           id: "1000003",
-          type: "平台简介",
-          name: "BD-aPaaS平台（V3.0）平台简介",
+          type: "术语说明",
+          name: "BD-aPaaS平台（V3.0）相关术语说明",
           person: "江阳",
           update_time: "2016-09-21  08:50:08",
         },
@@ -172,6 +231,24 @@ export default {
         { label: "接口文档", value: "api" },
         { label: "常见问题", value: "questions" },
       ],
+      addForm: {
+        region: "",
+        name: "",
+      },
+      addFormRules: {
+        region: [
+          { required: true, message: "请选择文档类型", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入文档名称", trigger: "blur" },
+          { max: 20, message: "长度应小于20个字符", trigger: "change" },
+        ],
+      },
+      detailContent: "",
+      deleteDialogInfo: {
+        msg: "",
+        submit: null,
+      },
     };
   },
   computed: {},
@@ -200,16 +277,40 @@ export default {
       this.$refs.list.resetCurrentPage();
     },
     viewItem(item) {
-      console.log(`view ${item.name}`);
+      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.$refs.detailDialog.show();
     },
     editItem(item) {
-      console.log(`edit ${item.name}`);
+      this.$router.push(`/technical_support/doc_manage/edit/${item.id}`);
     },
     deleteItem(item) {
-      console.log(`delete ${item.name}`);
+      this.deleteDialogInfo.msg = "是否删除该条文档？";
+      this.deleteDialogInfo.submit = () => {
+        console.log(`delete ${item.name}`);
+      };
+      this.$refs.deleteDialog.show();
     },
     addNew() {
-      console.log("addNew");
+      this.addForm = {
+        region: "introductory",
+        name: "",
+      };
+      this.$refs.addDialog.show();
+    },
+    AddCancelAction() {
+      this.$refs.addDialog.hide();
+    },
+    AddSubmitAction() {
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          console.log("AddSubmitAction");
+          this.$refs.addDialog.hide();
+        } else {
+          return false;
+        }
+      });
     },
   },
 };
@@ -219,4 +320,33 @@ export default {
 .doc_manage_container {
   height: 100%;
 }
+.add_notice {
+  display: inline-block;
+  margin: 10px auto;
+  background-color: #f4f7fc;
+  border-radius: 8px;
+  padding: 10px;
+}
+.add_notice > p {
+  font-size: 12px;
+  line-height: 16px;
+  color: #58617a;
+  padding-left: 20px;
+  background-image: url("../../../assets/imgs/ic_tishi.png");
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+.detail_content {
+  max-height: 650px;
+  overflow: auto;
+}
+</style>
+
+<style>
+.doc_manage_detail_dialog .el-dialog__body {
+  padding: 10px;
+}
+.doc_manage_detail_dialog .el-dialog__footer {
+  display: none;
+}
 </style>