From 708f2ed95059b6e4eb5e46af577bdafa9b47c66a Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 11 Aug 2022 11:42:08 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E8=A7=86=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/Editor/EditBar.vue | 23 +++++--- .../custom-component/DeRichTextView.vue | 33 +++++------ .../canvas/custom-component/UserView.vue | 59 +++++++++++-------- 3 files changed, 65 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index 5ee5a22576..4d01e81d91 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/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,14 +221,18 @@ export default { }, initCurFields() { if (this.element.type === 'view') { - const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.element.propValue.viewId]) - if (chartDetails.type === 'richTextView') { - const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields - chartDetails.data.sourceFields.forEach(field => { - if (checkAllAxisStr.indexOf(field.id) > -1) { - this.curFields.push(field) - } - }) + const chartInfo = this.panelViewDetailsInfo[this.element.propValue.viewId] + if (chartInfo) { + 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) + } + }) + } } } }, diff --git a/frontend/src/components/canvas/custom-component/DeRichTextView.vue b/frontend/src/components/canvas/custom-component/DeRichTextView.vue index d46d9eba12..af43553889 100644 --- a/frontend/src/components/canvas/custom-component/DeRichTextView.vue +++ b/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.element.propValue.textValue = _this.myValue - _this.myValue = _this.assignment(_this.myValue) - }) + this.myValue = this.assignment(this.element.propValue.textValue) } }, myValue(newValue) { - console.log('myValue===' + newValue) - // this.element.propValue.textValue = newValue - // this.$store.state.styleChangeTimes++ + if (this.canEdit) { + this.element.propValue.textValue = newValue + } + 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) - const range = ed.selection.getRng() - const divNode = ed.getDoc().createElement('span') - divNode.innerHTML = value - range.insertNode(divNode) + tinymce.editors['tinymce-view-' + this.element.id].insertContent(value) }, 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() { diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index 85e8da8fed..b7a93d6806 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -607,12 +607,14 @@ export default { if (err.message && err.message.indexOf('timeout') > -1) { this.message = this.$t('panel.timeout_refresh') } else { - this.httpRequest.status = err.response.data.success - this.httpRequest.msg = err.response.data.message - if (err && err.response && err.response.data) { - this.message = err.response.data.message - } else { - this.message = err + if (err.response) { + this.httpRequest.status = err.response.data.success + this.httpRequest.msg = err.response.data.message + if (err && err.response && err.response.data) { + this.message = err.response.data.message + } else { + this.message = err + } } } this.isFirstLoad = false @@ -622,27 +624,36 @@ export default { }, initCurFields(chartDetails) { this.curFields = [] - const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields - chartDetails.data.sourceFields.forEach(field => { - if (checkAllAxisStr.indexOf(field.id) > -1) { - this.curFields.push(field) + 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) + } + }) + // Get the corresponding relationship between id and value + const nameIdMap = chartDetails.data.fields.reduce((pre, next) => { + pre[next['dataeaseName']] = next['id'] + return pre + }, {}) + const sourceFieldNameIdMap = chartDetails.data.fields.reduce((pre, next) => { + pre[next['dataeaseName']] = next['name'] + return pre + }, {}) + const rowData = chartDetails.data.tableRow[0] + for (const key in rowData) { + this.dataRowSelect[nameIdMap[key]] = rowData[key] + this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key] } - }) - // Get the corresponding relationship between id and value - const nameIdMap = chartDetails.data.fields.reduce((pre, next) => { - pre[next['dataeaseName']] = next['id'] - return pre - }, {}) - const sourceFieldNameIdMap = chartDetails.data.fields.reduce((pre, next) => { - pre[next['dataeaseName']] = next['name'] - return pre - }, {}) - const rowData = chartDetails.data.tableRow[0] - for (const key in rowData) { - 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)