refactor(视图-批量操作): 优化批量操作逻辑

批量操作时将第一个添加的视图或最后一个视图的属性作为默认属性
https://www.tapd.cn/55578866/bugtrace/bugs/view/1155578866001019214

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

@@ -552,12 +552,22 @@ export default {
         sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
         this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
         this.chart.customAttr = this.sourceCustomAttrStr
+        this.$store.commit('updateComponentViewsData', {
+          viewId: this.chart.id,
+          propertyKey: 'customAttr',
+          propertyValue: this.sourceCustomAttrStr
+        })
         updateParams['customAttr'] = this.sourceCustomAttrStr
       } else if (param.custom === 'customStyle') {
         const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
         sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
         this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
         this.chart.customStyle = this.sourceCustomStyleStr
+        this.$store.commit('updateComponentViewsData', {
+          viewId: this.chart.id,
+          propertyKey: 'customStyle',
+          propertyValue: this.sourceCustomStyleStr
+        })
         updateParams['customStyle'] = this.sourceCustomStyleStr
       }
       viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {

frontend/src/store/index.js

@@ -597,10 +597,22 @@ const data = {
         if (element === id) {
           delete state.batchOptViews[id]
           state.curBatchOptComponents.splice(index, 1)
-          this.commit('setBatchOptChartInfo')
           break
         }
       }
+      if (state.curBatchOptComponents.length === 1) {
+        const lastViewId = state.curBatchOptComponents[0]
+        const viewBaseInfo = state.componentViewsData[lastViewId]
+        state.changeProperties.customAttr = JSON.parse(viewBaseInfo.customAttr)
+        state.changeProperties.customStyle = JSON.parse(viewBaseInfo.customStyle)
+      }
+      if (state.curBatchOptComponents.length === 0) {
+        state.changeProperties = {
+          customStyle: {},
+          customAttr: {}
+        }
+      }
+      this.commit('setBatchOptChartInfo')
     },
     addCurBatchComponent(state, id) {
       if (id) {
@@ -610,11 +622,18 @@ const data = {
         // get properties
         const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
         if (viewConfig && viewConfig.length > 0) {
+          if (state.curBatchOptComponents.length === 1) {
+            state.changeProperties.customAttr = JSON.parse(viewBaseInfo.customAttr)
+            state.changeProperties.customStyle = JSON.parse(viewBaseInfo.customStyle)
+          }
           state.batchOptViews[id] = viewConfig[0]
           this.commit('setBatchOptChartInfo')
         }
       }
     },
+    updateComponentViewsData(state, { viewId, propertyKey, propertyValue }) {
+      state.componentViewsData[viewId][propertyKey] = propertyValue
+    },
     removeCurMultiplexingComponentWithId(state, id) {
       delete state.curMultiplexingComponents[id]
     },