xg_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,
		userInfo: (state) => state.user.userInfo,
	}),
	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 = []
		let jjtTest = []
		let resignation = []
		let accounting = []
		console.log('list', list)
		list.forEach((item) => {
			if (item.category === '未设置') {
				if (item.name === '进销存-领用申请') {
					jjtTest.push(item)
					jjtTest.push({
						name: "入库",
						notFlowable: true
					})
					jjtTest.push({
						name: "库存",
						notFlowable: true
					})
					jjtTest.push({
						name: "入库记录",
						notFlowable: true
					})
					// this.processMap.set('物资管理', [item])
				}
				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)
				}
				if (item.name === '会议室预约') {
					// console.log('item', item)
					// this.processMap.set('物资管理', [item])
					leaveTest.push(item)
				}
				/*if (item.name === '离职申请') {
					// console.log('item', item)
					// this.processMap.set('物资管理', [item])
					resignation.push(item)
				}
				if (item.name === '离职交接申请') {
					// console.log('item', item)
					// this.processMap.set('物资管理', [item])
					resignation.push(item)
				}*/
				if (item.name === '会计-报销审批') {
					// console.log('item', item)
					// this.processMap.set('物资管理', [item])
					accounting.push(item)
				}
				if (item.name === '会计-发票申请') {
					accounting.push(item)
				}
			}

		})
		if (this.userInfo.tenantDTO.id == "10009") {
			this.processMap.set('景聚庭', jjtTest)
		} else {
			this.processMap.set('物资管理', test)
			/*this.processMap.set('日常办公', leaveTest)
			this.processMap.set('人力资源管理', resignation)*/
			this.processMap.set('会计', accounting)
		}


		// 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
		// 	let test = []
		// 	console.log('list', list)
		// 	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)
		// 			}
		// 		}
		//
		// 	})
		// 	this.processMap.set('物资管理', test)
		// 	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) {
			if (row.notFlowable) {
				switch (row.name) {
					case "入库":
						uni.navigateTo({
							url: '/pages/psiManagement/wareHouse/WareHouseAddForm'
						})
						break;
					case "库存":
						uni.navigateTo({
							url: '/pages/psiManagement/wareHouseSummary/WareHouseSummaryList'
						})
						break;
					case "入库记录":
						uni.navigateTo({
							url: '/pages/psiManagement/wareHouse/WareHouseList'
						})
						break;
				}
			} else {
				// 读取流程表单
				taskService.getTaskDef({
					procDefId: row.id,
					status: 'start'
				}).then((data) => {
					console.log('data', 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>