|
|
|
@ -1,39 +1,88 @@ |
|
|
|
<template> |
|
|
|
<view class="py-3 mt-4 bg-white u-font-15"> |
|
|
|
<view v-for="(project, index) in projects" :key="index"> |
|
|
|
<!-- 有子项目 --> |
|
|
|
<view class="flex items-center justify-between p-3"> |
|
|
|
<view class="text-blue-400 border border-blue-200 rounded-full order bg-blue-50"> |
|
|
|
{{ index + 1 }} |
|
|
|
</view> |
|
|
|
<draggable |
|
|
|
v-model="projectLists" |
|
|
|
chosenClass="active" |
|
|
|
animation="500" |
|
|
|
@chang="change" |
|
|
|
@start="start" |
|
|
|
@end="end" |
|
|
|
:move="move" |
|
|
|
handle=".mover" |
|
|
|
> |
|
|
|
<view v-for="(project, index) in projectLists" :key="index"> |
|
|
|
<!-- 有子项目 --> |
|
|
|
<view class="flex items-center justify-between p-3" :class="project.showBorder ? border : ''"> |
|
|
|
<u-icon class="mover" @click="openMenu(project)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon> |
|
|
|
|
|
|
|
<view class="flex-1 px-3 divide-y divide-light-blue-400" @click="openProject(project)"> |
|
|
|
<view class="flex items-center mb-1"> |
|
|
|
<view class="mr-2">{{ project.name }}+{{ project.showBorder }}</view> |
|
|
|
<!-- 状态 TODO:--> |
|
|
|
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex-1 px-3"> |
|
|
|
<view class="flex items-center mb-1"> |
|
|
|
<view class="mr-2">{{ project.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(+project.startTime).format('MM-DD HH:mm') }}</view> |
|
|
|
至 |
|
|
|
<view class="pl-2"> {{ $moment(+project.endTime).format('MM-DD HH:mm') }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex items-center text-xs text-gray-400"> |
|
|
|
<view class="pr-2">{{ $moment(+project.startTime).format('MM-DD HH:mm') }}</view> |
|
|
|
至 |
|
|
|
<view class="pl-2"> {{ $moment(+project.endTime).format('MM-DD HH:mm') }}</view> |
|
|
|
<!-- 箭头 --> |
|
|
|
<view v-if="project.subProject && project.subProject.length"> |
|
|
|
<u-icon name="arrow-up" class="text-gray-400" size="14px" v-if="show" @click="openSubProject"></u-icon> |
|
|
|
<u-icon name="arrow-down" class="text-gray-400" size="14px" v-else @click="openSubProject"></u-icon> |
|
|
|
</view> |
|
|
|
<u-icon v-else name="arrow-right" class="text-gray-400" size="14px" @click="openProject(project)"></u-icon> |
|
|
|
</view> |
|
|
|
<!-- 有子项目 --> |
|
|
|
<view v-if="show" class="ml-8"> |
|
|
|
<view v-for="subItem in project.subProject" :key="subItem.id"> |
|
|
|
<view class="flex items-center justify-between p-3"> |
|
|
|
<u-icon class="mover" @click="openMenu(subItem)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon> |
|
|
|
|
|
|
|
<view class="flex-1 px-3" @click="openProject(subItem)"> |
|
|
|
<view class="flex items-center"> |
|
|
|
<view class="mr-2">{{ subItem.name }}</view> |
|
|
|
<!-- 状态 TODO:--> |
|
|
|
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 箭头 --> |
|
|
|
<u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(project)"></u-icon> |
|
|
|
<!-- 箭头 --> |
|
|
|
<u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(subItem)"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</draggable> |
|
|
|
|
|
|
|
<!-- 项目操作面板 --> |
|
|
|
<u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import draggable from 'vuedraggable'; |
|
|
|
import { mapGetters, mapState } from 'vuex'; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { draggable }, |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
return { |
|
|
|
showMenu: false, |
|
|
|
tips: { |
|
|
|
text: '', |
|
|
|
color: '#909399', |
|
|
|
fontSize: 28, |
|
|
|
}, |
|
|
|
list: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }], |
|
|
|
projectLists: [], |
|
|
|
show: false, |
|
|
|
border: 'border border-blue-500 shadow rounded-md', |
|
|
|
showBorder: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
@ -41,7 +90,79 @@ export default { |
|
|
|
...mapGetters('user', ['userId']), |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
projects(val) { |
|
|
|
if (val) { |
|
|
|
this.projectLists = [...this.projects]; |
|
|
|
|
|
|
|
const arr = [ |
|
|
|
{ |
|
|
|
endTime: '1659680363000', |
|
|
|
id: '1420652719055835520', |
|
|
|
name: '测试子项目', |
|
|
|
startTime: '1596608363000', |
|
|
|
status: 1, |
|
|
|
url: 'https://www.tall.wiki/gateway/qcp/v3.0', |
|
|
|
}, |
|
|
|
]; |
|
|
|
this.projectLists[0].subProject = [...arr]; |
|
|
|
console.log('this.projectLists[0]: ', this.projectLists[0]); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.projectLists = [...this.projects]; |
|
|
|
const arr = [ |
|
|
|
{ |
|
|
|
endTime: '1659680363000', |
|
|
|
id: '1420652719055835520', |
|
|
|
name: '测试子项目', |
|
|
|
startTime: '1596608363000', |
|
|
|
status: 1, |
|
|
|
url: 'https://www.tall.wiki/gateway/qcp/v3.0', |
|
|
|
}, |
|
|
|
]; |
|
|
|
this.projectLists[0].subProject = [...arr]; |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
change(event) { |
|
|
|
console.log('change', event); |
|
|
|
}, |
|
|
|
start(event) { |
|
|
|
console.log('开始', event); |
|
|
|
}, |
|
|
|
end(event) { |
|
|
|
console.log('结束', event, this.groups); |
|
|
|
this.showBorder = false; |
|
|
|
}, |
|
|
|
move(event, orgin) { |
|
|
|
console.log('move', event, orgin); |
|
|
|
// 移动的位置 |
|
|
|
console.log('clientX', orgin.clientX); |
|
|
|
console.log('clientY', orgin.clientY); |
|
|
|
if (orgin.clientX > 60) { |
|
|
|
// this.showBorder = true; |
|
|
|
console.log('this.showBorder: ', this.showBorder); |
|
|
|
this.projectLists[event.draggedContext.futureIndex].showBorder = true; |
|
|
|
// this.projectLists[event.draggedContext.futureIndex].subProject = this.projectLists[event.relatedContext.index] |
|
|
|
} else { |
|
|
|
// this.showBorder = false; |
|
|
|
this.projectLists[event.draggedContext.futureIndex].showBorder = false; |
|
|
|
} |
|
|
|
|
|
|
|
// 移动前的位置 |
|
|
|
console.log('移动前', event.draggedContext); |
|
|
|
// 移动后的位置 |
|
|
|
console.log('移动后', event.relatedContext); |
|
|
|
// 返回新数组 |
|
|
|
// [this.projectLists[event.draggedContext.index], this.projectLists[event.relatedContext.index]] = [ |
|
|
|
// this.projectLists[event.relatedContext.index], |
|
|
|
// this.projectLists[event.draggedContext.index], |
|
|
|
// ]; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 打开项目 |
|
|
|
* @param {object} project 所点击的项目的信息 |
|
|
|
@ -56,6 +177,19 @@ export default { |
|
|
|
url: encodeURIComponent(url), |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 弹出项目操作面板 |
|
|
|
*/ |
|
|
|
openMenu(project) { |
|
|
|
this.showMenu = true; |
|
|
|
this.tips.text = project.name; |
|
|
|
}, |
|
|
|
|
|
|
|
// 展开子项目 |
|
|
|
openSubProject() { |
|
|
|
this.show = !this.show; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
