ccsens_fe
/
tall-mui-3
3
0
Fork 3
Code Issues Pull Requests Releases Wiki Activity
Browse Source

fix: 项目列表排序修改

pull/45/head
song 4 years ago
parent
402c563dcb
commit
59f4c21703
4 changed files with 183 additions and 200 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      CHANGELOG.md
  2. 283
      src/components/PrettyExchange/PrettyExchange.vue
  3. 46
      src/components/Projects/ProjectItem.vue
  4. 51
      src/components/Projects/Projects.vue

3
CHANGELOG.md
View File

@ -1,4 +1,4 @@
# 0.1.0 (2021-08-26) # 0.1.0 (2021-08-27)
### 🌟 新功能 ### 🌟 新功能
范围|描述|commitId 范围|描述|commitId
@ -139,6 +139,7 @@
- | 解决时间轴报错 | [da1eece](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da1eece) - | 解决时间轴报错 | [da1eece](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da1eece)
- | 设置时间轴自动滚动到当前位置 | [a3474f8](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3474f8) - | 设置时间轴自动滚动到当前位置 | [a3474f8](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3474f8)
- | 跳转详情页返回路径修改 | [c5e17c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c5e17c0) - | 跳转详情页返回路径修改 | [c5e17c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c5e17c0)
项目列表排序 | 项目列表排序 | [402c563](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/402c563)
- | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e9fdd71) - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e9fdd71)

283
src/components/pretty-exchange/pretty-exchange.vue → src/components/PrettyExchange/PrettyExchange.vue
View File

@ -1,104 +1,115 @@
<template> <template>
<view class> <view class>
<scroll-view scroll-y="true" style="height: 80%"> <scroll-view scroll-y="true" style="height: 80%">
<view <view v-if="!changeEvent">
:id="'cu-' + index" <view :id="'cu-' + index" :key="item.id" class="cu-item flex-col" v-for="(item, index) in itemList">
:key="index" <project-item
:style="{ 'background-color': item.color }" :index="index"
class="cu-item flex-col" :item="item"
v-for="(item, index) in itemList" :menuList="menuList"
@touchend="stops($event, index)" @chooseAction="chooseAction"
@touchmove.stop.prevent="move" @openSubProject="openSubProject"
@touchstart="start($event, index)" ></project-item>
> </view>
<view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view> </view>
<!-- 内容区 --> <view v-else>
<!-- <project-item :index="index" :item="item"></project-item> --> <view
<!-- 父项目 --> :id="'cu-' + index"
<view class="w-full"> :key="index"
<view class="flex items-center justify-between p-3"> :style="{ 'background-color': item.color }"
<u-icon @click="openMenu(item)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon> @touchend="stops($event, index)"
@touchmove.stop.prevent="move"
@touchstart="start($event, index)"
class="cu-item flex-col"
v-for="(item, index) in itemList"
>
<view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view>
<!-- 内容区 -->
<!-- 父项目 -->
<view class="w-full">
<view class="flex items-center justify-between p-3">
<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 mb-1">
<view class="mr-2">{{ item.name }}</view>
<!-- 状态 TODO:-->
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
</view>
<view @click="openProject(item)" class="flex-1 px-3"> <view class="flex items-center text-xs text-gray-400">
<view class="flex items-center mb-1"> <view class="pr-2">{{ $moment(+item.startTime).format('MM-DD HH:mm') }}</view>至
<view class="mr-2">{{ item.name }}</view> <view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
<!-- 状态 TODO:--> </view>
<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
</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 v-if="item.sonProjectList && item.sonProjectList.length">
<view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view> <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> </view>
<u-icon class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
</view> </view>
<!-- 父项目 end -->
<!-- 箭头 --> <!-- 子项目 -->
<view v-if="item.sonProjectList && item.sonProjectList.length"> <view class="ml-8" v-if="item.show">
<u-icon <view
@click="openSubProject(item.sonProjectList.length, index)" :id="'cu-' + index + '-' + subIndex"
class="text-gray-400" :key="subIndex"
name="arrow-up" @touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)"
size="14px" @touchmove.stop.prevent="move($event, item.sonProjectList.length)"
v-if="item.show" @touchstart.stop.prevent="start($event, index + '-' + subIndex)"
></u-icon> class="cu-item flex-col"
<u-icon v-for="(subItem, subIndex) in item.sonProjectList"
@click="openSubProject(item.sonProjectList.length, index)" >
class="text-gray-400" <!-- @touchstart="start($event, index + '-' + subIndex)" -->
name="arrow-down" <!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> -->
size="14px" <view class="flex items-center justify-between p-3 w-full">
v-else <u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
></u-icon>
</view> <view class="flex-1 px-3">
<u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon> <view class="flex items-center">
</view> <view class="mr-2">{{ subItem.name }}</view>
<!-- 父项目 end --> <!-- 状态 -->
<!-- 子项目 --> <view
:class="
<view class="ml-8" v-if="item.show"> subItem.status === 0
<view ? 'text-blue-400 bg-blue-100'
:id="'cu-' + index + '-' + subIndex" : subItem.status === 1
:key="subIndex" ? 'text-green-400 bg-green-100'
:style="{ 'background-color': item.color }" : subItem.status === 2
@touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)" ? 'text-red-400 bg-red-100'
@touchmove.stop.prevent="move($event, item.sonProjectList.length)" : 'text-gray-400 bg-gray-100'
@touchstart.stop.prevent="start($event, index + '-' + subIndex)" "
class="cu-item flex-col" class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
v-for="(subItem, subIndex) in item.sonProjectList" >{{
> subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成'
<!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> --> }}</view>
<view class="flex items-center justify-between p-3 w-full">
<u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
<view @click="openProject(subItem)" class="flex-1 px-3">
<view class="flex items-center">
<view class="mr-2">{{ subItem.name }}</view>
<!-- 状态 -->
<view
class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
: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'
"
>
{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
</view> </view>
</view> </view>
</view>
<!-- 箭头 --> <!-- 箭头 -->
<u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon> <u-icon class="text-gray-400" name="arrow-right" size="14px"></u-icon>
</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 内容区 end -->
<view class="border-100 bg-blue-500" v-if="item.showBorder"></view>
<view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view>
</view> </view>
<!-- 内容区 end -->
<view class="border-100 bg-blue-500" v-if="item.showBorder"></view>
<view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 移动悬浮 begin --> <!-- 移动悬浮 begin -->
@ -108,15 +119,12 @@
</view> </view>
</view> </view>
<!-- 移动悬浮 end --> <!-- 移动悬浮 end -->
<!-- 项目操作面板 -->
<u-action-sheet :list="menuList" :tips="tips" v-model="showMenu"></u-action-sheet>
</view> </view>
</template> </template>
<script> <script>
import ProjectItem from '../Projects/ProjectItem.vue'; import ProjectItem from '../Projects/ProjectItem.vue';
import { mapGetters, mapMutations } from 'vuex'; import { mapState, mapGetters, mapMutations } from 'vuex';
export default { export default {
components: { ProjectItem }, components: { ProjectItem },
@ -126,16 +134,6 @@ export default {
event: 'change', event: 'change',
}, },
props: {
list: {
// 数据交换列表
type: Array,
default() {
return [];
},
},
},
data() { data() {
return { return {
itemTop: 0, itemTop: 0,
@ -153,6 +151,7 @@ export default {
begintop: 0, begintop: 0,
itemList: [], itemList: [],
setSubItem: false, setSubItem: false,
changeEvent: false,
showMenu: false, showMenu: false,
tips: { tips: {
@ -160,18 +159,30 @@ export default {
color: '#909399', color: '#909399',
fontSize: 28, fontSize: 28,
}, },
menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }], menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }, { text: '排序' }],
// show: false, // show: false,
border: 'border border-blue-500 shadow rounded-md', border: 'border border-blue-500 shadow rounded-md',
showBorder: false, showBorder: false,
showItemIndex: undefined,
}; };
}, },
computed: mapGetters('user', ['userId']), computed: {
...mapGetters('user', ['userId']),
...mapState('project', ['projects']),
mounted: function () { eventName() {
if (this.changeEvent) {
return 'move.stop.prevent';
} else {
return 'move';
}
},
},
mounted() {
this.$nextTick(function () { this.$nextTick(function () {
this.itemList = this.list; this.itemList = this.projects;
this.itemList.forEach(item => { this.itemList.forEach(item => {
item.showBorder = false; item.showBorder = false;
item.showSubBorder = false; item.showSubBorder = false;
@ -181,7 +192,7 @@ export default {
}, },
watch: { watch: {
list(val) { projects(val) {
this.itemList = val; this.itemList = val;
this.itemList.forEach(item => { this.itemList.forEach(item => {
item.showBorder = false; item.showBorder = false;
@ -193,36 +204,13 @@ export default {
methods: { methods: {
...mapMutations('project', ['setProjectItemShow']), ...mapMutations('project', ['setProjectItemShow']),
/**
* 打开项目
* @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(length, index) { openSubProject(length, index) {
this.setProjectItemShow({ index, show: this.itemList[index].show ? false : true }); this.setProjectItemShow({ index, show: this.itemList[index].show ? false : true });
if (length && index) { if (length && index) {
this.$emit('changeHeight', length, index); this.$emit('changeHeight', length, index);
} }
this.showItemIndex = index;
}, },
// 获取项目列表距离顶部的距离 // 获取项目列表距离顶部的距离
@ -238,11 +226,29 @@ export default {
.exec(); .exec();
}, },
// 操作
chooseAction(index) {
if (this.menuList[index].text === '排序') {
this.changeEvent = true;
this.$t.ui.showToast('请移动进行排序');
}
if (this.showItemIndex !== undefined) {
this.setProjectItemShow({ index: this.showItemIndex, show: true });
}
},
isNumber(val) { isNumber(val) {
return val === +val; return val === +val;
}, },
start(e, index) { start(e, index) {
if (!this.changeEvent) {
return;
} else {
e.stopPropagation();
}
console.log('开始');
setTimeout(() => { setTimeout(() => {
this.getDate(); this.getDate();
}, 300); }, 300);
@ -262,7 +268,6 @@ export default {
.exec(); .exec();
} else { } else {
let arr = index.split('-'); let arr = index.split('-');
// this.moveItem = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
this.setSubItem = true; this.setSubItem = true;
const query = uni.createSelectorQuery().in(this); const query = uni.createSelectorQuery().in(this);
query query
@ -286,6 +291,12 @@ export default {
}, },
move(e, length) { move(e, length) {
if (!this.changeEvent) {
return;
} else {
e.stopPropagation();
}
console.log('移动');
this.showMoveImage = true; //悬浮开始 this.showMoveImage = true; //悬浮开始
const touch = e.touches[0]; const touch = e.touches[0];
if (this.deltaLeft == 0) { if (this.deltaLeft == 0) {
@ -326,9 +337,14 @@ export default {
}, },
stops(e, index, length) { stops(e, index, length) {
console.log('结束', index); if (!this.changeEvent) {
return;
} else {
e.stopPropagation();
}
console.log('结束');
const touch = e.mp.changedTouches[0]; const touch = e.mp.changedTouches[0];
console.log('touch.pageY: ', touch.pageY);
let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length)); let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length));
// 交换两个值 // 交换两个值
@ -385,7 +401,6 @@ export default {
if (this.itemList[i].showSubBorder) { if (this.itemList[i].showSubBorder) {
if (this.isNumber(index)) { if (this.isNumber(index)) {
let Value = this.itemList[index]; let Value = this.itemList[index];
console.log('lastIndex: ', lastIndex);
if (this.itemList[lastIndex - 1].sonProjectList && this.itemList[lastIndex - 1].sonProjectList.length) { if (this.itemList[lastIndex - 1].sonProjectList && this.itemList[lastIndex - 1].sonProjectList.length) {
this.itemList[lastIndex - 1].sonProjectList.push(Value); this.itemList[lastIndex - 1].sonProjectList.push(Value);
} else { } else {
@ -435,6 +450,8 @@ export default {
this.deltaLeft == 0; this.deltaLeft == 0;
this.showMoveImage = false; this.showMoveImage = false;
this.setSubItem = false; this.setSubItem = false;
this.changeEvent = false;
this.showItemIndex = undefined;
}, },
// 找到停下的元素的下标 // 找到停下的元素的下标

46
src/components/Projects/ProjectItem.vue
View File

@ -12,19 +12,22 @@
</view> </view>
<view class="flex items-center text-xs text-gray-400"> <view class="flex items-center text-xs text-gray-400">
<view class="pr-2"> <view class="pr-2">{{ $moment(+item.startTime).format('MM-DD HH:mm') }}</view>至
{{ $moment(+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">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
</view> </view>
</view> </view>
<!-- 箭头 --> <!-- 箭头 -->
<view v-if="item.sonProjectList && item.sonProjectList.length"> <view v-if="item.sonProjectList && item.sonProjectList.length">
<u-icon @click="openSubProject" class="text-gray-400" name="arrow-up" size="14px" v-if="show"></u-icon>
<u-icon <u-icon
@click="openSubProject(item.sonProjectList.length, index)" @click="$emit('openSubProject', item.sonProjectList.length, index)"
class="text-gray-400"
name="arrow-up"
size="14px"
v-if="item.show"
></u-icon>
<u-icon
@click="$emit('openSubProject', item.sonProjectList.length, index)"
class="text-gray-400" class="text-gray-400"
name="arrow-down" name="arrow-down"
size="14px" size="14px"
@ -34,8 +37,14 @@
<u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon> <u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
</view> </view>
<!-- 有子项目 --> <!-- 有子项目 -->
<view class="ml-8" v-if="show"> <view class="ml-8" v-if="item.show">
<view :key="subItem.id" v-for="subItem in item.sonProjectList"> <view
:id="'cu-' + index + '-' + subIndex"
:key="subIndex"
class="cu-item flex-col"
v-for="(subItem, subIndex) in item.sonProjectList"
>
<!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> -->
<view class="flex items-center justify-between p-3"> <view class="flex items-center justify-between p-3">
<u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon> <u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
@ -44,7 +53,6 @@
<view class="mr-2">{{ subItem.name }}</view> <view class="mr-2">{{ subItem.name }}</view>
<!-- 状态 --> <!-- 状态 -->
<view <view
class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
:class=" :class="
subItem.status === 0 subItem.status === 0
? 'text-blue-400 bg-blue-100' ? 'text-blue-400 bg-blue-100'
@ -54,9 +62,8 @@
? 'text-red-400 bg-red-100' ? 'text-red-400 bg-red-100'
: 'text-gray-400 bg-gray-100' : 'text-gray-400 bg-gray-100'
" "
> class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }} >{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}</view>
</view>
</view> </view>
</view> </view>
@ -66,7 +73,7 @@
</view> </view>
</view> </view>
<!-- 项目操作面板 --> <!-- 项目操作面板 -->
<u-action-sheet :list="list" :tips="tips" v-model="showMenu"></u-action-sheet> <u-action-sheet :list="menuList" :tips="tips" @click="$emit('chooseAction', $event)" v-model="showMenu"></u-action-sheet>
</view> </view>
</template> </template>
@ -83,6 +90,10 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
menuList: {
type: Array,
default: () => [],
},
}, },
data() { data() {
return { return {
@ -92,7 +103,6 @@ export default {
color: '#909399', color: '#909399',
fontSize: 28, fontSize: 28,
}, },
list: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
show: false, show: false,
border: 'border border-blue-500 shadow rounded-md', border: 'border border-blue-500 shadow rounded-md',
showBorder: false, showBorder: false,
@ -124,14 +134,6 @@ export default {
this.showMenu = true; this.showMenu = true;
this.tips.text = project.name; this.tips.text = project.name;
}, },
// 展开子项目
openSubProject(length, index) {
this.show = !this.show;
if (length && index) {
this.$emit('changeHeight', length, index);
}
},
}, },
}; };
</script> </script>

51
src/components/Projects/Projects.vue
View File

@ -1,55 +1,16 @@
<template> <template>
<view class="py-3 mt-4 bg-white u-font-15"> <view class="py-3 mt-4 bg-white u-font-15">
<!-- <PrettyExchange :list="projectLists"></PrettyExchange> --> <PrettyExchange @change="change"></PrettyExchange>
<pretty-exchange @change="change" :list="projectLists"></pretty-exchange>
<!-- 项目操作面板 -->
<!-- <u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet> -->
</view> </view>
</template> </template>
<script> <script>
import { mapGetters, mapState } from 'vuex'; import PrettyExchange from '../PrettyExchange/PrettyExchange.vue';
import PrettyExchange from '../pretty-exchange/pretty-exchange.vue';
export default { export default {
components: { PrettyExchange }, components: { PrettyExchange },
data() { 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,
// 对应需要显示的标题
props: { label: 'label' },
lists: [{ label: '标题1' }, { label: '标题2' }, { label: '标题3' }, { label: '标题4' }, { label: '标题5' }],
};
},
computed: {
...mapState('project', ['projects']),
...mapGetters('user', ['userId']),
},
watch: {
projects(val) {
if (val) {
this.projectLists = [...this.projects];
}
},
},
mounted() {
this.projectLists = [...this.projects];
}, },
methods: { methods: {
@ -76,9 +37,10 @@ export default {
try { try {
const params = { projectIdList }; const params = { projectIdList };
await this.$u.api.setProjectSort(params); await this.$u.api.setProjectSort(params);
this.$t.ui.showToast('排序修改成功');
} catch (error) { } catch (error) {
console.log('error: ', error); console.log('error: ', error);
this.$t.ui.showToast(error.msg || '修改失败'); this.$t.ui.showToast(error.msg || '排序修改失败');
} }
this.$emit('getProjects'); this.$emit('getProjects');
}, },
@ -92,9 +54,10 @@ export default {
try { try {
const params = options; const params = options;
await this.$u.api.setProjectRelation(params); await this.$u.api.setProjectRelation(params);
this.$t.ui.showToast('排序修改成功');
} catch (error) { } catch (error) {
console.log('error: ', error); console.log('error: ', error);
this.$t.ui.showToast(error.msg || '修改失败'); this.$t.ui.showToast(error.msg || '排序修改失败');
} }
this.$emit('getProjects'); this.$emit('getProjects');
}, },

Write Preview
Loading…
Cancel
Save