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

<template>
  <div>
    <TraceHeader :type="'traceProject'" />
    <div>
      <div>
        <QueryWidget
          ref="queryWidget"
          @search="getDatas()"
          @value-changed="getDatas()"
        />
        <p
          v-if="projectList == null || projectList.length == 0" class="bg-danger"                    
          style="padding: 15px; margin-top:15px"
        >
          您参与的项目都在进行中
        </p>
        <div
          class="row"
          style="margin-top: 10px;"
        >
          <div
            v-for="item in projectList"
            :key="item.id"
            class="col-md-4"
          >
            <div
              class="panel panel-default"
              @click="openLine(item)"
            >
              <div
                class="panel-body"
                style="height:70px;"
              >
                <div>
                  <div>{{ item.name }}</div>
                  <div>
                    <span>{{ item.no }}</span>
                    <span
                      v-if="item.admin"
                      style="color:green"
                    >
                      参与中
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <Pagination
              :pagination="pagination"
              :callback="getDatas"
            />
          </div>
        </div>

        <hr />
        <button
          type="button"
          class="btn btn-link"
          @click="isTheArchive"
        >
          进行中的项目
        </button>
      </div>

      <h3>&nbsp;</h3>
    </div>
  </div>
</template>

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

import QueryWidget from '../widget/QueryWidget.vue';
import TraceHeader from './TraceHeader.vue';
var Pagination = require('pc-component-v3').default.VueBootstrapPagination;;
var Navbar = require('pc-component-v3').default.Navbar;

export default {
  components: {
    Pagination, QueryWidget, Navbar, TraceHeader,
  },
  data: function () {
    return {
      input: '',
      searchText: '',
      userId: '',
      range: {
        start: 0,
        length: 30,
      },
      totalSize: 1,
      projectList: [],
      pagination: {
        total: 0,
        //per_page: Common.pageSize,    // required
        per_page: 30,    // required
        current_page: 1, // required
        last_page: 10,    // required
      },
      traceState: undefined,
      traceStatus: undefined,
      traceUserStatus: undefined,
    };
  },

  mounted: function () {
    var uuid = this.$route.params.uuid;
    if (uuid != null && uuid != undefined) {
      var str = localStorage.getItem(uuid);

      if (str != null) {
        var object = JSON.parse(str);
        var userId = JSON.parse(localStorage.json_LoginInfo).userId;

        if (object.traceState != undefined) {
          this.traceState = object.traceState;
        }
        if (object.traceStatus != undefined) {
          this.traceStatus = object.traceStatus;
        }
        if (object.traceUserStatus != undefined) {
          this.traceUserStatus = object.traceUserStatus;
        }
      }
    }
    this.getDatas();
  },
  methods: {
    /**
         * 查询数据
         * @author ZhangTeng 20190220
         */
    getDatas: function () {
      var _self = this;

      _self.range = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };

      var queryParam = {
        range: _self.range,
        condition: _self.$refs.queryWidget.getSearchText(),
      };

      $.ajax({
        url: Common.getApiURL('ProjectItemUserResource/queryProjectItemUserDto2'),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(queryParam),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.projectList = data.dataList;
          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = ((data.totalSize % data.range.length) == 0) ? (data.totalSize / data.range.length) : (Math.floor(data.totalSize / data.range.length) + 1);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 显示归档/未归档的项目
         */
    isTheArchive: function () {
      let routeData  = this.$router.push({path: '/trace/projectList'});
      window.open(routeData.href, '_blank');
    },
    /**
         * 打开明细
         */
    openLine: function (obj) {
      var uuid = Uuid.createUUID();
      var _self = this;
      this.$router.push(
        {
          path: '/trace/notFinishedProjectTraces/' + obj.id,
          query:
                    {
                      projectName: obj.name,
                    },                
        });
    },


    open: function () {
      history.back();
    },

  },
};
</script>

<style scoped>
.mui-card {
    margin: 0px;
    margin-top: 1px;
}
.mui-card-footer:before,
.mui-card-header:after {
    background-color: #ffffff;
}
.mui-card-content {
    padding: 0px 10px;
}
.mui-card-content p {
    margin: 0px;
}
p {
    font-size: 14px !important;
    padding: 2px 0px;
    color: #000000;
}
.time {
    /*color: #8f8f94;*/
    font-weight: bold;
}
.index {
    font-size: 16px;
    font-weight: bold;
}
.div-statis {
    margin-bottom: 5px;
    font-size: 0.8em;
    text-align: center;
}
.divs {
    margin-top: 2%;
    margin-left: 39%;
}
.div {
    word-wrap: break-word;
    white-space: normal;
    font-size: 20px;
}
.div1 {
    padding-left: 10%;
    color: blue;
}
.div2 {
    color: cadetblue;
}
.img {
    height: 33px;
    width: 38px;
}

</style>