Skip to content

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

update: 流程跟踪组件

上级 8d1f3f21
隐藏空白字符变更
内嵌 并排
正在显示 包含 53 行增加 和 167 行删除
src/components/extend-action-timeline/extend-action-timeline.less
浏览文件 @ 301cc763
......@@ -198,7 +198,7 @@
}
.timeline-wrapper__authorname {
width: 15%;
width: 10%;
min-width: 110px;
}
......
src/components/extend-action-timeline/extend-action-timeline.vue
浏览文件 @ 301cc763
......@@ -2,7 +2,7 @@
<div class="extend-action-timeline">
<div class="extend-action-timeline-table">
<div class="extend-action-timeline-thead"></div>
<div class="extend-action-timeline-body" v-if="data && data.usertasks">
<div class="extend-action-timeline-body" v-if="data.length > 0">
<div class="timeline-draw extend-action-timeline-body__timeline timeline-head">
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">{{ $t('components.timeline.index') }}</div>
......@@ -14,8 +14,8 @@
</div>
<div class="timeline-arrow"></div>
</div>
<template v-for="(usertask, usertaskIndex) in data.usertasks">
<div v-if="usertask.comments.length > 0" class="timeline-content" :key="usertaskIndex">
<template v-for="(usertask, index) in data">
<div class="timeline-content" :key="index">
<div class="extend-action-timeline-body__timeline">
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">
......@@ -25,85 +25,37 @@
</div>
<div class="icon-top" v-if="usertask.index < usertasksLength"></div>
</div>
<div class="timeline-wrapper__usertaskname">{{ usertask.userTaskName }}</div>
<div class="timeline-wrapper__authorname">
<Tooltip
placement="bottom"
theme="light"
:disabled="
acceptingOfficerNodup('authorName', usertask.comments).length > 1
? false
: true
"
>
{{
acceptingOfficerNodup('authorName', usertask.comments)
.map(item => item)
.toString()
}}
<div slot="content">
<div class="timeline-wrapper__authorname__tooltips">
<div
class="tooltips-content"
v-for="(item, toolindex) in acceptingOfficerNodup(
'authorName',
usertask.comments,
)"
:key="toolindex"
>
{{ item }}
</div>
</div>
</div>
</Tooltip>
</div>
<div class="timeline-wrapper__type">
<div class="timeline-wrapper__usertaskname">{{ usertask.usertaskname }}</div>
<div class="timeline-wrapper__authorname">{{usertask.displayNames ? usertask.displayNames.join(' , ') : usertask.authorName}}</div>
<div class="timeline-wrapper__type" v-if="usertask.type">
<div
v-if="
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].type
"
class="dot"
></div>
<span>{{
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].type
}}</span>
<span>{{usertask.type}}</span>
</div>
<div class="timeline-wrapper__last-time">
<div class="timeline-wrapper__last-time" v-if="usertask.time">
{{
usertask.comments[usertask.comments.length - 1] &&
formatDate(
usertask.comments[usertask.comments.length - 1].time,
usertask.time,
'MM月DD日 HH:mm:ss',
)
}}
</div>
<el-popover class="timeline-wrapper__tooltip" placement="top" :width="500" trigger="hover">
<div slot="reference">
{{
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].fullMessage
}}
{{ usertask.fullMessage }}
</div>
<div class="fullmessage">
{{
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].fullMessage
}}
{{ usertask.fullMessage }}
</div>
</el-popover>
</div>
<div
v-if="usertask.comments.length > 1 || usertask.identitylinks.length > 0"
class="timeline-arrow"
@click="changeExpand(usertask)"
>
<div v-if="usertask.displayNames && usertask.displayNames.length > 1" class="timeline-arrow" @click="changeExpand(usertask)">
<i :class="usertask.isShow ? 'el-icon-minus' : 'el-icon-plus'" />
</div>
</div>
<div v-if="usertask.isShow">
<template v-for="(comment, index) in usertask.comments">
<template v-for="(displayName, index) in usertask.displayNames">
<div class="timeline-draw extend-action-timeline-body__timeline" :key="index">
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">
......@@ -111,101 +63,7 @@
</div>
<div class="timeline-wrapper__usertaskname"></div>
<div class="timeline-wrapper__authorname">
{{ comment.authorName }}
</div>
<div class="timeline-wrapper__type">
<div class="dot"></div>
<span>{{ comment.type }}</span>
</div>
<div class="timeline-wrapper__last-time">
{{ formatDate(comment.time, 'MM月DD日 HH:mm:ss') }}
</div>
<div class="timeline-wrapper__fullmessage">{{ comment.fullMessage }}</div>
</div>
<div class="timeline-arrow"></div>
</div>
</template>
<div
v-if="usertask.identitylinks.length > 0"
class="timeline-draw extend-action-timeline-body__timeline"
>
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">
<div v-if="usertask.index < usertasksLength" class="icon-line"></div>
</div>
<div class="timeline-wrapper__usertaskname">
{{ $t('components.timeline.inhand') }}
</div>
<div
class="timeline-wrapper__authorname">
<div
v-for="(identitylink, index) in usertask.identitylinks"
:key="index"
>
{{ identitylink.displayname }}
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="timeline-content" :key="usertaskIndex">
<div class="extend-action-timeline-body__timeline">
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">
<span>{{ usertask.index }}</span>
<div class="icon-bottom" v-if="usertask.index != 1">
<i class="el-icon-bottom"></i>
</div>
<div class="icon-top" v-if="usertask.index < usertasksLength"></div>
</div>
<div class="timeline-wrapper__usertaskname">{{ usertask.userTaskName }}</div>
<div class="timeline-wrapper__authorname">
<Tooltip
placement="bottom"
theme="light"
:disabled="
acceptingOfficerNodup('displayname', usertask.identitylinks).length > 1
? false
: true
"
>
{{
acceptingOfficerNodup('displayname', usertask.identitylinks)
.map(item => item)
.toString()
}}
<div slot="content">
<div class="tooltips">
<div
class="tooltips-content"
v-for="(item, toolindex) in acceptingOfficerNodup(
'displayname',
usertask.identitylinks,
)"
:key="toolindex"
>
{{ item }}
</div>
</div>
</div>
</Tooltip>
</div>
</div>
<div v-if="usertask.identitylinks.length > 1" class="timeline-arrow" @click="changeExpand(usertask)">
<i :class="usertask.isShow ? 'el-icon-minus' : 'el-icon-plus'" />
</div>
</div>
<div v-if="usertask.isShow">
<template v-for="(identitylink, index) in usertask.identitylinks">
<div class="timeline-draw extend-action-timeline-body__timeline" :key="index">
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">
<div v-if="usertask.index < usertasksLength" class="icon-line"></div>
</div>
<div class="timeline-wrapper__usertaskname"></div>
<div class="timeline-wrapper__authorname">
{{ identitylink.displayname }}
{{ displayName }}
</div>
</div>
<div class="timeline-arrow"></div>
......@@ -252,7 +110,7 @@ export default class ExtendActionTimeline extends Vue {
*
* @memberof ExtendActionTimeline
*/
public data: any = {};
public data: any[] = [];
/**
* 初始化memo
......@@ -292,8 +150,8 @@ export default class ExtendActionTimeline extends Vue {
if (this.appEntityService) {
this.appEntityService.GetWFHistory(this.context).then((response: any) => {
if (response && response.status === 200) {
this.data = response.data;
this.initUIStateData();
this.formatData(response.data);
this.initUIStateData(this.data);
} else {
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response });
}
......@@ -309,19 +167,47 @@ export default class ExtendActionTimeline extends Vue {
*
* @memberof ExtendActionTimeline
*/
public initUIStateData() {
if (this.data && this.data.usertasks) {
public initUIStateData(items: any) {
if (items.length > 0) {
this.usertasksIndex = 1;
for (let i in this.data.usertasks) {
this.data.usertasks[i].isShow = false;
this.data.usertasks[i].index = this.usertasksIndex;
items.forEach((item: any) => {
item.isShow = false;
item.index = this.usertasksIndex;
this.usertasksIndex++;
}
})
this.usertasksLength = this.usertasksIndex - 1;
this.$forceUpdate();
}
}
/**
* 格式化数据
*
* @memberof ExtendActionTimeline
*/
public formatData(data: any) {
const historyTasks = data.historytasks || [];
const waitTasks = data.waittasks || [];
if (historyTasks.length > 0) {
this.data.push(...historyTasks);
}
if (waitTasks.length > 0) {
const taskItems: any[] = [];
waitTasks.forEach((task: any) => {
const index = taskItems.findIndex((item: any) => Object.is(task.usertaskid, item.usertaskid));
if (task.usertaskid && index == -1) {
task.displayNames = [task.displayname];
taskItems.push(task);
}
if (index != -1) {
const index = taskItems.findIndex((item: any) => Object.is(item.usertaskid, task.usertaskid));
taskItems[index].displayNames.push(task.displayname);
}
})
this.data.push(...taskItems);
}
}
/**
* 时间转换
*
......@@ -350,7 +236,7 @@ export default class ExtendActionTimeline extends Vue {
*/
public acceptingOfficerNodup(tag: string, data: any[]): any[] {
let tempData: any[] = [];
if (data.length > 0 && tag) {
if (data && data.length > 0 && tag) {
data.forEach((data: any) => {
tempData.push(data[tag]);
});
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或