拖拽

report-ui/src/views/report/excelreport/designer/index.vue

@@ -31,8 +31,7 @@
                        :sort="false"
                        group="people"
                        style="margin-left: 10px"
-                       @start="onStart(item.setCode)"
-                       @end="onEnd">
+                       @start="onStart(item.setCode, $event)">
               <!-- <transition-group> -->
               <div v-for="(i, index) in item.setParamList"
                    :key="index"
@@ -301,6 +300,7 @@ export default {
       printVisible: false,
       pop: false,
       setCode: null,
+      draggableFieldLabel: null,
       dialogVisible: false,
       dialogBarCode: false,
       paperList: [],
@@ -369,6 +369,8 @@ export default {
     },
     //初始化表格
     createSheet(){
+      //将vue对象传入
+      const that = this
       const options = {
         container: 'luckysheet', // 设定DOM容器的id
         title: 'Luckysheet Demo', // 设定表格名称
@@ -376,84 +378,13 @@ export default {
         plugins:['chart'],
         hook:{
           cellDragStop: function (cell, postion, sheetFile, ctx, event) {
-            // console.info(cell, postion, sheetFile, ctx, event);
-          },
-          rowTitleCellRenderBefore:function(rowNum,postion,ctx){
-            // console.log(rowNum);
-          },
-          rowTitleCellRenderAfter:function(rowNum,postion,ctx){
-            // console.log(ctx);
-          },
-          columnTitleCellRenderBefore:function(columnAbc,postion,ctx){
-            // console.log(columnAbc);
-          },
-          columnTitleCellRenderAfter:function(columnAbc,postion,ctx){
-            // console.log(postion);
-          },
-          cellRenderBefore:function(cell,postion,sheetFile,ctx){
-            // console.log(cell,postion,sheetFile,ctx);
-          },
-          cellRenderAfter:function(cell,postion,sheetFile,ctx){
-            // console.log(postion);
-          },
-          cellMousedownBefore:function(cell,postion,sheetFile,ctx){
-            // console.log("cellMousedownBefore", postion);
-          },
-          cellMousedown:function(cell,postion,sheetFile,ctx){
-            // console.log("cellMousedown",sheetFile);
-          },
-          sheetMousemove:function(cell,postion,sheetFile,moveState,ctx){
-            // console.log("sheetMousemove",cell,postion,sheetFile,moveState,ctx);
-          },
-          sheetMouseup:function(cell,postion,sheetFile,moveState,ctx){
-
-            console.log("sheetMouseup",cell,postion,sheetFile,moveState,ctx);
-          },
-          cellAllRenderBefore:function(data,sheetFile,ctx){
-            // console.info(data,sheetFile,ctx)
-          },
-          updated:function(operate){
-            // console.info(operate)
-          },
-          cellUpdateBefore:function(r,c,value,isRefresh){
-            // console.info('cellUpdateBefore',r,c,value,isRefresh)
-          },
-          cellUpdated:function(r,c,oldValue, newValue, isRefresh){
-            // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
-          },
-          sheetActivate:function(index, isPivotInitial, isNewSheet){
-            // console.info(index, isPivotInitial, isNewSheet)
-          },
-          rangeSelect:function(index, sheet){
-            // console.info(index, sheet)
-          },
-          commentInsertBefore:function(r, c){
-            // console.info(r, c)
-          },
-          commentInsertAfter:function(r, c, cell){
-            // console.info(r, c, cell)
-          },
-          commentDeleteBefore:function(r, c, cell){
-            // console.info(r, c, cell)
-          },
-          commentDeleteAfter:function(r, c, cell){
-            // console.info(r, c, cell)
-          },
-          commentUpdateBefore:function(r, c, value){
-            // console.info(r, c, value)
-          },
-          commentUpdateAfter:function(r, c, oldCell, newCell ){
-            // console.info(r, c, oldCell, newCell)
-          },
-          cellEditBefore:function(range ){
-            // console.info(range)
-          },
-          workbookCreateAfter:function(json){
-            // console.info(json)
-          },
-          rangePasteBefore:function(range,data){
-            // console.info('rangePasteBefore',range,data)
-            // return false; //Can intercept paste
+            // console.info("cellDragStop-cell",cell);
+            // console.info("cellDragStop-postion", postion);
+            // console.info("cellDragStop-sheetFile", sheetFile);
+            // console.info("cellDragStop-ctx",ctx);
+            // console.info("cellDragStop-event", event);
+            // console.log("cellDragStop-draggableFieldLabel", that);
+            luckysheet.setCellValue(postion.r, postion.c, that.draggableFieldLabel)
           },
         },
         data:[
@@ -505,6 +436,13 @@ export default {
         luckysheet.create(options);
       });
     },
+    onStart(setCode, evt) {
+      this.setCode = setCode
+      var fieldLabel = evt.item.innerText // 列名称
+      this.draggableFieldLabel = '#{' + this.setCode + '.' + fieldLabel + '}';
+      console.log("evt",evt)
+      console.log("draggableFieldLabel", this.draggableFieldLabel);
+    },
     async loadDataSet () {
       const { code, data } = await queryAllDataSet()
       this.dataSetData = data
@@ -589,36 +527,6 @@ export default {
         this.dataSet.push(data)
       }
     },
-    onStart (setCode) {
-      this.setCode = setCode
-      console.log(setCode)
-    },
-    onEnd (evt) {
-      // 获取结束坐标和列名
-      var x = evt.originalEvent.clientX // 结束在屏幕的x坐标
-      var y = evt.originalEvent.clientY // 结束在屏幕的y坐标
-      var fieldLabel = evt.item.innerText // 列名称
-      var excelToolbarHeight = 40 // excel工具栏
-      var leftLayout = document.getElementsByClassName('layout-left')[0].clientWidth // 左侧宽度
-      console.log(luckysheet)
-      console.log("x:",x)
-      console.log("y:",y)
-      console.log("leftLayout左侧宽度:",leftLayout)
-      // const aaa = luckysheet.sheetMouseup()
-      luckysheet.setCellValue(0,0,"哈哈哈")
-
-      // const a = luckysheet.getCellValue(0,0)
-      // debugger
-      console.log("滚动","aaa");
-      // console.log(a);
-
-
-      // 计算行列
-      // const { ri, ci } = this.sheet.datas[0].getCellRectByXY(x - leftLayout, y - excelToolbarHeight)
-      // this.sheet.cellText(ri, ci, '#{' + this.setCode + '.' + fieldLabel + '}', 0)
-      // 设定值
-      // this.sheet.reRender()
-    },
     del (val) {
       for (let i = 0; i < this.dataSet.length; i++) {
         if (this.dataSet[i].setCode === val.setCode) {