md
This commit is contained in:
linfso
parent
b2fd5a9a9a
commit
ef5f6d3041
@ -111,7 +111,7 @@
|
||||
</slot>
|
||||
</div>
|
||||
<div>
|
||||
<orig-table ref="table" :config="config" v-dragSelect class="xd-tb-wrapper" />
|
||||
<orig-table ref="table" :key="refreshKeyId" :config="config" v-dragSelect v-dragColumn class="xd-tb-wrapper" />
|
||||
<pagination
|
||||
v-show="total>0 && showPagination"
|
||||
:total="total"
|
||||
@ -128,7 +128,7 @@
|
||||
<ul class="el-dropdown-menu el-popper el-dropdown-menu--medium"
|
||||
style="transform-origin: center top; z-index: 2009;width: 180px;"
|
||||
x-placement="bottom-end">
|
||||
<li class="el-dropdown-menu__item" > <span @click="handleCopySelect(null,$event)">复制</span></li>
|
||||
<li class="el-dropdown-menu__item" > <span @click.stop="handleCopySelect(null,$event)">复制</span></li>
|
||||
<!-- <li class="el-dropdown-menu__item" > <span @click="handleCopySelect(null,$event)">复制选中数据</span></li> -->
|
||||
<!-- <li class="el-dropdown-menu__item" > <span @click="handleCopySelect(null,$event)">复制行</span></li> -->
|
||||
<!-- <li class="el-dropdown-menu__item" > <span @click="handleCopySelect(null,$event)">复制列</span></li> -->
|
||||
@ -247,10 +247,9 @@ export default {
|
||||
// 指令的定义
|
||||
inserted: function (el, binding, vnode) {
|
||||
var oDiv = el;
|
||||
|
||||
var tbBodyDiv=oDiv.getElementsByClassName("el-table__body-wrapper")[0];
|
||||
//监听用户鼠标事件
|
||||
oDiv.onmousedown = function (ev) {
|
||||
|
||||
tbBodyDiv.onmousedown = function (ev) {
|
||||
var evt = window.event || arguments[0];
|
||||
var flag = true;
|
||||
// 鼠标右键菜单
|
||||
@ -258,7 +257,7 @@ export default {
|
||||
if(evt.button == 2){
|
||||
flag=false;
|
||||
showContextMenu(evt);
|
||||
vnode.context.clearEventBubble(evt);
|
||||
// vnode.context.clearEventBubble(evt);
|
||||
const currentCellInfo=getCellPosition(evt.target);
|
||||
vnode.context.currentCellInfo=currentCellInfo;
|
||||
// console.log("currentCellInfo",currentCellInfo);
|
||||
@ -324,7 +323,7 @@ export default {
|
||||
|
||||
var _x = null;
|
||||
var _y = null;
|
||||
vnode.context.clearEventBubble(evt);
|
||||
// vnode.context.clearEventBubble(evt);
|
||||
// //打开开关
|
||||
vnode.context.mouseflag = true;
|
||||
// //鼠标拖动时画框
|
||||
@ -414,7 +413,6 @@ export default {
|
||||
|
||||
// document.oncontextmenu = new Function("event.returnValue=false");
|
||||
tableDom.addEventListener("contextmenu", function(event) {
|
||||
event.preventDefault();
|
||||
var menu = document.querySelector("#contextMenu");
|
||||
let tbPosRect=getTablePosition(tableDom);
|
||||
menu.style.left = (event.clientX-tbPosRect.left+10) + "px";
|
||||
@ -423,6 +421,7 @@ export default {
|
||||
menu.style.zIndex = 3000;
|
||||
vnode.context.contextVisible=true;
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
// tableDom.oncontextmenu = new Function("event.returnValue=false");
|
||||
// event.preventDefault();
|
||||
@ -487,25 +486,6 @@ export default {
|
||||
return { rowIndex:-1,cellIndex:-1};
|
||||
}
|
||||
}
|
||||
|
||||
// //方法是确定列表到屏幕的位置
|
||||
// function getX(obj){
|
||||
// var parObj=obj;
|
||||
// var left=obj.offsetLeft;
|
||||
// while(parObj=parObj.offsetParent){
|
||||
// left+=parObj.offsetLeft;
|
||||
// }
|
||||
// return left;
|
||||
// }
|
||||
// //方法是确定列表到屏幕的位置
|
||||
// function getY(obj){
|
||||
// var parObj=obj;
|
||||
// var top=obj.offsetTop;
|
||||
// while(parObj = parObj.offsetParent){
|
||||
// top+=parObj.offsetTop;
|
||||
// }
|
||||
// return top;
|
||||
// }
|
||||
//在鼠标抬起后做的重置
|
||||
document.onmouseup = function () {
|
||||
//把鼠标移动事初始化
|
||||
@ -518,14 +498,21 @@ export default {
|
||||
selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
|
||||
vnode.context.mouseflag = false;
|
||||
vnode.context.handleBatchSelect();
|
||||
cancelContextMenu();
|
||||
// cancelContextMenu();
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
dragColumn: {
|
||||
update: function (el, binding, vnode) {
|
||||
var oDiv = el;
|
||||
vnode.context.setHeaderSortable();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
refreshKeyId:Math.random().toString(36).substring(3,10),
|
||||
tableId:this.id?this.id:"XdTable"+Math.random().toString(36).substring(3,10),
|
||||
// 弹出层标题
|
||||
title: "显示/隐藏",
|
||||
@ -546,6 +533,7 @@ export default {
|
||||
},
|
||||
tableData:[],
|
||||
dropCol:[],
|
||||
sortable:null,
|
||||
|
||||
isDragging: false,
|
||||
startRowIndex: -1,
|
||||
@ -613,7 +601,6 @@ export default {
|
||||
this.updateTable()
|
||||
this.initSort();
|
||||
this.tableDom=this.getTableDom();
|
||||
this.columnDrop();
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -838,36 +825,48 @@ export default {
|
||||
getTablePosition() {
|
||||
return this.tableDom.getBoundingClientRect();
|
||||
},
|
||||
// 列拖拽
|
||||
columnDrop() {
|
||||
const _this = this;
|
||||
var xdTableObj = document.getElementById(this.tableId);
|
||||
// var tbHeader1=xdTableObj.getElementsByClassName("el-table__body-wrapper")[0];
|
||||
const wrapperTr = xdTableObj.querySelector('.el-table__header-wrapper tr');
|
||||
console.log("===>columnDrop==>",wrapperTr)
|
||||
this.sortable = Sortable.create(wrapperTr, {
|
||||
animation: 180,
|
||||
delay: 0,
|
||||
onEnd: evt => {
|
||||
// 跳过显示的列数量，如开头我们用了一个多选框
|
||||
const empty = 1
|
||||
const oldItem = _this.dropCol[evt.oldIndex- empty];
|
||||
this.newCol=evt.newIndex-1
|
||||
_this.dropCol.splice(evt.oldIndex- empty, 1);
|
||||
_this.dropCol.splice(evt.newIndex- empty, 0, oldItem);
|
||||
console.log("===>columnDrop==>",_this.dropCol)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleCopySelect(data,event) {
|
||||
// console.log("===>handleCopySelect===>",event);
|
||||
handleClipboard(this.currentSelectStr, event)
|
||||
this.contextVisible=false;
|
||||
},
|
||||
handleCopyRow(){
|
||||
handleSelectCurrentRow(){
|
||||
|
||||
},
|
||||
handleCopyColumn(){
|
||||
setHeaderSortable(){
|
||||
let that=this;
|
||||
this.$nextTick(function () {
|
||||
const wrapperTr = document.querySelector('#'+that.tableId+' .el-table__header-wrapper > table > thead > tr');
|
||||
// console.log("===>wrapperTr==>",wrapperTr);
|
||||
Sortable.create(wrapperTr, {
|
||||
animation: 100,
|
||||
delay: 50,
|
||||
dragClass: "dragClass",
|
||||
ghostClass: "ghostClass",
|
||||
chosenClass: "chosenClass",
|
||||
onStart: () => {
|
||||
},
|
||||
// 结束拖动事件
|
||||
onEnd: ({ newIndex, oldIndex }) => {
|
||||
let arr = that.storageList;
|
||||
const currCol = arr.splice(oldIndex-1, 1)[0];
|
||||
arr.splice(newIndex-1, 0, currCol);
|
||||
|
||||
that.storageList = arr;
|
||||
that.updateTable();
|
||||
// this.refreshKeyId=Math.random().toString(36).substring(3,10);
|
||||
|
||||
|
||||
// const currCol = vnode.context.storageList.splice(oldIndex-1, 1)[0];
|
||||
// vnode.context.storageList.splice(newIndex-1, 0, currCol);
|
||||
// vnode.context.updateTable();
|
||||
},
|
||||
|
||||
});
|
||||
})
|
||||
},
|
||||
handleSelectCurrentColumn(){
|
||||
|
||||
},
|
||||
// 定义方法 isEqual 来比较两个选中数据对象是否相同
|
||||
@ -1033,6 +1032,8 @@ export default {
|
||||
storage[this.saveStorageName] = this.storageList
|
||||
window.localStorage.setItem('tableStorage', JSON.stringify(storage))
|
||||
}
|
||||
|
||||
// this.setHeaderSortable();
|
||||
},
|
||||
|
||||
}
|
||||
@ -1115,6 +1116,24 @@ export default {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row>td {
|
||||
background: #453878 !important;
|
||||
}
|
||||
|
||||
|
||||
// 拖拽
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -503,6 +503,7 @@ export default {
|
||||
operateEmployeeCode: element['取件员/操作员'],
|
||||
remark: element['录单备注'],
|
||||
blMessage: element['寄件/签收短信'],
|
||||
realValue: element['货值'],
|
||||
|
||||
uploadStatus: 0,
|
||||
errorInfo:'',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user