优化提测报告富文本

src/views/Platform/presentation/PresentReport.vue

@@ -91,8 +91,7 @@
 
       <div class="backStyle">二. 联调详情</div>
 
-      <div id="DetailsOfProposal" class="toolbar" />
-      <div id="DetailsOfProposal1" class="text" />
+      <normal-area id="presen-children-joinTest" :value.sync="clienEdit.joinTest" :height="200" />
 
       <div class="backStyle">三. 其他</div>
 
@@ -107,10 +106,13 @@
 
 <script>
 import { launchTestUpdate, launchTestCreate } from '@/api/InterfaceReport'
-import E from 'wangeditor'
+import normalArea from '@/components/input/normalArea'
 
 export default {
   name: 'PresentReport',
+  components: {
+    normalArea
+  },
   props: {
     clienData: {
       type: Object,
@@ -159,7 +161,9 @@ export default {
       dataChange: {
         cr: 0
       },
-      DetailsOfProposal: '',
+      clienEdit: {
+        joinTest: `<p></p><table border="1" style="border: 1px solid #DEE2E7" width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>端类型</th><th>联调RD</th><th>联调结果</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`
+      },
       lateStatus: '',
       bizIdCode: '',
       projectIdCode: '',
@@ -179,12 +183,6 @@ export default {
         this.getRouterData()
       })
     })
-    this.DetailsOfProposal = new E('#DetailsOfProposal', '#DetailsOfProposal1')
-    this.DetailsOfProposal.customConfig.zIndex = 110
-    this.DetailsOfProposal.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table']
-    this.DetailsOfProposal.customConfig.onchange = (html) => { this.DetailsOfProposal = html }
-    this.DetailsOfProposal.create()
-    this.DetailsOfProposal.txt.html(`<p></p><table width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>端类型</th><th>联调RD</th><th>联调结果</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table><p></p>`)
   },
   methods: {
     getRouterData() {
@@ -240,7 +238,7 @@ export default {
           this.showCodeReview = false
         }
         this.$nextTick(() => {
-          this.DetailsOfProposal.txt.html(this.dataChange.joinTest)
+          this.clienEdit.joinTest = this.dataChange.joinTest || this.clienEdit.joinTest
         })
       }
       if (!this.clienData[0] === undefined) {
@@ -253,7 +251,7 @@ export default {
           this.dataChange = ele
           this.dataChange.lateStatus = this.lateStatus
           this.dataChange.id === undefined ? this.dataChange.id = this.clien : ''
-          typeof (this.DetailsOfProposal) === 'string' ? this.dataChange.joinTest = this.DetailsOfProposal : ''
+          this.ClientData.joinTest = this.clienEdit.joinTest
           this.userData = { ename: this.userInformation, name: this.userNames }
           this.objData = { launchTestInfo: this.dataChange, user: this.userData }
           launchTestUpdate(this.objData).then(res => {
@@ -283,7 +281,7 @@ export default {
           this.dataChange = ele
           this.dataChange.configInfo ? '' : this.dataChange.configInfo = ''
           this.dataChange.dependentComponents ? '' : this.dataChange.dependentComponents = ''
-          typeof (this.DetailsOfProposal) === 'string' ? this.dataChange.joinTest = this.DetailsOfProposal : ''
+          this.dataChange.joinTest = this.clienEdit.joinTest
           this.dataChange.bizId = Number(localStorage.getItem('bizId'))
           this.dataChange.taskIds = this.ids
           this.dataChange.type = 1
@@ -386,15 +384,6 @@ export default {
      text-align: center;
      cursor:pointer
   }
-  .toolbar {
-    border: 1px solid #DEE2E7;
-  }
-  .text {
-    font-size: 15px;
-    color: #606266;
-    border: 1px solid #DEE2E7;
-    height: auto;
-  }
   .CodeReview {
     /deep/ .el-form-item__label {
       width: 106px;

src/views/Platform/presentation/presentationReport.vue

@@ -81,13 +81,12 @@
         </el-col>
       </div>
       <el-form-item label="提测模块" style="margin: 2px 0;" />
-      <div id="DetailsOfProposal" class="toolbar" />
-      <div id="DetailsOfProposal1" class="text" />
+
+      <normal-area id="presens-children-moduleInfo" :value.sync="clienEdit.moduleInfo" :height="200" />
 
       <div class="backStyle">二. 联调详情</div>
 
-      <div id="editorContent" class="toolbar" />
-      <div id="editorContent1" class="text" />
+      <normal-area id="presens-children-joinTest" :value.sync="clienEdit.joinTest" :height="200" />
 
       <div class="backStyle">三. 其他</div>
       <div class="double">
@@ -108,10 +107,13 @@
 const _ = require('lodash')
 import moment from 'moment'
 import { launchTestUpdate, launchTestCreate } from '@/api/InterfaceReport'
-import E from 'wangeditor'
+import normalArea from '@/components/input/normalArea'
 
 export default {
   name: 'PresentationReport',
+  components: {
+    normalArea
+  },
   props: {
     clienData: {
       type: Object,
@@ -155,36 +157,19 @@ export default {
       lateStatus: 1,
       getInfo: '',
       fromDev: {},
+      clienEdit: {
+        moduleInfo: `<p></p><table border="1" style="border: 1px solid #DEE2E7" width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>提测模块</th><th>提测分支</th><th>对应RD</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`,
+        joinTest: `<p></p><table border="1" style="border: 1px solid #DEE2E7" width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>联调模块</th><th>联调RD</th><th>联调结果</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`
+      },
       ids: [],
-      editorContent: '',
       showData: false,
       showCodeReview: false,
-      DetailsOfProposal: '',
       projectIdCode: ''
     }
   },
   created() {
     this.getRouterData()
   },
-  mounted() {
-    this.editorContent = new E('#editorContent', '#editorContent1')
-    this.DetailsOfProposal = new E('#DetailsOfProposal', '#DetailsOfProposal1')
-
-    this.editorContent.customConfig.zIndex = 110
-    this.DetailsOfProposal.customConfig.zIndex = 110
-
-    this.editorContent.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table']
-    this.DetailsOfProposal.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table']
-
-    this.editorContent.customConfig.onchange = (html) => { this.editorContent = html }
-    this.DetailsOfProposal.customConfig.onchange = (html) => { this.DetailsOfProposal = html }
-
-    this.editorContent.create()
-    this.DetailsOfProposal.create()
-
-    this.editorContent.txt.html(`<p></p><table width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>联调模块</th><th>联调RD</th><th>联调结果</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table><p></p>`)
-    this.DetailsOfProposal.txt.html(`<p></p><table width="100%"><colgroup><col width="30%"><col width="30%"><col width="30%"></colgroup><thead><tr><th>提测模块</th><th>提测分支</th><th>对应RD</th></tr></thead><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table><p></p>`)
-  },
   methods: {
     getRouterData() {
       console.log(this.clienData, '提测服务端')
@@ -226,8 +211,8 @@ export default {
           this.$set(this.fromDev, 'crBy', '')
         }
         this.$nextTick(() => {
-          this.fromDev.joinTest !== null ? this.editorContent.txt.html(this.fromDev.joinTest) : ''
-          this.fromDev.moduleInfo !== null ? this.DetailsOfProposal.txt.html(this.fromDev.moduleInfo) : ''
+          this.clienEdit.moduleInfo = this.fromDev.moduleInfo || this.clienEdit.moduleInfo
+          this.clienEdit.joinTest = this.fromDev.joinTest || this.clienEdit.joinTest
         })
       }
     },
@@ -235,8 +220,8 @@ export default {
       this.$refs['fromDev'].validate((valid) => {
         if (valid) {
           const params = _.cloneDeep(this.fromDev)
-          typeof (this.editorContent) === 'string' ? params.joinTest = this.editorContent : ''
-          typeof (this.DetailsOfProposal) === 'string' ? params.moduleInfo = this.DetailsOfProposal : ''
+          params.moduleInfo = this.clienEdit.moduleInfo
+          params.joinTest = this.clienEdit.joinTest
           params.lateStatus = this.lateStatus
           params.devTimeStart = moment(params.devTimeStart).format('YYYY.MM.DD')
           params.devTimeEnd = moment(params.devTimeEnd).format('YYYY.MM.DD')
@@ -270,7 +255,8 @@ export default {
         if (valid) {
           this.fromDev = ele
           typeof (this.editorContent) === 'string' ? this.fromDev.joinTest = this.editorContent : ''
-          typeof (this.DetailsOfProposal) === 'string' ? this.fromDev.moduleInfo = this.DetailsOfProposal : ''
+          this.fromDev.moduleInfo = this.clienEdit.moduleInfo
+          this.fromDev.joinTest = this.clienEdit.joinTest
           this.fromDev.lateReason = ele.lateReason
           this.fromDev.lateStatus = this.lateStatus
           this.fromDev.bizId = Number(localStorage.getItem('bizId'))
@@ -352,15 +338,6 @@ export default {
     border-radius: 4px;
     margin: 1% 0;
   }
-  .toolbar {
-    border: 2px solid #DEE2E7;
-  }
-  .text {
-   font-size: 15px;
-   color: #606266;
-   border: 2px solid #DEE2E7;
-   height: auto;
-  }
   .CodeReview {
     /deep/ .el-form-item__label {
       width: 106px;