jy_total_process_master_cloud_h5/pages/workbench/workbench.vue

<template>
	<view>
		<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 @tap="toTodoList" class="circle-button-box">
				<view class="cuIcon-time text-blue circle-button font-size-35"></view>
				<text>待办事项</text>
			</view>
			<view @tap="toHistoryList" class="circle-button-box">
				<view class="cuIcon-roundcheck  text-blue circle-button font-size-35"></view>
				<text>已办事项</text>
			</view>
			<view @tap="toApplyList" class="circle-button-box">
				<view   class="cuIcon-peoplelist text-blue circle-button font-size-35"></view>
				<text>我发起的</text>
			</view>
			<view @tap="toFlowCopyList" class="circle-button-box">
				<view class="cuIcon-copy  text-blue circle-button font-size-35"></view>
				<text>抄送给我</text>
			</view>
		</view>
		<scroll-view scroll-y class="page" v-if="isAdmin">
			<template v-for="key in processMap.keys()">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class=" text-orange font-b">{{key}}</text>
					</view>
				</view>
				<view class="cu-list grid col-4 no-border">
					<view class="circle-button-box" @click="start(act)" v-for="(act, index) in processMap.get(key)" :key="index">
						<view class="cuIcon-calendar bg-blue text-white circle-button font-size-35"></view>
						<text class="ellipsis-description">{{act.name}}</text>
					</view>
				</view>
			</template>
			<u-gap height="80" bgColor="#fff"></u-gap>
		</scroll-view>
		<scroll-view scroll-y class="page" v-else>
			<template v-for="key in processMap.keys()">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class=" text-orange font-b">{{key}}</text>
					</view>
				</view>
				<view class="cu-list grid col-4 no-border">
				<view class="circle-button-box" @click="start(act)" v-for="(act, index) in processMap.get(key)" :key="index">
					<view class="cuIcon-calendar bg-blue text-white circle-button font-size-35"></view>
					<text class="ellipsis-description">{{act.name}}</text>
				</view>
				</view>
			</template>
			
			<u-gap height="80" bgColor="#fff"></u-gap>
		</scroll-view>
	</view>
</template>

<script>
	import userService from "@/api/sys/userService"
	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"
	export default {
		data() {
			return {
				isAdmin: false,
				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: ''
			};
		},
		computed: mapState({
			 username: (state) => state.user.username
		}),
	    async mounted() {
			
			let res = await actCategoryService.treeData()
			let data = await processService.list({current: 1, size: -1, type: 'ydd'})
			this.processMap = new Map()

			let list = data.records
			let test = []
			let leaveTest = []
			list.forEach((item)=>{
				if (item.category === '未设置') {
					if (item.name === '物资管理-领用申请') {
						test.push(item)
						// this.processMap.set('物资管理', [item])
					}
					if (item.name === '物资管理-采购申请') {
						// console.log('item', item)
						// this.processMap.set('物资管理', [item])
						test.push(item)
					}
					if (item.name === '嘉溢-请假申请') {
						// console.log('item', item)
						// this.processMap.set('物资管理', [item])
						leaveTest.push(item)
					}
				}

			})
			this.processMap.set('物资管理', test)
			this.processMap.set('日常办公', leaveTest)

			// if (this.isAdmin) {
			// 	//如果是管理员 查看所有的流程图信息
			// 	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);
			// 	}
			// } else {
			// 	//非管理员用户  只能查看物资领用 与 请假流程信息
			// 	let list = data.records
			// 	list.forEach((item)=>{
			// 		if (item.category === '未设置') {
			// 			if (item.name === '物资管理-领用申请') {
			// 				this.processMap.set('物资管理', [item])
			// 			}
			// 			if (item.name === '嘉溢-请假申请') {
			// 				this.processMap.set('请假申请', [item])
			// 			}
			// 		}
			//
			// 	})
			// 	console.log('this.processMap', this.processMap)
			// }
			
			
		},
		created() {
			if(!this.username) {
				this.refreshUserInfo()
			}
			this.checkIsAdmin()
		},
		methods: {
			 ...mapActions(['refreshUserInfo']),
			toApplyList (mail) {
				uni.navigateTo({
				   url: '/pages/workbench/task/ApplyList'
				})
			},
			toTodoList (mail) {
				uni.navigateTo({
				    url: '/pages/workbench/task/TodoList'
				})
			},
			toHistoryList (mail) {
				uni.navigateTo({
				    url: '/pages/workbench/task/HistoryList'
				})
			},
			toFlowCopyList (mail) {
				uni.navigateTo({
				    url: '/pages/workbench/task/FlowCopyList'
				})
			},
			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)
				  })
				})
		  },
			// 查询当前用户是否是管理员用户
			checkIsAdmin () {
				userService.is().then((data) => {
					this.isAdmin = data
				})
			},
		}
	}
</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;
  }
  .font-size-35{
	 font-size: 35px!important;
  }
  .circle-button{
	 width: 44px;
	 height: 44px;
	 border-radius: 18px;
	 padding-top: 4px;
  }
  .circle-button-box{
	  width: 25%;
	  margin-top: 10px;
	  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>