You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
4.1 KiB
130 lines
4.1 KiB
<template> |
|
<a-card :class="prefixCls" title="流程信息" :bordered="false"> |
|
<a-timeline> |
|
<a-timeline-item color="#3f9eff"> |
|
<div class="workflow"> |
|
<div class="timestamp">{{formatToDateTime()}}</div> |
|
<a-card> |
|
<h4>{{'管理员审批'}}</h4> |
|
<a-row :gutter="25"> |
|
<a-col class="tip" style="margin-left:10px" :span="11"> |
|
<div class="item"> |
|
<span class="label">审批人 : </span> |
|
<span class="value">{{'虚拟内容'}}</span> |
|
</div> |
|
<div class="item"> |
|
<span class="label">办理状态 : </span> |
|
<span class="value"> |
|
<!-- <a-tag :type="historyFlowChange.activityCommentInfo.mesLevel" |
|
effect="dark" |
|
size="small" |
|
>{{'虚拟内容}}</a-tag>--> |
|
</span> |
|
</div> |
|
<div class="item"> |
|
<span class="label">审批意见 : </span> |
|
<!-- <a-tooltip effect="dark" |
|
:content="historyFlowChange.activityCommentInfo.message" |
|
placement="top-start" |
|
> |
|
<span class="value">{{'虚拟内容'}}</span> |
|
</a-tooltip>--> |
|
</div> |
|
<div class="item"> |
|
<span class="label">开始时间 : </span> |
|
<span class="value">{{'虚拟内容'}}</span> |
|
</div> |
|
<div class="item"> |
|
<span class="label">结束时间 : </span> |
|
<span class="value">{{'虚拟内容'}}</span> |
|
</div> |
|
<div class="item"> |
|
<span class="label">用时 : </span> |
|
<span class="value">{{'虚拟内容'}}</span> |
|
</div> |
|
</a-col> |
|
</a-row> |
|
</a-card> |
|
</div> |
|
</a-timeline-item> |
|
</a-timeline> |
|
</a-card> |
|
</template> |
|
<script lang="ts" setup> |
|
/** |
|
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
|
* 采用vben-动态表格表单封装组件编写,采用 setup 写法 |
|
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved. |
|
* author wangxiang4 |
|
*/ |
|
import { PropType } from 'vue'; |
|
import { Workflow } from '/@/api/platform/workflow/entity/workflow'; |
|
import { Timeline } from 'ant-design-vue'; |
|
import { formatToDateTime } from '/@/utils/dateUtil'; |
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
const ATimeline = Timeline; |
|
const ATimelineItem = Timeline.Item; |
|
const { prefixCls } = useDesign('workflow-time-line'); |
|
const props = defineProps({ |
|
historyFlowChangeList: { |
|
type: Array as PropType<Workflow[]>, |
|
default: () => [] |
|
} |
|
}); |
|
|
|
</script> |
|
<style lang="less" scoped> |
|
@prefix-cls: ~'@{namespace}-workflow-time-line'; |
|
|
|
.@{prefix-cls} { |
|
.workflow{ |
|
.timestamp { |
|
color: #909399; |
|
padding-bottom: 12px; |
|
} |
|
|
|
.item { |
|
height: 32px; |
|
line-height: 32px; |
|
margin-bottom: 8px; |
|
|
|
.label { |
|
display: inline-block; |
|
height: 100%; |
|
width: 70px; |
|
font-size: 14px; |
|
color: #5e6d82; |
|
text-align: end; |
|
vertical-align: top; |
|
|
|
&::after { |
|
display: inline-block; |
|
width: 100%; |
|
content: ''; |
|
height: 0; |
|
} |
|
} |
|
|
|
.value { |
|
padding-left: 10px; |
|
font-size: 14px; |
|
max-width: calc(100% - 90px); |
|
color: #5e6d82; |
|
display: inline-block; |
|
overflow:hidden; |
|
white-space:nowrap; |
|
text-overflow: ellipsis |
|
} |
|
} |
|
|
|
.tip { |
|
padding: 8px 16px; |
|
background-color: #ecf8ff; |
|
border-radius: 4px; |
|
border-left: 5px solid #50bfff; |
|
margin: 20px 0; |
|
} |
|
} |
|
} |
|
</style>
|
|
|