|
|
|
@ -1,104 +1,115 @@ |
|
|
|
<template> |
|
|
|
<view class> |
|
|
|
<scroll-view scroll-y="true" style="height: 80%"> |
|
|
|
<view |
|
|
|
:id="'cu-' + index" |
|
|
|
:key="index" |
|
|
|
:style="{ 'background-color': item.color }" |
|
|
|
class="cu-item flex-col" |
|
|
|
v-for="(item, index) in itemList" |
|
|
|
@touchend="stops($event, index)" |
|
|
|
@touchmove.stop.prevent="move" |
|
|
|
@touchstart="start($event, index)" |
|
|
|
> |
|
|
|
<view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view> |
|
|
|
<!-- 内容区 --> |
|
|
|
<!-- <project-item :index="index" :item="item"></project-item> --> |
|
|
|
<!-- 父项目 --> |
|
|
|
<view class="w-full"> |
|
|
|
<view class="flex items-center justify-between p-3"> |
|
|
|
<u-icon @click="openMenu(item)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon> |
|
|
|
<view v-if="!changeEvent"> |
|
|
|
<view :id="'cu-' + index" :key="item.id" class="cu-item flex-col" v-for="(item, index) in itemList"> |
|
|
|
<project-item |
|
|
|
:index="index" |
|
|
|
:item="item" |
|
|
|
:menuList="menuList" |
|
|
|
@chooseAction="chooseAction" |
|
|
|
@openSubProject="openSubProject" |
|
|
|
></project-item> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-else> |
|
|
|
<view |
|
|
|
:id="'cu-' + index" |
|
|
|
:key="index" |
|
|
|
:style="{ 'background-color': item.color }" |
|
|
|
@touchend="stops($event, index)" |
|
|
|
@touchmove.stop.prevent="move" |
|
|
|
@touchstart="start($event, index)" |
|
|
|
class="cu-item flex-col" |
|
|
|
v-for="(item, index) in itemList" |
|
|
|
> |
|
|
|
<view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view> |
|
|
|
<!-- 内容区 --> |
|
|
|
<!-- 父项目 --> |
|
|
|
<view class="w-full"> |
|
|
|
<view class="flex items-center justify-between p-3"> |
|
|
|
<u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon> |
|
|
|
|
|
|
|
<view class="flex-1 px-3"> |
|
|
|
<view class="flex items-center mb-1"> |
|
|
|
<view class="mr-2">{{ item.name }}</view> |
|
|
|
<!-- 状态 TODO:--> |
|
|
|
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view @click="openProject(item)" class="flex-1 px-3"> |
|
|
|
<view class="flex items-center mb-1"> |
|
|
|
<view class="mr-2">{{ item.name }}</view> |
|
|
|
<!-- 状态 TODO:--> |
|
|
|
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view> |
|
|
|
<view class="flex items-center text-xs text-gray-400"> |
|
|
|
<view class="pr-2">{{ $moment(+item.startTime).format('MM-DD HH:mm') }}</view>至 |
|
|
|
<view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex items-center text-xs text-gray-400"> |
|
|
|
<view class="pr-2"> {{ $moment(+item.startTime).format('MM-DD HH:mm') }} </view>至 |
|
|
|
<view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view> |
|
|
|
<!-- 箭头 --> |
|
|
|
<view v-if="item.sonProjectList && item.sonProjectList.length"> |
|
|
|
<u-icon |
|
|
|
@click="openSubProject(item.sonProjectList.length, index)" |
|
|
|
class="text-gray-400" |
|
|
|
name="arrow-up" |
|
|
|
size="14px" |
|
|
|
v-if="item.show" |
|
|
|
></u-icon> |
|
|
|
<u-icon |
|
|
|
@click="openSubProject(item.sonProjectList.length, index)" |
|
|
|
class="text-gray-400" |
|
|
|
name="arrow-down" |
|
|
|
size="14px" |
|
|
|
v-else |
|
|
|
></u-icon> |
|
|
|
</view> |
|
|
|
<u-icon class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 箭头 --> |
|
|
|
<view v-if="item.sonProjectList && item.sonProjectList.length"> |
|
|
|
<u-icon |
|
|
|
@click="openSubProject(item.sonProjectList.length, index)" |
|
|
|
class="text-gray-400" |
|
|
|
name="arrow-up" |
|
|
|
size="14px" |
|
|
|
v-if="item.show" |
|
|
|
></u-icon> |
|
|
|
<u-icon |
|
|
|
@click="openSubProject(item.sonProjectList.length, index)" |
|
|
|
class="text-gray-400" |
|
|
|
name="arrow-down" |
|
|
|
size="14px" |
|
|
|
v-else |
|
|
|
></u-icon> |
|
|
|
</view> |
|
|
|
<u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon> |
|
|
|
</view> |
|
|
|
<!-- 父项目 end --> |
|
|
|
<!-- 子项目 --> |
|
|
|
|
|
|
|
<view class="ml-8" v-if="item.show"> |
|
|
|
<view |
|
|
|
:id="'cu-' + index + '-' + subIndex" |
|
|
|
:key="subIndex" |
|
|
|
:style="{ 'background-color': item.color }" |
|
|
|
@touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)" |
|
|
|
@touchmove.stop.prevent="move($event, item.sonProjectList.length)" |
|
|
|
@touchstart.stop.prevent="start($event, index + '-' + subIndex)" |
|
|
|
class="cu-item flex-col" |
|
|
|
v-for="(subItem, subIndex) in item.sonProjectList" |
|
|
|
> |
|
|
|
<!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> --> |
|
|
|
<view class="flex items-center justify-between p-3 w-full"> |
|
|
|
<u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon> |
|
|
|
|
|
|
|
<view @click="openProject(subItem)" class="flex-1 px-3"> |
|
|
|
<view class="flex items-center"> |
|
|
|
<view class="mr-2">{{ subItem.name }}</view> |
|
|
|
<!-- 状态 --> |
|
|
|
<view |
|
|
|
class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full" |
|
|
|
:class=" |
|
|
|
subItem.status === 0 |
|
|
|
? 'text-blue-400 bg-blue-100' |
|
|
|
: subItem.status === 1 |
|
|
|
? 'text-green-400 bg-green-100' |
|
|
|
: subItem.status === 2 |
|
|
|
? 'text-red-400 bg-red-100' |
|
|
|
: 'text-gray-400 bg-gray-100' |
|
|
|
" |
|
|
|
> |
|
|
|
{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }} |
|
|
|
<!-- 父项目 end --> |
|
|
|
<!-- 子项目 --> |
|
|
|
<view class="ml-8" v-if="item.show"> |
|
|
|
<view |
|
|
|
:id="'cu-' + index + '-' + subIndex" |
|
|
|
:key="subIndex" |
|
|
|
@touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)" |
|
|
|
@touchmove.stop.prevent="move($event, item.sonProjectList.length)" |
|
|
|
@touchstart.stop.prevent="start($event, index + '-' + subIndex)" |
|
|
|
class="cu-item flex-col" |
|
|
|
v-for="(subItem, subIndex) in item.sonProjectList" |
|
|
|
> |
|
|
|
<!-- @touchstart="start($event, index + '-' + subIndex)" --> |
|
|
|
<!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> --> |
|
|
|
<view class="flex items-center justify-between p-3 w-full"> |
|
|
|
<u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon> |
|
|
|
|
|
|
|
<view class="flex-1 px-3"> |
|
|
|
<view class="flex items-center"> |
|
|
|
<view class="mr-2">{{ subItem.name }}</view> |
|
|
|
<!-- 状态 --> |
|
|
|
<view |
|
|
|
:class=" |
|
|
|
subItem.status === 0 |
|
|
|
? 'text-blue-400 bg-blue-100' |
|
|
|
: subItem.status === 1 |
|
|
|
? 'text-green-400 bg-green-100' |
|
|
|
: subItem.status === 2 |
|
|
|
? 'text-red-400 bg-red-100' |
|
|
|
: 'text-gray-400 bg-gray-100' |
|
|
|
" |
|
|
|
class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full" |
|
|
|
>{{ |
|
|
|
subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' |
|
|
|
}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 箭头 --> |
|
|
|
<u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon> |
|
|
|
<!-- 箭头 --> |
|
|
|
<u-icon class="text-gray-400" name="arrow-right" size="14px"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 内容区 end --> |
|
|
|
<view class="border-100 bg-blue-500" v-if="item.showBorder"></view> |
|
|
|
<view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view> |
|
|
|
</view> |
|
|
|
<!-- 内容区 end --> |
|
|
|
<view class="border-100 bg-blue-500" v-if="item.showBorder"></view> |
|
|
|
<view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<!-- 移动悬浮 begin --> |
|
|
|
@ -108,15 +119,12 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 移动悬浮 end --> |
|
|
|
|
|
|
|
<!-- 项目操作面板 --> |
|
|
|
<u-action-sheet :list="menuList" :tips="tips" v-model="showMenu"></u-action-sheet> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import ProjectItem from '../Projects/ProjectItem.vue'; |
|
|
|
import { mapGetters, mapMutations } from 'vuex'; |
|
|
|
import { mapState, mapGetters, mapMutations } from 'vuex'; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { ProjectItem }, |
|
|
|
@ -126,16 +134,6 @@ export default { |
|
|
|
event: 'change', |
|
|
|
}, |
|
|
|
|
|
|
|
props: { |
|
|
|
list: { |
|
|
|
// 数据交换列表 |
|
|
|
type: Array, |
|
|
|
default() { |
|
|
|
return []; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
itemTop: 0, |
|
|
|
@ -153,6 +151,7 @@ export default { |
|
|
|
begintop: 0, |
|
|
|
itemList: [], |
|
|
|
setSubItem: false, |
|
|
|
changeEvent: false, |
|
|
|
|
|
|
|
showMenu: false, |
|
|
|
tips: { |
|
|
|
@ -160,18 +159,30 @@ export default { |
|
|
|
color: '#909399', |
|
|
|
fontSize: 28, |
|
|
|
}, |
|
|
|
menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }], |
|
|
|
menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }, { text: '排序' }], |
|
|
|
// show: false, |
|
|
|
border: 'border border-blue-500 shadow rounded-md', |
|
|
|
showBorder: false, |
|
|
|
showItemIndex: undefined, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
computed: mapGetters('user', ['userId']), |
|
|
|
computed: { |
|
|
|
...mapGetters('user', ['userId']), |
|
|
|
...mapState('project', ['projects']), |
|
|
|
|
|
|
|
mounted: function () { |
|
|
|
eventName() { |
|
|
|
if (this.changeEvent) { |
|
|
|
return 'move.stop.prevent'; |
|
|
|
} else { |
|
|
|
return 'move'; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.$nextTick(function () { |
|
|
|
this.itemList = this.list; |
|
|
|
this.itemList = this.projects; |
|
|
|
this.itemList.forEach(item => { |
|
|
|
item.showBorder = false; |
|
|
|
item.showSubBorder = false; |
|
|
|
@ -181,7 +192,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
list(val) { |
|
|
|
projects(val) { |
|
|
|
this.itemList = val; |
|
|
|
this.itemList.forEach(item => { |
|
|
|
item.showBorder = false; |
|
|
|
@ -193,36 +204,13 @@ export default { |
|
|
|
|
|
|
|
methods: { |
|
|
|
...mapMutations('project', ['setProjectItemShow']), |
|
|
|
|
|
|
|
/** |
|
|
|
* 打开项目 |
|
|
|
* @param {object} project 所点击的项目的信息 |
|
|
|
*/ |
|
|
|
openProject(project) { |
|
|
|
const { name, id, url } = project; |
|
|
|
url && (uni.$t.domain = url); |
|
|
|
this.$u.route('pages/project/project', { |
|
|
|
u: this.userId, |
|
|
|
p: id, |
|
|
|
pname: name, |
|
|
|
url: encodeURIComponent(url), |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 弹出项目操作面板 |
|
|
|
*/ |
|
|
|
openMenu(project) { |
|
|
|
this.showMenu = true; |
|
|
|
this.tips.text = project.name; |
|
|
|
}, |
|
|
|
|
|
|
|
// 展开子项目 |
|
|
|
openSubProject(length, index) { |
|
|
|
this.setProjectItemShow({ index, show: this.itemList[index].show ? false : true }); |
|
|
|
if (length && index) { |
|
|
|
this.$emit('changeHeight', length, index); |
|
|
|
} |
|
|
|
this.showItemIndex = index; |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取项目列表距离顶部的距离 |
|
|
|
@ -238,11 +226,29 @@ export default { |
|
|
|
.exec(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 操作 |
|
|
|
chooseAction(index) { |
|
|
|
if (this.menuList[index].text === '排序') { |
|
|
|
this.changeEvent = true; |
|
|
|
this.$t.ui.showToast('请移动进行排序'); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.showItemIndex !== undefined) { |
|
|
|
this.setProjectItemShow({ index: this.showItemIndex, show: true }); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
isNumber(val) { |
|
|
|
return val === +val; |
|
|
|
}, |
|
|
|
|
|
|
|
start(e, index) { |
|
|
|
if (!this.changeEvent) { |
|
|
|
return; |
|
|
|
} else { |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
console.log('开始'); |
|
|
|
setTimeout(() => { |
|
|
|
this.getDate(); |
|
|
|
}, 300); |
|
|
|
@ -262,7 +268,6 @@ export default { |
|
|
|
.exec(); |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
// this.moveItem = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
this.setSubItem = true; |
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
|
query |
|
|
|
@ -286,6 +291,12 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
move(e, length) { |
|
|
|
if (!this.changeEvent) { |
|
|
|
return; |
|
|
|
} else { |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
console.log('移动'); |
|
|
|
this.showMoveImage = true; //悬浮开始 |
|
|
|
const touch = e.touches[0]; |
|
|
|
if (this.deltaLeft == 0) { |
|
|
|
@ -326,9 +337,14 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
stops(e, index, length) { |
|
|
|
console.log('结束', index); |
|
|
|
if (!this.changeEvent) { |
|
|
|
return; |
|
|
|
} else { |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
|
|
|
|
console.log('结束'); |
|
|
|
const touch = e.mp.changedTouches[0]; |
|
|
|
console.log('touch.pageY: ', touch.pageY); |
|
|
|
let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length)); |
|
|
|
|
|
|
|
// 交换两个值 |
|
|
|
@ -385,7 +401,6 @@ export default { |
|
|
|
if (this.itemList[i].showSubBorder) { |
|
|
|
if (this.isNumber(index)) { |
|
|
|
let Value = this.itemList[index]; |
|
|
|
console.log('lastIndex: ', lastIndex); |
|
|
|
if (this.itemList[lastIndex - 1].sonProjectList && this.itemList[lastIndex - 1].sonProjectList.length) { |
|
|
|
this.itemList[lastIndex - 1].sonProjectList.push(Value); |
|
|
|
} else { |
|
|
|
@ -435,6 +450,8 @@ export default { |
|
|
|
this.deltaLeft == 0; |
|
|
|
this.showMoveImage = false; |
|
|
|
this.setSubItem = false; |
|
|
|
this.changeEvent = false; |
|
|
|
this.showItemIndex = undefined; |
|
|
|
}, |
|
|
|
|
|
|
|
// 找到停下的元素的下标 |
