sasp-flow-render 1.0.1

package/src/components/flowRoamRecords.vue

@@ -0,0 +1,768 @@
+<template>
+    <div id="roamRecordContainer" class="pos-abs-full flow-record-content"
+         v-loading="loading"
+         element-loading-text="正在加载，请稍后..."
+         element-loading-spinner="el-icon-loading"
+         element-loading-background="rgba(0, 0, 0, 0.6)" style="padding: 10px 20px;overflow-y: scroll;">
+        <div class="flow-summary">
+            <span style="font-weight: bold;">事项概述：</span>
+            {{flowSummary}}
+        </div>
+        <div class="flow-color">
+            <span style="font-weight: bold;">节点颜色：</span>
+            <span class="flow-color-content">
+                <span class="flow-color-item" v-for="node in flowStatusName" :key="node.code">
+                    <span class="flow-color-item-radius"
+                          :style="{backgroundColor:flowStatusColor[node.code]}"></span>
+                    <span class="flow-color-item-text" style="">{{node.name}}</span>
+                </span>
+            </span>
+        </div>
+
+        <div style="padding-top:10px;text-align: center;">
+            <el-radio-group v-model="showStyle">
+                <el-radio-button label="图形展现"></el-radio-button>
+                <el-radio-button label="表格展现"></el-radio-button>
+            </el-radio-group>
+        </div>
+
+        <div class="flow-roam-record-content">
+            <el-timeline v-show="showStyle=='图形展现'">
+                <el-timeline-item
+                        v-for="(item, index) in flowInstNodeArr"
+                        :key="index"
+                        placement="top"
+                        :class="{'appendsign-item':(item.isAppendsign=='1' || item.activityType=='multiInstanceBody' || item.turnSign)}"
+                        :icon="nodeInstIcon(item)"
+                        :color="flowStatusColor[flowStatusCode[item.nodeInstStatus]]"
+                        :timestamp="COMMON_FUNC.dateToString(new Date(item.startTime)) + ' 至 ' + (item.endTime?COMMON_FUNC.dateToString(new Date(item.endTime)):'')">
+
+                    <el-popover v-if="item.isAppendsign=='1'"
+                                placement="top"
+                                popper-class="append-sign-popup"
+                                width="400"
+                                trigger="click">
+                        <div class="flow-roam-record-content">
+                            <el-timeline>
+                                <el-timeline-item
+                                        v-for="(item, index) in item.addSignArr"
+                                        :key="index"
+                                        placement="top"
+                                        icon="el-icon-user-solid"
+                                        :color="flowStatusColor[flowStatusCode[item.nodeInstStatus]]"
+                                        :timestamp="COMMON_FUNC.dateToString(new Date(item.startTime)) + ' 至 ' + (item.endTime?COMMON_FUNC.dateToString(new Date(item.endTime)):'')">
+                                    <el-card>
+                                        <div slot="header" class="clearfix">
+                                            <h4>{{item.nodeName}}
+                                                <span style="padding-left:20px;color:#666;font-weight: normal;"> {{item.actorUserName}}</span>
+                                            </h4>
+                                        </div>
+                                        <p v-html="item.nodeMask"></p>
+                                    </el-card>
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+
+                        <div slot="reference" @click="showCompleteSignInfos(item.ids)"
+                             title="点击查看加签信息"
+                             class="appendsign-item-mask">
+                            <i class="el-icon-postcard appendsign-item-icon"></i>
+                        </div>
+                    </el-popover>
+                    <el-popover v-if="(item.turnSign || []).length > 0"
+                                placement="top"
+                                popper-class="append-sign-popup"
+                                width="400"
+                                trigger="click">
+                        <div class="flow-roam-record-content">
+                            <el-timeline>
+                                <el-timeline-item
+                                        v-for="(item, index) in item.turnSign"
+                                        :key="index"
+                                        placement="top"
+                                        icon="el-icon-user-solid"
+                                        :color="flowStatusColor[flowStatusCode[item.nodeInstStatus]]"
+                                        :timestamp="COMMON_FUNC.dateToString(new Date(item.startTime)) + ' 至 ' + (item.endTime?COMMON_FUNC.dateToString(new Date(item.endTime)):'')">
+                                    <el-card>
+                                        <div slot="header" class="clearfix">
+                                            <h4>{{item.nodeName}}
+                                                <span style="padding-left:20px;color:#666;font-weight: normal;"> {{item.actorUserName}}</span>
+                                            </h4>
+                                        </div>
+                                        <p v-html="item.nodeMask"></p>
+                                    </el-card>
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+
+                        <div slot="reference" @click="showCompleteSignInfos(item.ids)"
+                             title="点击查看转签前处理人信息"
+                             class="appendsign-item-mask">
+                            <i class="saspiconfont pl-icon-gongzuozhuanjiao appendsign-item-icon"></i>
+                        </div>
+                    </el-popover>
+
+                    <el-popover v-if="item.activityType=='multiInstanceBody'"
+                                placement="top"
+                                popper-class="append-sign-popup"
+                                width="400"
+                                trigger="click">
+                        <div class="flow-roam-record-content">
+                            <el-timeline>
+                                <el-timeline-item
+                                        v-for="(item, index) in item.manyChild"
+                                        :key="index"
+                                        placement="top"
+                                        icon="el-icon-user-solid"
+                                        :color="flowStatusColor[flowStatusCode[item.nodeInstStatus]]"
+                                        :timestamp="COMMON_FUNC.dateToString(new Date(item.startTime)) + ' 至 ' + (item.endTime?COMMON_FUNC.dateToString(new Date(item.endTime)):'')">
+                                    <el-card>
+                                        <div slot="header" class="clearfix">
+                                            <h4>{{item.nodeName}}
+                                                <span style="padding-left:20px;color:#666;font-weight: normal;"> {{item.actorUserName}}</span>
+                                            </h4>
+                                        </div>
+                                        <p v-html="item.nodeMask"></p>
+                                    </el-card>
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+
+                        <div slot="reference" @click="showCompleteSignInfos(item.ids)"
+                             title="点击查看多人处理信息"
+                             class="appendsign-item-mask">
+                            <i class="saspiconfont pl-icon-duoren appendsign-item-icon"></i>
+                        </div>
+                    </el-popover>
+
+                    <el-card>
+                        <div slot="header" class="clearfix">
+                            <h4>{{item.activityName}}
+                                <span style="padding-left:20px;color:#666;font-weight: normal;" v-if="item.activityType != 'noneEndEvent'"
+                                      > {{item.actorUserName}}</span>
+                            </h4>
+                        </div>
+                        <p v-html="item.nodeMask"></p>
+                    </el-card>
+                </el-timeline-item>
+            </el-timeline>
+
+            <el-table v-show="showStyle=='表格展现'" :data="flowInstNodeArr" border stripe style="width: 100%">
+                <el-table-column prop="activityName" label="节点名称" width="180">
+                </el-table-column>
+                <el-table-column prop="nodeInstStatus" label="当前状态" width="130">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.isAppendsign!='1'" class="table-node-inst-status-item"
+                              :style="{backgroundColor: flowStatusColor[flowStatusCode[scope.row.nodeInstStatus]]}">{{scope.row.nodeInstStatusName}}</span>
+
+                        <el-popover v-if="scope.row.isAppendsign=='1'"
+                                    placement="top"
+                                    popper-class="append-sign-popup"
+                                    width="400"
+                                    trigger="click">
+                            <div class="flow-roam-record-content">
+                                <el-timeline>
+                                    <el-timeline-item
+                                            v-for="(item, index) in appendSignNodeArr"
+                                            :key="index"
+                                            placement="top"
+                                            icon="el-icon-user-solid"
+                                            :color="flowStatusColor[flowStatusCode[item.nodeInstStatus]]"
+                                            :timestamp="COMMON_FUNC.dateToString(new Date(item.startTime)) + ' 至 ' + (item.endTime?COMMON_FUNC.dateToString(new Date(item.endTime)):'')">
+                                        <el-card>
+                                            <div slot="header" class="clearfix">
+                                                <h4>{{item.nodeName}}
+                                                    <span style="padding-left:20px;color:#666;font-weight: normal;"> {{item.actorUserName}}</span>
+                                                </h4>
+                                            </div>
+                                            <p v-html="item.nodeMask"></p>
+                                        </el-card>
+                                    </el-timeline-item>
+                                </el-timeline>
+                            </div>
+                            <span slot="reference" class="table-node-inst-status-item" style="cursor: pointer"
+                                  :style="{backgroundColor: flowStatusColor[flowStatusCode[scope.row.nodeInstStatus]]}">{{scope.row.nodeInstStatusName}}</span>
+                        </el-popover>
+
+                    </template>
+                </el-table-column>
+                <el-table-column prop="actorUserName" label="处理人" width="120">
+                </el-table-column>
+                <el-table-column label="附加说明">
+                    <template slot-scope="scope">
+                        <p v-html="scope.row.nodeMask"></p>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="startTime" label="处理时间" width="200">
+                    <template slot-scope="scope">
+                        <div>起：{{COMMON_FUNC.dateToString(new Date(scope.row.startTime))}}</div>
+                        <div>止：{{scope.row.endTime?COMMON_FUNC.dateToString(new Date(scope.row.endTime)):''}}</div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "flow-roam-record",
+        props: {
+            flowInstId: {
+                type: String,
+                default: "6"
+            },
+            instId: {
+                type: String,
+                required:true
+            }
+        },
+        watch: {
+            flowInstId() {
+                this.init();
+            }
+        },
+        data() {
+            return {
+                loading: true,
+                flowInstNodeArr: [],
+                flowSummary:"",
+                showStyle: "图形展现",
+                flowStatusCode: {
+                    "0": "pending", // 待处理
+                    "1": "finished", // 已处理
+                    "2": "retrieve", // 已取回
+                    "3": "return", // 已退回
+                    "4": "stopped", // 已中止
+                    "5": "cancel", // 已撤销
+                    "6": "sign", // 已加签
+                    "7": "signed", // 已转签
+                    "9": "recover" // 已恢复
+                },
+                flowStatusColor: {
+                    "pending": "#aaa", // 待处理
+                    "finished": "#75ce66", // 已处理
+                    "retrieve": "#c03b44", // 已取回
+                    "return": "#A349A4", // 已退回
+                    "stopped": "red", // 已中止
+                    "cancel": "#333", // 已撤销
+                    "sign": "#aaa", // 已加签
+                    "signed": "#75ce66", // 已转签
+                    "recover": "#0D5DAF" // 已恢复
+                },
+                flowStatusName: [
+                    {code: "pending", name: "待处理"},
+                    {code: "finished", name: "已处理"},
+                    {code: "retrieve", name: "已取回"},
+                    {code: "return", name: "已退回"},
+                    {code: "stopped", name: "已中止"},
+                    {code: "sign", name: "已加签"},
+                    {code: "signed", name: "已转签"},
+                    {code: "recover", name: "已恢复"},
+                    {code: "cancel", name: "已撤销(被取消)"},
+                ],
+
+                appendSignNodeArr: [],
+                flowNodeAppendSignDatas: []
+            };
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            init() {
+                this.flowInstNodeArr = [];
+                this.loading = true;
+                this.axios.post(this.api.plFlowInst.getHistoryActInst,{"flowInstId":this.instId}).then(res => {
+                    if(!res.data.operateSuccess){
+                        this.$message.error(res.data.operateMessage);
+                        return;
+                    }
+                    // console.log('res', res.data.resultObject);
+                    this.flowSummary = res.data.resultObject.flowSummary;
+                    this.flowInstNodeArr = res.data.resultObject.resultList;
+                    let variables = res.data.resultObject.variables;
+                    let userIdsMap = res.data.resultObject.userIdsMap;
+                    let externalTak = res.data.resultObject.externalTak;
+                    // 初始化多人处理数据
+                    let multiInstanceBodyObj = {};
+                    let multiInstanceArr = [];
+                    let turnSignObj = {};
+                    let addSignObj = {};
+                    let addSignIds = [];
+                    let getbackObj = {};
+                    (externalTak || []).forEach(item => {
+                        if(item.parentTaskId){
+                            item.activityName = item.name;
+                            let assignee = item.assignee;
+                            item.actorUserName = userIdsMap[assignee];
+                            if(!item.actorUserName){
+                                if(assignee.indexOf("_turnSign") > -1){
+                                    assignee = assignee.substring(0,assignee.lastIndexOf("_turnSign"));
+                                }
+                                item.actorUserName = userIdsMap[assignee];
+                            }
+
+                            if(!turnSignObj[item.parentTaskId]){
+                                turnSignObj[item.parentTaskId] = [item];
+                            }else{
+                                turnSignObj[item.parentTaskId].push(item);
+                            }
+                            item.nodeInstStatus = "1";
+                            item.nodeInstStatusName = "已转签";
+                            item.actorUserName += "(" + item.nodeInstStatusName + ")";
+                            let turnSignOwner = variables["turnSignGetBack_" + item.id];
+                            if(turnSignOwner){
+                                item.nodeInstStatus = "2";
+                                item.actorUserName = userIdsMap[turnSignOwner] + "(由用户" + userIdsMap[assignee] + "取回)";
+                                getbackObj[item.parentTaskId] = true;
+                            }
+                        }
+                    })
+                    this.flowInstNodeArr.forEach(item => {
+                        // 获取任务状态,back:退回上一步，get:取回，skipNode:管理员退回，skip:用户退回
+                        item.taskStatus = variables[item.taskId] || "";
+                        switch (item.activityType) {
+                            case "startEvent":
+                                item.actorUserName =  "";
+                                break;
+                            case "noneEndEvent":
+                                item.actorUserName =  "";
+                                break;
+                            case "parallelGateway":
+                            case "exclusiveGateway":
+                            case "InclusiveGateway":
+                                item.actorUserName =  "系统处理";
+                                break;
+                            case "multiInstanceBody":
+                                item.actorUserName =  "";
+                                let activityId = item["activityId"];
+                                activityId = activityId.substring(0,activityId.lastIndexOf("#"));
+                                if(multiInstanceArr.indexOf(activityId) == -1){
+                                    multiInstanceArr.push(activityId);
+                                }
+                                multiInstanceBodyObj[item.id] = item;
+                                break;
+                            case "boundaryTimer":
+                                item.actorUserName =  "超时处理";
+                                item.activityName="时钟";
+                                break;
+                            default:
+                                let assignee = item.taskAssignee || "";
+                                if(assignee.indexOf("completeSign") > -1){
+                                    assignee = assignee.substring(0,assignee.lastIndexOf("completeSign"));
+                                }
+                                if(assignee.indexOf("revoke") > -1){
+                                    assignee = assignee.substring(0,assignee.lastIndexOf("revoke"));
+                                    item.taskStatus = "cancel";
+                                }
+                                if(assignee.indexOf("stop") > -1){
+                                    assignee = assignee.substring(0,assignee.lastIndexOf("stop"));
+                                    item.taskStatus = "stop";
+                                }
+                                let signDataArr = assignee.split("_");
+                                if(signDataArr.length == 3 && assignee.indexOf("_") == 0){ // 加签数据
+                                    let mainTaskId = signDataArr[2];
+                                    assignee = signDataArr[1];
+                                    if(!addSignObj[mainTaskId]){
+                                        addSignObj[mainTaskId] = [item];
+                                    }else{
+                                        addSignObj[mainTaskId].push(item);
+                                    }
+                                    item.wasAppendSign = true;
+                                    addSignIds.push(item.id);
+                                }
+                                item.actorUserName =  userIdsMap[assignee];
+                                break;
+                        }
+                        if(item.activityId.indexOf("Activity_draft") > -1){
+                            item.actorUserName = res.data.resultObject["startUserName"];
+                        }
+                        if(item.endTime){
+                            item.nodeInstStatus = "1";
+                            item.nodeInstStatusName = "已完成";
+                            if(item.activityType == "noneEndEvent"){
+                                item.actorUserName = "";
+                            }
+                            if(item.activityType == "parallelGateway" || item.activityType == "exclusiveGateway"
+                                || item.activityType == "inclusiveGateway"){
+                                item.actorUserName = "系统处理";
+                            }
+                            if(item.canceled){
+                                item.nodeInstStatusName = "多人处理他人通过后自动完成";
+                            }
+                        }else{
+                            item.nodeInstStatus = "0";
+                            item.nodeInstStatusName = "待处理";
+                        }
+                        // back:退回上一步，get:取回，skipNode:管理员退回，skip:用户退回
+                        switch (item.taskStatus) {
+                            case "back":
+                                item.nodeInstStatus = "3";
+                                item.nodeInstStatusName = "已退回";
+                                break;
+                            case "get":
+                                item.nodeInstStatus = "2";
+                                item.nodeInstStatusName = "已取回";
+                                break;
+                            case "skipNode":
+                                item.actorUserName = "";
+                                item.nodeInstStatus = "3";
+                                item.nodeInstStatusName = "管理员(已退回到指定节点)";
+                                break;
+                            case "skip":
+                                item.nodeInstStatus = "3";
+                                item.nodeInstStatusName = "已退回到指定节点";
+                                break;
+                            case "cancel":
+                                item.nodeInstStatus = "5";
+                                item.nodeInstStatusName = "已被发起人撤销";
+                                break;
+                            case "stop":
+                                item.nodeInstStatus = "4";
+                                item.nodeInstStatusName = "已中止";
+                                break;
+                            default:
+                                break;
+                        }
+                        // calledCaseInstanceId是1.0版本数据的nodeInstStatus
+                        switch (item.calledCaseInstanceId) {
+                            case "3":
+                                item.nodeInstStatus = "3";
+                                item.nodeInstStatusName = "已退回";
+                                break;
+                            case "2":
+                                item.nodeInstStatus = "2";
+                                item.nodeInstStatusName = "已取回";
+                                break;
+                            case "5":
+                                item.nodeInstStatus = "5";
+                                item.nodeInstStatusName = "已被发起人撤销";
+                                break;
+                            case "4":
+                                item.nodeInstStatus = "4";
+                                item.nodeInstStatusName = "已中止";
+                                break;
+                            case "7":
+                                item.nodeInstStatus = "7";
+                                item.nodeInstStatusName = "已转签";
+                                break;
+                            default:
+                                break;
+                        }
+                        if(item.activityType == "startEvent"){
+                            item.actorUserName = "";
+                        }else if(variables["resolve_" + item.taskId]){ // 代理
+                            item.actorUserName += "(由用户‘"+ userIdsMap[variables["resolve_" + item.taskId]] + "’代理完成)";
+                        }else if(variables["getBack_" + item.taskId]){ // 取回
+                            item.nodeInstStatus = "2";
+                            item.actorUserName += "(由用户‘"+ userIdsMap[variables["getBack_" + item.taskId]] + "’取回)";
+                        }else if(variables["back_" + item.taskId]){ // 退回
+                            item.nodeInstStatus = "3";
+                            item.actorUserName += "(由用户‘"+ userIdsMap[variables["back_" + item.taskId]] + "’退回)";
+                        }else if(Object.keys(variables).indexOf("autoEnd_" + item.taskId) > -1){ // 自动处理
+                            item.actorUserName += "(系统自动处理)";
+                        }else if(variables["assignTask_" + item.taskId]){ // 退回
+                            item.actorUserName += "(已加签)";
+                        }else if(variables["addSignGetBack_" + item.taskId]){ // 加签取回
+                            item.nodeInstStatus = "2";
+                            item.actorUserName += "(由用户‘"+ userIdsMap[variables["addSignGetBack_" + item.taskId]] + "’取回)";
+                        }else{
+                            item.actorUserName += "(" + item.nodeInstStatusName + ")";
+                        }
+                        if(turnSignObj[item.taskId]){
+                            if(!getbackObj[item.taskId]){
+                                item.actorUserName += "(转签任务)";
+                            }
+                            item.turnSign = turnSignObj[item.taskId];
+                        }
+                    });
+
+                    this.flowInstNodeArr.forEach(item => {
+                        if(addSignObj[item.taskId]){
+                            item.isAppendsign = 1;
+                            item.addSignArr = addSignObj[item.taskId];
+                        }
+                        if(multiInstanceArr.indexOf(item.activityId) > -1 && !item.wasAppendSign){
+                            // 判断多实例对象
+                            Object.keys(multiInstanceBodyObj).forEach(instanceKey => {
+                                let instance = multiInstanceBodyObj[instanceKey];
+                                let activityId = instance["activityId"];
+                                activityId = activityId.substring(0,activityId.lastIndexOf("#"));
+                                if(activityId == item.activityId
+                                                          && instance.startTime <= item.startTime
+                                                          && instance.endTime >= item.endTime
+                                                          && ((instance.endTime && item.endTime) || !instance.endTime)){
+                                    if(!instance.manyChild){
+                                        instance.manyChild = [item];
+                                    }else{
+                                        instance.manyChild.push(item);
+                                    }
+                                }
+                            })
+                        }
+                    })
+
+                    let removeIds = [];
+                    Object.keys(multiInstanceBodyObj).forEach(key => {
+                        let multiInstance = multiInstanceBodyObj[key];
+                        if((multiInstance.manyChild || []).length > 1){
+                            multiInstance.manyChild.forEach(item => {
+                                removeIds.push(item.id);
+                            })
+                        }else{
+                            removeIds.push(key);
+                        }
+                    })
+
+                    let inclusiveWayArr = [];
+                    this.flowInstNodeArr = this.flowInstNodeArr.filter(item => {
+                        let result = true;
+                        if(item.activityType == "multiInstanceBody" && removeIds.indexOf(item.id) == -1){
+                                let arrName = [];
+                                item.manyChild.forEach(value => {
+                                    arrName.push(value.actorUserName);
+                                    item.activityName = value.activityName;
+                                })
+                                if(item.endTime){
+                                    item.actorUserName = "多人处理(已完成)";
+                                }else{
+                                    item.actorUserName = "多人处理";
+                                }
+                                item.nodeMask = arrName.join(",");
+                        }if(item.activityType == "inclusiveGateway"){
+                            if(inclusiveWayArr.indexOf(item.activityId) == -1){
+                                inclusiveWayArr.push(item.activityId);
+                            }else{
+                                result = false;
+                            }
+                        }else{
+                           if(removeIds.indexOf(item.id) > -1 || addSignIds.indexOf(item.id) > -1){
+                               result = false;
+                           }
+                        }
+
+                        return result;
+                    })
+                    this.flowInstNodeArr = this.flowInstNodeArr.sort(this.sortInst);
+                    this.loading = false;
+                    // console.log('this.flowInstNodeArr', this.flowInstNodeArr);
+                })
+            },
+
+            sortInst(a,b){
+                if(a.endTime && b.endTime){
+                    if(a.activityType == "startEvent"){
+                        return -1;
+                    }
+                    if(b.activityType == "startEvent"){
+                        return 1;
+                    }
+                    if(a.activityId == b.activityId){
+                        return a.endTime - b.endTime;
+                    }
+                    if(a.endTime == b.endTime){
+                        if((a.activityId || "").indexOf("Activity_draft") > -1  && (a.tenantId == '1')){
+                            return -1;
+                        }
+                        if((b.activityId || "").indexOf("Activity_draft") > -1  && (a.tenantId == '1')){
+                            return 1;
+                        }
+                    }
+                    return a.endTime - b.endTime;
+                }
+
+                if(a.startTime == b.startTime){
+                    if(!a.endTime){
+                        return 1;
+                    }
+                    if(!b.endTime){
+                        return -1;
+                    }
+                    if(a.activityType == "startEvent"){
+                        return -1;
+                    }
+                    if(b.activityType == "startEvent"){
+                        return 1;
+                    }
+                    return a.endTime - b.endTime;
+                }
+
+            },
+
+            /**
+             * 查看加签信息
+             */
+            showCompleteSignInfos(flowInstNodeIds) {
+                this.flowNodeAppendSignDatas = this.viewAppendSign(flowInstNodeIds);
+            },
+
+            /**
+             * 获取流程节点示例对应的图标
+             */
+            nodeInstIcon(nodeInst) {
+                if (nodeInst.activityType == "startEvent") {
+                    return "el-icon-caret-right";
+                } else if (nodeInst.activityType == "userTask") {
+                    return "el-icon-user-solid";
+                }else if(nodeInst.activityType == "multiInstanceBody"){
+                    return "saspiconfont pl-icon-yonghu";
+                }else if (nodeInst.activityType == 'parallelGateway'
+                         || nodeInst.activityType == 'exclusiveGateway'
+                         || nodeInst.activityType == 'inclusiveGateway') {
+                    return "el-icon-setting";
+                } else {
+                    return "el-icon-circle-check";
+                }
+            },
+
+            viewAppendSign(signNodeId) {
+                let appendSignNodeIds = "$," + signNodeId;  // 上一节点ID串
+                let isExitNextId = true; // 是否存在下一节点
+                let index = 0; // 循环变量，预防死循环
+                let iAppendSignSize = this.appendSignNodeArr.length;  // 加签数组长度
+                let arrShowNodes = []; // 存储要展示的加签节点
+
+                // 根据获取要展示的加签节点
+                while ((index++) < iAppendSignSize && isExitNextId) {
+                    // 置为不存在下一节点
+                    isExitNextId = false;
+
+                    // 循环加签数组
+                    for (let i = 0; i < iAppendSignSize; i++) {
+                        // 若匹配且非已获取过的加签节点
+                        if (appendSignNodeIds.indexOf(this.appendSignNodeArr[i].preNodeInstId) > -1
+                            && appendSignNodeIds.indexOf(this.appendSignNodeArr[i].id) == -1
+                        ) {
+                            // 置为存在下一节点
+                            isExitNextId = true;
+                            // 拼接进上一节点ID串中，待下一次外层循环中重新进行匹配
+                            appendSignNodeIds += "," + this.appendSignNodeArr[i].id;
+                            // 添加至要展示的加签节点数组
+                            arrShowNodes.push(this.appendSignNodeArr[i]);
+                        }
+                    }
+                }
+
+                let nodeTmp = null;  //用于冒泡排序的临时变量
+
+                // 对要展示的加签节点数组按处理时间进行冒泡排序
+                for (let i = 0; i < arrShowNodes.length; i++) {
+                    for (let j = i + 1; j < arrShowNodes.length; j++) {
+                        if (arrShowNodes[j].startTime && arrShowNodes[j].endTime
+                            && (arrShowNodes[j].startTime <= arrShowNodes[i].startTime)
+                            && (arrShowNodes[j].endTime <= arrShowNodes[i].endTime)) {
+                            nodeTmp = arrShowNodes[i];
+                            arrShowNodes[i] = arrShowNodes[j];
+                            arrShowNodes[j] = nodeTmp;
+                        }
+                    }
+                }
+
+                return arrShowNodes;
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .append-sign-popup {
+        box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.5);
+    }
+</style>
+
+<style scoped lang="scss">
+    #roamRecordContainer {
+        padding: 10px 20px;
+        overflow-y: scroll;
+    }
+    /*滚动条样式*/
+    .pos-abs-full::-webkit-scrollbar-thumb {
+        border-radius: 3px !important;
+        background-color: #dddddd !important;
+    }
+
+    .flow-summary {
+        line-height: 26px;
+    }
+
+    .flow-color {
+        .flow-color-content {
+            line-height: 26px;
+
+            .flow-color-item {
+                padding-right: 10px;
+
+                .flow-color-item-radius {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 8px;
+                    display: inline-block;
+                    vertical-align: middle;
+                    margin-right: 3px;
+                }
+
+                .flow-color-item-text {
+                    height: 26px;
+
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+
+    .flow-roam-record-content {
+        padding: 20px 20px 0 20px;
+
+        /deep/ {
+
+
+            .appendsign-item {
+                .appendsign-item-mask {
+                    position: absolute;
+                    left: -20px;
+                    width: 52px;
+                    height: 55px;
+                    top: 0;
+                    cursor: pointer;
+
+                    .appendsign-item-icon {
+                        position: absolute;
+                        right: -10px;
+                        top: -15px;
+                        font-size: 20px;
+                        color: #666;
+                    }
+                }
+
+            }
+
+            .table-node-inst-status-item {
+                display: inline-block;
+                line-height: 26px;
+                border-radius: 3px;
+                padding: 0 10px;
+                color: white;
+            }
+
+            .el-timeline-item__wrapper {
+                padding-left: 45px;
+            }
+
+            .el-timeline-item__node--normal {
+                width: 50px;
+                height: 50px;
+                left: -20px;
+
+                .el-timeline-item__icon {
+                    font-size: 35px;
+                }
+            }
+
+            .el-card__header {
+                padding: 12px 20px;
+            }
+        }
+    }
+</style>