表格内容可左右拖拽

src/views/module_kzks/projectCostList/ProjectCostList.vue

@@ -160,7 +160,7 @@
           </a-popover>
         </span>
       </div>
-
+ 
       <a-table
         ref="table"
         size="middle"
@@ -174,6 +174,9 @@
         class="j-table-force-nowrap"
         :expandedRowKeys="expandedRowKeys"
         @expand="onExpand"
+        @mousedown.native="mouseDownHandler"
+        @mouseup.native="mouseUpHandler"
+        @mousemove.native="mouseMoveHandler"
         :rowSelection="{
           selectedRowKeys: selectedRowKeys,
           onChange: onSelectChange,
@@ -226,7 +229,7 @@
 
         <span slot="contractfpe" slot-scope="text, record">
           <!-- <a-button type="link">{{text}}</a-button> -->
-          <a-button type="link" @click="detailClick(text,record,'contractfpe','合同额')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
+          <a-button type="link" @click.native="detailClick(text,record,'contractfpe','合同额')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
         </span>
         <span slot="taskmoney" slot-scope="text, record">
           <a-button type="link" @click="detailClick(text,record,'taskmoney','已收款')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
@@ -241,7 +244,7 @@
           <a-button type="link" @click="detailClick(text,record,'swf','事务费')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
         </span>
         <span slot="wxf" slot-scope="text, record">
-          <a-button type="link" @click="detailClick(text,record,'wxf','外协费')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
+          <a-button type="link" @click.native="detailClick(text,record,'wxf','外协费')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
         </span>
         <span slot="zjcb" slot-scope="text, record">
           <a-button type="link" @click="detailClick(text,record,'zjcb','装机成本')" :style="{color: (record.children || record.id === 'amount') ? 'rgba(0,0,0,.65)' : ''}">{{(Number(text)/10000).toFixed(2)}}</a-button>
@@ -279,6 +282,7 @@
         </span>
 
       </a-table>
+
     </div>
 
     <project-detail-modal ref="proCostDetail"></project-detail-modal>
@@ -742,6 +746,12 @@ import { number } from 'echarts';
         },
         dictOptions:{},
         superFieldList:[],
+
+        // 拖拽
+        handlerFirstTime: null,
+        isClick: false,
+        mouseFlag: false,
+        mouseOffset: null,
       }
     },
     created() {
@@ -755,6 +765,29 @@ import { number } from 'echarts';
       },
     },
     methods: {
+      // 按下鼠标记录鼠标位置
+      mouseDownHandler(e) {
+        this.mouseOffset = e.clientX;
+        this.handlerFirstTime = new Date().getTime()
+        this.mouseFlag = true;
+      },
+      mouseUpHandler(e) {
+        var lastTime = new Date().getTime();
+        this.mouseFlag = false;
+        if( (lastTime - this.handlerFirstTime) < 100){
+          this.isClick = true
+        } else {
+          this.isClick = false
+        }
+      },
+      mouseMoveHandler(e) {
+        // 这里面需要注意，通过ref需要那个那个包含table元素的父元素
+        let v=document.getElementsByClassName("ant-table-body")[0]
+        if (this.mouseFlag) {
+          // 设置水平方向的元素的位置
+          v.scrollLeft -= (- this.mouseOffset + (this.mouseOffset = e.clientX));
+        }
+      },
       loadData(arg) {
         console.log(111)
         if(!this.url.list){
@@ -801,54 +834,6 @@ import { number } from 'echarts';
       },
       initDictConfig(){
       },
-      getSuperFieldList(){
-        let fieldList=[];
-        fieldList.push({type:'string',value:'taskno',text:'任务号',dictCode:''})
-        fieldList.push({type:'string',value:'taskname',text:'任务名称',dictCode:''})
-        fieldList.push({type:'string',value:'xhname',text:'型号',dictCode:''})
-        fieldList.push({type:'date',value:'jhwcsj',text:'计划完成时间'})
-        fieldList.push({type:'string',value:'yzjdname',text:'阶段',dictCode:''})
-        fieldList.push({type:'string',value:'processpercent',text:'项目进度',dictCode:''})
-        fieldList.push({type:'string',value:'costPercent',text:'成本进度',dictCode:''})
-        fieldList.push({type:'int',value:'yzsl',text:'研制数量',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'oneIncome',text:'单台收入',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'oneCost',text:'单台成本',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'oneProfit',text:'单台利润',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'lre',text:'利润额',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'lrl',text:'利润率',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'estimationcoat',text:'预估价',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'contractfpe',text:'合同额',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'taskmoney',text:'已收款',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'zcb',text:'总成本',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'clf',text:'材料费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'zyf',text:'专用费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'swf',text:'事务费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'wxf',text:'外协费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'rldlf',text:'燃料动力费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'gdzczj',text:'固定资产折旧',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'gzjlwf',text:'工资及劳务费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'glf',text:'管理费',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'zjcb',text:'装机成本',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'lbsy',text:'内部试验',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'workhour',text:'工时(h)',dictCode:''})
-        fieldList.push({type:'string',value:'zrbm',text:'责任部门',dictCode:''})
-        fieldList.push({type:'int',value:'jycsid',text:'下达部门id',dictCode:''})
-        fieldList.push({type:'string',value:'jycs',text:'下达部门',dictCode:''})
-        // fieldList.push({type:'int',value:'hxzxid',text:'1：横向 2：纵向/来自科研任务',dictCode:''})
-        fieldList.push({type:'string',value:'hxzxname',text:'横向纵向',dictCode:''})
-        fieldList.push({type:'string',value:'tasktype',text:'任务类型',dictCode:''})
-        fieldList.push({type:'string',value:'auditprice',text:'审计审价',dictCode:''})
-        fieldList.push({type:'string',value:'iflag',text:'任务状态',dictCode:''})
-        fieldList.push({type:'string',value:'brief',text:'提出单位简称',dictCode:''})
-        fieldList.push({type:'int',value:'reftaskno',text:'父级任务',dictCode:''})
-        fieldList.push({type:'int',value:'pccode',text:'批产任务号',dictCode:''})
-        fieldList.push({type:'int',value:'bccode',text:'备产任务号',dictCode:''})
-        fieldList.push({type:'int',value:'blcode',text:'备料任务号',dictCode:''})
-        fieldList.push({type:'string',value:'businessman',text:'业务员',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'sjgs',text:'设计工时',dictCode:''})
-        fieldList.push({type:'BigDecimal',value:'scgs',text:'生产工时',dictCode:''})
-        this.superFieldList = fieldList
-      },
       initColumns(){
         //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
         // this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
@@ -899,6 +884,9 @@ import { number } from 'echarts';
         columnsEdit({checkedValues: checkedValues})
       },
       detailClick(text, record, columnValue, columnTitle){
+        if(!this.isClick){
+          return
+        }
         console.log(text, record, columnValue, columnTitle)
         // 没有值不弹窗
         if(!text || record.children || record.id === 'amount'){
@@ -1126,8 +1114,56 @@ import { number } from 'echarts';
         //   // 选中一级，二级禁选
         //   this.chooseRowType == 'huiji'
         // }
-      }
+      },
 
+      getSuperFieldList(){
+        let fieldList=[];
+        fieldList.push({type:'string',value:'taskno',text:'任务号',dictCode:''})
+        fieldList.push({type:'string',value:'taskname',text:'任务名称',dictCode:''})
+        fieldList.push({type:'string',value:'xhname',text:'型号',dictCode:''})
+        fieldList.push({type:'date',value:'jhwcsj',text:'计划完成时间'})
+        fieldList.push({type:'string',value:'yzjdname',text:'阶段',dictCode:''})
+        fieldList.push({type:'string',value:'processpercent',text:'项目进度',dictCode:''})
+        fieldList.push({type:'string',value:'costPercent',text:'成本进度',dictCode:''})
+        fieldList.push({type:'int',value:'yzsl',text:'研制数量',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'oneIncome',text:'单台收入',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'oneCost',text:'单台成本',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'oneProfit',text:'单台利润',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'lre',text:'利润额',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'lrl',text:'利润率',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'estimationcoat',text:'预估价',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'contractfpe',text:'合同额',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'taskmoney',text:'已收款',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'zcb',text:'总成本',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'clf',text:'材料费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'zyf',text:'专用费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'swf',text:'事务费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'wxf',text:'外协费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'rldlf',text:'燃料动力费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'gdzczj',text:'固定资产折旧',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'gzjlwf',text:'工资及劳务费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'glf',text:'管理费',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'zjcb',text:'装机成本',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'lbsy',text:'内部试验',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'workhour',text:'工时(h)',dictCode:''})
+        fieldList.push({type:'string',value:'zrbm',text:'责任部门',dictCode:''})
+        fieldList.push({type:'int',value:'jycsid',text:'下达部门id',dictCode:''})
+        fieldList.push({type:'string',value:'jycs',text:'下达部门',dictCode:''})
+        // fieldList.push({type:'int',value:'hxzxid',text:'1：横向 2：纵向/来自科研任务',dictCode:''})
+        fieldList.push({type:'string',value:'hxzxname',text:'横向纵向',dictCode:''})
+        fieldList.push({type:'string',value:'tasktype',text:'任务类型',dictCode:''})
+        fieldList.push({type:'string',value:'auditprice',text:'审计审价',dictCode:''})
+        fieldList.push({type:'string',value:'iflag',text:'任务状态',dictCode:''})
+        fieldList.push({type:'string',value:'brief',text:'提出单位简称',dictCode:''})
+        fieldList.push({type:'int',value:'reftaskno',text:'父级任务',dictCode:''})
+        fieldList.push({type:'int',value:'pccode',text:'批产任务号',dictCode:''})
+        fieldList.push({type:'int',value:'bccode',text:'备产任务号',dictCode:''})
+        fieldList.push({type:'int',value:'blcode',text:'备料任务号',dictCode:''})
+        fieldList.push({type:'string',value:'businessman',text:'业务员',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'sjgs',text:'设计工时',dictCode:''})
+        fieldList.push({type:'BigDecimal',value:'scgs',text:'生产工时',dictCode:''})
+        this.superFieldList = fieldList
+      },
     }
   }
 </script>