ccsens_tall
/
TALL-MUI-4
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 项目列表排序

test2
xuesinan 4 years ago
parent
e676cf07f6
commit
ad0ce75f5a
2 changed files with 113 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 143
      components/PrettyExchange/PrettyExchange.vue

1
CHANGELOG.md
View File

@ -5,6 +5,7 @@
--|--|--
- | 表单验证 | [8f3bc1e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8f3bc1e)
- | 插件面板分开显示 | [fb5e86b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/fb5e86b)
- | 登录、日历页小绿点、二级项目列表 | [e676cf0](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/e676cf0)
- | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc)
- | 日历页首页 | [561c8e6](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/561c8e6)
- | 日历页添加 | [1b46a91](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b46a91)

143
components/PrettyExchange/PrettyExchange.vue
View File

@ -3,17 +3,31 @@
<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="data.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 data.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>
111111111111
<!-- 内容区 -->
<!-- 父项目 -->
<view class="w-full">
@ -36,10 +50,8 @@
<!-- 箭头 -->
<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>
@ -47,20 +59,24 @@
<!-- 子项目 -->
<view class="ml-8" v-if="item.show">
<view :id="'cu-' + index + '-' + subIndex" :key="subIndex"
<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">
v-for="(subItem, subIndex) 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>
<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="
<view
:class="
subItem.status === 0
? 'text-blue-400 bg-blue-100'
: subItem.status === 1
@ -68,7 +84,8 @@
: 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">
"
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>
</view>
@ -90,8 +107,8 @@
<!-- 移动悬浮 begin -->
<view v-if="data.showMoveImage">
<view :style="{ left: moveLeft + 'px', top: moveTop + 'px' }" class="cu-item absolute">
<ProjectItem class="w-full" :item="moveItem" />
<view :style="{ left: data.moveLeft + 'px', top: data.moveTop + 'px' }" class="cu-item absolute">
<ProjectItem class="w-full" :item="data.moveItem" />
</view>
</view>
<!-- 移动悬浮 end -->
@ -111,20 +128,20 @@
const projects = computed(() => store.state.project.projects);
const data = reactive({
// itemTop: 0,
itemLeft: 0,
// itemLeft: 0,
itemHeight: 0, // 移动元素的高度
subItemHeight: 0, // 移动子元素的高度
itemWidth: 0, // 移动元素的宽度
subItemHeight: 0, // 移动子元素的高度
showMoveImage: false,
moveItem: '',
moveLeft: 0,
moveTop: 0,
moveItem: '', // 当前选中的项目信息
moveLeft: 0, // 当前选中项目距左侧的距离
moveTop: 0, // 当前选中项目距顶部的距离
deltaLeft: 0,
deltaTop: 0,
beginleft: 0,
begintop: 0,
beginleft: 0, // 项目列表中第一个项目初始时距离左侧的距离
begintop: 0, // 项目列表中第一个项目初始时距离顶部的距离
itemList: [], // 项目列表
setSubItem: false,
setSubItem: false, // 选中的是否是二级项目
changeEvent: false, // 是否点击过操作面板
showMenu: false,
tips: { text: '', color: '#909399', fontSize: 28, },
@ -136,8 +153,9 @@
showItemIndex: undefined,
});
const emit = defineEmits(['changeHeight']);
const emit = defineEmits(['changeHeight', 'change']);
// 监听项目列表
watch(projects, (val) => {
data.itemList = val;
data.itemList.forEach(item => {
@ -158,10 +176,7 @@
// 展开子项目
function openSubProject(length, index) {
store.commit('project/setProjectItemShow', {
index,
show: data.itemList[index].show ? false : true
});
store.commit('project/setProjectItemShow', { index, show: data.itemList[index].show ? false : true });
if (length && index) {
emit('changeHeight', length, index);
}
@ -170,9 +185,12 @@
// 获取项目列表距离顶部的距离
function getDate() {
const query = uni.createSelectorQuery().in(this);
query.select(`#cu-0`).boundingClientRect(res => {
console.log('data: ', res);
const query = uni.createSelectorQuery().select(`#cu-0`).fields({
id: true,
dataset: true,
rect: true,
size: true
}, res => {
data.begintop = res.top;
data.beginleft = res.left;
}).exec();
@ -189,7 +207,7 @@
index: e,
projectId: data.projectId
};
// this.$emit('chooseAction', data);
// emit('chooseAction', data);
actionFun(obj);
}
@ -219,31 +237,45 @@
}
function start(e, index) {
console.log('开始', e);
console.log('开始');
setTimeout(() => {
getDate();
}, 300);
if (isNumber(index)) {
if (isNumber(index)) { // 选中一级项目
data.setSubItem = false;
const query = uni.createSelectorQuery().in(this);
console.log('2222', query)
query.select(`#cu-${index}`).boundingClientRect(res => {
const query = uni.createSelectorQuery().select(`#cu-${index}`).fields({
id: true,
dataset: true,
rect: true,
size: true
}, res => {
data.moveTop = res.top;
data.moveLeft = res.left;
data.moveItem = data.itemList[index];
data.itemWidth = res.width;
data.itemHeight = res.height;
}).exec();
} else {
} else { // 选中二级项目
let arr = index.split('-');
data.setSubItem = true;
const query = uni.createSelectorQuery().in(this);
query.select(`#cu-${arr[0] - 0}`).boundingClientRect(res => {
const query = uni.createSelectorQuery();
query.select(`#cu-${arr[0] - 0}`).fields({
id: true,
dataset: true,
rect: true,
size: true
}, res => {
data.itemHeight = res.height;
}).exec();
query.select(`#cu-${index}`).boundingClientRect(res => {
query.select(`#cu-${index}`).fields({
id: true,
dataset: true,
rect: true,
size: true
}, res => {
data.moveTop = res.top;
data.moveLeft = res.left;
data.moveItem = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
@ -265,8 +297,7 @@
data.moveLeft = touch.pageX - data.deltaLeft;
data.moveTop = touch.pageY - data.deltaTop;
let lastIndex = (lastIndex = findOverIndex(touch.pageY, length));
console.log('111111', lastIndex);
let lastIndex = findOverIndex(touch.pageY, length);
// 显示下划线
for (let i = 0; i < data.itemList.length; i++) {
if (data.moveLeft > 35) {
@ -297,8 +328,8 @@
function stops(e, index, length) {
console.log('结束');
const touch = e.mp.changedTouches[0];
let lastIndex = (lastIndex = findOverIndex(touch.pageY, length));
const touch = e.changedTouches[0];
let lastIndex = findOverIndex(touch.pageY, length);
// 交换两个值
for (let i = 0; i < data.itemList.length; i++) {
@ -317,11 +348,11 @@
id: Value.id,
parentId: 0,
};
this.$emit('change', options);
emit('change', options);
}
// 清空
clearSet(i);
this.$emit('change', data.itemList);
emit('change', data.itemList);
return;
}
// 插入一级项目
@ -343,11 +374,11 @@
id: Value.id,
parentId: 0,
};
this.$emit('change', options);
emit('change', options);
}
// 清空
clearSet(i);
this.$emit('change', data.itemList);
emit('change', data.itemList);
return;
}
// 插入二级项目
@ -366,7 +397,7 @@
id: Value.id,
parentId: data.itemList[lastIndex - 1].id,
};
this.$emit('change', options);
emit('change', options);
} else {
let arr = index.split('-');
let Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
@ -382,13 +413,13 @@
id: Value.id,
parentId: data.itemList[lastIndex].id,
};
this.$emit('change', options);
emit('change', options);
const options1 = {
id: Value.id,
parentId: 0,
};
this.$emit('change', options1);
emit('change', options1);
}
return;
}
@ -439,7 +470,7 @@
confirm
}) => {
if (confirm) {
await this.$u.api.delProject(id);
await uni.$u.api.delProject(id);
let flag_index = 0;
data.itemList.forEach((item, index) => {
if (item.id == id) {

Write Preview
Loading…
Cancel
Save