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

<template>
  <div>
    <Navbar
      :title="projectName"
      :is-go-back="true"
    >
      <button
        type="button"
        class="btn btn-link"
        style="padding: 0px;"
        @click="goPersonList()"
      >
        编辑人员({{ projectUsers.length }})
      </button>
    </Navbar>

    <h4>
      已完成的任务({{ pagination2.total }})
      <div class="pull-right">
        <button
          class="btn btn-link"
          style="padding: 0px;"
          @click="projectManagement(projectId)"
        >
          项目任务
        </button>
        <button
          class="btn btn-link"
          style="padding: 0px;"
          @click="projectArchive(projectId)"
        >
          项目归档
        </button>
        <button
          class="btn btn-link"
          style="padding: 0px;"
          @click="addTrace(projectId)"
        >
          添加任务
        </button>
      </div>
    </h4>
    <div class="input-group">
      <input v-model="content" type="text" class="form-control" placeholder="任务名称、任务内容" @blur="listFinishedTask" @keyup.enter="listFinishedTask" />
      <span class="input-group-btn">
        <button style="width:100%;background-color: #007aff;color: white;" type="button" class="btn btn-blue search-button" @click="listFinishedTask()">
          查询
        </button>
      </span>
    </div>
    <div>
      <div
        class="panel panel-default"
        style="margin-bottom: 10px;margin-top: 10px;"
      >
        <div class="panel-body">
          <vuedraggable v-model="finishedTraces" class="wrapper" @change="end">
            <transition-group>
              <div
                v-for="trace in finishedTraces"
                :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>完成时间:{{ formatDate(trace.finishedDate) }}</span>
                    </span>
                  </span>
                </span>
              </div>
            </transition-group>
          </vuedraggable>  
        </div>
      </div>
      <div v-if="finishedTraces.length" class="row">
        <div class="pull-left">
          <span>第{{ (pagination2.current_page-1)*pagination2.per_page+1 }}-{{ pagination2.current_page*pagination2.per_page }}条,共计{{ pagination2.total }}条,每页显示</span>
          <PageSizeSelect @page-size-changed="gridSizeSelect" />
          <span>条</span>
        </div>
			
        <div class="pull-right">
          <Pagination :pagination="pagination2" :callback="listFinishedTask" />
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    Navbar, Pagination, Checkbox,vuedraggable,PageSizeSelect,
  },
  data: function () {
    return {
      finishedTraces: [], //已完成的任务
      isFinished: true, //显示 完成/未完成的任务
      projectUsers: [],
      obj: null,
      projectName: '',
      projectId: '',
      pagination2: {
        total: 0,
        per_page: 50,    // 每页10条信息
        current_page: 1, // 当前页码
        last_page: 10,    // 最后页码
      },
      formatDate: TraceCommon.formatDate,
      content:undefined,
    };
  },

  mounted: function () {
    var _self = this;
    this.projectId = _self.$route.params.projectId;
    this.projectName = _self.$route.query.projectName;
    this.personNumber();
    this.listFinishedTask();
  },
  methods: {
    gridSizeSelect: function(newPageSize) {
      this.pagination2.per_page = newPageSize;
      this.pagination2.current_page = 1;
      // 刷新界面
      this.listFinishedTask();
    },
    end(evt) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceResource/sortFinished'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          'id': evt.moved.element.id,
          'projectId': _self.projectId,
          'oldIndex': evt.moved.oldIndex,
          'newIndex': evt.moved.newIndex,
          'currentPage': _self.pagination2.current_page,
          'pageSize': _self.pagination2.per_page,
          'content': _self.content,
        },
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          _self.listFinishedTask();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
         * 编辑
         */
    edit: function (trace) {
      var _self = this;
      this.$router.push('/trace/traceUpdate/' + trace.id);
    },

    /**
         * 初始化项目
         */
    listFinishedTask: function () {
      var _self = this;
      _self.finishedTraces.splice(0, _self.finishedTraces.length);
      TraceResource.listFinishedByProjectId(_self.projectId, _self.pagination2, _self.content).then(data => {
        if (data == null) {
          return;
        }
        _self.pagination2.total = data.totalSize;
        _self.pagination2.last_page = Math.ceil(_self.pagination2.total / _self.pagination2.per_page);
        _self.finishedTraces = data.traceDtos;
      }, error => {
        Common.processException(error);
      });
    },



    /**
         * 初始化接收该项目的人数
         * @author ZhangTeng 20190212
         */
    personNumber: function () {
      var _self = this;
      _self.projectUsers.splice(0, _self.projectUsers.length);

      $.ajax({
        url: Common.getApiURL('TraceResource/listByProjectId'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          'projectId': _self.projectId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if (data == null) {
            return;
          }
          for (var index = 0; index < data.length; index++) {
            _self.$set(_self.projectUsers, index, data[index]);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 打开明细
         * @author ZhangTeng 20190131
         */
    openLine: function (obj) {
      this.$router.push({
        path: '/trace/trace/' + obj.id,
      });
    },

    /**
         * 添加任务
         * @author ZhangTeng 20190201
         */
    addTrace: function (projectId) {
      this.$router.push('/trace/traceCreate/' + projectId);
    },

    /**
		 * 项目归档
		 * @param {Object} projectId
		 * @author GuoZhiBo 20190926
		 */
    projectArchive: function (projectId) {
      var _self = this;
      this.$router.push({
        path: '/trace/projectArchive/' + projectId,
        query:
                {
                  projectName: _self.projectName,
                },
      });
    },
    /**
		 * 项目任务
		 * @param {Object} projectId
		 * @author GuoZhiBo 20190926
		 */
    projectManagement: function (projectId) {
      var _self = this;
      this.$router.push({
        path: '/trace/projectManagement/' + projectId,
        query:
                    {
                      projectName: _self.projectName,
                    },                
      });
    },
    /**
         *  跳转到人员界面
         *  @author ZhangTeng 20190212
         */
    goPersonList: function () {
      var _self = this;
      this.$router.push({
        path: '/trace/projectUserList/' + _self.projectId,
        query: {
          projectName: _self.projectName,
        },
      });
    },

    /**
         * 修改追踪单的状态
         * @author YangZhiJie 20171201
         */
    updateTracefinished: function (trace) {
      var _self = this;
      TraceResource.updateTraceFinished(trace.id).then(successData => {
        _self.listFinishedTask();
      }, 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>