OfficeApp/pages/oaTask/oaTask.vue

<template>
	<view class="all_box">
		<block v-if="skeleton">
			<u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%" rowsHeight="40"
				v-for="i in 3" :key="i" style="padding: 28rpx;">
			</u-skeleton>
		</block>
		<block v-else>
			<u-tabs style="background-color: #0022C7;" :list="tabLists" @click="changeTypeCurrent" lineColor='white'
				lineWidth='30' inactiveStyle='color:white' activeStyle="color:white"></u-tabs>
			<u-empty v-if="list.length==0" icon="/static/img/empty/data.png" text="没有任务"></u-empty>

			<view v-else class="task_list">


				<!-- <taskCard class="task_card" v-for="item in 10" :key="item"></taskCard> -->
				<view class="" v-if="baseList.length">
					<task-item :datas="item" :taskValueList='taskValueList' v-for="item in baseList"
						:key="item.id"></task-item>
				</view>
				<view class="" v-else>
					<u-empty icon="/static/img/empty/data.png" text="没有任务"></u-empty>
				</view>

			</view>
		</block>
		<!-- <u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
        :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" /> -->
	</view>
</template>

<script>
	import {
		getTaskListApi
	} from '@/api/oa'
	import {
		Toast
	} from '@/libs/uniApi.js'
	import taskItem from "@/components/task/taskItem.vue"
	import {
		taskLists
	} from "@/api/task.js"
	import {
		dictDataListsTypeValue
	} from "@/api/oaPbulic.js"
	export default {
		components: {
			taskItem
		},
		data() {
			return {
				status: 2,
				skeleton: false,
				baseList: [],
				tabLists: [{
					name: '进行中',
					id: 2
				}, {
					name: '已完成',
					id: 3
				}, ],
				loadConfig: {
					page: 1,
					limit: 15,
					lastpage: '',
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '我也是有底线的~~',
					status: 'loadmore'
				},
				list: [],
				taskValueList: [],

			}
		},
		onLoad() {
			this.skeleton = true;

		},
		onShow() {
			this.loadList();
			// this.getTaskValue()
		},
		onReady() {
			uni.$on('initOaTask', this.loadList);
		},
		methods: {
			// async getTaskValue() {
			// 	const desiredElement = this.roleList.find(element => element.id == this.$store.state.app.userInfo
			// 		.group_id);
			// 	let res = await dictDataListsTypeValue({
			// 		type_value: desiredElement.type_vale
			// 	})
			// 	this.taskValueList = res.data
			// },
			changeTypeCurrent(e) {
				this.baseList = []
				this.status = e.id
				this.baseList = this.list.filter(item => item.status == this.status)


			},
			async loadList() {
				let res = await taskLists({
					limit: 15,
					page: 1
				});
				this.list = res.data;
				this.baseList = this.list.filter(item => item.status == this.status)

				this.skeleton = false;
			}
		},
		onPullDownRefresh() {
			this.loadList();
			this.$u.sleep(500).then(() => {
				uni.stopPullDownRefresh()
			});
		},
		onReachBottom() {},
	}
</script>

<style lang="scss" scoped>
	.task_list {
		padding-top: 28rpx;
	}

	.loading {
		padding: 28rpx;
		margin-top: 28rpx;
	}
</style>