gwlz/jp-mobile/pages/workbench/workbench.vue

<template>
	<view class="main">
		<!-- <cu-custom bgColor="bg-blue">
			<block slot="content">文件传阅</block>
		</cu-custom> -->
		<swiper class="screen-swiper square-dot bg-blue" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="2000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<view class="cu-list grid col-4 no-border fixed">
			<view @click="toList(5)" class="circle-button-box">
				<view class="text-primary text_font_size">{{statistics.allcount?statistics.allcount:0}}</view>
				<text>总数</text>
			</view>
			<view @click="toList(1)" class="circle-button-box">
				<view class="text-danger text_font_size">{{statistics.db?statistics.db:0}}</view>
				<text>待办</text>
			</view>
			<view @click="toList(4)" class="circle-button-box">
				<view class="text-success text_font_size">{{statistics.yb?statistics.yb:0}}</view>
				<text>已办</text>
			</view>
			<view @click="toList(3)" class="circle-button-box">
				<view class="text-warning text_font_size">{{statistics.gdcount?statistics.gdcount:0}}</view>
				<text>归档</text>
			</view>
		</view>
		<scroll-view scroll-y class="page">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class=" text-orange font-b">快捷入口</text>
				</view>
			</view>
			<view class="cu-list grid col-4 no-border">
				<view @tap="add" class="circle-button-box">
					<view><u--image src="/static/index/icon4.png" width="40px" height="40px"></u--image></view>
					<text>新增</text>
				</view>
				<view @tap="toList(1)" class="circle-button-box">
					<view><u--image src="/static/index/icon1.png" width="40px" height="40px"></u--image></view>
					<text>待办</text>
				</view>
				<view @tap="toList(4)" class="circle-button-box">
					<view><u--image src="/static/index/icon5.png" width="40px" height="40px"></u--image></view>
					<text>已办</text>
				</view>
				<view @tap="toList(3)" class="circle-button-box">
					<view><u--image src="/static/index/icon2.png" width="40px" height="40px"></u--image></view>
					<text>已归档</text>
				</view>
				<!-- <view @tap="toPerson" class="circle-button-box">
					<view ><u--image src="/static/index/icon3.png" width="40px" height="40px"></u--image></view>
					<text>通讯录</text>
				</view> -->
				<view @tap="toApplyList" class="circle-button-box">
					<view><u--image src="/static/index/icon6.png" width="40px" height="40px"></u--image></view>
					<text>公文统计</text>
				</view>
			</view>

			<u-gap height="80" bgColor="#fff"></u-gap>
		</scroll-view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import actCategoryService from "@/api/flowable/actCategoryService"
	import processService from "@/api/flowable/processService"
	import taskService from "@/api/flowable/taskService"
	import gwCirculationCard2Service from '@/api/circulation/gwCirculationCard2.js'
	export default {
		data() {
			return {
				cardCur: 0,
				dataList: [],
				categoryList: [],
				processMap: new Map(),
				swiperList: [{
					id: 0,
					type: 'image',
					url: '/static/swiper/1.svg'
				}, {
					id: 1,
					type: 'image',
					url: '/static/swiper/2.svg'
				}, {
					id: 2,
					type: 'image',
					url: '/static/swiper/3.svg'
				}, {
					id: 3,
					type: 'image',
					url: '/static/swiper/4.svg'
				}, {
					id: 4,
					type: 'image',
					url: '/static/swiper/5.svg'
				}, {
					id: 5,
					type: 'image',
					url: '/static/swiper/6.svg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/swiper/7.svg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				statistics: {},
			};
		},
		
		computed: mapState({
			username: (state) => state.user.username
		}),
		async mounted() {
			gwCirculationCard2Service.getStatistics().then(data => {
				this.statistics = data
			})
			// let res = await actCategoryService.treeData()
			// let data = await processService.list({current: 1, size: -1})
			// this.processMap = new Map()
			// res.forEach((item)=>{
			// 	this.processMap.set(item.name, [])
			// })
			// let list = data.records
			// list.forEach((item)=>{
			// 	if(this.processMap.has(item.category)){
			// 		let list = this.processMap.get(item.category)
			// 		list.push(item)
			// 	}else{
			// 		this.processMap.set(item.category, [item])
			// 	}
			// })

			// for(let [key,value] of this.processMap){
			//     console.log(key,value);
			// }


		},
		created() {
			if (!this.username) {
				this.refreshUserInfo()
			}
		},
		methods: {
			...mapActions(['refreshUserInfo']),
			toApplyList(mail) {
				uni.navigateTo({
					url: '/pages/fileTransmit/statistics'
				})
			},
			add(mail) {
				uni.navigateTo({
					url: '/pages/fileTransmit/addFileTransmit'
				})
			},
			toPerson(mail) {
				uni.navigateTo({
					url: "/pages/index/index?type='addressbook'"
				})
			},
			toList(type) {
				uni.navigateTo({
					url: '/pages/fileTransmit/fileTransmitList?type=' + type
				})
			},
			start(row) {
				// 读取流程表单
				taskService.getTaskDef({
					procDefId: row.id,
					status: 'start'
				}).then((data) => {
					let processTitle =
						`${this.username} 在 ${moment(new Date()).format('YYYY-MM-DD HH:mm')} 发起了 [${row.name}]`
					let query = {
						procDefId: row.id,
						procDefKey: row.key,
						status: 'start',
						title: `发起流程【${row.name}】`,
						formType: data.formType,
						formUrl: data.formUrl,
						formTitle: processTitle
					}
					uni.navigateTo({
						url: '/pages/workbench/task/TaskForm?flow=' + JSON.stringify(query)
					})
				})
			}
		}
	}
</script>

<style>
	.cu-list.card-menu {
		overflow: hidden;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 7px;
	}

	.cu-list.card-menu.margin-top-20 {
		margin-top: -20px;
	}

	.cu-list.menu>.cu-item .content>uni-view:first-child {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		/* -webkit-align-items: center; */
		/* align-items: center; */
		display: inline-block;
		margin-right: 5px;
		width: 1.6em;
		text-align: center;
	}

	.text_font_size {
		font-size: 28px !important;
		margin-bottom: 10px;
	}

	.circle-button {
		width: 44px;
		height: 44px;
		border-radius: 18px;
		padding-top: 4px;
	}

	.circle-button-box {
		width: 25%;
		margin-top: 30px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.font-b {
		vertical-align: middle;
		font-size: 18px;
		font-weight: 500;
		color: #3a3a3a;
	}
</style>