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

<!--
	作者：yangzhijie1488@163.com
	时间：2017-12-12
	描述：追踪单时间节点
-->
<template>
  <div>
    <div>
      <div class="page-header">
        <h4>时间节点({{ number }}/{{ count }})({{ trace.projectTaskName }})</h4>
      </div>
    </div>

    <div
      v-if="timeLines != undefined && timeLines[0].id != undefined"
      class="panel panel-default"
    >
      <div class="panel-body">
        <div
          v-for="item in timeLines"
          :key="item.id"
          class="after-selection--columns"
          style="margin-top: 5px; cursor: pointer"
        >
          <span>
            <Checkbox
              :id="'trace-finish-' + item.id"
              v-model="item.finished"
              class-name="terms"
              class="trace-checkbox"
              @input="openCloseTraceTimeLine(item)"
            />
          </span>

          <span class="big-icon trace-summary" @click="editTraceTimeLine(item)">
            {{ item.content == undefined ? "请填写" : item.content }}
          </span>

          <span class="trace-summary" @click="editTraceTimeLine(item)">
            <span
              class="label"
              :class="{
                'label-danger': item.overdue == true,
                'label-primary': item.overdue != true,
              }"
            >
              {{ item.userName == undefined ? "" : item.userName }}
              &nbsp;
              {{ formatDate(item.endDate) }}
            </span>
          </span>
        </div>
      </div>
    </div>

    <button
      v-if="trace.finished != true"
      type="button"
      style="width: 100%"
      class="btn btn-default"
      aria-label="Left Align"
      @click="createTraceTimeLine"
    >
      <span class="glyphicon glyphicon-plus" aria-hidden="true" />添加时间节点
    </button>
    <Loading ref="loading" />
  </div>
</template>

<script>
var Uuid = require('pc-component-v3').Uuid;
var Common = require('../common/Common.js');
import TraceCommon from './TraceCommon.js';

var Loading = require('pc-component-v3').Loading;
import MyProgress from '../widget/MyProgress.vue';
var Checkbox = require('pc-component-v3').Checkbox;

export default {
  components: {
    MyProgress,
    Checkbox,
    Loading,
  },
  props: ['traceId', 'trace'],

  data: function () {
    return {
      uuid: Uuid.createUUID(),
      timeLines: [
        {
          id: undefined,
          traceId: undefined,
          userId: undefined,
          userName: undefined,
          content: undefined,
          endDate: undefined,
        },
      ],
      count: 0,
      number: 0,
      progress: 0,
      timeLine: {
        traceId: undefined,
        userId: undefined,
        userName: undefined,
        content: undefined,
        endDate: undefined,
      },
      formatDate: TraceCommon.formatDate,
    };
  },

  watch: {
    traceId: function (curVal, oldVal) {
      if (curVal != undefined) {
        this.refresh();
      }
    },
  },

  mounted: function () {
    if (this.traceId != undefined) {
      this.refresh();
      this.timeLine.traceId = this.traceId;
    }
  },
  methods: {
    /**
     * 根据追踪单Id查询追踪时间节点数据
     * @author GuoZhiBo 20171201
     */
    getTimeLine: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceTimeLineResource/listByTraceId'),
        type: 'get',
        dataType: 'json',
        async: false,
        data: {
          traceId: _self.traceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.timeLines = data;
          _self.addEmtpyTraceTimeLine();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 根据追踪单ID查询时间节点总数量
     * @author GuoZhiBo 20171201
     */
    getTimeLineCount: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceTimeLineResource/queryTraceTimeLineCount'),
        type: 'get',
        dataType: 'json',
        async: false,
        data: {
          traceId: _self.traceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.count = data;
          _self.progresss();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 根据追踪单Id查询时间节点的完成数量
     * @author GuoZhiBo 20171201
     */
    getTimeLineNumber: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceTimeLineResource/queryTraceTimeLineNumber'),
        type: 'get',
        dataType: 'json',
        async: false,
        data: {
          traceId: _self.traceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.number = data;
          _self.progresss();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 计算progress
     * @author GuoZhiBo 20171201
     */
    progresss: function () {
      var _self = this;
      if (_self.number == 0 || _self.count == 0) {
        _self.progress = 0;
      } else {
        _self.progress = (_self.number / _self.count).toFixed(2) * 100;
      }
    },

    /**
     * 添加空的时间节点
     */
    addEmtpyTraceTimeLine: function () {
      var _self = this;
      if (_self.timeLines == undefined) {
        _self.timeLines = [];
      }
      for (var i = _self.timeLines.length; i < 1; i++) {
        var emtpyTraceTimeLine = {
          id: undefined,
          traceId: _self.traceId,
          userId: undefined,
          userName: undefined,
          content: undefined,
          endDate: undefined,
        };
        _self.timeLines.push(emtpyTraceTimeLine);
      }
    },

    /**
     * 编辑时间节点
     * @param {Object} traceTimeLine
     */
    editTraceTimeLine: function (traceTimeLine) {
      var _self = this;
      this.$router.push({
        path: '/trace/traceTimeLineEdit/' + traceTimeLine.id,
        query: {
          projectId: _self.trace.projectId,
        },
      });
    },

    /**
     * 创建时间节点
     */
    createTraceTimeLine: function () {
      var _self = this;
      this.$router.push({
        path: '/trace/traceTimeLineCreate/' + this.trace.id,
        query: {
          projectId: _self.trace.projectId,
        },
      });
    },

    /**
     * 打开或关闭时间节点
     * @param {Object} traceTimeLine
     */
    openCloseTraceTimeLine: function (traceTimeLine) {
      var _self = this;
      if (_self.trace.finished != true) {
        _self.$refs.loading.show();
        $.ajax({
          url: Common.getApiURL(
            'TraceTimeLineResource/updateTraceTimeLineFinished',
          ),
          type: 'post',
          contentType: 'application/json',
          data: JSON.stringify(traceTimeLine),
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          success: function (data) {
            _self.$refs.loading.hide();
            _self.refresh();
            _self.$emit('refreshTraceLog');
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            _self.$refs.loading.hide();
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        Notify.error('提示', '已完成的订单不能修改！');
      }
    },

    /**
     * 刷新界面
     */
    refresh: function () {
      this.getTimeLine();
      this.getTimeLineCount();
      this.getTimeLineNumber();
    },
  },
};
</script>

<style scoped>
.mui-checkbox-self {
  left: 0px !important;
  top: 0px !important;
}
.font-color {
  color: red;
}

.big-icon {
  font-size: large;
}

.trace-summary {
  font-size: large;
  margin-left: 5px;
  margin-right: 5px;
}

.trace-checkbox {
  display: inline;
  font-size: large;
}
</style>