Skip to content

D
dataease
提交 704cb29d authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

refactor: 批量修改样式优化

上级 0d7e913a
隐藏空白字符变更
内嵌 并排
正在显示 包含 54 行增加 和 638 行删除
backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
浏览文件 @ 704cb29d
......@@ -124,7 +124,7 @@ public class PanelGroupService {
if (StringUtils.isEmpty(panelId)) { // 新建
checkPanelName(request.getName(), request.getPid(), PanelConstants.OPT_TYPE_INSERT, null, request.getNodeType());
panelId = newPanel(request);
panelGroupMapper.insert(request);
panelGroupMapper.insertSelective(request);
// 清理权限缓存
clearPermissionCache();
sysAuthService.copyAuth(panelId, SysAuthConstants.AUTH_SOURCE_TYPE_PANEL);
......
frontend/src/components/canvas/components/Editor/EditBar.vue
浏览文件 @ 704cb29d
......@@ -91,7 +91,7 @@ export default {
},
// batch operation area
batchOptAreaShow() {
return this.batchOptStatus && this.element.type === 'view'
return this.batchOptStatus && this.element.type === 'view' && !this.element.isPlugin
},
// 联动区域按钮显示
linkageAreaShow() {
......
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ 704cb29d
......@@ -412,8 +412,11 @@ export default {
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
this.sourceCustomStyleStr = this.chart.customStyle
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
// view's title use history
if (param.property === 'text') {
param.value.title = sourceCustomStyle.text.title
}
sourceCustomStyle[param.property] = param.value
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
......
frontend/src/views/chart/components/component-style/TitleSelector.vue
浏览文件 @ 704cb29d
......@@ -6,7 +6,7 @@
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item :label="$t('chart.title')" class="form-item">
<el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
......@@ -51,6 +51,7 @@
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
export default {
name: 'TitleSelector',
......@@ -79,6 +80,11 @@ export default {
}
}
},
computed: {
...mapState([
'batchOptStatus'
])
},
mounted() {
this.init()
this.initData()
......@@ -96,7 +102,9 @@ export default {
if (customStyle.text) {
this.titleForm = customStyle.text
}
this.titleForm.title = this.chart.title
if (!this.batchOptStatus) {
this.titleForm.title = this.chart.title
}
}
},
init() {
......@@ -110,15 +118,17 @@ export default {
this.fontSize = arr
},
changeTitleStyle() {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
}
}
if (!this.titleForm.show) {
this.isSetting = false
......
frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
浏览文件 @ 704cb29d
......@@ -6,7 +6,7 @@
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item :label="$t('chart.title')" class="form-item">
<el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
......@@ -43,8 +43,8 @@
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { checkTitle } from '@/api/chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
export default {
name: 'TitleSelectorAntV',
......@@ -66,6 +66,11 @@ export default {
predefineColors: COLOR_PANEL
}
},
computed: {
...mapState([
'batchOptStatus'
])
},
watch: {
'chart': {
handler: function() {
......@@ -90,7 +95,9 @@ export default {
if (customStyle.text) {
this.titleForm = customStyle.text
}
this.titleForm.title = this.chart.title
if (!this.batchOptStatus) {
this.titleForm.title = this.chart.title
}
}
},
init() {
......@@ -104,15 +111,17 @@ export default {
this.fontSize = arr
},
changeTitleStyle() {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
}
}
this.$emit('onTextChange', this.titleForm)
},
......
frontend/src/views/chart/view/ChartStyle.vue
浏览文件 @ 704cb29d
......@@ -12,8 +12,8 @@
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row v-if="chart.mode!=='batchOpt'" class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<el-row v-if="!batchOptStatus" class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }} batchOptStatus-{{ batchOptStatus }}</span>
<el-row>
<el-radio-group
v-model="view.stylePriority"
......@@ -274,6 +274,7 @@ import LegendSelectorAntV from '@/views/chart/components/component-style/LegendS
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
import { mapState } from 'vuex'
export default {
name: 'ChartStyle',
......@@ -321,7 +322,9 @@ export default {
}
},
computed: {
...mapState([
'batchOptStatus'
])
},
created() {
......
frontend/src/views/chart/view/ChartStyleBack.vue deleted 100644 → 0
浏览文件 @ 0d7e913a
<template>
<el-row class="view-panel">
<plugin-com
v-if="view.isPlugin"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
:component-name="view.type + '-style'"
:obj="{view, param, chart}"
/>
<div
v-else
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<br>
<span class="title-text">{{ view.render }}</span>
<br>
<span class="title-text">{{ view.type }}</span>
<el-row>
<el-radio-group
v-model="view.stylePriority"
class="radio-span"
size="mini"
@change="calcStyle"
>
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="color" :title="$t('chart.color')">
{{ 'color-selector' }}
<color-selector
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'echarts' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'"
name="size"
:title="$t('chart.size')"
>
{{ 'size-selector' }}
<size-selector
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap' && chart.type !== 'funnel' && chart.type !== 'bar-stack'"
name="size"
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
>
{{ 'size-selector-ant-v' }}
<size-selector-ant-v
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud' && view.type !== 'label'"
name="label"
:title="$t('chart.label')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'label-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'label-selector-ant-v' }}
</span>
<label-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
/>
<label-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
name="tooltip"
:title="$t('chart.tooltip')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'tooltip-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'tooltip-selector-ant-v' }}
</span>
<tooltip-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
/>
<tooltip-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type === 'table-pivot'"
name="totalCfg"
:title="$t('chart.total_cfg')"
>
{{ 'total-cfg' }}
<total-cfg
:param="param"
class="attr-selector"
:chart="chart"
@onTotalCfgChange="onTotalCfgChange"
/>
</el-collapse-item>
</el-collapse>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
name="xAxis"
:title="$t('chart.xAxis')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'x-axis-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'x-axis-selector-ant-v' }}
</span>
<x-axis-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
<x-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
name="yAxis"
:title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'y-axis-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'y-axis-selector-ant-v' }}
</span>
<y-axis-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
<y-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type === 'chart-mix'"
name="yAxisExt"
:title="$t('chart.yAxis_ext')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'y-axis-ext-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'y-axis-ext-selector-ant-v' }}
</span>
<y-axis-ext-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
/>
<y-axis-ext-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type.includes('radar')"
name="split"
:title="$t('chart.split')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'split-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'split-selector-ant-v' }}
</span>
<split-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
/>
<split-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
/>
</el-collapse-item>
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<span v-show="view.render && view.render === 'echarts'">
{{ 'title-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'title-selector-ant-v' }}
</span>
<title-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
/>
<title-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
name="legend"
:title="$t('chart.legend')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'legend-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'legend-selector-ant-v' }}
</span>
<legend-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
<legend-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
</el-collapse-item>
<el-collapse-item
v-if="view.customStyle && view.customStyle.background"
name="background"
:title="$t('chart.background')"
>
{{ background-color-selector }}
<background-color-selector
:param="param"
class="attr-selector"
:chart="chart"
@onChangeBackgroundForm="onChangeBackgroundForm"
/>
</el-collapse-item>
</el-collapse>
</el-row>
</div>
</el-row>
</template>
<script>
import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
import LabelSelectorAntV from '@/views/chart/components/shape-attr/LabelSelectorAntV'
import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
import TooltipSelectorAntV from '@/views/chart/components/shape-attr/TooltipSelectorAntV'
import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
import XAxisSelectorAntV from '@/views/chart/components/component-style/XAxisSelectorAntV'
import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from "@/views/chart/components/component-style/SplitSelector";
import SplitSelectorAntV from "@/views/chart/components/component-style/SplitSelectorAntV";
export default {
name: 'ChartStyleBack',
components: {
SplitSelectorAntV,
SplitSelector,
BackgroundColorSelector,
LegendSelectorAntV,
LegendSelector,
TitleSelectorAntV,
TitleSelector,
YAxisExtSelectorAntV,
YAxisExtSelector,
YAxisSelectorAntV,
YAxisSelector,
XAxisSelectorAntV,
XAxisSelector,
TotalCfg,
TooltipSelectorAntV,
TooltipSelector,
LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
},
props: {
chart: {
type: Object,
required: true
},
param: {
type: Object,
required: true
},
view: {
type: Object,
required: true
},
properties: {
type: Array,
required: false
}
},
data() {
return {
attrActiveNames: [],
styleActiveNames: []
}
},
created() {
},
methods: {
calcStyle() {
this.$emit('calcStyle')
},
onColorChange(val) {
this.$emit('onColorChange', val)
},
onSizeChange(val) {
this.$emit('onSizeChange', val)
},
onLabelChange(val) {
this.$emit('onLabelChange', val)
},
onTooltipChange(val) {
this.$emit('onTooltipChange', val)
},
onTotalCfgChange(val) {
this.$emit('onTotalCfgChange', val)
},
onChangeXAxisForm(val) {
this.$emit('onChangeXAxisForm', val)
},
onChangeYAxisForm(val) {
this.$emit('onChangeYAxisForm', val)
},
onChangeYAxisExtForm(val) {
this.$emit('onChangeYAxisExtForm', val)
},
onChangeSplitForm(val) {
this.$emit('onChangeSplitForm', val)
},
onTextChange(val) {
this.$emit('onTextChange', val)
},
onLegendChange(val) {
this.$emit('onLegendChange', val)
},
onChangeBackgroundForm(val) {
this.$emit('onChangeBackgroundForm', val)
}
}
}
</script>
<style lang='scss' scoped>
.padding-lr {
padding: 0 6px;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.view-panel {
display: flex;
height: 100%;
background-color: #f7f8fa;
}
.blackTheme .view-panel {
background-color: var(--MainBG);
}
.el-form-item {
margin-bottom: 0;
}
span {
font-size: 12px;
}
.tab-header > > > .el-tabs__header {
border-top: solid 1px #eee;
border-right: solid 1px #eee;
}
.tab-header > > > .el-tabs__item {
font-size: 12px;
padding: 0 20px !important;
}
.blackTheme .tab-header > > > .el-tabs__item {
background-color: var(--MainBG);
}
.tab-header > > > .el-tabs__nav-scroll {
padding-left: 0 !important;
}
.tab-header > > > .el-tabs__header {
margin: 0 !important;
}
.tab-header > > > .el-tabs__content {
height: calc(100% - 40px);
}
.chart-icon {
width: 20px;
height: 20px;
}
.el-radio {
margin: 5px;
}
.el-radio > > > .el-radio__label {
padding-left: 0;
}
.attr-style {
height: calc(100vh - 56px - 60px - 40px - 40px);
}
.blackTheme .attr-style {
color: var(--TextPrimary);
}
.attr-selector {
width: 100%;
height: 100%;
margin: 6px 0;
padding: 0 4px;
display: flex;
align-items: center;
background-color: white
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.dialog-css > > > .el-dialog__title {
font-size: 14px;
}
.dialog-css > > > .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css > > > .el-dialog__body {
padding: 10px 20px 20px;
}
.blackTheme .theme-border-class {
color: var(--TextPrimary) !important;
background-color: var(--ContentBG);
}
.blackTheme .padding-lr {
border-color: var(--TableBorderColor) !important;
}
.blackTheme .theme-item-class {
background-color: var(--MainBG) !important;
border-color: var(--TableBorderColor) !important;
}
.icon-class {
color: #6c6c6c;
}
.blackTheme .icon-class {
color: #cccccc;
}
.radio-span > > > .el-radio__label {
margin-left: 4px;
}
.view-title-name {
display: -moz-inline-box;
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 45px;
}
::v-deep .item-axis {
width: 128px !important;
}
::v-deep .el-slider__input {
width: 80px !important;
}
::v-deep .el-input-number--mini {
width: 100px !important;
}
::v-deep .el-slider__runway.show-input{
width: 80px!important;
}
.no-senior {
width: 100%;
text-align: center;
font-size: 12px;
padding-top: 40px;
overflow: auto;
border-right: 1px solid #e6e6e6;
height: 100%;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论