1、鼠标批量移动

qianbao
1 parent fdbb8bca
Showing 2 changed files with 57 additions and 12 deletions
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -43,6 +43,7 @@
             v-model="layerWidget"
             @update="datadragEnd"
             :options="{ animation: 300 }"
+            group="groupA"
           >
             <transition-group>
               <div
@@ -266,7 +267,7 @@
                 @onActivated="setOptionsOnClickWidget"
                 @contextmenu.prevent.native="rightClick($event, index)"
                 @mousedown.prevent.native="widgetsClick(index)"
-                @mouseup.prevent.native="widgetsMouseup"
+                @mouseup.prevent.native="widgetsMouseup($event, index)"
                 @keyup.delete.native="entryDelete(index)"
               />
             </div>
@@ -1117,6 +1118,10 @@ export default {
         return;
       }
       this.widgetIndex = obj.index;
+      let leftNew =  obj.left;
+      let topNew =  obj.top;
+      let leftOld =  this.widgets[obj.index].value.position.left;
+      let topOld = this.widgets[obj.index].value.position.top;
       this.widgets[obj.index].value.position = obj;
       this.widgets[obj.index].options.position.forEach((el) => {
         for (const key in obj) {
@@ -1126,6 +1131,10 @@ export default {
         }
       });
       this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
+      if(this.shiftEnt){
+        //批量移动
+        this.moveGroup(leftOld,leftNew,topOld,topNew);
+      }
     },
     widgetsClick(index) {
       const draggableArr = this.$refs.widgets;
@@ -1154,7 +1163,7 @@ export default {
       this.grade = true;
       this.widgetIndex = index;
     },
-    widgetsMouseup(e) {
+    widgetsMouseup(event, index) {
       this.grade = false;
     },
     handleMouseDown() {
@@ -1348,14 +1357,34 @@ export default {
         this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
       }
     },
+    showDialogBoxInput() {
+      this.$prompt('请输入分组名称', '提示',
+        {confirmButtonText: '确定',cancelButtonText: '取消'}).then(({ value }) => {
+        if (!value || value.length > 20) {
+          return this.$message.error('请输入不超过20字的分组名称')
+        }
+        const msg = "您输入了分组名称为："+value;
+        this.$message({type: 'info', message: msg});
+
+        //移除全选的选中
+        this.delSelectMore();
+
+      }).catch(() => {
+        //this.$message({type: 'info', message: '取消操作'});
+      })
+
+    },
     //添加分组
     addGroupLayer() {
       // const obj = this.widgets[this.rightClickIndex];
       // this.$set(obj.value.position, "disabled", true);
-      this.$message({
-        type: "info",
-        message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
-      });
+      // 显示输入弹框
+      this.showDialogBoxInput();
+      // this.$message({
+      //   type: "info",
+      //   message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
+      // });
+
     },
     //移除分组
     delGroupLayer() {
@@ -1387,6 +1416,16 @@ export default {
         this.setShiftEntFalse();
       }
     },
+    //移除选中
+    delSelectMore(){
+      if(this.isNotBlankArray(this.selectMore)){
+        for(let i = 0; i< this.selectMore.length;i++){
+          const index = this.selectMore[i];
+          this.$refs.widgets[index].$refs.draggable.setActive(false);
+        }
+        this.setShiftEntFalse();
+      }
+    },
     //左对齐
     setAlignment() {
       this.selectMore = this.setUnique(this.selectMore);
@@ -8,6 +8,7 @@
     :top="widgetsTop"
     ref="draggable"
     :index="index"
+    :class="{block:widgetDisabled,unblock:!widgetDisabled}"
     @focus="handleFocus"
     @blur="handleBlur"
   >
@@ -170,7 +171,7 @@ export default {
       this.$emit("onActivated", { index, left, top, width, height });
       this.$refs.draggable.setActive(true);
       // 处理widget超出workbench的问题
-      //this.handleBoundary({ index, left, top, width, height })
+      this.handleBoundary({ index, left, top, width, height })
     },
     handleBoundary({ index, left, top, width, height }) {
       // 计算workbench的X轴边界值
@@ -200,13 +201,18 @@ export default {
 .vue-draggalbe {
   position: absolute;
 }
-
-.widget-active {
+.avue-draggable--active {
   cursor: move;
-  border: 1px dashed #09f;
-  background-color: rgba(115, 170, 229, 0.5);
+  //锁定颜色
+  &.block {
+    border: 1px dashed #dc0404;
+  }
+  //未锁定颜色
+  &.unblock{
+    border: 1px dashed  #09f;
+  }
+  background-color: rgba(115,170,229,.5);
 }
-
 .avue-draggable {
   padding: 0 !important;
 }