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 @@ ...@@ -198,7 +198,7 @@
} }
.timeline-wrapper__authorname { .timeline-wrapper__authorname {
width: 15%; width: 10%;
min-width: 110px; min-width: 110px;
} }
......
src/components/extend-action-timeline/extend-action-timeline.vue
浏览文件 @ 301cc763
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="extend-action-timeline"> <div class="extend-action-timeline">
<div class="extend-action-timeline-table"> <div class="extend-action-timeline-table">
<div class="extend-action-timeline-thead"></div> <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-draw extend-action-timeline-body__timeline timeline-head">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">{{ $t('components.timeline.index') }}</div> <div class="timeline-wrapper__timeline-index">{{ $t('components.timeline.index') }}</div>
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
</div> </div>
<div class="timeline-arrow"></div> <div class="timeline-arrow"></div>
</div> </div>
<template v-for="(usertask, usertaskIndex) in data.usertasks"> <template v-for="(usertask, index) in data">
<div v-if="usertask.comments.length > 0" class="timeline-content" :key="usertaskIndex"> <div class="timeline-content" :key="index">
<div class="extend-action-timeline-body__timeline"> <div class="extend-action-timeline-body__timeline">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index"> <div class="timeline-wrapper__timeline-index">
...@@ -25,179 +25,37 @@ ...@@ -25,179 +25,37 @@
</div> </div>
<div class="icon-top" v-if="usertask.index < usertasksLength"></div> <div class="icon-top" v-if="usertask.index < usertasksLength"></div>
</div> </div>
<div class="timeline-wrapper__usertaskname">{{ usertask.userTaskName }}</div> <div class="timeline-wrapper__usertaskname">{{ usertask.usertaskname }}</div>
<div class="timeline-wrapper__authorname"> <div class="timeline-wrapper__authorname">{{usertask.displayNames ? usertask.displayNames.join(' , ') : usertask.authorName}}</div>
<Tooltip <div class="timeline-wrapper__type" v-if="usertask.type">
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 <div
v-if="
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].type
"
class="dot" class="dot"
></div> ></div>
<span>{{ <span>{{usertask.type}}</span>
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].type
}}</span>
</div> </div>
<div class="timeline-wrapper__last-time"> <div class="timeline-wrapper__last-time" v-if="usertask.time">
{{ {{
usertask.comments[usertask.comments.length - 1] &&
formatDate( formatDate(
usertask.comments[usertask.comments.length - 1].time, usertask.time,
'MM月DD日 HH:mm:ss', 'MM月DD日 HH:mm:ss',
) )
}} }}
</div> </div>
<el-popover class="timeline-wrapper__tooltip" placement="top" :width="500" trigger="hover"> <el-popover class="timeline-wrapper__tooltip" placement="top" :width="500" trigger="hover">
<div slot="reference"> <div slot="reference">
{{ {{ usertask.fullMessage }}
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].fullMessage
}}
</div> </div>
<div class="fullmessage"> <div class="fullmessage">
{{ {{ usertask.fullMessage }}
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].fullMessage
}}
</div> </div>
</el-popover> </el-popover>
</div> </div>
<div <div v-if="usertask.displayNames && usertask.displayNames.length > 1" class="timeline-arrow" @click="changeExpand(usertask)">
v-if="usertask.comments.length > 1 || usertask.identitylinks.length > 0"
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">
<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">
{{ 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'" /> <i :class="usertask.isShow ? 'el-icon-minus' : 'el-icon-plus'" />
</div> </div>
</div> </div>
<div v-if="usertask.isShow"> <div v-if="usertask.isShow">
<template v-for="(identitylink, index) in usertask.identitylinks"> <template v-for="(displayName, index) in usertask.displayNames">
<div class="timeline-draw extend-action-timeline-body__timeline" :key="index"> <div class="timeline-draw extend-action-timeline-body__timeline" :key="index">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index"> <div class="timeline-wrapper__timeline-index">
...@@ -205,7 +63,7 @@ ...@@ -205,7 +63,7 @@
</div> </div>
<div class="timeline-wrapper__usertaskname"></div> <div class="timeline-wrapper__usertaskname"></div>
<div class="timeline-wrapper__authorname"> <div class="timeline-wrapper__authorname">
{{ identitylink.displayname }} {{ displayName }}
</div> </div>
</div> </div>
<div class="timeline-arrow"></div> <div class="timeline-arrow"></div>
...@@ -252,7 +110,7 @@ export default class ExtendActionTimeline extends Vue { ...@@ -252,7 +110,7 @@ export default class ExtendActionTimeline extends Vue {
* *
* @memberof ExtendActionTimeline * @memberof ExtendActionTimeline
*/ */
public data: any = {}; public data: any[] = [];
/** /**
* 初始化memo * 初始化memo
...@@ -292,8 +150,8 @@ export default class ExtendActionTimeline extends Vue { ...@@ -292,8 +150,8 @@ export default class ExtendActionTimeline extends Vue {
if (this.appEntityService) { if (this.appEntityService) {
this.appEntityService.GetWFHistory(this.context).then((response: any) => { this.appEntityService.GetWFHistory(this.context).then((response: any) => {
if (response && response.status === 200) { if (response && response.status === 200) {
this.data = response.data; this.formatData(response.data);
this.initUIStateData(); this.initUIStateData(this.data);
} else { } else {
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response }); this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response });
} }
...@@ -309,19 +167,47 @@ export default class ExtendActionTimeline extends Vue { ...@@ -309,19 +167,47 @@ export default class ExtendActionTimeline extends Vue {
* *
* @memberof ExtendActionTimeline * @memberof ExtendActionTimeline
*/ */
public initUIStateData() { public initUIStateData(items: any) {
if (this.data && this.data.usertasks) { if (items.length > 0) {
this.usertasksIndex = 1; this.usertasksIndex = 1;
for (let i in this.data.usertasks) { items.forEach((item: any) => {
this.data.usertasks[i].isShow = false; item.isShow = false;
this.data.usertasks[i].index = this.usertasksIndex; item.index = this.usertasksIndex;
this.usertasksIndex++; this.usertasksIndex++;
} })
this.usertasksLength = this.usertasksIndex - 1; this.usertasksLength = this.usertasksIndex - 1;
this.$forceUpdate(); 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 { ...@@ -350,7 +236,7 @@ export default class ExtendActionTimeline extends Vue {
*/ */
public acceptingOfficerNodup(tag: string, data: any[]): any[] { public acceptingOfficerNodup(tag: string, data: any[]): any[] {
let tempData: any[] = []; let tempData: any[] = [];
if (data.length > 0 && tag) { if (data && data.length > 0 && tag) {
data.forEach((data: any) => { data.forEach((data: any) => {
tempData.push(data[tag]); tempData.push(data[tag]);
}); });
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或