forked from github/dataease
feat: 修改文字组件样式
This commit is contained in:
wangjiahao
parent
8aaf2aa0b6
commit
a7b67c5c64
@ -45,7 +45,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
|
||||
excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
|
||||
textAlignOptions: [
|
||||
{
|
||||
label: this.$t('panel.text_align_left'),
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div class="attr-list">
|
||||
<el-form label-width="80px" size="mini">
|
||||
<el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]+':'">
|
||||
<el-form-item v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))" :key="index" :label="map[key]+':'">
|
||||
<el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
|
||||
<el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
|
||||
<el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
|
||||
@ -34,18 +34,39 @@
|
||||
</el-select>
|
||||
<el-input v-else v-model="curComponent.style[key]" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')+':'">
|
||||
<el-input v-model="curComponent.propValue" type="textarea" />
|
||||
<el-form-item :label="$t('panel.content_style')+':'">
|
||||
<div v-if="curComponent.type==='v-text'" style="width: 100%;max-height: 400px;overflow: auto">
|
||||
<VText
|
||||
style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
|
||||
:prop-value="curComponent.propValue"
|
||||
:element="curComponent"
|
||||
:edit-mode="'edit'"
|
||||
:style="getComponentStyleDefault(curComponent.style)"
|
||||
/>
|
||||
</div>
|
||||
<rect-shape
|
||||
v-if="curComponent.type==='rect-shape'"
|
||||
style="width: 200px!important;height: 100px!important;"
|
||||
:prop-value="curComponent.propValue"
|
||||
:element="curComponent"
|
||||
:style="getComponentStyleDefault(curComponent.style)"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VText from '@/components/canvas/custom-component/VText'
|
||||
import RectShape from '@/components/canvas/custom-component/RectShape'
|
||||
import { getStyle } from '@/components/canvas/utils/style'
|
||||
export default {
|
||||
components: { VText, RectShape },
|
||||
data() {
|
||||
return {
|
||||
excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
|
||||
excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
|
||||
textAlignOptions: [
|
||||
{
|
||||
label: this.$t('panel.text_align_left'),
|
||||
@ -113,6 +134,35 @@ export default {
|
||||
},
|
||||
curComponent() {
|
||||
return this.$store.state.curComponent
|
||||
},
|
||||
styleFilter() {
|
||||
const filter = [
|
||||
'fontSize',
|
||||
'fontWeight',
|
||||
'lineHeight',
|
||||
'letterSpacing',
|
||||
'textAlign',
|
||||
'color',
|
||||
'borderColor',
|
||||
'borderWidth',
|
||||
'backgroundColor',
|
||||
'borderStyle',
|
||||
'verticalAlign'
|
||||
]
|
||||
if (this.$store.state.curComponent.type === 'v-text') {
|
||||
filter.push('width', 'height')
|
||||
}
|
||||
return filter
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getComponentStyleDefault(style) {
|
||||
if (this.$store.state.curComponent.type === 'v-text') {
|
||||
return getStyle(style, ['top', 'left', 'rotate'])
|
||||
} else {
|
||||
return getStyle(style, ['top', 'left', 'rotate', 'height', 'width'])
|
||||
}
|
||||
// return style
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<ul @mouseup="handleMouseUp">
|
||||
<template v-if="curComponent">
|
||||
<template v-if="!curComponent.isLock">
|
||||
<li @click="edit"> {{ $t('panel.edit') }}</li>
|
||||
<li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
|
||||
<!-- <li @click="copy"> {{ $t('panel.copy') }}</li>-->
|
||||
<li @click="paste"> {{ $t('panel.paste') }}</li>
|
||||
<li @click="cut"> {{ $t('panel.cut') }}</li>
|
||||
@ -28,7 +28,13 @@ import bus from '@/utils/bus'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
copyData: null
|
||||
copyData: null,
|
||||
editFilter: [
|
||||
'view',
|
||||
'v-text',
|
||||
'rect-shape',
|
||||
'custom'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
@ -44,7 +50,7 @@ export default {
|
||||
// 编辑时临时保存 当前修改的画布
|
||||
this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
|
||||
this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
|
||||
if (this.curComponent.component === 'user-view') {
|
||||
if (this.curComponent.type === 'view') {
|
||||
this.$store.dispatch('chart/setViewId', null)
|
||||
this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
|
||||
bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
|
||||
@ -52,7 +58,12 @@ export default {
|
||||
if (this.curComponent.type === 'custom') {
|
||||
bus.$emit('component-dialog-edit')
|
||||
}
|
||||
// 编辑组件
|
||||
|
||||
//编辑样式组件
|
||||
|
||||
if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
|
||||
bus.$emit('component-dialog-style')
|
||||
}
|
||||
},
|
||||
lock() {
|
||||
this.$store.commit('lock')
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
:class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
|
||||
:snap="true"
|
||||
:snap-tolerance="1"
|
||||
:change-style="customStyleHistory"
|
||||
@refLineParams="getRefLineParams"
|
||||
>
|
||||
<component
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<span>自适应画布区域 </span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-config" style="margin-right: 40px">
|
||||
<div class="canvas-config" style="margin-right: 55px">
|
||||
<span> {{ $t('panel.canvas_size') }} </span>
|
||||
<input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
|
||||
<span>*</span>
|
||||
@ -27,13 +27,13 @@
|
||||
<el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">
|
||||
<el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">-->
|
||||
<!-- <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">
|
||||
<el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">-->
|
||||
<!-- <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<el-tooltip :content="$t('panel.undo') ">
|
||||
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="rect-shape">
|
||||
<v-text :propValue="element.propValue" :element="element" />
|
||||
<v-text :prop-value="element.propValue" :element="element" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
export default {
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
type: Object
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -47,18 +47,18 @@ const list = [
|
||||
id: '10001',
|
||||
component: 'v-text',
|
||||
label: '文字',
|
||||
propValue: '双击编辑文字',
|
||||
propValue: '双击输入文字',
|
||||
icon: 'wenben',
|
||||
type: 'v-text',
|
||||
style: {
|
||||
width: 200,
|
||||
height: 22,
|
||||
fontSize: 14,
|
||||
width: 300,
|
||||
height: 100,
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
letterSpacing: 0,
|
||||
textAlign: '',
|
||||
color: ''
|
||||
color: '#000000'
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -119,22 +119,15 @@ const list = [
|
||||
style: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
letterSpacing: 0,
|
||||
textAlign: 'center',
|
||||
color: '',
|
||||
borderColor: '#000',
|
||||
borderWidth: 1,
|
||||
backgroundColor: '',
|
||||
borderStyle: 'solid',
|
||||
verticalAlign: 'middle'
|
||||
borderStyle: 'solid'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '10005',
|
||||
component: 'user-view',
|
||||
component: 'view',
|
||||
label: '用户视图',
|
||||
propValue: '',
|
||||
icon: 'juxing',
|
||||
|
||||
@ -996,7 +996,8 @@ export default {
|
||||
other_module: 'Other',
|
||||
content: 'Content',
|
||||
default_panel_name: 'Default Dashboard Name',
|
||||
source_panel_name: 'Source Dashboard Name'
|
||||
source_panel_name: 'Source Dashboard Name',
|
||||
content_style: 'Content Style',
|
||||
},
|
||||
plugin: {
|
||||
local_install: 'Local installation',
|
||||
|
||||
@ -996,7 +996,8 @@ export default {
|
||||
other_module: '其他',
|
||||
content: '内容',
|
||||
default_panel_name: '默认仪表板名称',
|
||||
source_panel_name: '原仪表板名称'
|
||||
source_panel_name: '原仪表板名称',
|
||||
content_style: '内容样式'
|
||||
},
|
||||
plugin: {
|
||||
local_install: '本地安裝',
|
||||
|
||||
@ -996,7 +996,8 @@ export default {
|
||||
other_module: '其他',
|
||||
content: '内容',
|
||||
default_panel_name: '默认仪表板名称',
|
||||
source_panel_name: '原仪表板名称'
|
||||
source_panel_name: '原仪表板名称',
|
||||
content_style: '内容样式'
|
||||
},
|
||||
plugin: {
|
||||
local_install: '本地安装',
|
||||
|
||||
@ -103,6 +103,24 @@ div:focus {
|
||||
}
|
||||
}
|
||||
|
||||
.de-style-dialog {
|
||||
min-width: 500px !important;
|
||||
width: 300px !important;
|
||||
|
||||
.el-dialog__header{
|
||||
// background-color: #f4f4f5;
|
||||
padding: 10px 20px !important;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 15px !important;
|
||||
}
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding: 1px 15px !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.preview-dialog {
|
||||
padding: 0px!important;
|
||||
.el-dialog--center{
|
||||
|
||||
@ -104,10 +104,10 @@
|
||||
<Editor v-if="!previewVisible" :out-style="outStyle" />
|
||||
</div>
|
||||
</de-main-container>
|
||||
<de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
|
||||
<AttrListExtend v-if="curComponent" />
|
||||
<p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
|
||||
</de-aside-container>
|
||||
<!-- <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
|
||||
<!-- <AttrListExtend v-if="curComponent" />-->
|
||||
<!-- <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>-->
|
||||
<!-- </de-aside-container>-->
|
||||
|
||||
</de-container>
|
||||
|
||||
@ -135,6 +135,21 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--文字组件对话框-->
|
||||
<el-dialog
|
||||
v-if="styleDialogVisible"
|
||||
:title="$t('panel.style')"
|
||||
:visible.sync="styleDialogVisible"
|
||||
custom-class="de-style-dialog"
|
||||
>
|
||||
<AttrListExtend v-if="curComponent" />
|
||||
<div style="text-align: center">
|
||||
<span slot="footer">
|
||||
<el-button size="mini" @click="closeStyleDialog">{{ $t('commons.confirm') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
|
||||
<Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
|
||||
</fullscreen>
|
||||
@ -222,7 +237,8 @@ export default {
|
||||
width: null,
|
||||
height: null
|
||||
},
|
||||
beforeDialogValue: []
|
||||
beforeDialogValue: [],
|
||||
styleDialogVisible: false
|
||||
}
|
||||
},
|
||||
|
||||
@ -234,7 +250,8 @@ export default {
|
||||
'curComponent',
|
||||
'isClickComponent',
|
||||
'canvasStyleData',
|
||||
'curComponentIndex'
|
||||
'curComponentIndex',
|
||||
'componentData'
|
||||
])
|
||||
},
|
||||
|
||||
@ -266,7 +283,10 @@ export default {
|
||||
})
|
||||
|
||||
bus.$on('component-dialog-edit', () => {
|
||||
this.eidtDialog()
|
||||
this.editDialog()
|
||||
})
|
||||
bus.$on('component-dialog-style', () => {
|
||||
this.styleDialogVisible = true
|
||||
})
|
||||
|
||||
bus.$on('previewFullScreenClose', () => {
|
||||
@ -400,7 +420,7 @@ export default {
|
||||
this.currentFilterCom.id = newComponentId
|
||||
if (this.currentWidget.filterDialog) {
|
||||
this.show = false
|
||||
this.openFilterDiolog()
|
||||
this.openFilterDialog()
|
||||
return
|
||||
}
|
||||
component = deepCopy(this.currentFilterCom)
|
||||
@ -413,6 +433,14 @@ export default {
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot')
|
||||
this.clearCurrentInfo()
|
||||
|
||||
debugger
|
||||
// 文字组件
|
||||
if (component.type === 'v-text' || component.type === 'rect-shape') {
|
||||
this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
|
||||
this.styleDialogVisible = true
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
clearCurrentInfo() {
|
||||
this.currentWidget = null
|
||||
@ -440,7 +468,7 @@ export default {
|
||||
this.$store.commit('hideContextMenu')
|
||||
}
|
||||
},
|
||||
openFilterDiolog() {
|
||||
openFilterDialog() {
|
||||
this.beforeDialogValue = []
|
||||
this.filterVisible = true
|
||||
},
|
||||
@ -463,11 +491,11 @@ export default {
|
||||
this.currentFilterCom = component
|
||||
this.$forceUpdate()
|
||||
},
|
||||
eidtDialog() {
|
||||
editDialog() {
|
||||
const serviceName = this.curComponent.serviceName
|
||||
this.currentWidget = ApplicationContext.getService(serviceName)
|
||||
this.currentFilterCom = this.curComponent
|
||||
this.openFilterDiolog()
|
||||
this.openFilterDialog()
|
||||
},
|
||||
closeLeftPanel() {
|
||||
this.show = false
|
||||
@ -494,6 +522,9 @@ export default {
|
||||
// console.log(canvasHeight + '--' + canvasWidth)
|
||||
})
|
||||
}
|
||||
},
|
||||
closeStyleDialog() {
|
||||
this.styleDialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user