center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source 
feat(视图): 新增富文本视图
This commit is contained in:
王嘉豪 2022-08-11 11:43:35 +08:00 committed by GitHub
commit 00487979db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -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)
}
})
}
}
}
},

33
frontend/src/components/canvas/custom-component/DeRichTextView.vue
View File

@ -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() {

59
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -609,12 +609,14 @@ export default {
} else if (!err.response) {
this.httpRequest.status = false
} 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
@ -624,27 +626,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)