Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 b2cb247c 编写于 作者: Mosher's avatar Mosher
浏览文件
操作

更新action-timeline组件 --- fix5

上级 27a874ea
隐藏空白字符变更
内嵌 并排
正在显示 包含 147 行增加 和 140 行删除
src/components/action-timeline/action-timeline.less
浏览文件 @ b2cb247c
.action-timeline {
position: relative;
height: 100%;
.action-timeline-wrapper {
padding-left: 115px;
color: var(--view-font-color-bright);
>.action-timeline-item {
position: relative;
height: 30px;
display: list-item;
list-style: none;
top: -6px;
>.timeline-time {
position: absolute;
left: -115px;
top: 5px;
font-size: 12px;
}
>.timeline-content {
padding: 5px;
padding-left: 65px;
}
}
>.action-timeline-item::before {
position: absolute;
top: 17px;
left: 45px;
z-index: 3;
width: 7px;
height: 7px;
background-color: var(--view-button-background-color);
border: 1px solid #515a6e;
content: ' ';
border-radius: 50%;
.action-timeline-table {
width: calc(100% - 60px);
margin: 0 30px;
border-collapse:separate;
border-spacing:0px 40px;
.action-timeline-thead {
th:nth-child(1) {
min-width: 200px;
}
>.action-timeline-item:nth-child(n+2)::after {
position: absolute;
top: -7px;
bottom: 12px;
left: 48px;
z-index: 1;
display: block;
content: ' ';
border-left: 1px solid #515a6e;
th:nth-child(2) {
width: 100%
}
}
.action-timeline-group-wrapper {
padding-left: 200px;
padding-right: 30px;
color: var(--view-font-color-bright);
.action-timeline-group {
position: relative;
padding-top: 40px;
>.date {
position: absolute;
width: 150px;
left: -170px;
border: 2px solid #515a6e;
font-size: 18px;
padding: 16px;
>.usertaskname {
max-width: 100px;
.action-timeline-tbody {
tr {
td {
position: relative;
> .date {
display: flex;
width: max-content;
padding: 16px;
font-size: 16px;
border: 2px solid #515a6e;
.arrow {
margin-left: 10px;
}
}
>.arrow {
>.date::before {
content: ' ';
display: block;
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
right: -20px;
top: 30px;
height: 2px;
width: 20px;
background-color: #515a6e;
}
>.timeline {
padding: 16px;
border: 2px solid #515a6e;
min-height: 68px;
margin-left: 18px;
.action-timeline-wrapper {
padding-left: 115px;
color: var(--view-font-color-bright);
>.action-timeline-item {
position: relative;
height: 30px;
display: list-item;
list-style: none;
top: -6px;
>.timeline-time {
position: absolute;
left: -115px;
top: 5px;
font-size: 12px;
}
>.timeline-content {
padding: 5px;
padding-left: 65px;
}
}
>.action-timeline-item::before {
position: absolute;
top: 17px;
left: 45px;
z-index: 3;
width: 7px;
height: 7px;
background-color: var(--view-button-background-color);
border: 1px solid #515a6e;
content: ' ';
border-radius: 50%;
}
>.action-timeline-item:nth-child(n+2)::after {
position: absolute;
top: -7px;
bottom: 12px;
left: 48px;
z-index: 1;
display: block;
content: ' ';
border-left: 1px solid #515a6e;
}
}
}
}
>.date::before {
content: ' ';
display: block;
position: absolute;
right: -22px;
top: 30px;
height: 2px;
width: 20px;
background-color: #515a6e;
}
>.timeline {
padding: 16px;
border: 2px solid #515a6e;
min-height: 68px;
}
}
}
......
src/components/action-timeline/action-timeline.vue
浏览文件 @ b2cb247c
<template>
<div class="action-timeline">
<div class='action-timeline-group-wrapper'>
<template v-for="(usertask, usertaskIndex) in data.usertasks">
<div :key='usertaskIndex' class='action-timeline-group'>
<div class='date'>
<div class='usertaskname'>{{ usertask.userTaskName }}</div>
<div class='arrow' @click="changeExpand(usertask)">
<i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
</div>
</div>
<div class='timeline'>
<template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
{{$t('components.appWFApproval.wait')}}
<strong>
<template v-for="(identitylink, len) in usertask.identitylinks">
<template v-if="identitylink.displayname">
{{ identitylink.displayname }}
<template v-if="len != usertask.identitylinks.length - 1">
、
</template>
</template>
</template>
</strong>
{{$t('components.appWFApproval.handle')}}
</template>
<template v-else>
<ul class="action-timeline-wrapper">
<template v-if="!usertask.isShow">
<li v-if="usertask.comments && usertask.comments.length > 0" class="action-timeline-item">
<div class='timeline-time'>
{{ formatDate(usertask.comments[0].time, 'MM月DD日 HH:mm') }}&nbsp;{{ usertask.comments[0].authorName }}
</div>
<div class='timeline-content'>
{{ usertask.comments[0].type }}&nbsp;{{ usertask.comments[0].fullMessage }}
</div>
</li>
<table class="action-timeline-table">
<thead class="action-timeline-thead">
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody class="action-timeline-tbody">
<template v-for="(usertask, usertaskIndex) in data.usertasks">
<tr :key='usertaskIndex'>
<td align="right" valign="top">
<div class='date'>
<div class='usertaskname'>{{ usertask.userTaskName }}</div>
<div class='arrow' @click="changeExpand(usertask)">
<i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
</div>
</div>
</td>
<td>
<div class='timeline'>
<template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
{{$t('components.appWFApproval.wait')}}
<strong>
<template v-for="(identitylink, len) in usertask.identitylinks">
<template v-if="identitylink.displayname">
{{ identitylink.displayname }}
<template v-if="len != usertask.identitylinks.length - 1">
、
</template>
</template>
</template>
</strong>
{{$t('components.appWFApproval.handle')}}
</template>
<template v-else>
<template v-for="(comment, commentIndex) in usertask.comments">
<li :key="commentIndex" class="action-timeline-item">
<div class='timeline-time'>
{{ formatDate(comment.time, 'MM月DD日 HH:mm')}} &nbsp;{{ comment.authorName }}
</div>
<div class='timeline-content'>
{{ comment.type }}&nbsp;{{ comment.fullMessage }}
</div>
</li>
</template>
<ul class="action-timeline-wrapper">
<template v-if="!usertask.isShow">
<li v-if="usertask.comments && usertask.comments.length > 0" class="action-timeline-item">
<div class='timeline-time'>
{{ formatDate(usertask.comments[0].time, 'MM月DD日 HH:mm') }}&nbsp;{{ usertask.comments[0].authorName }}
</div>
<div class='timeline-content'>
{{ usertask.comments[0].type }}&nbsp;{{ usertask.comments[0].fullMessage }}
</div>
</li>
</template>
<template v-else>
<template v-for="(comment, commentIndex) in usertask.comments">
<li :key="commentIndex" class="action-timeline-item">
<div class='timeline-time'>
{{ formatDate(comment.time, 'MM月DD日 HH:mm')}} &nbsp;{{ comment.authorName }}
</div>
<div class='timeline-content'>
{{ comment.type }}&nbsp;{{ comment.fullMessage }}
</div>
</li>
</template>
</template>
</ul>
</template>
</ul>
</template>
</div>
</div>
</template>
</div>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或