nodeStatusDialog.vue

<template>
	<el-dialog v-dialogDrag title="交易节点" :visible.sync="nodeStatusVisible" width="70%" 
  center :destroy-on-close="true" :modal-append-to-body="false" :append-to-body="true"  :before-close="beforeClose">
	<div class="block">
			<el-timeline>
				<el-timeline-item
					v-for="(activity, index) in activities"
					:key="index"
					:color="index===activities.length-1?'#0bbd87' : ''"
					:timestamp="activity.begdattim">
          <table>
            <tr><td :span="12">
                  <span class="txt" >机构编号：</span> {{activity.branch}} 
              </td>
              <td :span="12">
                	<span class="txtsecond">机构名称：</span> {{activity.bchname}} 
              </td>
            </tr>
             <tr><td :span="12">
               	  <span class="txt">柜员工号：</span> {{activity.usr}} 
              </td>
              <td :span="12">
                	<span class="txtsecond" >柜员名称：</span> {{activity.usrname}} 
              </td>
            </tr>
             <tr><td :span="12">
                  <span class="txt" :span="12">交易状态：</span> {{activity.taskStatus}} 
              </td>
              <td :span="12">
                 <span class="txtsecond">交易编码：</span> {{activity.frm}} 
              </td>
            </tr>
             <tr><td :span="12">
                <span class="txt" >开始时间：</span> {{activity.begdattim}} 
              </td>
              <td :span="12">
                <span class="txtsecond">处理时间：</span> {{activity.enddattim}} 
              </td>
            </tr>
          </table>
          <span  v-if="activity.typ === 'SPT'"><span class="txt">收单行复核意见：</span> {{activity.remark}} </span> 
          <span  v-if="activity.typ === 'REL'"><span class="txt">复核意见：</span> {{activity.remark}} </span> 
          <span  v-if="activity.typ === 'COR'"><span class="txt">驳回意见：</span> {{activity.remark}} </span>
          <span  v-if="activity.typ === 'CTR'"><span class="txt">押汇中心驳回意见：</span> {{activity.remark}} </span>
          <span  v-if="activity.typ === 'RTR'"><span class="txt">单证中心驳回意见：</span> {{activity.remark}} </span>
				</el-timeline-item>
        <el-timeline-item 	v-for="(node, index) in nextNode"
					:key="'node'+index"
					:timestamp="moment(new Date()).format('YYYY-MM-DD HH:mm:ss')">
          <table>
             <span class="next" >后续节点信息：</span>  
            <tr><td :span="12">
                  <span class="txtnext" >机构编号：{{node.branch}} </span> 
              </td>
              <td :span="12">
                	<span class="txtsecondnext" >机构名称：{{node.bchname}} </span> 
              </td>
            </tr>
             <tr><td :span="12">
               	  <span class="txtnext" >柜员工号：{{node.usr}} </span> 
              </td>
              <td :span="12">
                	<span class="txtsecondnext" >柜员名称：{{node.usrname}} </span> 
              </td>
            </tr>
             <tr><td :span="12">
                  <span class="txtnext"  >交易状态：{{node.label}}</span>  
              </td>
              <td :span="12">
                 <span class="txtsecondnext"  >交易编码：{{node.frm}} </span>
              </td>
            </tr>
             <tr><td :span="12">
                <span class="txtnext">开始时间：{{moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}}</span>
              <td :span="12">
                <span class="txtsecondnext">处理时间：</span>
              </td>
            </tr>
          </table>
				</el-timeline-item>
        <el-timeline-item 	v-for="(node, index) in nextNode"
					:key="'node'+index"
					:timestamp="moment(new Date()).format('YYYY-MM-DD HH:mm:ss')">
          <table>
             <span class="next" >后续节点信息：</span>  
            <tr><td :span="12">
                  <span class="txtnext" >机构编号：{{node.branch}} </span> 
              </td>
              <td :span="12">
                	<span class="txtsecondnext" >机构名称：{{node.bchname}} </span> 
              </td>
            </tr>
             <tr><td :span="12">
               	  <span class="txtnext" >柜员工号：{{node.usr}} </span> 
              </td>
              <td :span="12">
                	<span class="txtsecondnext" >柜员名称：{{node.usrname}} </span> 
              </td>
            </tr>
             <tr><td :span="12">
                  <span class="txtnext"  >交易状态：{{node.label}}</span>  
              </td>
              <td :span="12">
                 <span class="txtsecondnext"  >交易编码：{{node.frm}} </span>
              </td>
            </tr>
             <tr><td :span="12">
                <span class="txtnext">开始时间：{{moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}}</span>
              <td :span="12">
                <span class="txtsecondnext">处理时间：</span>
              </td>
            </tr>
          </table>
				</el-timeline-item>
			</el-timeline>
		</div>
	</el-dialog>
</template>

<script>
import commonDepend from "~/mixin/commonDepend.js";
import commonFunctions from '~/mixin/commonFunctions.js';
import { cloneDeep } from "lodash";
import Api from '~/service/Api';
export default {
	inject: ["root"],
  mixins: [commonDepend,commonFunctions],
  props: {
		activities:{ 
			 type:Array,
			 default: ()=>[]
    },
    nextNode:{ 
			 type:Array,
			 default: ()=>[]
		},
	},
  data() {
    return {
			currentRow: 0,
			nodeStatusVisible: false,
    };
	},
  methods: {
		getColor(index) {
			return index === this.currentRow ? '#0bbd87' : '';
		},
    beforeClose() {
      this.nodeStatusVisible = false;
    },
  }
};
</script>
<style scoped lang="less">
.block {
	.txt {
		font-weight: bold;
  }
  .txtsecond {
    font-weight: bold;
    padding-left:150px;
  }
  .txtnext {
    font-weight: bold;
    color: blue;
  }
  .txtsecondnext {
    font-weight: bold;
    padding-left:150px;
    color: blue;
  }
  .next {
    font-weight: bold;
    font-size: 24px;
    color: blue;
	}
}
</style>