颜色添加拖住

添加shift键盘时候能够多选添加防抖动

颜色添加拖住
添加shift键盘时候能够多选添加防抖动
qianbao
1 parent 4ff15794
Showing 5 changed files with 124 additions and 20 deletions
config/dev.env.js
src/utils/debounce.js
src/views/bigscreenDesigner/designer/components/customColorComponents.vue
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/index.js
@@ -4,7 +4,7 @@ const prodEnv = require(&#39;./prod.env&#39;)
  
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  //BASE_API: '"http://127.0.0.1:8080/xlyReport"',
+//  BASE_API: '"http://127.0.0.1:8080/xlyReport"',
   BASE_API: '"http://weberp.xlyprint.cn/xlyReport"',
   //API_WS: '"ws://127.0.0.1:8080/api/websocket"'
 })
+/**
+ * 防抖函数
+ * @param func 用户传入的防抖函数
+ * @param wait 等待的时间
+ * @param immediate 是否立即执行
+ */
+export const debounce = function(func, wait = 50, immediate = false) {
+  // 缓存一个定时器id
+  let timer = null
+  let result
+  const debounced = function(...args) {
+    // 如果已经设定过定时器了就清空上一次的定时器
+    if (timer) {
+      clearTimeout(timer)
+    }
+    if (immediate) {
+      const callNow = !timer
+      // 等待wait的时间间隔后，timer为null的时候，函数才可以继续执行
+      timer = setTimeout(() => {
+        timer = null
+      }, wait)
+      // 未执行过，执行
+      if (callNow) result = func.apply(this, args)
+    } else {
+      // 开始一个定时器，延迟执行用户传入的方法
+      timer = setTimeout(() => {
+        // 将实际的this和参数传入用户实际调用的函数
+        func.apply(this, args)
+      }, wait)
+    }
+    return result
+  }
+  debounced.cancel = function() {
+    clearTimeout(timer)
+    timer = null
+  }
+  // 这里返回的函数时每次用户实际调用的防抖函数
+  return debounced
+}
@@ -8,7 +8,7 @@
       @click="handleAddClick"
       >新增</el-button
     >
-    <el-table :data="formData" style="width: 100%">
+    <el-table :data="formData" style="width: 100%" row-key="color">
       <el-table-column prop="color" label="颜色" align="center">
         <template slot-scope="scope">
           <span class="color-box" :style="{ background: scope.row.color }" />
@@ -70,6 +70,7 @@
   </div>
 </template>
 <script>
+import Sortable from 'sortablejs'//引入拖拽插件
 export default {
   name: "CustomColorComponents",
   model: {
@@ -96,6 +97,11 @@ export default {
       indexEditor: -1 // 编辑第几个数据
     };
   },
+  created() {
+    this.$nextTick(() => {
+      this.rowDrop()
+    });
+  },
   mounted() {},
   methods: {
     // 弹出框关闭
@@ -138,7 +144,24 @@ export default {
       this.formData.splice(index, 1);
       this.$emit("input", this.formData);
       this.$emit("change", this.formData);
-    }
+    },
+    //行拖拽
+    rowDrop () {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.el-table__body-wrapper tbody');
+      const _this = this;
+      Sortable.create(tbody, {
+        //指定父元素下可被拖拽的子元素
+        draggable: ".el-table__row",
+        onEnd ({ newIndex, oldIndex }) {
+          const currRow = _this.formData.splice(oldIndex, 1)[0];
+          _this.formData.splice(newIndex, 0, currRow);
+          //渲染父页面
+          _this.$emit("input", _this.formData);
+          _this.$emit("change", _this.formData);
+        }
+      });
+    },
   }
 };
 </script>
@@ -314,6 +314,7 @@ import { getToken } from &quot;@/utils/auth&quot;;
 import { Revoke } from "@/utils/revoke";
 import { mapMutations } from 'vuex';
 import process from "process";
+import { debounce } from '@/utils/debounce'; // 引入防抖函数
  
 export default {
   name: "Login",
@@ -378,7 +379,6 @@ export default {
           options: [],
         },
       ], // 工作区中拖放的组件
-
       // 当前激活组件
       widgetIndex: 0,
       // 当前激活组件右侧配置属性
@@ -395,6 +395,8 @@ export default {
       visibleContentMenu: false,
       rightClickIndex: -1,
       activeName: "first",
+      selectMore:[],//按住shift多选的图层
+      shiftEnt:false,//shift键盘是否按住
     };
   },
   computed: {
@@ -467,6 +469,15 @@ export default {
     window.addEventListener("mouseup", () => {
       this.grade = false;
     });
+    window.addEventListener('keydown', code => this.handleKeyDown(code)); // 监听键盘按下事件
+    window.addEventListener('keyup', code => this.handleKeyUp(code)); // 监听键盘松开事件
+
+  },
+  // 在beforeDestroy中
+  beforeDestroy() {
+    // 销毁监听键盘事件
+    window.removeEventListener('keydown', code => this.handleKeyDown(code));
+    window.removeEventListener('keyup', code => this.handleKeyUp(code));
   },
   methods: {
     ...mapMutations('dataSource', ['SET_STATIC_DATA']),
@@ -482,6 +493,19 @@ export default {
       }
       this.widgets = record;
     },
+    // 监听按下键盘事件
+    handleKeyDown: debounce(function(code) {
+      // 判断是否按住shift键，是就把pin赋值为true
+      if (code.keyCode === 16 && code.shiftKey) {
+        this.shiftEnt = true;
+      }
+    }, 500, true),
+    handleKeyUp: debounce(function(code) {
+      // 判断是否松开shift键，是就把pin赋值为false
+      if (code.keyCode === 16) {
+        this.shiftEnt = false;
+      }
+    }, 500, true),
     /**
      * @description: 重做
      * @param {*}
@@ -866,10 +890,12 @@ export default {
     },
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
     setOptionsOnClickScreen() {
-      this.screenCode = "screen";
-      // 选中不同的组件 右侧都显示第一栏
-      this.activeName = "first";
-      this.widgetOptions = getToolByCode("screen")["options"];
+      if(!this.shiftEnt) {
+        this.screenCode = "screen";
+        // 选中不同的组件 右侧都显示第一栏
+        this.activeName = "first";
+        this.widgetOptions = getToolByCode("screen")["options"];
+      }
     },
     getScreenData(data){
       const screenData = {};
@@ -909,23 +935,37 @@ export default {
     },
     widgetsClick(index) {
       const draggableArr = this.$refs.widgets;
-      for (let i = 0; i < draggableArr.length; i++) {
-        if (i == index) {
-          this.$refs.widgets[i].$refs.draggable.setActive(true);
-        } else {
-          this.$refs.widgets[i].$refs.draggable.setActive(false);
+      //判断是否按住了shift键盘
+      if(this.shiftEnt){
+        for (let i = 0; i < draggableArr.length; i++) {
+          if (i == index) {
+            this.$refs.widgets[i].$refs.draggable.setActive(true);
+          }
+        }
+        this.setOptionsOnClickWidget(index);
+        this.grade = true;
+      }else{
+        //没有按住shift键标识编辑单个
+        for (let i = 0; i < draggableArr.length; i++) {
+          if (i == index) {
+            this.$refs.widgets[i].$refs.draggable.setActive(true);
+          } else {
+            this.$refs.widgets[i].$refs.draggable.setActive(false);
+          }
         }
+        this.setOptionsOnClickWidget(index);
+        this.grade = true;
       }
-      this.setOptionsOnClickWidget(index);
-      this.grade = true;
     },
     widgetsMouseup(e) {
       this.grade = false;
     },
     handleMouseDown() {
-      const draggableArr = this.$refs.widgets;
-      for (let i = 0; i < draggableArr.length; i++) {
-        this.$refs.widgets[i].$refs.draggable.setActive(false);
+      if(!this.shiftEnt){
+        const draggableArr = this.$refs.widgets;
+        for (let i = 0; i < draggableArr.length; i++) {
+          this.$refs.widgets[i].$refs.draggable.setActive(false);
+        }
       }
     },
     setWidgetOptionsData(val){
@@ -1086,8 +1126,9 @@ export default {
       this.widgets.splice(index, 1);
     },
     //输入ctrl+c
-    entryCopy(){
-      this.copylayer();
+    entryCopy(index){
+      const obj = this.deepClone(this.widgets[index]);
+      this.widgets.splice(this.widgets.length, 0, obj);
     }
   },
 };
@@ -108,6 +108,7 @@ const screenConfig = {
         value: '',
       }],
     position: [],
+    selectMore:[]
   }
 }