forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
6.3 KiB
206 lines
6.3 KiB
<template>
|
|
<view class="py-3 mt-4 bg-white u-font-15">
|
|
<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 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 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(subItem)"></u-icon>
|
|
</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 {
|
|
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: {
|
|
...mapState('project', ['projects']),
|
|
...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 所点击的项目的信息
|
|
*/
|
|
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() {
|
|
this.show = !this.show;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
|