up 开发文档上传附件

src/components/doc-width-nav.vue

@@ -26,9 +26,9 @@
       </div>
     </div>
     <div class="part nav_part">
-      <h3 class="part_title">
+      <h5 class="part_title">
         <span>导航</span>
-      </h3>
+      </h5>
       <ul class="part_content nav_content apaas_scroll">
         <li
           v-for="(item, index) in navTree"
@@ -213,7 +213,7 @@ export default {
 .file {
   font-weight: normal;
   font-size: 14px;
-  margin-left: 62px;
+  margin-left: 152px;
   cursor: pointer;
   color: #515fe7;
 }

src/components/wangE.vue

 <template>
   <section class="wangeditor_class">
     <div ref="toolbar" class="toolbar"></div>
+    <div>
+      <el-upload
+      class="upload-file"
+      action="/apaas/static/image/upload"
+      :on-success="uploadSuccess"
+      :on-remove="handleRemove"
+      :data="{directory: 'file' }"
+      :limit="5"
+      :file-list="fileArray">
+      <el-button ref="upload_file" id="upload_file" size="small" type="primary" v-show="false">点击上传</el-button>
+    </el-upload>
+    </div>
+    
   </section>
 </template>
 <script>
 import E from "wangeditor";
+const { BtnMenu } = E
+//编辑器自定义按钮
+class uploadMenu extends BtnMenu {
+    constructor(editor) {
+        const $elem = E.$(
+            `<div class="w-e-menu" data-title="文档上传">
+                <i class="el-icon-upload2"></i>
+            </div>`
+        )
+        super($elem, editor)
+    }
+    clickHandler() {
+      wangEuploadFile();
+    }
+    tryChangeActive() {
+        this.active()
+    }
+}
+
 export default {
   name: "editoritem",
   data() {
     return {
       // uploadPath,
+      uploadMenu,
       editor: null,
-      info_: null
+      info_: null,
     };
   },
   model: {
@@ -31,6 +64,10 @@ export default {
       type: Boolean,
       default: false
     },
+    fileArray: {
+      type: Array,
+      default: () => []
+    }
   },
   watch: {
     isClear(val) {
@@ -59,6 +96,7 @@ export default {
   mounted() {
     this.seteditor();
     this.editor.txt.html(this.value);
+    window.wangEuploadFile = this.wangEuploadFile
   },
   methods: {
     seteditor() {
@@ -109,9 +147,45 @@ export default {
         this.info_ = html; // 绑定当前逐渐地值
         this.$emit("change", this.info_); // 将内容同步到父组件中
       };
+
+      this.editor.menus.extend('uploadMenusKey',uploadMenu)
+      this.editor.config.menus.push('uploadMenusKey')
+
       // 创建富文本编辑器
       this.editor.create();
-    }
+    },
+    wangEuploadFile() {
+      // this.$refs.upload_file.handleClick();
+      document.getElementById('upload_file').click();
+    },
+    uploadSuccess(response, file, fileList) {
+      if (response.success == 1) {
+          this.fileArray.push({
+            url: response.data,
+            name: file.name,
+          });
+          this.$emit("getNewList", this.fileArray);
+        }
+    },
+    handleRemove(file, fileList) {
+      let url = file.url;
+      let detection = true;
+      if (url) detection = url.indexOf("blob") != -1;
+      if (detection) {
+        this.fileArray.forEach((item, i, arr) => {
+          if (item.url === file.url) {
+            this.fileArray.splice(i, 1);
+          }
+        });
+      } else {
+        this.fileArray.forEach((item, i, arr) => {
+          if (item.url === file.url) {
+            this.fileArray.splice(i, 1);
+          }
+        });
+      }
+      this.$emit("getNewList", this.fileArray);
+    },
   }
 };
 </script>
@@ -142,4 +216,7 @@ export default {
   border: none!important;
   height: calc(100% - 80px)!important;
 }
+.upload-file {
+  width: 50%;
+}
 </style>

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

@@ -14,18 +14,8 @@
     </div>
 
     <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">
+      <wang-e v-model="content" @getNewList="getNewList" :fileArray="fileArray"></wang-e>
+      <div class="apaas_button pt_max">
         <el-button type="defalut" size="mini" @click="cancelAction">
           取消
         </el-button>
@@ -48,10 +38,8 @@ export default {
     return {
       title: "",
       content: "",
-      doc_file: [],
-      anotherData: {
-        directory: "file",
-      }
+      fileList: [],
+      fileArray: []
     };
   },
   computed: {
@@ -75,7 +63,7 @@ export default {
             if (data.data.doc_file && data.data.doc_file != "") {
               arr = data.data.doc_file.split(",")
               arr.forEach(e => {
-                this.doc_file.push({
+                this.fileArray.push({
                   name: helper.downloadFileFormatNew(e),
                   url: e
                 })
@@ -91,8 +79,8 @@ export default {
     },
     submitAction() {
       let arr = [];
-      if (this.doc_file && this.doc_file.length > 0 ) {
-        this.doc_file.forEach(e => {
+      if (this.fileList && this.fileList.length > 0 ) {
+        this.fileList.forEach(e => {
           arr.push(e.url)
         })
       }
@@ -116,31 +104,17 @@ export default {
           this.$message.error("保存失败");
         });
     },
-    getNewListOne(res,file) {
-      if (res.success == 1) {
-        this.doc_file.push(
-          {
-            name: file.name,
-            url: res.data
-          }
-        )
-      }
+    getNewList(fileList) {
+      this.fileList = fileList;
     },
-    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 20px;
+  height: 100%;
+  padding: 0 20px 30px;
   box-sizing: border-box;
 }
 .main_container {
@@ -150,13 +124,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(100vh - 300px);
+  height: calc(100% - 100px);
   padding: 0 20px;
   box-sizing: border-box;
 }
@@ -164,17 +138,15 @@ export default {
   border-top: 1px solid #e3e5ef;
   box-sizing: border-box;
   text-align: right;
-  padding: 30px 0;
+  padding-top: 30px;
 }
 .apaas_button .el-button + .el-button {
   margin-right: 30px;
 }
-.up_load_box {
-  padding: 20px 60% 20px 20px;
+.editpage /deep/ .wangeditor_class {
+  height: calc(100% - 200px);
 }
-.upload_ben {
-  background-color: #0f2683;
-  border-color: #0f2683;
-  color: #fff;
+.pt_max {
+  padding-top: 130px;
 }
 </style>