问题遇到的现象和发生背景
如图
问题相关代码，请勿粘贴截图
<template>
<div class="dashboard-editor-container">
<el-row :gutter="20" style="margin-top: 20px">
<el-col :xs="24" :sm="24" :lg="17">
<div class="bpb">
<el-tabs v-model="mainType" @tab-click="mainTypeTabClick">
<el-tab-pane name="todo">
<span slot="label" @click="todoTabClick">待办任务<el-badge v-if="todoCount > 0" :value="todoCount" :max="99"></el-badge></span>
<img :src="todonumImg" style="margin-bottom:-12px; margin-left: 12px">
<span style="margin-left: 5px">您有<span style="color: red"> {{todoCount}} </span>条待办需处理</span>
<span @click="todoRefresh" style="cursor: pointer;">
<img :src="refreshImg" class="refresh" >
</span>
<!--展示的内容-->
<div class="listBox" style="margin-top: 25px">
<div v-for="todoItem in todoDataList" :key="todoItem.id" class="listItemBox">
<div class="btnBox">
<img class="icon1" :src="todoImg" alt="" >
<div class="btnstyle" @click="goPage(todoItem)">{{todoItem.taskCustomMessage?todoItem.taskCustomMessage.title:todoItem.procName}}</div>
</div>
<div class="itemInfo">
<span>来自：{{todoItem.lastAssigneeName}}</span>
<span>时间：{{todoItem.startTime}}</span>
</div>
</div>
<div class="el-table__empty-block" v-if="todoDataList.length==0">
<p class="el-table__empty-text">暂无数据</p>
</div>
<pagination
v-show="todoTabShow()"
:total="getTodoTotal()"
:page.sync="queryTodoTypeDataParams.pageNum"
:limit.sync="queryTodoTypeDataParams.pageSize"
:pageSizes=[6,10,20,50]
@pagination="getTodoDataList()"
/>
</div>
</el-tab-pane>
<el-tab-pane name="dos">
<span slot="label" @click="dosTabClick">已办任务</span>
<img :src="todonumImg" style="margin-bottom:-12px; margin-left: 12px">
<span style="margin-left: 5px">您有<span style="color: red"> {{dosCount}} </span>条业务已处理</span>
<span @click="dosRefresh" style="cursor: pointer;">
<img :src="refreshImg" class="refresh" >
</span>
<div class="listBox" style="margin-top: 25px">
<div class="listItemBox" v-for="dosItem in dosDataList" :key="dosItem.id">
<div class="btnBox">
<img class="icon" :src="dosImg" alt="">
<div class="btnstyle" @click="goDos(dosItem)">{{dosItem.customMessage?dosItem.customMessage.title:item.name}}</div>
</div>
<div class="itemInfo">
<span>来自：{{dosItem.startUserName}}</span>
<!--<span >处理状态：<b class="examining-style" v-if="dosItem.procStatus == 0">{{dosItem.procDesc}}</b>
<b class="examined-style" v-if="dosItem.procStatus == 1">{{dosItem.procDesc}}</b>
<b class="reject-style" v-if="dosItem.procStatus == 2">{{dosItem.procDesc}}</b>
</span>-->
<span>时间：{{dosItem.startTime}}</span>
</div>
</div>
<div class="el-table__empty-block" v-if="dosDataList.length==0">
<p class="el-table__empty-text">暂无数据</p>
</div>
<pagination
v-show="dosTabShow()"
:total="getDosTotal()"
:page.sync="dosByPageParams.pageNum"
:limit.sync="dosByPageParams.pageSize"
:pageSizes=[6,10,20,50]
@pagination="getDosDataList()"
/>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="7">
<div class="bpb">
<div class="title"><div>公告标题</div></div>
<el-timeline :reverse="true">
<el-timeline-item placement="top" style="margin-left: -20px; margin-top: 10px"
v-for="(activity, index) in noticeList"
:key="index"
:timestamp="activity.createTime">
<a @click="showNotice(activity)" style="cursor:pointer">{{activity.noticeTitle}}</a>
</el-timeline-item>
</el-timeline>
<div class="pageTl">{{queryParams.pageNum}}/{{totalPage}}</div>
<el-pagination
@current-change="getList"
:page-size="queryParams.pageSize"
:current-page.sync="queryParams.pageNum"
layout="prev, next"
:total="noticeTotal"
prev-text="<< 上一页"
next-text="下一页 >>"
>
</el-pagination>
</div>
</el-col>
</el-row>
<!-- 通知详细 -->
<el-dialog title="通知公共详情" :visible.sync="open" width="780px" append-to-body>
<el-form ref="form" :model="form" label-width="110px" size="mini">
<el-row>
<el-col :span="24">
<el-form-item label="公共标题：">{{ form.noticeTitle}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公告类型：">{{ typeFormat(form.noticeType)}}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公告状态：">{{ statusFormat(form.status) }}</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="内容：">
<Editor :min-height="192" :readOnly="true" v-model="form.noticeContent"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listNotice} from "@/api/system/notice";
import dosImg from "@/assets/bpm/dos.png";
import todoImg from "@/assets/bpm/todo.png";
import todonumImg from "@/assets/bpm/todonum.png";
import refreshImg from "@/assets/bpm/refresh.png";
import {
allDosCount,
definitionNotContainResource,
dosByPage,
groupTodosCount,
listGroupDosCount,
todosContainMsgByPage
} from "@/api/bpm/bpmApi";
import Editor from '@/components/Editor';
export default {
name: 'Index',
components: {
Editor
},
}
</script>
<style lang="scss" scoped>
.bpb {
background-color: white;
padding: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.listBox {
display: flex;
flex-direction: column;
}
.btnTitle {
font-size: 14px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: normal;
color: #303133;
line-height: 22px;
margin-bottom: 8px;
display: flex;
align-items: center;
width: 80%;
flex-wrap: wrap;
}
.listItemBox {
width: 100%;
border-bottom: 1px solid #EEEEEE;
display: flex;
flex-direction: column;
margin-bottom: 10px;
padding-bottom: 10px;
padding-left: 24px;
}
.itemInfo span {
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
color: #999093;
margin-left: 24px;
}
.pagination-container {
height: 30px;
}
.btnBox {
width: 100%;
display: flex;
align-items: flex-start;
}
.icon {
width: 40px;
height: 34px;
margin-top: 8px;
margin-right: 8px;
margin-bottom: -9px;
}
.icon1 {
width: 33px;
height: 34px;
margin-top: 8px;
margin-right: 12px;
margin-bottom: -9px;
}
.dashboard-editor-container{
padding-left: 12px;
}
.dialog-footer {
text-align: right;
}
.btnstyle {
cursor: pointer;
max-width: 95%;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: normal;
color: #303133;
line-height: 22px;
margin-bottom: 8px;
}
.count-style {
color: red;
font-weight: bold;
}
//审核中
.examining-style {
color: red;
font-weight: bold;
}
//已审核
.examined-style {
color: #0066B3;
font-weight: bold;
}
//已终止
.reject-style {
color: grey;
font-weight: bold;
}
.title {
word-break: break-word;
//background-color: #eeeeee;
color: #515a6e;
height: 40px;
font-size: 13px;
margin-bottom: 0.1rem;
text-align: left;
}
.title > div {
display: inline-block;
box-sizing: border-box;
position: relative;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
width: 100%;
padding-top: 10px;
font-weight: normal;
}
.pageTl {
display: inline-block;
width: 20px;
height: 28px;
box-sizing: border-box;
position: relative;
vertical-align: middle;
padding-top: 8px;
margin-left: 35px;
}
.el-pagination {
width: 80%;
display: inline-block;
}
.refresh {
margin-bottom:-6px;
margin-left: 6px;
height: 20px;
width: 20px;
}
.itemInfo {
margin-left: 23px;
}
</style>
