|
|
@ -3,24 +3,24 @@ |
|
|
|
<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" |
|
|
|
<ProjectItem |
|
|
|
class="w-full" |
|
|
|
:index="index" |
|
|
|
:item="item" |
|
|
|
:menuList="data.menuList" |
|
|
|
@setData="setData" |
|
|
|
@openSubProject="openSubProject" |
|
|
|
@openSubProject="openSubProject" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-else> |
|
|
|
<view |
|
|
|
:id="'cu-' + index" |
|
|
|
:key="index" |
|
|
|
<view |
|
|
|
:id="'cu-' + index" |
|
|
|
:key="index" |
|
|
|
:style="{ 'background-color': item.color }" |
|
|
|
@touchend="stops($event, index)" |
|
|
|
@touchmove.stop.prevent="move" |
|
|
|
@touchend="stops($event, index)" |
|
|
|
@touchmove.stop.prevent="move" |
|
|
|
@touchstart="start($event, index)" |
|
|
|
class="cu-item flex-col" v-for="(item, index) in data.itemList" |
|
|
|
> |
|
|
@ -72,12 +72,12 @@ |
|
|
|
<!-- 状态 --> |
|
|
|
<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' |
|
|
|
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"> |
|
|
@ -118,7 +118,7 @@ |
|
|
|
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); |
|
|
|
const data = ref({ |
|
|
@ -138,7 +138,7 @@ |
|
|
|
itemList: [], |
|
|
|
setSubItem: false, |
|
|
|
changeEvent: false, |
|
|
|
|
|
|
|
|
|
|
|
showMenu: false, |
|
|
|
tips: { |
|
|
|
text: '', |
|
|
@ -152,7 +152,7 @@ |
|
|
|
showBorder: false, |
|
|
|
showItemIndex: undefined, |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
watch(projects, (val) => { |
|
|
|
data.value.itemList = val; |
|
|
|
data.value.itemList.forEach(item => { |
|
|
@ -161,7 +161,7 @@ |
|
|
|
item.showTopBorder = false; |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
data.value.itemList = projects.value; |
|
|
|
data.value.itemList.forEach(item => { |
|
|
@ -170,7 +170,7 @@ |
|
|
|
item.showTopBorder = false; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 展开子项目 |
|
|
|
function openSubProject(length, index) { |
|
|
|
setProjectItemShow({ index, show: data.value.itemList[index].show ? false : true }); |
|
|
@ -179,7 +179,7 @@ |
|
|
|
} |
|
|
|
data.value.showItemIndex = index; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 获取项目列表距离顶部的距离 |
|
|
|
function getDate() { |
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
@ -189,47 +189,47 @@ |
|
|
|
data.value.beginleft = res.left; |
|
|
|
}).exec(); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function setData(flag, projectId, tips) { |
|
|
|
data.value.showMenu = flag; |
|
|
|
data.value.projectId = projectId; |
|
|
|
data.value.tips = tips; |
|
|
|
} |
|
|
|
|
|
|
|
function chooseAction(e) { |
|
|
|
let obj = { index: e, projectId: data.value.projectId }; |
|
|
|
// this.$emit('chooseAction', data); |
|
|
|
actionFun(obj); |
|
|
|
|
|
|
|
function chooseAction(e) { |
|
|
|
let obj = { index: e, projectId: data.value.projectId }; |
|
|
|
// this.$emit('chooseAction', data); |
|
|
|
actionFun(obj); |
|
|
|
} |
|
|
|
|
|
|
|
// 操作 |
|
|
|
function actionFun(obj) { |
|
|
|
let action = data.value.menuList[obj.index].text; |
|
|
|
if (action === '排序') { |
|
|
|
data.value.changeEvent = true; |
|
|
|
uni.$ui.showToast('请移动进行排序'); |
|
|
|
} |
|
|
|
|
|
|
|
if (action === '删除') { |
|
|
|
data.value.changeEvent = false; |
|
|
|
delProject(obj.projectId); |
|
|
|
} |
|
|
|
|
|
|
|
if (data.value.showItemIndex !== undefined) { |
|
|
|
setProjectItemShow({ index: data.value.showItemIndex, show: true }); |
|
|
|
} |
|
|
|
|
|
|
|
// 操作 |
|
|
|
function actionFun(obj) { |
|
|
|
let action = data.value.menuList[obj.index].text; |
|
|
|
if (action === '排序') { |
|
|
|
data.value.changeEvent = true; |
|
|
|
uni.$ui.showToast('请移动进行排序'); |
|
|
|
} |
|
|
|
|
|
|
|
if (action === '删除') { |
|
|
|
data.value.changeEvent = false; |
|
|
|
delProject(obj.projectId); |
|
|
|
} |
|
|
|
|
|
|
|
if (data.value.showItemIndex !== undefined) { |
|
|
|
setProjectItemShow({ index: data.value.showItemIndex, show: true }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function isNumber(val) { |
|
|
|
return val === +val; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function start(e, index) { |
|
|
|
console.log('开始', e); |
|
|
|
setTimeout(() => { |
|
|
|
getDate(); |
|
|
|
}, 300); |
|
|
|
|
|
|
|
|
|
|
|
if (isNumber(index)) { |
|
|
|
data.value.setSubItem = false; |
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
@ -248,7 +248,7 @@ |
|
|
|
query.select(`#cu-${arr[0] - 0}`).boundingClientRect(res => { |
|
|
|
data.value.itemHeight = res.height; |
|
|
|
}).exec(); |
|
|
|
|
|
|
|
|
|
|
|
query.select(`#cu-${index}`).boundingClientRect(res => { |
|
|
|
data.value.moveTop = res.top; |
|
|
|
data.value.moveLeft = res.left; |
|
|
@ -258,149 +258,149 @@ |
|
|
|
}).exec(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function move(e, length) { |
|
|
|
console.log('移动'); |
|
|
|
data.value.showMoveImage = true; //悬浮开始 |
|
|
|
const touch = e.touches[0]; |
|
|
|
if (data.value.deltaLeft == 0) { |
|
|
|
// 获得本身的移动 |
|
|
|
data.value.deltaLeft = touch.pageX - data.value.moveLeft; |
|
|
|
data.value.deltaTop = touch.pageY - data.value.moveTop; |
|
|
|
} |
|
|
|
data.value.moveLeft = touch.pageX - data.value.deltaLeft; |
|
|
|
data.value.moveTop = touch.pageY - data.value.deltaTop; |
|
|
|
|
|
|
|
|
|
|
|
function move(e, length) { |
|
|
|
console.log('移动'); |
|
|
|
data.value.showMoveImage = true; //悬浮开始 |
|
|
|
const touch = e.touches[0]; |
|
|
|
if (data.value.deltaLeft == 0) { |
|
|
|
// 获得本身的移动 |
|
|
|
data.value.deltaLeft = touch.pageX - data.value.moveLeft; |
|
|
|
data.value.deltaTop = touch.pageY - data.value.moveTop; |
|
|
|
} |
|
|
|
data.value.moveLeft = touch.pageX - data.value.deltaLeft; |
|
|
|
data.value.moveTop = touch.pageY - data.value.deltaTop; |
|
|
|
|
|
|
|
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) { |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
|
data.value.itemList[i].showTopBorder = false; |
|
|
|
if (i === lastIndex) { |
|
|
|
data.value.itemList[i].showSubBorder = true; |
|
|
|
} else { |
|
|
|
data.value.itemList[i].showSubBorder = false; |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (lastIndex === -1) { |
|
|
|
data.value.itemList[0].showTopBorder = true; |
|
|
|
data.value.itemList[i].showSubBorder = false; |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
|
} else { |
|
|
|
data.value.itemList[i].showSubBorder = false; |
|
|
|
data.value.itemList[i].showTopBorder = false; |
|
|
|
if (i === lastIndex) { |
|
|
|
data.value.itemList[i].showBorder = true; |
|
|
|
} else { |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log('111111', lastIndex); |
|
|
|
// 显示下划线 |
|
|
|
for (let i = 0; i < data.value.itemList.length; i++) { |
|
|
|
if (data.value.moveLeft > 35) { |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
|
data.value.itemList[i].showTopBorder = false; |
|
|
|
if (i === lastIndex) { |
|
|
|
data.value.itemList[i].showSubBorder = true; |
|
|
|
} else { |
|
|
|
data.value.itemList[i].showSubBorder = false; |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (lastIndex === -1) { |
|
|
|
data.value.itemList[0].showTopBorder = true; |
|
|
|
data.value.itemList[i].showSubBorder = false; |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
|
} else { |
|
|
|
data.value.itemList[i].showSubBorder = false; |
|
|
|
data.value.itemList[i].showTopBorder = false; |
|
|
|
if (i === lastIndex) { |
|
|
|
data.value.itemList[i].showBorder = true; |
|
|
|
} else { |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function stops(e, index, length) { |
|
|
|
console.log('结束'); |
|
|
|
const touch = e.mp.changedTouches[0]; |
|
|
|
let lastIndex = (lastIndex = findOverIndex(touch.pageY, length)); |
|
|
|
|
|
|
|
// 交换两个值 |
|
|
|
for (let i = 0; i < data.value.itemList.length; i++) { |
|
|
|
// 插入顶部 |
|
|
|
if (data.value.itemList[i].showTopBorder) { |
|
|
|
if (isNumber(index)) { |
|
|
|
let Value = data.value.itemList[index]; |
|
|
|
data.value.itemList.unshift(Value); |
|
|
|
data.value.itemList.splice(index + 1, 1); |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
data.value.itemList.unshift(Value); |
|
|
|
data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: 0, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
} |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
this.$emit('change', data.value.itemList); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 插入一级项目 |
|
|
|
if (data.value.itemList[i].showBorder) { |
|
|
|
if (isNumber(index)) { |
|
|
|
let Value = data.value.itemList[index]; |
|
|
|
data.value.itemList.splice(i + 1, 0, Value); |
|
|
|
if (i < index) { |
|
|
|
data.value.itemList.splice(index + 1, 1); |
|
|
|
} else { |
|
|
|
data.value.itemList.splice(index, 1); |
|
|
|
} |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
data.value.itemList.splice(i + 1, 0, Value); |
|
|
|
data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: 0, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
} |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
this.$emit('change', data.value.itemList); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 插入二级项目 |
|
|
|
if (data.value.itemList[i].showSubBorder) { |
|
|
|
if (isNumber(index)) { |
|
|
|
let Value = data.value.itemList[index]; |
|
|
|
if (data.value.itemList[lastIndex - 1].sonProjectList && data.value.itemList[lastIndex - 1].sonProjectList.length) { |
|
|
|
data.value.itemList[lastIndex - 1].sonProjectList.push(Value); |
|
|
|
} else { |
|
|
|
data.value.itemList[lastIndex].sonProjectList = [Value]; |
|
|
|
} |
|
|
|
data.value.itemList.splice(index, 1); |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: data.value.itemList[lastIndex - 1].id, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
if (data.value.itemList[lastIndex].sonProjectList && data.value.itemList[lastIndex].sonProjectList.length) { |
|
|
|
data.value.itemList[lastIndex].sonProjectList.push(Value); |
|
|
|
} else { |
|
|
|
data.value.itemList[lastIndex].sonProjectList = [Value]; |
|
|
|
} |
|
|
|
data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1); |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: data.value.itemList[lastIndex].id, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
|
|
|
|
const options1 = { |
|
|
|
id: Value.id, |
|
|
|
parentId: 0, |
|
|
|
}; |
|
|
|
this.$emit('change', options1); |
|
|
|
} |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function stops(e, index, length) { |
|
|
|
console.log('结束'); |
|
|
|
const touch = e.mp.changedTouches[0]; |
|
|
|
let lastIndex = (lastIndex = findOverIndex(touch.pageY, length)); |
|
|
|
|
|
|
|
// 交换两个值 |
|
|
|
for (let i = 0; i < data.value.itemList.length; i++) { |
|
|
|
// 插入顶部 |
|
|
|
if (data.value.itemList[i].showTopBorder) { |
|
|
|
if (isNumber(index)) { |
|
|
|
let Value = data.value.itemList[index]; |
|
|
|
data.value.itemList.unshift(Value); |
|
|
|
data.value.itemList.splice(index + 1, 1); |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
data.value.itemList.unshift(Value); |
|
|
|
data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: 0, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
} |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
this.$emit('change', data.value.itemList); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 插入一级项目 |
|
|
|
if (data.value.itemList[i].showBorder) { |
|
|
|
if (isNumber(index)) { |
|
|
|
let Value = data.value.itemList[index]; |
|
|
|
data.value.itemList.splice(i + 1, 0, Value); |
|
|
|
if (i < index) { |
|
|
|
data.value.itemList.splice(index + 1, 1); |
|
|
|
} else { |
|
|
|
data.value.itemList.splice(index, 1); |
|
|
|
} |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
data.value.itemList.splice(i + 1, 0, Value); |
|
|
|
data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: 0, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
} |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
this.$emit('change', data.value.itemList); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 插入二级项目 |
|
|
|
if (data.value.itemList[i].showSubBorder) { |
|
|
|
if (isNumber(index)) { |
|
|
|
let Value = data.value.itemList[index]; |
|
|
|
if (data.value.itemList[lastIndex - 1].sonProjectList && data.value.itemList[lastIndex - 1].sonProjectList.length) { |
|
|
|
data.value.itemList[lastIndex - 1].sonProjectList.push(Value); |
|
|
|
} else { |
|
|
|
data.value.itemList[lastIndex].sonProjectList = [Value]; |
|
|
|
} |
|
|
|
data.value.itemList.splice(index, 1); |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: data.value.itemList[lastIndex - 1].id, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
} else { |
|
|
|
let arr = index.split('-'); |
|
|
|
let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0]; |
|
|
|
if (data.value.itemList[lastIndex].sonProjectList && data.value.itemList[lastIndex].sonProjectList.length) { |
|
|
|
data.value.itemList[lastIndex].sonProjectList.push(Value); |
|
|
|
} else { |
|
|
|
data.value.itemList[lastIndex].sonProjectList = [Value]; |
|
|
|
} |
|
|
|
data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1); |
|
|
|
// 清空 |
|
|
|
clearSet(i); |
|
|
|
const options = { |
|
|
|
id: Value.id, |
|
|
|
parentId: data.value.itemList[lastIndex].id, |
|
|
|
}; |
|
|
|
this.$emit('change', options); |
|
|
|
|
|
|
|
const options1 = { |
|
|
|
id: Value.id, |
|
|
|
parentId: 0, |
|
|
|
}; |
|
|
|
this.$emit('change', options1); |
|
|
|
} |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 还原初始数据 |
|
|
|
function clearSet(i) { |
|
|
|
data.value.itemList[i].showBorder = false; |
|
|
@ -412,7 +412,7 @@ |
|
|
|
data.value.changeEvent = false; |
|
|
|
data.value.showItemIndex = undefined; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 找到停下的元素的下标 |
|
|
|
function findOverIndex(posY) { |
|
|
|
// 如果有子项目展开着 |
|
|
@ -434,7 +434,7 @@ |
|
|
|
return 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 删除项目 |
|
|
|
function delProject(id) { |
|
|
|
uni.showModal({ |
|
|
@ -450,7 +450,7 @@ |
|
|
|
flag_index = index; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
data.value.itemList.splice(flag_index, 1); |
|
|
|
setProjects(data.value.itemList); |
|
|
|
} |
|
|
@ -477,4 +477,4 @@ |
|
|
|
height: 2px; |
|
|
|
margin-left: 30px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|