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

<template>
  <div>
    <Navbar
      :title="&quot;团队-&quot; + userName + &quot; 已完成的任务&quot; + &quot;(&quot; + pagination.total + &quot;)&quot;"
      :is-go-back="true"
    />

    <p
      v-if="traces == null || traces.length == 0"
      class="bg-danger"
      style="padding: 15px;"
    >
      未完成任何任务
    </p>

    <div
      v-else
      class="panel panel-default"
      style="margin-bottom: 10px;"
    >
      <div class="panel-body">
        <input v-model="content" autocomplete="off" type="text" class="form-control" placeholder="任务名称、任务内容" @blur="initData" @keyup.enter="initData" />
        <div
          v-for="trace in traces"
          :key="trace.id"
          style="margin-top: 5px; cursor: pointer;"
        >
          <span>
            <span>
              <Checkbox
                :id="'trace-finish-' + trace.id"
                v-model="trace.finished"
                class-name="terms"
                class="trace-checkbox"
                @input="updateTracefinished(trace)"
              />
            </span>
            <span @click="openLine(trace)">
              <span
                v-dompurify-html="trace.summary"
                class="trace-summary"
                :class="{'font-color': trace.timeLineCompletion==true}"
              />
              <span
                class="glyphicon glyphicon-option-vertical trace-icon"
                aria-hidden="true"
              />
              <span class="label label-primary trace-user">
                <span v-dompurify-html="trace.receiveUserName" />
                <span>{{ formatDate(trace.planFinishedDate) }}</span>
              </span>
              <span class="badge">
                <span>{{ trace.projectName }}</span>
              </span>
              <span class="badge">
                <span>完成时间:{{ formatDate(trace.finishedDate) }}</span>
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
    <Pagination
      v-if="traces.length"
      :pagination="pagination"
                    
      :callback="initData"
    />
  </div>
</template>

<script>
var Common = require('../common/Common.js');
var Uuid = require('pc-component-v3').default.Uuid;
import TraceCommon from './TraceCommon.js';
var Checkbox = require('pc-component-v3').default.Checkbox;
import TraceResource from './TraceResource.js';
var Navbar = require('pc-component-v3').default.Navbar;
var Pagination = require('pc-component-v3').default.VueBootstrapPagination;;

export default {
  components: {
    Common, Uuid, Navbar, Checkbox, TraceResource, TraceCommon, Pagination,
  },
  data: function () {
    return {
      traceNumber: {},
      uuid: Uuid.createUUID(),
      userId: '',
      userName: '',
      traces: [],
      formatDate: TraceCommon.formatDate,
      pagination: {
        total: 0,
        per_page: 50,    // 每页10条信息
        current_page: 1, // 当前页码
        last_page: 10,    // 最后页码
      },
      content: undefined,
    };
  },
  mounted: function () {
    this.initData();
  },
  methods: {

    /**
         * 初始化人员
         */
    initData: function () {
      var _self = this;
      _self.traces.splice(0, _self.traces.length);
      _self.userId = _self.$route.params.userId;
      _self.userName = _self.$route.query.userName;
      $.ajax({
        url: Common.getApiURL('TraceResource/useFinishedTrace'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          'receiveUserId': _self.userId,
          'currentPage': _self.pagination.current_page,
          'pageSize': _self.pagination.per_page,
          'content': _self.content, 
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
          _self.traces = data.traceDtos;
        },
      });
    },

    /**
         * 打开明细
         * @author ZhangTeng 2019131
         */
    openLine: function (obj) {
      this.$router.push({ 
        path: '/trace/trace/' + obj.id, 
      });
    },
    /**
    * 修改追踪单的状态
    * @author YangZhiJie 20171201
    */
    updateTracefinished: function (trace) {
      var _self = this;
      TraceResource.updateTraceFinished(trace.id).then(successData => {
        _self.initData();
      }, errorData => {
        Common.processException(errorData);
      });
    },

  },
};
</script>

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

.trace-icon {
    opacity: 0.5;
}

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