Merge pull request #313 from dataease/fix_panel_edit_attr-auto-save

feat:组件样式修改时可以延迟保存组件镜像

frontend/src/components/canvas/components/RectangleAttr.vue

@@ -3,7 +3,7 @@
     <div style="position: relative;">
       <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
         <el-tooltip content="边框风格">
-          <el-select v-model="styleInfo.borderStyle" size="mini">
+          <el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
             <el-option
               v-for="item in lineStyle"
               :key="item.value"
@@ -21,7 +21,7 @@
 
       <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-tooltip content="边框宽度">
-          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
+          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
             <el-option
               v-for="item in lineFont"
               :key="item.value"
@@ -32,29 +32,13 @@
         </el-tooltip>
       </div>
 
-      <el-tooltip :content="$t('panel.borderRadius')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" />
-      </div>
-
-      <el-tooltip :content="$t('panel.opacity')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" />
-      </div>
-
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="边框颜色">
             <i class="iconfont icon-huabi" @click="goBoardColor" />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
 
@@ -64,10 +48,9 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
-
     </div>
   </el-card>
 </template>
@@ -118,20 +101,7 @@ export default {
       }, {
         value: '5',
         label: '5'
-      }],
+      }]
-      innerOpacity: 0
-    }
-  },
-  watch: {
-    innerOpacity: {
-      handler(oldVal, newVal) {
-        this.styleInfo['opacity'] = this.innerOpacity / 100
-      }
-    }
-  },
-  mounted() {
-    if (this.styleInfo['opacity']) {
-      this.innerOpacity = this.styleInfo['opacity'] * 100
     }
   },
   computed: {
@@ -188,6 +158,9 @@ export default {
       } else {
         return y
       }
+    },
+    styleChange() {
+      this.$store.state.styleChangeTimes++
     }
   }
 }
@@ -203,7 +176,7 @@ export default {
   .el-card-main {
     height: 34px;
     z-index: 10;
-    width: 400px;
+    width: 210px;
     position: absolute;
 
   }

frontend/src/components/canvas/store/snapshot.js

@@ -7,7 +7,8 @@ export default {
     snapshotStyleData: [], // 样式改变也记录快照
     snapshotIndex: -1, // 快照索引
     changeTimes: -1, // 修改次数
-    lastSaveSnapshotIndex: 0 // 最后保存是snapshotIndex的索引
+    lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
+    styleChangeTimes: 0 // 组件样式修改次数
   },
   mutations: {
     undo(state) {

frontend/src/store/index.js

@@ -72,6 +72,7 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
+      state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index
     },

frontend/src/views/Tinymce/FilterTextAttr.vue

@@ -7,7 +7,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
+        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange"/>
       </div>
 
       <el-tooltip :content="$t('panel.fontWeight')">
@@ -15,7 +15,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
+        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange"/>
       </div>
 
       <el-tooltip :content="$t('panel.letterSpacing')">
@@ -23,7 +23,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
+        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange"/>
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@@ -32,7 +32,7 @@
             <i class="icon iconfont icon-zimua" @click="goColor" />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
 
@@ -42,7 +42,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
     </div>
@@ -136,6 +136,10 @@ export default {
       } else {
         return y
       }
+    },
+    styleChange() {
+      debugger
+      this.$store.state.styleChangeTimes++
     }
   }
 }

frontend/src/views/Tinymce/RectangleAttr.vue

@@ -1,184 +0,0 @@
-<template>
-  <el-card class="el-card-main" :style="mainStyle">
-    <div style="position: relative;">
-      <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
-        <el-tooltip content="边框风格">
-          <el-select v-model="styleInfo.borderStyle" size="mini">
-            <el-option
-              v-for="item in lineStyle"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-              <span style="float: left;">
-                <i :class="item.icon" />
-              </span>
-              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
-            </el-option>
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="边框宽度">
-          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
-            <el-option
-              v-for="item in lineFont"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="边框颜色">
-            <i class="iconfont icon-huabi" @click="goBoardColor" />
-          </el-tooltip>
-          <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
-        </div>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
-            <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
-          </el-tooltip>
-          <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    scrollLeft: {
-      type: Number,
-      default: 0
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      lineStyle: [{
-        icon: 'iconfont icon-solid_line',
-        value: 'solid',
-        label: '实线'
-      }, {
-        icon: 'iconfont icon-xuxian',
-        value: 'dashed',
-        label: '虚线'
-      }, {
-        icon: 'iconfont icon-dianxian',
-        value: 'dotted',
-        label: '点线'
-      }],
-      lineFont: [{
-        value: '0',
-        label: '0'
-      }, {
-        value: '1',
-        label: '1'
-      }, {
-        value: '2',
-        label: '2'
-      }, {
-        value: '3',
-        label: '3'
-      }, {
-        value: '4',
-        label: '4'
-      }, {
-        value: '5',
-        label: '5'
-      }]
-    }
-  },
-  computed: {
-
-    boardDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.borderColor
-      }
-      return style
-    },
-    backgroundDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.backgroundColor
-      }
-      return style
-    },
-
-    mainStyle() {
-      const style = {
-        left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
-      }
-      return style
-    },
-    styleInfo() {
-      return this.$store.state.curComponent.style
-    },
-    ...mapState([
-      'curComponent',
-      'curCanvasScale',
-      'canvasStyleData'
-    ])
-
-  },
-  methods: {
-    goBoardColor() {
-      this.$refs.boardColorPicker.handleTrigger()
-    },
-    goBackgroundColor() {
-      this.$refs.backgroundColorPicker.handleTrigger()
-    },
-    getPositionX(x) {
-      if (this.canvasStyleData.selfAdaption) {
-        return (x * this.curCanvasScale.scaleWidth / 100) + 60
-      } else {
-        return x + 60
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * this.curCanvasScale.scaleHeight / 100
-      } else {
-        return y
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    width: 210px;
-    position: absolute;
-
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
-
-  }
-</style>

frontend/src/views/Tinymce/TextAttr.vue

@@ -2,7 +2,7 @@
   <el-card class="el-card-main" :style="mainStyle">
     <div style="position: relative;">
       <div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-radio-group v-model="styleInfo.textAlign" size="mini">
+        <el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
           <el-radio-button
             v-for="item in textAlignOptions"
             :key="item.label"
@@ -22,7 +22,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
+        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange" />
       </div>
 
       <el-tooltip :content="$t('panel.fontWeight')">
@@ -30,7 +30,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
+        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange" />
       </div>
 
       <el-tooltip :content="$t('panel.letterSpacing')">
@@ -38,7 +38,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
+        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@@ -47,7 +47,7 @@
             <i class="icon iconfont icon-zimua" @click="goColor" />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
 
@@ -57,7 +57,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
     </div>
@@ -151,6 +151,9 @@ export default {
       } else {
         return y
       }
+    },
+    styleChange() {
+      this.$store.state.styleChangeTimes++
     }
   }
 }

frontend/src/views/panel/edit/index.vue

@@ -275,7 +275,8 @@ export default {
       currentDropElement: null,
       adviceGroupId: null,
       scrollLeft: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      timeMachine: null
     }
   },
 
@@ -306,6 +307,12 @@ export default {
     },
     panelInfo(newVal, oldVal) {
       this.init(newVal.id)
+    },
+    '$store.state.styleChangeTimes'() {
+      if (this.$store.state.styleChangeTimes > 0) {
+        this.destroyTimeMachine()
+        this.recordStyleChange(this.$store.state.styleChangeTimes)
+      }
     }
   },
   created() {
@@ -675,6 +682,21 @@ export default {
       debugger
       this.scrollLeft = event.target.scrollLeft
       this.scrollTop = event.target.scrollTop
+    },
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+
+    // 如果内部样式有变化 1秒钟后保存一个镜像
+    recordStyleChange(index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.$store.state.styleChangeTimes) {
+          this.$store.commit('recordSnapshot')
+          this.$store.state.styleChangeTimes = 0
+        }
+        this.destroyTimeMachine()
+      }, 1000)
     }
   }
 }