Merge pull request #2829 from dataease/pr@dev@feat_rich-text-view

feat(视图): 新增富文本视图

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -119,6 +119,9 @@ export default {
   },
   mounted() {
     this.initCurFields()
+    if (this.element.type === 'view') {
+      bus.$on('initCurFields-' + this.element.id, this.initCurFields)
+    }
   },
   computed: {
     detailsShow() {
@@ -218,9 +221,12 @@ export default {
     },
     initCurFields() {
       if (this.element.type === 'view') {
-        const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.element.propValue.viewId])
+        const chartInfo = this.panelViewDetailsInfo[this.element.propValue.viewId]
-        if (chartDetails.type === 'richTextView') {
+        if (chartInfo) {
-          const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields
+          this.curFields = []
+          const chartDetails = JSON.parse(chartInfo)
+          if (chartDetails.type === 'richTextView' && chartDetails.data && chartDetails.data.sourceFields) {
+            const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
             chartDetails.data.sourceFields.forEach(field => {
               if (checkAllAxisStr.indexOf(field.id) > -1) {
                 this.curFields.push(field)
@@ -228,6 +234,7 @@ export default {
             })
           }
         }
+      }
     },
     positionCheck(position) {
       return this.showPosition.includes(position)

frontend/src/components/canvas/custom-component/DeRichTextView.vue

@@ -105,61 +105,58 @@ export default {
   watch: {
     // 监听内容变化
     active(val) {
-      const _this = this
       if (!val) {
         this.canEdit = false
         this.reShow()
-        this.$nextTick(() => {
+        this.myValue = this.assignment(this.element.propValue.textValue)
-          _this.element.propValue.textValue = _this.myValue
-          _this.myValue = _this.assignment(_this.myValue)
-        })
       }
     },
     myValue(newValue) {
-      console.log('myValue===' + newValue)
+      if (this.canEdit) {
-      // this.element.propValue.textValue = newValue
+        this.element.propValue.textValue = newValue
-      // this.$store.state.styleChangeTimes++
+      }
+      this.$store.state.styleChangeTimes++
     }
   },
   mounted() {
     bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
     tinymce.init({})
     this.myValue = this.assignment(this.element.propValue.textValue)
+    bus.$on('initCurFields-' + this.element.id, this.initCurFieldsChange)
   },
   beforeDestroy() {
     bus.$off('fieldSelect-' + this.element.propValue.viewId)
   },
   methods: {
+    initCurFieldsChange() {
+      if (!this.canEdit) {
+        this.myValue = this.assignment(this.element.propValue.textValue)
+      }
+    },
     assignment(content) {
+      const _this = this
       const on = content.match(/\[(.+?)\]/g)
       if (on) {
         on.forEach(itm => {
           const ele = itm.slice(1, -1)
-          content = content.replace(itm, this.dataRowNameSelect[ele])
+          content = content.replace(itm, _this.dataRowNameSelect[ele] ? _this.dataRowNameSelect[ele] : '[字段已经删除]')
         })
       }
       return content
     },
     fieldSelect(field) {
       const value = '[' + field.name + ']'
-      const ed = tinymce.get('tinymce-view-' + this.element.id)
+      tinymce.editors['tinymce-view-' + this.element.id].insertContent(value)
-      const range = ed.selection.getRng()
-      const divNode = ed.getDoc().createElement('span')
-      divNode.innerHTML = value
-      range.insertNode(divNode)
     },
     onClick(e) {
       this.$emit('onClick', e, tinymce)
     },
     setEdit() {
       if (this.editStatus) {
-        const _this = this
         this.canEdit = true
         this.element['editing'] = true
         this.reShow()
-        this.$nextTick(() => {
+        this.myValue = this.element.propValue.textValue
-          _this.myValue = _this.element.propValue.textValue
-        })
       }
     },
     reShow() {

frontend/src/components/canvas/custom-component/UserView.vue

@@ -609,6 +609,7 @@ export default {
           } else if (!err.response) {
             this.httpRequest.status = false
           } else {
+            if (err.response) {
               this.httpRequest.status = err.response.data.success
               this.httpRequest.msg = err.response.data.message
               if (err && err.response && err.response.data) {
@@ -617,6 +618,7 @@ export default {
                 this.message = err
               }
             }
+          }
           this.isFirstLoad = false
           return true
         })
@@ -624,7 +626,10 @@ export default {
     },
     initCurFields(chartDetails) {
       this.curFields = []
-      const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields
+      this.dataRowSelect = []
+      this.dataRowNameSelect = []
+      if (chartDetails.data && chartDetails.data.sourceFields) {
+        const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
         chartDetails.data.sourceFields.forEach(field => {
           if (checkAllAxisStr.indexOf(field.id) > -1) {
             this.curFields.push(field)
@@ -644,7 +649,13 @@ export default {
           this.dataRowSelect[nameIdMap[key]] = rowData[key]
           this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key]
         }
+      }
       Vue.set(this.element.propValue, 'innerType', chartDetails.type)
+      if (chartDetails.type === 'richTextView') {
+        this.$nextTick(() => {
+          bus.$emit('initCurFields-' + this.element.id)
+        })
+      }
     },
     viewIdMatch(viewIds, viewId) {
       return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)