byte-sailing-new/src/views/index.vue

<template>
	<div class="app-container home">
		
		<div class="stat-warp">
			<ul>
				<li class="theme1" @click="toUrl('DealWith',1)">
					<div class="num">{{toBeProcessedData.total}}</div>
					<div class="label">我的待审批</div>
					<div class="icon-box">
						<i class="icon iconfont icon-iconm_waixht"></i>
					</div>
				</li>
				<li class="theme2" @click="toUrl('DealWith',1)">
					<div class="num">{{haveInitiatedData.total}}</div>
					<div class="label">我的发起（未结束）</div>
					<div class="icon-box">
						<i class="icon iconfont icon-iconm_wofqd"></i>
					</div>
				</li>
				<li class="theme3">
					<div class="num">3</div>
					<div class="label">未读消息</div>
					<div class="icon-box">
						<i class="icon iconfont icon-iconm_unread"></i>
					</div>
				</li>
			</ul>
		</div>
		<div class="table-warp">
			<div class="card">
				<div class="commons-title">
					我的待审批
				</div>
				<el-table :data="toBeProcessedData.rows" style="width: 100%">
					<el-table-column prop="flowName" label="流程类型" />
					<el-table-column prop="title" label="流程标题" />
					<el-table-column prop="createUserName" label="发起人" />
					<el-table-column prop="createTime" label="发起时间" />
					<el-table-column fixed="right" label="操作" width="120">
						<template #default="scope">
							<el-button
								link
								type="primary"
								size="small"
								@click="pushProcessApproval(scope.row)"
							>
								审批
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="card">
				<div class="commons-title">
					业务提醒
				</div>
			</div>
			<div class="card">
				<div class="commons-title">
					我的发起（未结束）
				</div>
				<el-table :data="haveInitiatedData.rows" style="width: 100%">
					<el-table-column prop="flowName" label="流程类型" />
					<el-table-column prop="title" label="流程标题" />
					<el-table-column prop="createUserName" label="审批人" />
					<el-table-column prop="createTime" label="发起时间" />
					<el-table-column fixed="right" label="操作" width="120">
						<template #default="scope">
							<el-button
								link
								type="primary"
								size="small"
								@click="pushProcessApproval(scope.row)"
							>
								查看
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="card">
				<div class="commons-title">
					系统公告
				</div>
				<ul class="announcement">
					<li v-for="i in sendMegData.rows" :key="i.id">
						<div class="time">{{i.createTime}} <span>系统公告</span></div>
						<div class="content">{{i.content}}</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- <byTableDemo></byTableDemo> -->
		<!-- <el-input type="number" v-model='aaa' v-mousewheel></el-input> -->
		<!-- 111112132131211 -->
	</div>
</template>

<script setup name="Index">
import { createApp, onMounted, ref } from 'vue'
import byTableDemo from '../components/byTable/demo'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

const aaa = ref(1)
function goTarget(url) {
	window.open(url, '__blank')
}
let toBeProcessedData = ref({
	total:0,
	rows:[]
})
let haveInitiatedData = ref({
	total:0,
	rows:[]
})
const sendMegData = ref({
	total:0,
	rows:[]
})
const pushProcessApproval = (row) => {
	if(row.status != 1 && row.status != 0) {
		proxy.$router.push({
			path: "/platform_manage/process/processApproval",
			query: {
				flowKey: row.flowKey,
				id: row.id,
				processType:20,
				version:row.version
			},
		});
		return
	}
	proxy.post('flowExample/getApprovalRecord',{id:row.id}).then(res=>{
		if(res.recordList.length > 0) {
			let data = res.recordList.filter(item => item.status === 2)
			let nodeType= 0
			if (data && data.length > 0) {
				nodeType = data[0].nodeType
			}
			proxy.$router.push({
				path: "/platform_manage/process/processApproval",
				query: {
					flowKey: row.flowKey,
					id: row.id,
					processType:nodeType == 1 ? 30 : 10,
					version:row.version
				},
			});
		}
	})
	
}
const { proxy } = getCurrentInstance();
const getData = (() => {
	proxy.post('flowExample/getToBeProcessedPage',{
		pageNum:1,
		pageSize:4,
		status:'1'
	}).then(res=>{
		toBeProcessedData.value = res
	})
	proxy.post('flowExample/getHaveInitiatedPage',{
		pageNum:1,
		pageSize:4,
		status:'1'
	}).then(res=>{
		haveInitiatedData.value = res
	})
	proxy.post('sendMeg/page',{
		pageNum:1,
		pageSize:3,
	}).then(res=>{
		sendMegData.value = res
	})
})
const toUrl = (name,type) => {
	//获取name为name的路由的基础信息
	const route = proxy.$router.resolve({ name: name, params: {  } })
	console.log(route)
	proxy.$router.push(route.path + '?type=' + type)
}
getData()
// ​
onMounted(() => {})
</script>
<style>
.table-warp .el-table .cell{
	line-height: 24px!important;
}
</style>
<style scoped lang="scss">

.app-container {
	height: 100%;
	.announcement{
		padding: 0;
		margin: 0;
		li{
			list-style: none;
			border-radius: 2px;
			padding: 14px 20px;
			background: #EEEEEE;
			margin-bottom:10px;
			font-size: 14px;
			cursor: pointer;
			.time{
				color:#999;
			}
			.content{
				margin-top:10px;
				color:#333;
			}
		}
		li:hover{
			background: #EFF6FF;
		}
	}
	.table-warp{
		//页面全屏，占据剩下的位置
		height: calc(100% - 157px);
		border-radius: 5px;
		
		.card{
			width: calc(50% - 10px);
			height: calc(50% - 10px);
			background: #fff;
			float: left;
			border-radius: 5px;
			padding:20px;
			overflow-y:auto;
		}
		.card:nth-child(2n + 1){
			margin-right: 20px;
		}
		.card:nth-child(1){
			margin-bottom: 20px;
		}
		.card:nth-child(2){
			margin-bottom: 20px;
		}
	}
	.stat-warp {
		margin-bottom: 20px;
		background: #fff;
		padding: 20px;
		overflow: hidden;
		position: relative;
		border-radius: 5px;
		
		.title {
			height: 60px;
			select {
				height: 60px;
				border: none;
				outline: none;
				-webkit-appearance: none;
				appearance: none;
				font-size: 14px;
				font-weight: bold;
				background: url('@/assets/images/sanjiao.png') no-repeat right
					center;
				padding-right: 20px;
			}
			div {
				height: 60px;
				font-size: 14px;
				font-weight: bold;
				line-height: 60px;
			}
		}
		ul {
			padding: 0;
			overflow: hidden;
			margin: 0;
			li {
				list-style: none;
				min-width: 285px;
				box-sizing: border-box;
				margin-right: 20px;
				background: linear-gradient(360deg, #C7E3FE 0%, #DFECFF 100%);
				float: left;
				overflow: hidden;
				padding: 20px;
				color: #333333;
				position: relative;
				border-radius: 10px;
				.label {
					font-size: 14px;
					margin-top: 10px;
				}
				.label::before {
					// width: 10px;
					// height: 10px;
					// content: '';
					// border-radius: 50%;
					// background: #0084ff;
					// display: inline-block;
					// margin-right: 10px;
					
				}
				.num {
					
					font-size: 24px;
					font-weight: bold;
				}
				.icon-box{
					position: absolute;
					height: 40px;
					width: 40px;
					right: 20px;
					top: 20px;
					background: #fff;
					border-radius: 10px;
					text-align: center;
					line-height: 40px;
					i{
						font-size: 20px;
						color:#0084FF;
					}
				}
			}
			//#F5F3FF #9E64ED
			.theme2 {
				background: linear-gradient(180deg, #EAE8FB 0%, #DED9FF 100%);
				.label::before {
					background: #7566F0;
				}
				.icon-box i {
					color: #7566F0;
				}
			}
			//#FFF1E1 #FF9315
			.theme3 {
				background: #fff1e1;
				.label::before {
					background: #ff9315;
				}
				.icon-box i {
					color: #FF9315;
				}
			}
			//#E2FBE8 #39C55A
			.theme4 {
				background: #e2fbe8;
				.label::before {
					background: #39c55a;
				}
			}
			.theme5 {
				background: #ffebe9;
				.label::before {
					background: #f94539;
				}
			}
			.theme6 {
				background: #e4f9f9;
				.label::before {
					background: #53cbcb;
				}
			}
			.multi-data {
				.label::before {
					display: none;
				}
				.label {
					font-size: 14px;
					font-weight: bold;
					color: #333;
					margin-bottom: 8px;
				}
				.num-warp {
					overflow: hidden;
					.num-box {
						float: left;
						min-width: 80px;
						margin-right: 20px;
						.num-small {
							font-size: 16px;
							font-weight: bold;
							margin-bottom: 8px;
						}
						.label-small {
							color: #666;
							font-size: 14px;
						}
					}
				}
			}
		}
	}
}
</style>