sasp-flow-render 1.0.1

package/src/components/roamRecord.vue

@@ -0,0 +1,567 @@
+<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>
+            {{flowInstNodeArr.length>0?flowInstNodeArr[0].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'}"
+                        :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 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>
+
+                        <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-card>
+                        <div slot="header" class="clearfix">
+                            <h4>{{item.nodeName}}
+                                <span style="padding-left:20px;color:#666;font-weight: normal;"
+                                      v-if="item.nodeType=='0' || item.preNodeInstId == '-1' || (item.nodeType=='1' && item.nodeTypeExtend == '0')"> {{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="nodeName" 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: "roamRecord",
+        props: {
+            flowInstId: {
+                type: String,
+                default: ""
+            }
+        },
+        watch: {
+            flowInstId() {
+                this.init();
+            }
+        },
+        data() {
+            return {
+                loading: true,
+                flowInstNodeArr: [],
+                showStyle: "图形展现",
+                flowStatusCode: {
+                    "0": "pending", // 待处理
+                    "1": "finished", // 已处理
+                    "2": "retrieve", // 已取回
+                    "3": "return", // 已退回
+                    "4": "stopped", // 已中止
+                    "5": "cancel", // 已撤销
+                    "6": "sign", // 已加签
+                    "7": "signed", // 已转签
+                    "8": "knot", // 已强制办结
+                    "9": "recover" // 已恢复
+                },
+                flowStatusColor: {
+                    "pending": "#aaa", // 待处理
+                    "finished": "#75ce66", // 已处理
+                    "retrieve": "#c03b44", // 已取回
+                    "return": "#A349A4", // 已退回
+                    "stopped": "red", // 已中止
+                    "cancel": "#333", // 已撤销
+                    "sign": "#aaa", // 已加签
+                    "signed": "#75ce66", // 已转签
+                    "knot": "orange", // 已强制办结
+                    "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: "knot", name: "已强制办结"},
+                    {code: "recover", name: "已恢复"},
+                    {code: "cancel", name: "已撤销(被取消)"},
+                ],
+
+                appendSignNodeArr: [],
+                flowNodeAppendSignDatas: []
+            };
+        },
+        created() {
+            this.init();
+        },
+        methods: {
+            init() {
+                this.flowInstNodeArr = [];
+                if (!this.flowInstId) {
+                    return;
+                }
+                this.loading = true;
+                this.axios.post(this.api.plFlowInstNodeResult.listNoPageByResult, {
+                    "flowInstId": this.flowInstId
+                }).then(res => {
+                    this.flowInstNodeArr = this.sortFlowInstNode(res.data);
+                    this.loading = false;
+                });
+            },
+
+            /**
+             * 查看加签信息
+             */
+            showCompleteSignInfos(flowInstNodeIds) {
+                this.flowNodeAppendSignDatas = this.viewAppendSign(flowInstNodeIds);
+            },
+
+            /**
+             * 获取流程节点示例对应的图标
+             */
+            nodeInstIcon(nodeInst) {
+                if (nodeInst.preNodeInstId == "-1") {
+                    return "el-icon-caret-right";
+                } else if (nodeInst.nodeTypeExtend == "99") {
+                    return "el-icon-circle-check";
+                } else if (nodeInst.nodeType == "1" && nodeInst.nodeTypeExtend != "0") {
+                    return "el-icon-setting";
+                } else {
+                    return "el-icon-user-solid";
+                }
+            },
+
+            /**
+             * 循环排序生成节点信息（之前的方法，暂时不动）
+             */
+            sortFlowInstNode(flowInstNodeArr) {
+
+                let flowInstNodePreIdObj = {}; // 用于合并节点
+                let resultArr = [];  // 用于返回的已排序的节点数组
+                let prevNodeInstId = null;  // 存储上一个节点
+                let appendSignNodeArr = [];  // 存储加签节点的数组
+                let sAppendSignPreIds = "";  // 拼接加签节点ID的字符串
+                // 循环所有节点实例
+                for (let i = flowInstNodeArr.length - 1; i >= 0; i--) {
+                    flowInstNodeArr[i].actorUserName = flowInstNodeArr[i].soloPassUserName || flowInstNodeArr[i].actorUserName;
+                    if (flowInstNodeArr[i].nodeType == "1" && flowInstNodeArr[i].nodeTypeExtend != "0" && flowInstNodeArr[i].preNodeInstId != "-1") {
+                        flowInstNodeArr[i].actorUserName = "";
+                    } else if (flowInstNodeArr[i].nodeInstStatus == '0' && flowInstNodeArr[i].operatorAs) {
+                        flowInstNodeArr[i].actorUserName = flowInstNodeArr[i].operatorAs;
+                    }
+                    // 为加签节点时，进行分离
+                    if (flowInstNodeArr[i].isAppendsign == 1) {
+                        // 拼接加签节点ID
+                        sAppendSignPreIds += "," + flowInstNodeArr[i].preNodeInstId;
+                        // 将节点存储至加签节点的数组
+                        appendSignNodeArr.push(flowInstNodeArr[i]);
+
+                        // 从要排序的节点数组中移除该节点
+                        flowInstNodeArr.splice(i, 1);
+                    }
+                }
+
+                this.appendSignNodeArr = appendSignNodeArr;
+
+                let flowInstNodeTemp; // 存储循环到的节点实例
+                let preNode; // 存储循环到的节点实例的逻辑节点
+
+                // 循环要排序的节点数组
+                for (let i = 0; i < flowInstNodeArr.length; i++) {
+                    // 当前循环到的节点
+                    flowInstNodeTemp = flowInstNodeArr[i];
+
+                    /* 对节点进行合并 start */
+                    /* 因为 flowInstNodeArr 中存储的是以 "节点处理结束时间" 倒序排列的节点实例，所以节点都是连续的（符合流程流转顺序，只不过是倒序），
+                     * 由此可对上一节点ID(preNodeInstId)是一致的节点进行合并。（因为同一节点可能有多个人处理，从而会产生多个节点实例，在流转记录展示时，
+                     * 这些节点实例属于一个逻辑节点，不适合分开展示，所以进行合并。而这些实例的上一节点ID(preNodeInstId)必定是一致的，因此可以根据  preNodeInstId 来进行合并。）*/
+
+                    // 判断有无存储过当前节点类型
+                    if (flowInstNodePreIdObj[flowInstNodeTemp.preNodeInstId]) {  // 存储过时
+
+                        // 获取逻辑节点
+                        preNode = flowInstNodePreIdObj[flowInstNodeTemp.preNodeInstId];
+
+                        // 拼接循环到的节点实例ID
+                        preNode.ids += "," + flowInstNodeTemp.id;
+
+                        // 拼接处理节点描述
+                        if (flowInstNodeTemp.actorUserName && flowInstNodeTemp.nodeMask) {
+                            preNode.nodeMask += (preNode.nodeMask && "<br/>") + flowInstNodeTemp.actorUserName + ":" + flowInstNodeTemp.nodeMask;
+                        } else if (flowInstNodeTemp.nodeMask) {
+                            preNode.nodeMask += (preNode.nodeMask && "<br/>") + flowInstNodeTemp.nodeMask;
+                        }
+
+                        // 拼接处理人
+                        if (flowInstNodeTemp.actorUserName && flowInstNodeTemp.nodeInstStatusName) {
+                            preNode.actorUserName += (preNode.actorUserName && "、") + (flowInstNodeTemp.actorUserName + "(" + flowInstNodeTemp.nodeInstStatusName + ")");
+                        } else if (flowInstNodeTemp.actorUserName) {
+                            preNode.actorUserName += (preNode.actorUserName && "、") + flowInstNodeTemp.actorUserName;
+                        }
+
+                        // 判断多人处理时的处理情况
+                        if ((flowInstNodeTemp.nodeInstStatus == "0" && preNode.nodeInstStatus == "1") || (flowInstNodeTemp.nodeInstStatus == "1" && preNode.nodeInstStatus == "0")) {  // 若有节点未处理，则节点显示待处理
+                            // 进行一下操作后，流转记录该节点显示为待处理
+                            preNode.nodeInstStatusName = "待处理";
+                            preNode.nodeInstStatus = "0";
+                        } else if ((flowInstNodeTemp.nodeInstStatus == "1" && preNode.nodeInstStatus == "5")) {
+                            preNode.nodeInstStatusName = "已完成";
+                            preNode.nodeInstStatus = "1";
+                            preNode.endTime = flowInstNodeTemp.endTime;
+
+                            if (flowInstNodeTemp.nextNodeId != "") {
+                                preNode.nextNodeId = flowInstNodeTemp.nextNodeId;
+                                preNode.id = flowInstNodeTemp.id;
+                            }
+                        } else if (flowInstNodeTemp.nodeInstStatus == "1"
+                            && preNode.nodeInstStatus == "1"
+                            && flowInstNodeTemp.nextNodeId) {
+
+                            preNode.nextNodeId = flowInstNodeTemp.nextNodeId;
+                            preNode.id = flowInstNodeTemp.id;
+                        }
+                    } else { // 若没有存储过时
+
+                        // 以上一节点ID(preNodeInstId)为键存储当前循环到的节点实例
+                        flowInstNodePreIdObj[flowInstNodeTemp.preNodeInstId] = flowInstNodeTemp;
+
+                        // 拼接循环到的节点实例ID
+                        flowInstNodePreIdObj[flowInstNodeTemp.preNodeInstId].ids = flowInstNodePreIdObj[flowInstNodeTemp.preNodeInstId].ids || "";
+                        flowInstNodePreIdObj[flowInstNodeTemp.preNodeInstId].ids += "," + flowInstNodeTemp.id;
+
+                        // 拼接节点描述
+                        if (flowInstNodeTemp.passType == "0" && flowInstNodeTemp.processType == "1") {
+
+                        } else if (flowInstNodeTemp.actorUserName && flowInstNodeTemp.nodeMask) {
+                            flowInstNodeTemp.nodeMask = flowInstNodeTemp.actorUserName + ":" + flowInstNodeTemp.nodeMask;
+                        } else if (!flowInstNodeTemp.nodeMask) {
+                            flowInstNodeTemp.nodeMask = "";
+                        }
+
+                        // 格式化处理人
+                        if (flowInstNodeTemp.actorUserName && flowInstNodeTemp.nodeInstStatusName) {
+                            flowInstNodeTemp.actorUserName = flowInstNodeTemp.actorUserName + "(" + flowInstNodeTemp.nodeInstStatusName + ")";
+                        } else if (!flowInstNodeTemp.actorUserName) {
+                            flowInstNodeTemp.actorUserName = "";
+                        }
+                    }
+                    /* 对节点进行合并 end */
+
+                    // 为开始节点时，存储该节点信息以做排序
+                    if (flowInstNodeTemp.preNodeInstId == "-1") {
+                        resultArr.push(flowInstNodeTemp);
+                        prevNodeInstId = flowInstNodeTemp.id;
+                    }
+                }
+
+                let index = 0;  // 循环变量
+                let bIsAppendSign; // 用于循环中判断是否加签
+                let preIdsArr;  // 用于循环到的逻辑节点包含的节点实例ID
+
+                // 节点排序，循环条件可预防出现死循环JS卡住
+                while ((index++) < 10000 && prevNodeInstId != null) {
+                    // 若该逻辑节点为空，则退出循环
+                    if (!flowInstNodePreIdObj[prevNodeInstId]) {
+                        break;
+                    }
+
+                    // 重置值
+                    bIsAppendSign = false;
+                    // 获取当前逻辑节点的节点实例ID数组
+                    preIdsArr = flowInstNodePreIdObj[prevNodeInstId].ids.split(",");
+
+                    // 循环节点实例ID
+                    for (let i = 0; i < preIdsArr.length; i++) {
+                        // 若加签节点数组中包含该节点实例ID
+                        if (preIdsArr[i] && sAppendSignPreIds.indexOf(preIdsArr[i]) > -1) {
+                            // 判断为加签并结束当前循环
+                            bIsAppendSign = true;
+                            break;
+                        }
+                    }
+
+                    // 若进行过加签，则给节点加上提示
+                    if (bIsAppendSign) {
+                        flowInstNodePreIdObj[prevNodeInstId].isAppendsign = 1;
+                        flowInstNodePreIdObj[prevNodeInstId].nodeInstStatusName += "(加签)";
+                    }
+
+                    // 将节点添加至要返回的数组并迭代下个逻辑节点
+                    resultArr.push(flowInstNodePreIdObj[prevNodeInstId]);
+                    prevNodeInstId = flowInstNodePreIdObj[prevNodeInstId].id;
+                }
+
+                // 返回已排序的节点数组
+                flowInstNodeArr = resultArr;
+                return resultArr;
+            },
+
+            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;
+    }
+
+
+    #roamRecordContainer::-webkit-scrollbar {
+        width: 4px;
+    }
+
+
+    /* 滚动槽 */
+    #roamRecordContainer::-webkit-scrollbar-track {
+        background: #eee;
+    }
+
+    /* 滚动条滑块 */
+    #roamRecordContainer::-webkit-scrollbar-thumb {
+        background: #999;
+    }
+
+    .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>