|
|
|
@ -3,15 +3,27 @@ |
|
|
|
<scroll-view scroll-y="true"> |
|
|
|
<view v-if="!data.changeEvent"> |
|
|
|
<view :id="'cu-' + index" :key="item.id" class="cu-item flex-col" v-for="(item, index) in data.itemList"> |
|
|
|
<ProjectItem class="w-full" :index="index" :item="item" :menuList="menuList" @setData="setData" |
|
|
|
@openSubProject="openSubProject" /> |
|
|
|
<ProjectItem |
|
|
|
class="w-full" |
|
|
|
:index="index" |
|
|
|
:item="item" |
|
|
|
:menuList="data.menuList" |
|
|
|
@setData="setData" |
|
|
|
@openSubProject="openSubProject" |
|
|
|
/> |
|
|
|
</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 |
|
|
|
: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 data.itemList" |
|
|
|
> |
|
|
|
<view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view> |
|
|
|
|
|
|
|
<!-- 内容区 --> |
|
|
|
@ -24,23 +36,20 @@ |
|
|
|
<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 flex-shrink-0"> |
|
|
|
进行中</view> |
|
|
|
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full flex-shrink-0">进行中</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="pr-2">{{ dayjs(+item.startTime).format('MM-DD HH:mm') }}</view> |
|
|
|
至 |
|
|
|
<view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view> |
|
|
|
<view class="pl-2">{{ dayjs(+item.endTime).format('MM-DD HH:mm') }}</view> |
|
|
|
</view> |
|
|
|
</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> |
|
|
|
<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> |
|
|
|
@ -62,7 +71,15 @@ |
|
|
|
<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=" |
|
|
|
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 flex-shrink-0"> |
|
|
|
{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }} |
|
|
|
</view> |
|
|
|
@ -84,7 +101,7 @@ |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<!-- 移动悬浮 begin --> |
|
|
|
<view v-if="showMoveImage"> |
|
|
|
<view v-if="data.showMoveImage"> |
|
|
|
<view :style="{ left: moveLeft + 'px', top: moveTop + 'px' }" class="cu-item absolute"> |
|
|
|
<ProjectItem class="w-full" :item="moveItem" /> |
|
|
|
</view> |
|
|
|
@ -92,7 +109,7 @@ |
|
|
|
<!-- 移动悬浮 end --> |
|
|
|
|
|
|
|
<!-- 项目操作面板 --> |
|
|
|
<u-action-sheet :list="menuList" :tips="tips" @click="chooseAction" v-model="showMenu"></u-action-sheet> |
|
|
|
<u-action-sheet :list="data.menuList" :tips="data.tips" @click="chooseAction" v-model="data.showMenu"></u-action-sheet> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -100,6 +117,7 @@ |
|
|
|
import { ref, onMounted, watch, computed } from 'vue'; |
|
|
|
import ProjectItem from '@/components/Projects/ProjectItem.vue'; |
|
|
|
import { useStore } from 'vuex'; |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
|
|
|
|
const store = useStore(); |
|
|
|
const projects = computed(() => store.state.project.projects); |
|
|
|
@ -142,8 +160,6 @@ |
|
|
|
item.showSubBorder = false; |
|
|
|
item.showTopBorder = false; |
|
|
|
}); |
|
|
|
|
|
|
|
console.log('watch', data.value.itemList) |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
@ -153,8 +169,6 @@ |
|
|
|
item.showSubBorder = false; |
|
|
|
item.showTopBorder = false; |
|
|
|
}); |
|
|
|
|
|
|
|
console.log('onMounted', data.value.itemList) |
|
|
|
}); |
|
|
|
|
|
|
|
// 展开子项目 |
|
|
|
@ -183,9 +197,9 @@ |
|
|
|
} |
|
|
|
|
|
|
|
function chooseAction(e) { |
|
|
|
let data = { index: e, projectId: data.value.projectId }; |
|
|
|
let obj = { index: e, projectId: data.value.projectId }; |
|
|
|
// this.$emit('chooseAction', data); |
|
|
|
actionFun(data); |
|
|
|
actionFun(obj); |
|
|
|
} |
|
|
|
|
|
|
|
// 操作 |
|
|
|
@ -193,7 +207,7 @@ |
|
|
|
let action = data.value.menuList[obj.index].text; |
|
|
|
if (action === '排序') { |
|
|
|
data.value.changeEvent = true; |
|
|
|
this.$ui.showToast('请移动进行排序'); |
|
|
|
uni.$ui.showToast('请移动进行排序'); |
|
|
|
} |
|
|
|
|
|
|
|
if (action === '删除') { |
|
|
|
@ -219,6 +233,7 @@ |
|
|
|
if (isNumber(index)) { |
|
|
|
data.value.setSubItem = false; |
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
|
console.log('2222', query) |
|
|
|
query.select(`#cu-${index}`).boundingClientRect(res => { |
|
|
|
data.value.moveTop = res.top; |
|
|
|
data.value.moveLeft = res.left; |
|
|
|
@ -255,8 +270,9 @@ |
|
|
|
} |
|
|
|
data.value.moveLeft = touch.pageX - data.value.deltaLeft; |
|
|
|
data.value.moveTop = touch.pageY - data.value.deltaTop; |
|
|
|
|
|
|
|
let lastIndex = (lastIndex = findOverIndex(touch.pageY, length)); |
|
|
|
|
|
|
|
let lastIndex = (lastIndex = findOverIndex(touch.pageY, length)); |
|
|
|
console.log('111111', lastIndex); |
|
|
|
// 显示下划线 |
|
|
|
for (let i = 0; i < data.value.itemList.length; i++) { |
|
|
|
if (data.value.moveLeft > 35) { |
|
|
|
|
