<template>
|
<view class="hm-drag-sort" :style="{'height': ListHeight+'px','background-color': listBackgroundColor}">
|
<!-- 拖拽中显示的行 -->
|
<view class="rowBox-shadow" id="shadowRowBox"
|
:style="{'width':( (windowWidth - ((swiperMargin) * 2)))+'px;left:'+(swiperMargin)+'px'}">
|
<!-- ( (windowWidth - (swiperMargin * 2))/2 ) -->
|
<view class="hm-row-shadow move" id="shadowRow"
|
:style="{'width':((windowWidth - ((swiperMargin + 3) * 2)) ) +'px;margin:0 ' + 3 + 'px'}">
|
<view class="modules">
|
<!-- 内容 rotate(5deg) style=""-->
|
<view class="row-content">
|
<taskSimpleItem class="row" :taskData="shadowRow" :style="{'height': rowHeight+'px'}">
|
</taskSimpleItem>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- <text class="swiper-indicator-dot" :style="{'background-color':(page == curPage) ? '#333':'#aaa'}"> -->
|
<view class="swiper-panel-indicator">
|
<view class="swiper-indicator-dots"><text v-for="(list,page) in dragLists" :key="page"
|
class="swiper-indicator-dot fs-plus_circle" :style="{'color':(page == curPage) ? '#333':'#aaa'}"
|
@click="clickDot(page)"></text></view>
|
</view>
|
<!-- 拖拽列表 -->
|
<view class="uni-swiper" :animation="animationData" :style="{'transform':'translate3d('+xMove+'px,0,0)'}"
|
@touchstart='handleStart' @touchmove='handleMove' @touchend='handleEnd'>
|
<view v-for="(list,page) in dragLists" class="swiper-item"
|
:style="{'width':(windowWidth - (swiperMargin * 2))+'px'}" :key="page">
|
<view class="work-panel">
|
<view class="title-view"><text class="left">{{getPageTitle(page)}}</text><text
|
class="left2">{{getPageItemCount(page)}}</text><text class="right fs-CirclPlus"
|
@click="clickAdd"></text></view>
|
<scroll-view class="color scroll-view" :id="'scrollView_'+guid" :scroll-y="true"
|
:scroll-top="scrollViewTop[page]" @scroll="drag.scroll"
|
:scroll-with-animation="scrollAnimation">
|
<view class="list">
|
<view v-for="(row,index) in list" :key="row.HMDrag_id" class="rowBox ani">
|
<!-- :id="'list'+{{page}}" :style="{'height': ListHeight+'px'}" 注意,这里的style只有在行首次渲染出来才有效,后面拖动列表,style会被wxs修改,这里的style就不会再生效了 -->
|
<view :class="'hm-row' + page"
|
:style="{'transform': 'translate3d(0,' + (row.HMDrag_sort-index)*100 + '%,-1px)'}"
|
:data-sort="row.HMDrag_sort" :data-id="row.HMDrag_id" :id="row.HMDrag_id">
|
<view class="modules">
|
<!-- 内容 -->
|
<view class="row-content" :data-id="row.HMDrag_id" @touchstart="drag.touchstart"
|
@touchmove="drag.touchmove" @touchend="drag.touchend"
|
@touchcancel="drag.touchend">
|
<taskSimpleItem class="row" :taskData="row"
|
:style="{'height': rowHeight+'px'}" @clickItem="triggerItem">
|
</taskSimpleItem>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 数据跳板 -->
|
<view id="dataView" style="display: none !important;" :data-guid="guid" :prop="wxsDataStr"
|
:change:prop="drag.receiveData">触发wxs跳板,请勿删除</view>
|
<!-- #ifdef APP-VUE || H5 -->
|
<view style="display: none !important;" :prop="scrollCommand" :change:prop="renderjs.runCommand">
|
触发renderjs跳板,请勿删除</view>
|
<!-- #endif -->
|
|
</view>
|
</template>
|
|
<script src="./drag.wxs" module="drag" lang="wxs"></script>
|
|
<script>
|
import TaskInit from "@/common/extend.js"
|
import taskSimpleItem from "../task-simple-item.vue"
|
/**
|
* 拖拽排序组件 dragSortList
|
* @description 拖拽排序组件 dragSortList
|
* @property {ObjectArray} list = [] 列表数据,数据格式[{"name": "花呗","icon": "/static/img/1.png",}]
|
* @property {Boolean} feedbackGenerator = [true|false] 是否拖动触感反馈
|
* @property {Boolean} longTouch = [true|false] 是否长按拖动
|
* @property {Boolean} autoScroll = [true|false] 是否拖拽至边缘自动滚动列表
|
* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序
|
* @property {Number} listHeight = 0 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度
|
* @property {Number} rowHeight = 44 选填,行高,单位:px,默认44px
|
* @property {String} listBackgroundColor 选填,列表底色,注意是列表的底色,不是行的底色,默认#FFFFFF
|
* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}
|
* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}
|
*/
|
export default {
|
name: 'dragSortList',
|
components: {
|
taskSimpleItem,
|
},
|
data() {
|
return {
|
guid: "",
|
isAppH5: true, //是否APPH5 无需手动配置
|
shadowRow: {}, // 存放被拖拽行数据
|
dragSort: 0, //拖拽的排序号
|
dragStartPage: 0, //拖拽页面号
|
dragStartSort: 0, //拖拽的排序号
|
animationData: {},
|
swiperTime: 0,
|
windowWidth: 0,
|
swiperMargin: 8,
|
touchX: 0,
|
curPage: 0,
|
xMove: 8,
|
curPoint: {
|
x: 0,
|
y: 0
|
}, //记录原点
|
startPoint: {},
|
isTouchMove: false,
|
isTouchDragEnd: true,
|
// 列表数据
|
dragLists: [],
|
ListHeight: this.listHeight, // scroll-view列表高度
|
|
ListViewTop: 32, //scroll-view列表top位置
|
// 控制滑动
|
scrollViewTop: [0, 0, 0, 0, 0], // 滚动条位置
|
scrollCommand: null, //传递renderjs数据
|
isHoldTouch: false, //是否正在拖拽
|
isScrolling: false, //是否正在滚动视图
|
scrollAnimation: false, //滚动动画 在微信端开启
|
scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
|
wxsDataObj: [],
|
wxsDataStr: "[]"
|
}
|
},
|
emits: ['change', 'confirm', 'clickItem', 'add'],
|
props: {
|
//是否开启拖动震动反馈
|
feedbackGenerator: {
|
value: Boolean,
|
default: true
|
},
|
// 是否开启长按拖动
|
longTouch: {
|
value: Boolean,
|
default: false
|
},
|
autoScroll: {
|
value: Boolean,
|
default: true
|
},
|
longTouchTime: {
|
value: Number,
|
default: 300
|
},
|
countPage: {
|
value: Number,
|
default: 1
|
},
|
// 数据
|
listData: {
|
type: Array,
|
default () {
|
return [];
|
}
|
},
|
// 行高度 默认44行高
|
rowHeight: {
|
value: Number,
|
default: 44
|
},
|
// 组件高度 默认windowHeight满屏
|
listHeight: {
|
value: Number,
|
default: 0
|
},
|
listBackgroundColor: {
|
value: String,
|
default: "#fff"
|
}
|
},
|
watch: {
|
countPage(val) {
|
console.error('countPage!', this.countPage);
|
},
|
longTouch(val) {
|
// #ifdef VUE3
|
if (!val) {
|
console.error('vue3目前仅支持长按拖拽!');
|
}
|
// #endif
|
|
this.pushWxsData('longTouch', val);
|
},
|
longTouchTime(val) {
|
this.pushWxsData('longTouchTime', val);
|
},
|
feedbackGenerator(val) {
|
this.pushWxsData('feedbackGenerator', val);
|
},
|
autoScroll(val) {
|
this.pushWxsData('autoScroll', val);
|
},
|
listData(val) {
|
console.log("listData:", val)
|
this.initList(val); //数据变化重新初始化list
|
},
|
/* listData: {
|
|
handler(val) {
|
console.log("listData:",val)
|
this.initList(val); //数据变化重新初始化list
|
},
|
immediate: true,
|
deep: true
|
}, */
|
listHeight: {
|
handler(val) {
|
this.ListHeight = val;
|
console.log("listHeight:", this.ListHeight)
|
this.pushWxsData('ListHeight', this.ListHeight);
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
var _this = this
|
_this.guid = _this.getGuid();
|
|
const res = uni.getSystemInfoSync();
|
// #ifdef MP-WEIXIN
|
let state = _this.compareVersion(res.hostVersion, '2.14.2');
|
if (state < 0) {
|
console.error('当前微信基础库:' + res.hostVersion + ',dragSortList组件仅支持微信基础库2.14.2+,请切换基础库!');
|
}
|
_this.windowWidth = res.windowWidth
|
_this.scrollAnimation = true;
|
_this.isAppH5 = false;
|
// #endif
|
if (_this.listHeight == 0) {
|
_this.ListHeight = res.windowHeight;
|
// 要减去导航栏和状态栏高度
|
// #ifdef MP-DINGTALK
|
if (res.platform != "devtools")
|
_this.ListHeight = res.windowHeight - res.statusBarHeight - res.titleBarHeight
|
// #endif
|
// #ifndef MP-DINGTALK
|
_this.ListHeight = res.windowHeight - 50 - res.statusBarHeight;
|
if (res.windowHeight == res.screenHeight)
|
_this.ListHeight -= 50;
|
// #endif
|
}
|
//console.log('getSystemInfoSync:',_this.listHeight,res);
|
_this.pushWxsData('isAppH5', _this.isAppH5);
|
_this.pushWxsData('ListHeight', _this.ListHeight);
|
_this.pushWxsData('longTouch', _this.longTouch);
|
|
let animation = uni.createAnimation({
|
duration: 900,
|
// 动画速度
|
timingFunction: 'linear',
|
})
|
_this.animation = animation
|
uni.$on('taskDataChange', _this.taskDataChange)
|
},
|
destroyed() {
|
uni.$off('taskDataChange', this.taskDataChange)
|
},
|
methods: {
|
getGuid() {
|
function S4() {
|
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
}
|
return (S4() + S4() + "_" + S4() + "_" + S4() + "_" + S4() + "_" + S4() + S4() + S4());
|
},
|
getPageTitle(page) {
|
if (page == 0) {
|
return "收件箱"
|
} else if (page == 1) {
|
return "今天要做"
|
} else if (page == 2) {
|
return "下一步要做"
|
} else if (page == 3) {
|
return "以后要做"
|
} else {
|
return "未命名"
|
}
|
},
|
getPageItemCount(page) {
|
if (this.dragLists.length > page) {
|
return this.dragLists[page].length
|
} else
|
return 0
|
},
|
initList() {
|
let tmpDragList = []
|
let tmpList = JSON.parse(JSON.stringify(this.listData));
|
this.scrollViewTop = []
|
for (let i = 0, len = tmpList.length; i < len; i++) {
|
let tmpList2 = tmpList[i]
|
|
for (let j = 0, len2 = tmpList2.length; j < len2; j++) {
|
// 组件内赋予临时id和sort
|
if (!tmpList2[j].hasOwnProperty('HMDrag_id')) {
|
tmpList2[j].HMDrag_id = 'HMDragId_' + this.getGuid();
|
}
|
tmpList2[j].HMDrag_sort = j;
|
}
|
tmpDragList[i] = JSON.parse(JSON.stringify(tmpList2));
|
this.scrollViewTop.push(0)
|
}
|
console.log("initList,", tmpDragList);
|
this.dragLists = tmpDragList;
|
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
if (this.curPage > 0) {
|
let x = -(this.curPage * (this.windowWidth - (this.swiperMargin * 2)) - this.swiperMargin)
|
this.xMove = x
|
this.pushWxsData('curPage', this.curPage);
|
this.pushNewSort();
|
}
|
},
|
loadShadowRow(e) {
|
this.shadowRow = this.getMoveRow(e.rowSort, this.curPage);
|
this.dragSort = e.rowSort
|
this.dragStartPage = this.curPage
|
this.dragStartSort = e.rowSort
|
console.log("loadShadowRow:", this.shadowRow)
|
this.isTouchDragEnd = false;
|
|
},
|
taskDataChange(data) {
|
console.log("dragSortList taskDataChange", data)
|
var bChanged = false;
|
if (data.change == '新建') {
|
const app = getApp()
|
if (data.taskbody.CN_S_TAKEON_ID == app.globalData.userdata.user_login) {
|
if (data.taskbody) {
|
let item = data.taskbody
|
item.HMDrag_id = 'HMDragId_' + this.getGuid();
|
item.HMDrag_sort = 0;
|
let pagePos = Number(item.CN_N_PLAN_TYPE)
|
if (this.dragLists.length > pagePos) {
|
let list = JSON.parse(JSON.stringify(this.dragLists[pagePos]));
|
for (let i = 0, len = list.length; i < len; i++) {
|
this.dragLists[pagePos][i].HMDrag_sort = list[i].HMDrag_sort + 1;
|
}
|
this.dragLists[pagePos].unshift(item)
|
}
|
if (pagePos == this.curPage) {
|
this.pushNewSort()
|
}
|
}
|
}
|
return
|
}
|
let tmpList = JSON.parse(JSON.stringify(this.dragLists));
|
for (let i = 0, len = tmpList.length; i < len; i++) {
|
let tmpList2 = tmpList[i]
|
console.log("taskDataChange List", i, tmpList2)
|
for (let j = 0, len2 = tmpList2.length; j < len2; j++) {
|
if (tmpList2[j].CN_G_ID == data.id) {
|
bChanged = true
|
if (data.change == '转发' || data.change == '同意' || data.change == '不同意' || data.change ==
|
'删除' || data.change == '退回' || data.change == '撤回' || data.change == '完成' || data.change ==
|
'设置完成' || data.change == '提交') {
|
if (i == this.curPage) {
|
console.log("taskDataChange splice", tmpList2[j])
|
this.splice(tmpList2[j].HMDrag_sort, 1)
|
} else {
|
let nSort = tmpList2[j].HMDrag_sort
|
this.dragLists[i].splice(j, 1);
|
tmpList2 = JSON.parse(JSON.stringify(this.dragLists[i]));
|
for (let j = 0, len2 = tmpList2.length; j < len2; j++) {
|
if (tmpList2[j].HMDrag_sort > nSort) {
|
this.dragLists[i][j].HMDrag_sort = tmpList2[j].HMDrag_sort - 1;
|
}
|
}
|
}
|
} else {
|
this.dragLists[i][j].CN_S_STATE = data.change;
|
this.dragLists[i][j].CNSTATE = (TaskInit.taskstate[data.change] || TaskInit.eventstate[data
|
.change]);
|
}
|
console.log('taskDataChange break' + i)
|
break;
|
}
|
}
|
}
|
},
|
//兼容微信小程序震动
|
vibrate() {
|
//console.log("vibrate");
|
uni.vibrateShort()
|
},
|
touchDragMove(move) {
|
//console.log("touchDragMove");
|
//console.log("touchDragMove:",move)
|
var _this = this
|
if (Math.abs(_this.touchX - move.touchX) < 12) {
|
let time = new Date().getTime();
|
if (time - _this.swiperTime < 800) {
|
return
|
}
|
}
|
let oldPage = _this.curPage
|
let newPage = _this.curPage
|
if (move.touchX < 30) {
|
if (newPage <= 0) {
|
_this.xMove = 0
|
} else {
|
newPage -= 1
|
}
|
} else if (move.touchX > (_this.windowWidth - _this.swiperMargin)) {
|
if (newPage < _this.countPage - 1) {
|
newPage += 1
|
}
|
} else {
|
return
|
}
|
|
let x = -(newPage * (_this.windowWidth - (2 * _this.swiperMargin)) - _this.swiperMargin)
|
let offsetX = x - _this.xMove
|
//console.log("handleMoveItem:",_this.curPage,x,_this.xMove,this.xItemMove,movePoint.x)
|
if (offsetX != 0) {
|
if (oldPage != newPage) {
|
if (_this.dragStartPage != oldPage) {
|
_this.dragLists[oldPage].pop()
|
//_this.splice(_this.dragSort,1)
|
}
|
let nDragSort = _this.dragSort
|
console.log("dragSort:", nDragSort, _this.curPage, newPage)
|
if (newPage != _this.dragStartPage) {
|
/* if( _this.dragStartPage == oldPage)
|
{
|
//console.log("touchDragMove oldPageList:",JSON.stringify(_this.dragLists[oldPage]))
|
let list = JSON.parse(JSON.stringify(_this.dragLists[oldPage]));
|
for (let i = 0, len = list.length; i < len; i++) {
|
if(_this.dragStartSort < list[i].HMDrag_sort)
|
{
|
_this.dragLists[oldPage][i].HMDrag_sort = list[i].HMDrag_sort-1;
|
}
|
else if(_this.dragStartSort == list[i].HMDrag_sort)
|
{
|
_this.dragLists[oldPage][i].HMDrag_sort = len -1;
|
}
|
}
|
} */
|
_this.curPage = newPage
|
_this.pushWxsData('curPage', newPage);
|
_this.push(_this.shadowRow)
|
|
//console.log("touchDragMove newPageList:",JSON.stringify(_this.dragLists[newPage]))
|
let list = JSON.parse(JSON.stringify(_this.dragLists[newPage]));
|
/* if(nDragSort < list.length -1)
|
{
|
for (let i = 0, len = list.length; i < len -1; i++) {
|
if(nDragSort <= list[i].HMDrag_sort)
|
{
|
_this.dragLists[newPage][i].HMDrag_sort = list[i].HMDrag_sort+ 1;
|
}
|
}
|
}
|
else
|
{
|
nDragSort = list.length -1
|
} */
|
nDragSort = list.length - 1
|
//console.log("dragSort3:",nDragSort,newPage)
|
//_this.dragSort = nDragSort
|
//if(nDragSort < list.length )
|
_this.dragLists[newPage][list.length - 1].HMDrag_sort = nDragSort;
|
} else {
|
_this.curPage = newPage
|
_this.pushWxsData('curPage', newPage);
|
/*nDragSort = _this.dragStartSort
|
_this.dragSort = _this.dragStartSort
|
console.log("dragSort2:",nDragSort,newPage)
|
let list = JSON.parse(JSON.stringify(_this.dragLists[newPage]));
|
nDragSort = list.length -1
|
for (let i = 0, len = list.length; i < len; i++) {
|
if( list[i].HMDrag_sort ==len -1)
|
{
|
_this.dragLists[newPage][i].HMDrag_sort = nDragSort;
|
_this.dragLists[newPage][i].HMDrag_id = list[i].HMDrag_id;
|
}
|
else if(nDragSort <= list[i].HMDrag_sort)
|
{
|
_this.dragLists[newPage][i].HMDrag_sort = list[i].HMDrag_sort+ 1;
|
}
|
|
} */
|
}
|
_this.pushNewSort();
|
//console.log("push2:",JSON.stringify(_this.dragLists[newPage]))
|
_this.swiperTime = new Date().getTime();
|
_this.touchX = move.touchX
|
let time = new Date().getTime();
|
_this.animation.translateX(x).step({
|
duration: 400
|
});
|
_this.animationData = _this.animation.export();
|
_this.xMove = x
|
return
|
}
|
}
|
},
|
touchDragEnd() {
|
var _this = this
|
console.log("touchDragEnd")
|
/* if( !_this.isTouchDragEnd && _this.dragStartPage != _this.curPage)
|
{
|
console.log("touchDragEnd:",_this.shadowRow)
|
let pagePos =_this.dragStartPage
|
if(this.dragLists.length >pagePos)
|
{
|
//let sId =_this.shadowRow.id
|
let list = JSON.parse(JSON.stringify(_this.dragLists[pagePos]));
|
//console.log("touchDragEnd:",sId,list,_this.dragLists[_this.curPage])
|
for (let i = 0, len = list.length; i < len; i++) {
|
if( list[i].HMDrag_sort ==len -1)
|
{
|
console.log("touchDragEnd splice:",i)
|
_this.dragLists[pagePos].splice(i,1);
|
break;
|
}
|
}
|
}
|
} */
|
_this.isTouchDragEnd = true;
|
/* else
|
{
|
if(_this.dragStartPage != oldPage)
|
{
|
_this.splice(_this.dragSort,1)
|
}
|
} */
|
},
|
// 控制自动滚动视图
|
pageScroll(e) {
|
// 滚动 up-上滚动 down-下滚动
|
console.log("pageScroll", this.curPage, e)
|
if (e.command == "up" || e.command == "down") {
|
if (!this.isHoldTouch) {
|
this.isHoldTouch = true;
|
this.scrollViewTop[this.curPage] = e.scrollTop;
|
}
|
if (this.isScrolling) {
|
return;
|
};
|
this.isScrolling = true;
|
|
if (this.isAppH5) {
|
// APP端和H5端 执行renderjs的滚动
|
e.ListHeight = this.ListHeight;
|
e.rowHeight = this.rowHeight;
|
if (this.dragLists.length > this.curPage)
|
e.rowLength = this.dragLists[this.curPage].length;
|
this.scrollCommand = e;
|
return;
|
}
|
|
// 微信小程序执行以下逻辑
|
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
let maxHeight = 0
|
if (this.dragLists.length > this.curPage)
|
maxHeight = this.rowHeight * this.dragLists[this.curPage].length + 1 - this.ListHeight;
|
let runTick = true;
|
// 逻辑层传递到视图层需要时间,可能会出现滚动不流畅现象
|
this.scrollTimer = setInterval(() => {
|
if (!runTick) {
|
return;
|
}
|
this.runScroll(e.command, maxHeight);
|
runTick = false;
|
this.$nextTick(function() {
|
runTick = true;
|
})
|
}, 16.6)
|
}
|
// 停止滚动
|
if (e.command == "stop") {
|
// #ifdef APP-PLUS || H5
|
// 停止指定传递到renderjs
|
this.scrollCommand = e;
|
// #endif
|
this.isScrolling && this.stopScroll();
|
}
|
},
|
// 微信端的滚动
|
runScroll(command, maxHeight) {
|
if (command == "up") {
|
this.scrollViewTop[this.curPage] -= 5
|
}
|
if (command == "down") {
|
this.scrollViewTop[this.curPage] += 5;
|
}
|
if (this.scrollViewTop[this.curPage] < 0) {
|
this.scrollViewTop[this.curPage] = 0;
|
clearInterval(this.scrollTimer);
|
}
|
if (this.scrollViewTop[this.curPage] > maxHeight) {
|
this.scrollViewTop[this.curPage] = maxHeight;
|
clearInterval(this.scrollTimer);
|
}
|
},
|
//停止滚动
|
stopScroll() {
|
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
this.isScrolling = false;
|
this.scrollingtop = 0;
|
},
|
//
|
getMoveRow(HMDrag_sort, pagePos) {
|
if (this.dragLists.length > pagePos) {
|
for (let i = 0, len = this.dragLists[pagePos].length; i < len; i++) {
|
if (this.dragLists[pagePos][i].HMDrag_sort == HMDrag_sort) {
|
return JSON.parse(JSON.stringify(this.dragLists[pagePos][i]));
|
}
|
}
|
}
|
},
|
//
|
getRowIndex(HMDrag_sort) {
|
let pagePos = this.curPage
|
if (this.dragLists.length > pagePos) {
|
for (let i = 0, len = this.dragLists[pagePos].length; i < len; i++) {
|
if (this.dragLists[pagePos][i].HMDrag_sort == HMDrag_sort) {
|
return JSON.parse(JSON.stringify(this.dragLists[pagePos][i]));
|
}
|
}
|
}
|
},
|
//
|
triggerClick(e) {
|
let row = this.getMoveRow(e.index, e.page);
|
this.$emit('clickItem', row);
|
console.log("triggerClick", row);
|
this.isTouchDragEnd = true;
|
|
},
|
clickAdd() {
|
this.$emit('add', {
|
page: this.curPage
|
});
|
},
|
clickDot(page) {
|
if (this.curPage != page) {
|
let x = -(page * (this.windowWidth - (this.swiperMargin * 2)) - this.swiperMargin)
|
this.animation.translateX(x).step({
|
duration: 400
|
});
|
this.animationData = this.animation.export();
|
this.xMove = x
|
this.curPage = page
|
this.pushWxsData('curPage', this.curPage);
|
this.pushNewSort();
|
}
|
},
|
triggerItem(row) {
|
if (!this.longTouch) {
|
this.$emit('clickItem', row);
|
console.log("triggerItem", this.isTouchDragEnd);
|
this.isTouchDragEnd = true;
|
}
|
},
|
change(e) {
|
console.log("change moveTo", e);
|
|
if (e.moveTo == null)
|
return;
|
let moveRow = this.getMoveRow(e.index, e.page);
|
//e.moveRow = this.getMoveRow(e.index,e.page);
|
this.dragSort = e.moveTo
|
console.log("change", e.index, e.moveRow);
|
// 清除组件临时赋予的id
|
//delete e.moveRow.HMDrag_id;
|
//delete e.moveRow.HMDrag_sort;
|
this.$emit('change', e);
|
},
|
sort(e) {
|
this.stopScroll();
|
this.isHoldTouch = false;
|
console.log("sort moveTo", e);
|
let moveRow = this.getMoveRow(e.index, e.page);
|
if (e.offset == null)
|
return;
|
// 检测清除临时id和sort
|
//delete moveRow.HMDrag_id;
|
//delete moveRow.HMDrag_sort;
|
|
let pagePos = this.curPage
|
let list = []
|
let tmpList = []
|
//更新新的列表想顺序
|
if (this.dragLists.length > pagePos) {
|
list = JSON.parse(JSON.stringify(this.dragLists[pagePos]));
|
//console.log("sort:", JSON.stringify(this.dragLists[pagePos]));
|
for (let i = 0, len = list.length; i < len; i++) {
|
// 检测清除临时id和sort
|
delete list[i].HMDrag_id;
|
delete list[i].HMDrag_sort;
|
let index = e.sortArray[i];
|
this.dragLists[pagePos][i].HMDrag_sort = index;
|
tmpList[i] = list[i]
|
}
|
//console.log("sort list:", JSON.stringify(this.dragLists[pagePos]));
|
}
|
if (this.curPage != e.page) {
|
//从原来的列表移除移动项
|
pagePos = e.page
|
if (this.dragLists.length > pagePos) {
|
let nFind = -1
|
list = JSON.parse(JSON.stringify(this.dragLists[pagePos]));
|
for (let i = 0, len = list.length; i < len; i++) {
|
if (list[i].HMDrag_sort == e.index) {
|
nFind = i
|
} else if (list[i].HMDrag_sort > e.index) {
|
this.dragLists[pagePos][i].HMDrag_sort = list[i].HMDrag_sort - 1;
|
}
|
}
|
if (nFind >= 0) {
|
console.log("sort splice:", nFind)
|
this.dragLists[pagePos].splice(nFind, 1);
|
}
|
}
|
|
}
|
//let moveRow = this.getMoveRow(e.offset,e.pageMoveTo);
|
console.log("sort", e.offset, moveRow);
|
// 触发组件confirm 并传递数据
|
this.$emit('confirm', {
|
list: tmpList,
|
index: e.index,
|
moveTo: e.offset,
|
moveRow: moveRow,
|
page: e.page,
|
pageMoveTo: e.pageMoveTo,
|
});
|
/* if(e.pageMoveTo != e.page)
|
{
|
if(this.dragLists.length >e.page)
|
{
|
//let sId =_this.shadowRow.id
|
let list = JSON.parse(JSON.stringify(this.dragLists[e.page]));
|
console.log("sort:",list,this.dragLists[e.page])
|
for (let i = 0, len = list.length; i < len; i++) {
|
if( list[i].HMDrag_sort ==e.index)
|
{
|
this.dragLists[e.page].splice(i,1);
|
break;
|
}
|
}
|
}
|
} */
|
|
},
|
getNowList() {
|
let pagePos = this.curPage
|
let list = []
|
if (this.dragLists.length > pagePos)
|
list = JSON.parse(JSON.stringify(this.dragLists[pagePos]));
|
let tmpList = [];
|
for (let i = 0, len = list.length; i < len; i++) {
|
let tmpSotr = list[i].HMDrag_sort;
|
tmpList[tmpSotr] = list[i];
|
// 检测清除临时id和sort
|
delete tmpList[tmpSotr].HMDrag_id;
|
delete tmpList[tmpSotr].HMDrag_sort;
|
}
|
return tmpList;
|
},
|
splice() {
|
console.log("splice");
|
let deleteIndex = arguments[0];
|
let deleteLength = arguments[1];
|
let len = arguments.length;
|
let waitPushList = [];
|
for (let i = 2; i < len; i++) {
|
let newRow = arguments[i]
|
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
newRow.HMDrag_sort = deleteIndex + i - 2;
|
waitPushList.push(newRow);
|
}
|
let minDeleteSort = deleteIndex;
|
let maxDeleteSort = deleteLength > 0 ? deleteIndex + deleteLength - 1 : deleteIndex;
|
let offsetSort = waitPushList.length - deleteLength;
|
let deleteIndexArray = [];
|
|
let pagePos = this.curPage
|
let list = []
|
if (this.dragLists.length > pagePos) {
|
for (let i = this.dragLists[pagePos].length - 1; i >= 0; i--) {
|
let row = this.dragLists[pagePos][i];
|
let rowSort = row.HMDrag_sort;
|
// 跳过
|
if (rowSort < minDeleteSort) {
|
continue;
|
}
|
// 删除
|
if (deleteLength > 0 && rowSort >= minDeleteSort && rowSort <= maxDeleteSort) {
|
this.dragLists[pagePos].splice(i, 1);
|
continue;
|
}
|
if (offsetSort != 0 && rowSort >= maxDeleteSort) {
|
let newSort = rowSort + offsetSort;
|
this.dragLists[pagePos][i].HMDrag_sort = newSort;
|
}
|
}
|
this.dragLists[pagePos].push(...waitPushList);
|
this.pushNewSort();
|
let list = JSON.parse(JSON.stringify(this.dragLists[pagePos]));
|
}
|
let tmpList = this.getNowList();
|
return tmpList;
|
},
|
push() {
|
console.log("push");
|
let len = arguments.length;
|
let waitPushList = [];
|
let pagePos = this.curPage
|
if (this.dragLists.length > pagePos) {
|
let startSort = this.dragLists[pagePos].length;
|
for (let i = 0; i < len; i++) {
|
let newRow = arguments[i]
|
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
newRow.HMDrag_sort = startSort + i;
|
waitPushList.push(newRow);
|
}
|
this.dragLists[pagePos].push(...waitPushList);
|
this.pushNewSort();
|
}
|
let tmpList = this.getNowList();
|
return tmpList;
|
},
|
unshit() {
|
console.log("unshit");
|
let len = arguments.length;
|
let waitPushList = [];
|
for (let i = 0; i < len; i++) {
|
let newRow = arguments[i]
|
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
newRow.HMDrag_sort = i;
|
waitPushList.push(newRow);
|
}
|
let pagePos = this.curPage
|
if (this.dragLists.length > pagePos) {
|
for (let i = this.dragLists[pagePos].length - 1; i >= 0; i--) {
|
let row = this.dragLists[pagePos][i];
|
let rowSort = row.HMDrag_sort;
|
let newSort = rowSort + len;
|
this.dragLists[pagePos][i].HMDrag_sort = newSort;
|
}
|
this.dragLists[pagePos].push(...waitPushList);
|
this.pushNewSort();
|
}
|
let tmpList = this.getNowList();
|
return tmpList;
|
},
|
pushNewSort() {
|
let sortArray = [];
|
let pagePos = this.curPage
|
if (this.dragLists.length > pagePos) {
|
for (let i = 0, len = this.dragLists[pagePos].length; i < len; i++) {
|
sortArray.push(this.dragLists[pagePos][i].HMDrag_sort);
|
}
|
}
|
this.pushWxsData('sortArray', sortArray);
|
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
},
|
pushWxsData(key = null, val = null) {
|
let pagePos = this.curPage
|
let listLen = 0
|
//console.log("pushWxsData:",pagePos,key,val);
|
if (this.dragLists.length > pagePos) {
|
listLen = this.dragLists[pagePos].length
|
}
|
//console.log("pushWxsData:",JSON.stringify(this.wxsDataObj));
|
27
|
this.wxsDataObj.splice(0, 11, ['guid', this.guid],
|
['windowWidth', this.windowWidth],
|
['listViewTop', this.ListViewTop],
|
['listLength', listLen],
|
['ListHeight', this.ListHeight - 32],
|
['isAppH5', this.isAppH5],
|
['longTouch', this.longTouch],
|
['longTouchTime', this.longTouchTime],
|
['feedbackGenerator', this.feedbackGenerator],
|
['curPage', pagePos],
|
['autoScroll', this.autoScroll]);
|
|
let index = -1;
|
let sotrArrayIndex = -1;
|
for (let i = 0; i < this.wxsDataObj.length; i++) {
|
if (this.wxsDataObj[i][0] == key) {
|
index = i;
|
break;
|
}
|
}
|
//console.log("pushWxsData2:",index,JSON.stringify(this.wxsDataObj));
|
if (index > -1) {
|
this.wxsDataObj[index][1] = val;
|
if (key == 'sortArray') {
|
sotrArrayIndex = index;
|
}
|
} else {
|
this.wxsDataObj.push([key, val]);
|
if (key == 'sortArray') {
|
sotrArrayIndex = this.wxsDataObj.length - 1;
|
}
|
}
|
|
if (this.guid == "") {
|
return;
|
}
|
//console.log("pushWxsData3:",JSON.stringify(this.wxsDataObj));
|
this.wxsDataStr = JSON.stringify(this.wxsDataObj);
|
|
},
|
compareVersion(v1, v2) {
|
v1 = v1.split('.')
|
v2 = v2.split('.')
|
const len = Math.max(v1.length, v2.length)
|
|
while (v1.length < len) {
|
v1.push('0')
|
}
|
while (v2.length < len) {
|
v2.push('0')
|
}
|
for (let i = 0; i < len; i++) {
|
const num1 = parseInt(v1[i])
|
const num2 = parseInt(v2[i])
|
|
if (num1 > num2) {
|
return 1
|
} else if (num1 < num2) {
|
return -1
|
}
|
}
|
return 0
|
},
|
handleStart(ev) {
|
//console.log(ev);
|
//记录一开始手指按下的坐标
|
if (this.isTouchDragEnd) {
|
let touch = ev.changedTouches[0];
|
this.startPoint.x = touch.pageX;
|
this.startPoint.y = touch.pageY;
|
this.xTouch = touch.pageX;
|
this.yTouch = touch.pageY;
|
/* this.curPoint.x = touch.pageX - this.startPoint.x;
|
this.curPoint.y = touch.pageY - this.startPoint.y; */
|
}
|
console.log("handleStart:", this.isTouchDragEnd)
|
|
},
|
handleMove(ev) {
|
//防止页面高度很大,出现滚动条,不能移动,默认拖动滚动事件
|
//console.log("handleMove:")
|
ev.preventDefault();
|
if (this.isTouchDragEnd) {
|
this.isTouchMove = true;
|
let touch = ev.changedTouches[0];
|
let diffPoint = {}; //存放差值
|
let movePoint = {
|
//记录移动的记录
|
x: 0,
|
y: 0
|
};
|
diffPoint.x = touch.pageX - this.startPoint.x;
|
diffPoint.y = touch.pageY - this.startPoint.y;
|
//移动的距离 = 差值 + 当前坐标
|
movePoint.x = diffPoint.x + this.curPoint.x;
|
movePoint.y = diffPoint.y + this.curPoint.y;
|
this.xTouch = touch.pageX;
|
this.yTouch = touch.pageY;
|
//this.move(movePoint.x,movePoint.y);
|
} else {
|
let touch = ev.changedTouches[0];
|
}
|
},
|
handleEnd(ev) {
|
|
var _this = this
|
//console.log("handleEnd:",_this.isTouchMove,ev)
|
if (!_this.isTouchMove) return;
|
// 更新坐标原点
|
let touch = ev.changedTouches[0];
|
let diffPoint = {}; //存放差值
|
diffPoint.x = touch.pageX - _this.startPoint.x;
|
let nPage = _this.curPage
|
if (diffPoint.x > 50) {
|
if (nPage <= 0) {
|
_this.xMove = 0
|
} else {
|
nPage -= 1
|
}
|
} else if (diffPoint.x < -50) {
|
if (nPage < _this.countPage - 1) {
|
nPage += 1
|
}
|
}
|
let x = -(nPage * (_this.windowWidth - (_this.swiperMargin * 2)) - _this.swiperMargin)
|
let offsetX = x - _this.xMove
|
console.log("handleEnd:", nPage, x, _this.xMove, offsetX)
|
if (offsetX != 0) {
|
_this.animation.translateX(x).step({
|
duration: 400
|
});
|
_this.animationData = _this.animation.export();
|
_this.xMove = x
|
}
|
_this.curPoint.x += touch.pageX - _this.startPoint.x;
|
_this.curPoint.y += touch.pageY - _this.startPoint.y;
|
// 重置
|
_this.isTouchMove = false;
|
if (nPage != _this.curPage) {
|
_this.curPage = nPage
|
_this.pushWxsData('curPage', _this.curPage);
|
_this.pushNewSort();
|
}
|
},
|
touchEnd(ev) {
|
|
var _this = this
|
//console.log("touchEnd:",_this.isTouchMove,ev)
|
if (!_this.isTouchMove) return;
|
// 更新坐标原点
|
let touch = ev.changedTouches[0];
|
let diffPoint = {}; //存放差值
|
diffPoint.x = touch.pageX - _this.startPoint.x;
|
let nPage = _this.curPage
|
if (diffPoint.x > 50) {
|
if (nPage <= 0) {
|
_this.xMove = 0
|
} else {
|
nPage -= 1
|
}
|
} else if (diffPoint.x < -50) {
|
if (nPage < _this.countPage - 1) {
|
nPage += 1
|
}
|
}
|
let x = -(nPage * (_this.windowWidth - (_this.swiperMargin * 2)) - _this.swiperMargin)
|
let offsetX = x - _this.xMove
|
console.log("touchEnd:", nPage, x, _this.xMove, offsetX)
|
if (offsetX != 0) {
|
_this.animation.translateX(x).step({
|
duration: 400
|
});
|
_this.animationData = _this.animation.export();
|
_this.xMove = x
|
}
|
_this.curPoint.x += touch.pageX - _this.startPoint.x;
|
_this.curPoint.y += touch.pageY - _this.startPoint.y;
|
// 重置
|
_this.isTouchMove = false;
|
if (nPage != _this.curPage) {
|
_this.curPage = nPage
|
_this.pushWxsData('curPage', _this.curPage);
|
_this.pushNewSort();
|
}
|
},
|
move(x, y) {
|
x = x || 0; // 没有传就是0
|
this.xMove = x;
|
console.log("move:", this.xMove)
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// 定义颜色 end
|
.hm-drag-sort {
|
display: flex;
|
flex-direction: row;
|
position: relative;
|
overflow: hidden;
|
height: 100%;
|
|
.uni-swiper {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.swiper-item {
|
display: flex;
|
width: calc(750rpx - 20px);
|
align-items: center;
|
flex-direction: column;
|
}
|
|
.work-panel {
|
display: flex;
|
align-items: center;
|
height: calc(100% - 25px);
|
margin: 1px 2px 4px;
|
width: calc(100% - 4px);
|
flex-direction: column;
|
/* border: 1px solid #eee;
|
background: #eee;
|
border-radius: 5px; */
|
}
|
|
.scroll-view {
|
box-sizing: border-box;
|
height: calc(100% - 30px);
|
scrollbar-width: none;
|
// overflow: hidden;
|
}
|
|
.title-view {
|
display: flex;
|
margin: 0 10px;
|
width: calc(100% - 20px);
|
height: 32px;
|
|
flex-direction: row;
|
|
.left {
|
display: flex;
|
line-height: 32px;
|
}
|
|
.left2 {
|
display: flex;
|
flex: 1;
|
line-height: 32px;
|
padding-left: 12px;
|
}
|
|
.right {
|
display: flex;
|
line-height: 32px;
|
color: gray;
|
font-size: 16px;
|
}
|
}
|
|
.rowBox,
|
.rowBox-shadow {
|
width: 100%;
|
|
.hm-row-shadow,
|
.hm-row0,
|
.hm-row1,
|
.hm-row2,
|
.hm-row3,
|
.hm-row4 {
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
|
.modules {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
box-sizing: border-box;
|
|
.row-content {
|
width: 100%;
|
flex-shrink: 1;
|
|
.row {
|
display: flex;
|
align-items: center;
|
border-style: solid;
|
border: solid 1rpx #ddd;
|
background-color: #fff;
|
border-radius: 5px;
|
margin: 4px 10px;
|
-webkit-box-shadow: 0 10px 6px -6px #ddd;
|
-moz-box-shadow: 0 10px 6px -6px #ddd;
|
box-shadow: 0 10px 6px -6px #ddd;
|
}
|
}
|
}
|
}
|
|
.hm-row-shadow {
|
width: calc(100% - 20px);
|
//margin: 0 5%;
|
/* &.move {
|
opacity: 0.9;
|
} */
|
}
|
|
.hm-row0,
|
.hm-row1,
|
.hm-row2,
|
.hm-row3,
|
.hm-row4 {
|
opacity: 1;
|
|
&.hide {
|
opacity: 0;
|
}
|
|
&.ani {
|
transition: transform 0.2s;
|
-webkit-transition: transform 0.2s;
|
}
|
}
|
}
|
|
.rowBox-shadow {
|
position: absolute;
|
z-index: 100;
|
display: none;
|
|
&.show {
|
display: flex !important;
|
}
|
|
&.hide {
|
display: none !important;
|
}
|
}
|
|
.swiper-panel-indicator {
|
position: absolute;
|
z-index: 99;
|
display: flex !important;
|
bottom: 2px;
|
height: 12px;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
}
|
|
.swiper-indicator-dots {
|
display: flex !important;
|
flex-direction: row;
|
}
|
|
.swiper-indicator-dot {
|
display: flex !important;
|
height: 12px;
|
width: 14px;
|
padding: 2px 3px;
|
font-size: 10px;
|
}
|
|
.list {
|
display: flex;
|
flex-direction: column;
|
}
|
|
}
|
</style>
|