Skip to content

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

更新action-timeline组件

上级 1c256f80
隐藏空白字符变更
内嵌 并排
正在显示 包含 115 行增加 和 137 行删除
src/components/action-timeline/action-timeline.less
浏览文件 @ 768807af
......@@ -33,7 +33,7 @@
width: 7px;
height: 7px;
background-color: var(--view-button-background-color);
border: 1px solid red;
border: 1px solid #515a6e;
content: ' ';
border-radius: 50%;
}
......@@ -46,7 +46,7 @@
z-index: 1;
display: block;
content: ' ';
border-left: 1px solid red;
border-left: 1px solid #515a6e;
}
}
......@@ -63,7 +63,7 @@
position: absolute;
width: 150px;
left: -170px;
border: 2px solid red;
border: 2px solid #515a6e;
font-size: 18px;
padding: 16px;
......@@ -83,12 +83,12 @@
top: 30px;
height: 2px;
width: 20px;
background-color: red;
background-color: #515a6e;
}
>.timeline {
padding: 16px;
border: 2px solid red;
border: 2px solid #515a6e;
}
}
}
......
src/components/action-timeline/action-timeline.vue
浏览文件 @ 768807af
<template>
<div class="action-timeline">
<template v-for="(item, index) in items">
<div :key='index' class='action-timeline-group-wrapper'>
<template v-for="(usertask, usertaskIndex) in item.usertasks">
<div :key='usertaskIndex' class='action-timeline-group expand'>
<div class='date'>
{{ usertask.userTaskName }}
<div class='arrow'>
<i @click="changeExpand($event)" class="el-icon-arrow-down" />
</div>
<div class='action-timeline-group-wrapper'>
<template v-for="(usertask, usertaskIndex) in data.usertasks">
<div :key='usertaskIndex' class='action-timeline-group expand'>
<div class='date'>
{{ usertask.userTaskName }}
<div class='arrow' @click="changeExpand(usertask)">
<i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " />
</div>
<div class='timeline'>
<template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
等待
<strong>
<template v-for="(identitylink, len) in usertask.identitylinks">
{{ identitylink.displayname }}
<template v-if="len != usertask.identitylinks.length - 1">
、
</template>
</template>
</strong>
处理
</template>
<template v-else>
<ul class="action-timeline-wrapper">
<template v-if="!usertask.isShow">
<template>
<li class="action-timeline-item">
<div class='timeline-time'>
{{ formatDate(usertask.comments[0].time, 'MM月DD日')}} &nbsp;{{ usertask.comments[0].authorName }}
</div>
<div class='timeline-content'>
{{ usertask.comments[0].type }}&nbsp;{{ usertask.comments[0].fullMessage }}
</div>
</li>
</template>
</div>
<div class='timeline'>
<template v-if="usertask.identitylinks && usertask.identitylinks.length > 0">
等待
<strong>
<template v-for="(identitylink, len) in usertask.identitylinks">
{{ identitylink.displayname }}
<template v-if="len != usertask.identitylinks.length - 1">
、
</template>
<template v-else>
</template>
</strong>
处理
</template>
<template v-else>
<ul class="action-timeline-wrapper">
<template v-if="!usertask.isShow">
<li 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日')}} &nbsp;{{ comment.authorName }}
{{ 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>
</div>
</template>
</ul>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { ActionTimelineItem } from './action-timeline-interface';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import moment from 'moment';
@Component({
})
export default class ActionTimeline extends Vue {
@Prop() public data!: any;
/**
* 数据
*
* @memberof ActionTimeline
*/
public data:any = {};
/**
* 初始化memo
*
* @memberof ActionTimeline
*/
public initmemo:string = "";
/**
* 传入数据服务
*
* @memberof ActionTimeline
*/
@Prop() public service:any;
public items: any[] = [{
"id": "40833204-9be4-11ea-9c94-0242130d84ce",
"name": null,
"processDefinitionKey": null,
"processDefinitionName": null,
"businessKey": "DC20200522022",
"startTime": "2020-05-22 12:25:22",
"endTime": null,
"startUserId": "001-004_0001",
"startUserName": "隆俊杰",
"usertasks": [{
"userTaskId": "tid-1-1f3eda90105907e25e6f2e8c0f82b903",
"userTaskName": "管理员审批",
"processDefinitionKey": null,
"processDefinitionName": null,
"identitylinks": [],
"comments": [{
"id": "44eddf40-9be4-11ea-9c94-0242130d84ce",
"author": "001-004_0001",
"authorName": "隆俊杰",
"fullMessage": "",
"time": "2020-05-22 12:25:29",
"type": "审批不通过",
"taskId": "40844383-9be4-11ea-9c94-0242130d84ce",
"processInstanceId": "40833204-9be4-11ea-9c94-0242130d84ce",
"processInstanceBusinessKey": "DC20200522022"
}, {
"id": "b39cfc68-9be4-11ea-9c94-0242130d84ce",
"author": "450000-000",
"authorName": "ibzadmin",
"fullMessage": "",
"time": "2020-05-22 12:28:35",
"type": "审批不通过",
"taskId": "a6c57ad1-9be4-11ea-9c94-0242130d84ce",
"processInstanceId": "40833204-9be4-11ea-9c94-0242130d84ce",
"processInstanceBusinessKey": "DC20200522022"
}]
}, {
"userTaskId": "tid-2-c60d498abacb47b510e0aa9d64a55e57",
"userTaskName": "被驳回",
"processDefinitionKey": null,
"processDefinitionName": null,
"identitylinks": [{
"id": "001-004_0001",
"firstname": null,
"displayname": "隆俊杰"
}],
"comments": [{
"id": "a6c21f6e-9be4-11ea-9c94-0242130d84ce",
"author": "001-004_0001",
"authorName": "隆俊杰",
"fullMessage": "",
"time": "2020-05-22 12:28:14",
"type": "提交",
"taskId": "44f09e63-9be4-11ea-9c94-0242130d84ce",
"processInstanceId": "40833204-9be4-11ea-9c94-0242130d84ce",
"processInstanceBusinessKey": "DC20200522022"
}]
}]
}];
/**
* 上下文
*
* @memberof ActionTimeline
*/
@Prop() public context:any;
public created() {
/**
* 视图参数
*
* @memberof ActionTimeline
*/
@Prop() public viewparams:any;
/**
* 初始化数据
*
* @memberof ActionTimeline
*/
public created(){
if(this.service){
this.service.GetWFHistory(this.context).then((res:any) =>{
if(res && (res.status === 200)){
this.data = res.data;
}
})
}
this.handleData();
}
/**
* 处理数据
*
* @memberof ActionTimeline
*/
public handleData() {
if(this.data) {
this.items = this.data;
}
if(this.data && this.data.usertasks) {
this.data.usertasks.array.forEach((item: any) => {
item.isShow = true;
})
}
}
/**
* 时间转换
*
* @memberof ActionTimeline
*/
public formatDate(date: string, format: string) {
return moment(date).format(format);
}
public updown: boolean = false;
public changeExpand($event:any) {
this.items.forEach((item: any) => {
item.usertasks.forEach((usertask: any) => {
if(usertask.comments.length > 0) {
usertask.isShow = false;
}
})
})
}
public expands: any;
public handleIdentData() {
if(this.data) {
this.items = this.data;
this.items.forEach((item: any) => {
item.usertasks.forEach((usertask: any) => {
usertask.isShow = true;
})
})
}
/**
* 点击事件
*
* @memberof ActionTimeline
*/
public changeExpand(usertask:any) {
usertask.isShow = !usertask.isShow;
this.$forceUpdate();
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或