<template>
<div class="app-container home">
<div class="stat-warp">
<ul>
<li class="theme1" @click="toUrl('Backlog', 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', 2)">
<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">{{ pushInfo.total }}</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 odd">
<div class="commons-title">我的待审批</div>
<el-table :data="toBeProcessedData.rows" style="width: 100%">
<el-table-column prop="flowName" label="流程类型" width="100" />
<el-table-column prop="title" label="流程标题" />
<el-table-column prop="createUserName" label="发起人" width="100" />
<el-table-column prop="createTime" label="发起时间" width="155" />
<el-table-column fixed="right" label="操作" width="60">
<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 even">
<div class="commons-title">业务提醒</div>
</div>
<div class="card odd">
<div class="commons-title">我的发起（未结束）</div>
<el-table :data="haveInitiatedData.rows" style="width: 100%">
<el-table-column prop="flowName" label="流程类型" width="100" />
<el-table-column prop="title" label="流程标题" />
<el-table-column prop="createUserName" label="审批人" width="100" />
<el-table-column prop="createTime" label="发起时间" width="155" />
<el-table-column fixed="right" label="操作" width="60">
<template #default="scope">
<el-button
link
type="primary"
size="small"
@click="pushProcessApprovalOne(scope.row)"
>
查看
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="card even">
<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,
businessId: row.businessId,
submitType: "10",
},
});
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,
businessId: row.businessId,
submitType: "10",
},
});
}
});
};
const pushProcessApprovalOne = (row) => {
proxy.$router.push({
path: "/platform_manage/process/processApproval",
query: {
flowKey: row.flowKey,
id: row.id,
processType: 20,
version: row.version,
businessId: row.businessId,
submitType: "10",
},
});
return;
};
const { proxy } = getCurrentInstance();
const pushInfo = ref({
total: 0,
rows: [],
});
const getData = () => {
proxy
.post("/flowExample/getToBeProcessedPage", {
pageNum: 1,
pageSize: 4,
})
.then((res) => {
toBeProcessedData.value = res;
});
proxy
.post("/flowExample/getHaveInitiatedPage", {
pageNum: 1,
pageSize: 4,
status: "1",
})
.then((res) => {
haveInitiatedData.value = res;
});
proxy
.post("pushAnnouncement/page", {
pageNum: 1,
pageSize: 3,
})
.then((res) => {
sendMegData.value = res;
});
proxy
.post("pushInfo/page", {
pageNum: 1,
pageSize: 3,
pushRead: 0,
})
.then((res) => {
pushInfo.value = res;
});
};
const toUrl = (name, type) => {
//获取name为name的路由的基础信息
// const route = proxy.$router.resolve({ name: name, params: {} });
if (type === 1) {
proxy.$router.push({
name,
query: {},
});
} else if (type === 2) {
proxy.$router.push({
name,
query: {
type: 1,
},
});
}
};
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 {
height: calc(50% - 10px);
background: #fff;
float: left;
border-radius: 5px;
padding: 20px;
overflow-y: auto;
}
.odd {
width: calc(66.5% - 10px);
}
.even {
margin-left: 20px;
width: calc(33.5% - 10px);
}
// .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;
cursor: pointer;
.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>