refactor: 批量修改样式优化

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -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/DeDrag/index.vue

@@ -1851,7 +1851,7 @@ export default {
 }
 
 .batchSetting{
-  opacity: 0.7;
+  opacity: 0.9;
 }
 
 .positionChange{

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

@@ -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/components/Editor/Preview.vue

@@ -256,13 +256,15 @@ export default {
     })
     // 监听画布div变动事件
     const tempCanvas = document.getElementById('canvasInfoTemp')
-    erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
-      _this.$nextTick(() => {
-        // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
-        _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
-        this.$emit('mainHeightChange', _this.mainHeight)
+    if (tempCanvas) {
+      erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
+        _this.$nextTick(() => {
+          // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
+          _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
+          this.$emit('mainHeightChange', _this.mainHeight)
+        })
       })
-    })
+    }
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     _this.$store.commit('clearLinkageSettingInfo', false)
     _this.canvasStyleDataInit()

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

@@ -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/store/index.js

@@ -125,7 +125,8 @@ const data = {
     changeProperties: {
       customStyle: {},
       customAttr: {}
-    }
+    },
+    allViewRender: []
   },
   mutations: {
     ...animation.mutations,
@@ -550,7 +551,7 @@ const data = {
         // get view base info
         const viewBaseInfo = state.componentViewsData[id]
         // get properties
-        const viewConfig = TYPE_CONFIGS.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
+        const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
         const viewProperties = viewConfig ? viewConfig[0].properties : []
         if (state.mixProperties.length > 0) {
           // If it exists , taking the intersection
@@ -641,6 +642,12 @@ const data = {
         customStyle: {},
         customAttr: {}
       }
+    },
+    initViewRender(state, pluginViews) {
+      pluginViews.forEach(plugin => {
+        plugin.isPlugin = true
+      })
+      state.allViewRender = [...TYPE_CONFIGS, ...pluginViews]
     }
   },
   modules: {

frontend/src/views/chart/chart/chart.js

@@ -8,7 +8,8 @@ export const DEFAULT_COLOR_CASE = {
   tableStripe: true,
   dimensionColor: '#000000',
   quotaColor: '#000000',
-  tableBorderColor: '#cfdaf4'
+  tableBorderColor: '#cfdaf4',
+  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
 }
 export const DEFAULT_SIZE = {
   barDefault: true,

frontend/src/views/chart/components/component-style/TitleSelector.vue

@@ -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

@@ -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/ChartEdit.vue

@@ -1170,7 +1170,7 @@ export default {
     chartProperties() {
       const _this = this
       if (_this.chart && _this.chart.render) {
-        const viewConfig = TYPE_CONFIGS.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
+        const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
         if (viewConfig && viewConfig.length) {
           return viewConfig[0].properties
         } else {
@@ -1188,7 +1188,8 @@ export default {
     },
     ...mapState([
       'curComponent',
-      'panelViewEditInfo'
+      'panelViewEditInfo',
+      'allViewRender'
     ])
     /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []

frontend/src/views/chart/view/ChartStyle.vue

@@ -12,7 +12,7 @@
       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">
+      <el-row v-if="!batchOptStatus" class="padding-lr">
         <span class="title-text">{{ $t('chart.style_priority') }}</span>
         <el-row>
           <el-radio-group
@@ -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/panel/list/PanelMain.vue

@@ -30,6 +30,7 @@ import PanelList from '../list/PanelList'
 import PanelViewShow from '../list/PanelViewShow'
 import ShareTree from '../GrantAuth/shareTree'
 import Enshrine from '../enshrine/index'
+import { pluginTypes } from '@/api/chart/chart'
 
 export default {
   name: 'PanelMain',
@@ -59,6 +60,16 @@ export default {
     }
   },
   mounted() {
+    // init all views (include plugins) base info
+    localStorage.removeItem('plugin-views')
+    pluginTypes().then(res => {
+      const plugins = res.data
+      localStorage.setItem('plugin-views', JSON.stringify(plugins))
+      this.$store.commit('initViewRender', plugins)
+    }).catch(e => {
+      localStorage.setItem('plugin-views', null)
+      this.$store.commit('initViewRender', plugins)
+    })
     this.clear()
   },
   methods: {