client-trace-v5/src/trace/TraceLog.vue

<!--
	作者：yangzhijie1488@163.com
	时间：2017-12-12
	描述：追踪日志
-->
<template>
	<div>
		<div class="panel panel-default">
            <div class="panel-heading dashboard-header"
                 @click.self="collapse()">
                &nbsp;&nbsp;动态信息
                <div class="pull-left">
                    <span class="glyphicon"
                          :class="{'glyphicon-triangle-bottom' : !isCollapse, 'glyphicon glyphicon-triangle-top' : isCollapse}"></span>
                </div>
            </div>
            <div v-if="isCollapse == true" class="container-fluid"
                 id="trace-content">
                 <div v-for="item in traceLogs" :key="item.id">
					<h5>{{item.dateTime}} &nbsp;{{item.operatorUserName}}
						<div v-html="item.content"></div>
					</h5>
				</div>
            </div>
        </div>
	</div>
</template>

<script>
	var Common = require("../common/Common.js");
	export default {
		props: ["traceId"],

		data: function() {
			return {
				traceLogs: [],
				isCollapse:false
			}
		},
		components: {
			Common
		},
		methods: {
			
			/**
	         * 控制展开闭合
	         * @return {void} 
	         */
	        collapse: function () {
	            var _self = this;
	            _self.isCollapse = !_self.isCollapse;
				_self.getTraceLog();	            
	        },
			/**
			 * 根据追踪单Id获取追踪日志信息
			 * @author GuoZhiBo 20171201
			 */
			getTraceLog: function() {
				var _self = this;
				$.ajax({
					url: Common.getApiURL('TraceLogResource/listByTraceId'),
					type: 'get',
					dataType: 'json',
					async: false,
					data: {
						traceId: _self.traceId
					},
					beforeSend: function(request) {
						Common.addTokenToRequest(request);
					},
					success: function(data) {
						_self.traceLogs = data;
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						Common.processException(XMLHttpRequest, textStatus, errorThrown);
					}
				});
			},
		},
		
		mounted: function(){
			if(this.traceId != undefined && this.isCollapse == true){
				this.getTraceLog();
			}
		},
		
		watch: {
			"traceId": function(curVal,oldVal){
				if(curVal != undefined && this.isCollapse == true){
					this.getTraceLog();
				}
			}
		}
	}
</script>

<style>

</style>