up 开发文档上传附件

src/components/doc-width-nav.vue

@@ -12,7 +12,17 @@
           ref="docContent"
         >
         </div>
-        <div>附件：脚接交接军军军军军军军</div>
+        <div v-if="doc_type">
+          <h3 class="doc_title">附件：
+            <span v-if="fileList && fileList.length !== 0">
+              <span v-for="(e,idx) in fileList" :key="idx" class="file" :class="'file'+idx">
+                <span @click="download(e)">{{helper.downloadFileFormatNew(e)}}</span>  
+                <br>
+              </span>
+            </span>
+            <span class="noFile" v-else>暂无</span>
+          </h3>
+        </div>
       </div>
     </div>
     <div class="part nav_part">
@@ -37,6 +47,8 @@
 </template>
 
 <script>
+import helper from "@/services/helper"
+
 export default {
   props: {
     richText: {
@@ -51,21 +63,35 @@ export default {
       type: String,
       defalut: "",
     },
+    doc_type: {
+      type: Boolean,
+      default: false
+    },
+    doc_file: {
+      type: String,
+      defalut: "",
+    }
   },
   data() {
     return {
+      helper: helper,
       content: "",
       navTree: [],
       curNav: "",
+      fileList: [],
     };
   },
   watch: {
     richText() {
       this.translate();
     },
+    doc_file() {
+      this.getFile()
+    }
   },
   mounted() {
     this.translate();
+    this.getFile()
   },
   methods: {
     translate() {
@@ -124,6 +150,17 @@ export default {
         this.curNav = (newTitles[0] && newTitles[0].id) || "";
       }
     },
+    getFile() {
+      if (this.doc_file != "") {
+        this.fileList = this.doc_file.split(",")
+      }
+    },
+    download(e) {
+      const a = document.createElement("a"); // 创建a标签
+      a.setAttribute("download", ""); // download属性
+      a.setAttribute("href", e); // href链接
+      a.click(); // 自执行点击事件  
+    }, // 下载附件
     clickNav(item) {
       let target = document.querySelector(`#${item.id}`);
 
@@ -168,6 +205,25 @@ export default {
 .doc_part {
   flex-grow: 1;
 }
+.doc_title {
+  font-weight: 700;
+  padding-left: 32px;
+  margin-top: 60px;
+}
+.file {
+  font-weight: normal;
+  font-size: 14px;
+  margin-left: 62px;
+  cursor: pointer;
+  color: #515fe7;
+}
+.file0 {
+  margin-left: 0;
+}
+.noFile {
+  font-weight: normal;
+  font-size: 14px;
+}
 .nav_part {
   width: 270px;
   flex-shrink: 0;

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

@@ -15,6 +15,16 @@
 
     <div class="editpage">
       <wang-e v-model="content"></wang-e>
+      <div class="up_load_box">
+        <el-upload
+          action="/apaas/static/image/upload"
+          :on-success="getNewListOne"
+          :on-remove="handleRemove"
+          :data="anotherData"
+          :file-list="doc_file">
+          <el-button size="small" class="upload_ben">点击上传附件</el-button>
+        </el-upload>
+      </div>
       <div class="apaas_button">
         <el-button type="defalut" size="mini" @click="cancelAction">
           取消
@@ -29,6 +39,7 @@
 
 <script>
 import wangE from "@/components/wangE";
+import helper from "@/services/helper.js";
 export default {
   components: {
     wangE,
@@ -37,6 +48,10 @@ export default {
     return {
       title: "",
       content: "",
+      doc_file: [],
+      anotherData: {
+        directory: "file",
+      }
     };
   },
   computed: {
@@ -56,6 +71,16 @@ export default {
           if (data.success === 1) {
             this.title = data.data.title;
             this.content = data.data.content;
+            let arr = [];
+            if (data.data.doc_file && data.data.doc_file != "") {
+              arr = data.data.doc_file.split(",")
+              arr.forEach(e => {
+                this.doc_file.push({
+                  name: helper.downloadFileFormatNew(e),
+                  url: e
+                })
+              })
+            }
           }
         });
     }
@@ -65,10 +90,18 @@ export default {
       this.$router.push("/technical_support/doc_manage");
     },
     submitAction() {
+      let arr = [];
+      if (this.doc_file && this.doc_file.length > 0 ) {
+        this.doc_file.forEach(e => {
+          arr.push(e.url)
+        })
+      }
+      let doc_file = arr.join(",") || ""
       this.$http
         .put("/apaas/support/document/put", {
           id: this.id,
           content: this.content,
+          doc_file: doc_file,
         })
         .then(({ data }) => {
           if (data.success === 1) {
@@ -83,14 +116,31 @@ export default {
           this.$message.error("保存失败");
         });
     },
+    getNewListOne(res,file) {
+      if (res.success == 1) {
+        this.doc_file.push(
+          {
+            name: file.name,
+            url: res.data
+          }
+        )
+      }
+    },
+    handleRemove(file) {
+      this.doc_file.forEach((item, i) => {
+        if (item.url === file.url) {
+          this.doc_file.splice(i, 1);
+        }
+      });
+    }
   },
 };
 </script>
 
 <style scoped>
 .doc_manage_container {
-  height: 100%;
-  padding: 0 20px 30px;
+  /* height: 100%; */
+  padding: 0 20px 20px;
   box-sizing: border-box;
 }
 .main_container {
@@ -100,13 +150,13 @@ export default {
 }
 .editpage {
   background-color: #fff;
-  height: calc(100% - 45px);
-  margin-bottom: 20px;
+  /* height: calc(100% - 45px); */
+  /* margin-bottom: 20px; */
   box-shadow: 0px 3px 6px 0px #f4f7fc;
   border-radius: 12px;
 }
 .editpage .wangeditor_class {
-  height: calc(100% - 100px);
+  height: calc(100vh - 300px);
   padding: 0 20px;
   box-sizing: border-box;
 }
@@ -114,9 +164,17 @@ export default {
   border-top: 1px solid #e3e5ef;
   box-sizing: border-box;
   text-align: right;
-  padding-top: 30px;
+  padding: 30px 0;
 }
 .apaas_button .el-button + .el-button {
   margin-right: 30px;
 }
+.up_load_box {
+  padding: 20px 60% 20px 20px;
+}
+.upload_ben {
+  background-color: #0f2683;
+  border-color: #0f2683;
+  color: #fff;
+}
 </style>

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

@@ -19,6 +19,8 @@
       :title="title"
       :time="update_time"
       :rich-text="content"
+      :doc_type="true"
+      :doc_file="doc_file"
     ></doc-width-nav>
   </div>
 </template>
@@ -42,6 +44,7 @@ export default {
       title: "",
       update_time: "",
       content: "",
+      doc_file: ""
     };
   },
   computed: {
@@ -85,6 +88,7 @@ export default {
             if (data.data.content) {
               this.content = data.data.content;
             }
+            this.doc_file = data.data.doc_file || ""
           }
         });
     },

src/services/helper.js

@@ -35,6 +35,25 @@ module.exports.dateFormat = function (fmt, timestamp) {
   return fmt;
 }
 
+module.exports.downloadFileFormatNew = function (fileUrl) {
+  /* 
+    input: /apaas/static/docs/image/images/1234_qq234ewr123.png
+    output: 1234.png
+  */
+  if (fileUrl != "") {
+    var temp = fileUrl.split('/')[fileUrl.split('/').length - 1]
+    var name = temp.split('_')[0]
+    var type = temp.split('_')[temp.split('_').length - 1].split('.')[1]
+    if (temp.indexOf('_') == -1) {
+      return name
+    } else {
+      return name + '.' + type
+    }
+  } else {
+    return "";
+  }
+}
+
 module.exports.dateStringTransform = function (date) {
   /* 
     input: 2020-06-12T16:38:11+08:00