Skip to content

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

update：工作流程跟踪

上级 14bea4f0
隐藏空白字符变更
内嵌 并排
正在显示 包含 595 行增加 和 0 行删除
src/app-register.ts
浏览文件 @ c9386807
......@@ -139,6 +139,7 @@ import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-c
import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
import AppTodoList from './components/app-todo-list/app-todo-list.vue';
import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
......@@ -293,5 +294,6 @@ export const AppComponents = {
v.component('app-preset-button',AppPresetButton);
v.component('app-field-image-dynamic', AppFieldImageDynamic);
v.component('app-todo-list',AppTodoList);
v.component('extend-action-timeline',ExtendActionTimeline);
},
};
\ No newline at end of file
src/components/extend-action-timeline/extend-action-timeline.less 0 → 100644
浏览文件 @ c9386807
.extend-action-timeline {
height: 100%;
overflow: scroll;
}
.extend-action-timeline-table {
border-collapse: separate;
border-spacing: 0px 40px;
.extend-action-timeline-thead {
th:nth-child(1) {
min-width: 200px;
}
th:nth-child(2) {
width: 100%;
}
}
}
.extend-action-timeline-body__timeline.timeline-head {
padding: 8px 16px;
height: 45px;
line-height: 45px;
padding: 0 16px;
.timeline-wrapper>div {
height: 45px;
line-height: 45px;
}
.type {
padding-left: 16px;
}
}
.extend-action-timeline-body {
width: 100%;
.timeline-content .timeline-wrapper__authorname {
color: #57a3fd;
}
.timeline-wrapper__authorname__tooltips {
width: 214px;
display: flex;
flex-wrap: wrap;
.tooltips-content {
width: 30%;
margin: 5px 15px;
}
}
.timeline-draw {
height: auto;
background-color: #fafafa;
border-bottom: 1px solid #e8eaec;
}
.timeline-wrapper {
height: auto;
}
.timeline-wrapper__timeline-index {
width: 60px;
height: auto;
}
.timeline-wrapper__usertaskname {
width: 100%;
}
.timeline-wrapper__authorname {
display: flex;
width: 100%;
height: auto;
flex-wrap: wrap;
>div {
width: 110px;
}
}
}
.extend-action-timeline-body__timeline {
position: relative;
width: 100%;
padding: 0 16px;
height: 65px;
line-height: 65px;
font-size: 14px;
.timeline-wrapper {
display: flex;
width: 100%;
.timeline-wrapper__usertaskname,
.timeline-wrapper__authorname,
.timeline-wrapper__last-time,
.timeline-wrapper__type,
.timeline-wrapper__fullmessage {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.timeline-wrapper__tooltip .el-popover__reference {
max-width: 500px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
>div {
text-align: center;
margin: 0 5px;
}
.timeline-wrapper__type {
width: 9%;
min-width: 180px;
text-align: start;
.dot {
width: 8px;
height: 8px;
display: inline-block;
line-height: 100%;
margin: 0 10px 0 3px;
background-color: #46cf4a;
border-radius: 50%;
}
}
}
.timeline-wrapper__timeline-index {
width: 50px;
height: 65px;
position: relative;
span {
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
color: #fff;
background-color: #57a3fd;
border-radius: 50%;
}
.icon-bottom {
color: #57a3fd;
position: absolute;
left: 50%;
top: 0;
height: 30px;
line-height: 0;
font-size: 18px;
transform: translateX(-50%) translateY(-2px);
}
.icon-top {
height: 14px;
width: 0;
border: 1px solid #57a3fd;
border-width: 0 1px 0 0;
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-0.4px);
}
.icon-line {
height: 102%;
width: 0;
border: 1px solid #57a3fd;
border-width: 0 1px 0 0;
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-0.4px);
}
}
.ivu-tooltip {
width: 100%;
}
.ivu-tooltip-rel {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.timeline-wrapper__usertaskname {
width: 9%;
min-width: 160px;
}
.timeline-wrapper__authorname {
width: 15%;
min-width: 110px;
}
.timeline-wrapper__last-time {
width: 15%;
min-width: 100px;
}
.timeline-arrow {
position: absolute;
right: 24px;
bottom: 50%;
transform: translateY(-50%);
float: right;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 24px;
font-weight: bold;
color: #999;
}
}
\ No newline at end of file
src/components/extend-action-timeline/extend-action-timeline.vue 0 → 100644
浏览文件 @ c9386807
<template>
<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="timeline-draw extend-action-timeline-body__timeline timeline-head">
<div class="timeline-wrapper">
<div class="timeline-wrapper__timeline-index">{{ $t('components.timeline.index') }}</div>
<div class="timeline-wrapper__usertaskname">{{ $t('components.timeline.node') }}</div>
<div class="timeline-wrapper__authorname">{{ $t('components.timeline.author') }}</div>
<div class="timeline-wrapper__type">{{ $t('components.timeline.type') }}</div>
<div class="timeline-wrapper__last-time">{{ $t('components.timeline.lasttime') }}</div>
<div class="timeline-wrapper__fullmessage">{{ $t('components.timeline.opinion') }}</div>
</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">
<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('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
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>
</div>
<div class="timeline-wrapper__last-time">
{{
usertask.comments[usertask.comments.length - 1] &&
formatDate(
usertask.comments[usertask.comments.length - 1].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
}}
</div>
<div class="fullmessage">
{{
usertask.comments[usertask.comments.length - 1] &&
usertask.comments[usertask.comments.length - 1].fullMessage
}}
</div>
</el-popover>
</div>
<div
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'" />
</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 }}
</div>
</div>
<div class="timeline-arrow"></div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import moment from 'moment';
import { Http } from '@/utils';
import EntityService from '@/service/entity-service';
import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
@Component({})
export default class ExtendActionTimeline extends Vue {
/**
* 上下文
*
* @memberof ExtendActionTimeline
*/
@Prop() public context: any;
/**
* 视图参数
*
* @memberof ExtendActionTimeline
*/
@Prop() public viewparams: any;
/**
* 实体名称
*
* @memberof ExtendActionTimeline
*/
@Prop() public appDeCodeName!: string;
/**
* 数据
*
* @memberof ExtendActionTimeline
*/
public data: any = {};
/**
* 初始化memo
*
* @memberof ExtendActionTimeline
*/
public initmemo: string = '';
/**
* 子项索引初始值
*
* @memberof ExtendActionTimeline
*/
public usertasksIndex: number = 1;
/**
* 子项长度初始值
*
* @memberof ExtendActionTimeline
*/
public usertasksLength: number = 1;
/**
* 实体服务
*
* @memberof ExtendActionTimeline
*/
public appEntityService: any;
/**
* 初始化数据
*
* @memberof ExtendActionTimeline
*/
public async created() {
this.appEntityService = await window.entityServiceRegister.getService(this.appDeCodeName.toLowerCase());
if (this.appEntityService) {
console.log(this.appEntityService);
this.appEntityService.GetWFHistory(this.context).then((response: any) => {
if (response && response.status === 200) {
this.data = response.data;
this.initUIStateData();
} else {
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response });
}
}).catch((error: any) => {
const message = error.message ? error.message : '加载数据错误';
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message });
})
}
}
/**
* 初始化数据添加标记
*
* @memberof ExtendActionTimeline
*/
public initUIStateData() {
if (this.data && this.data.usertasks) {
this.usertasksIndex = 1;
for (let i in this.data.usertasks) {
this.data.usertasks[i].isShow = false;
this.data.usertasks[i].index = this.usertasksIndex;
this.usertasksIndex++;
}
this.usertasksLength = this.usertasksIndex - 1;
this.$forceUpdate();
}
}
/**
* 时间转换
*
* @memberof ExtendActionTimeline
*/
public formatDate(date: string, format: string) {
return moment(date).format(format);
}
/**
* 点击事件
*
* @memberof ExtendActionTimeline
*/
public changeExpand(usertask: any) {
usertask.isShow = !usertask.isShow;
this.$forceUpdate();
}
/**
* 办理人员名称显示去重
*
* @param tag 需要去重的名称标识
* @param data 需要去重数据集
* @memberof ExtendActionTimeline
*/
public acceptingOfficerNodup(tag: string, data: any[]): any[] {
let tempData: any[] = [];
if (data.length > 0 && tag) {
data.forEach((data: any) => {
tempData.push(data[tag]);
});
}
const nodup = [...new Set(tempData)];
return nodup;
}
}
</script>
<style lang='less'>
@import './extend-action-timeline.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或