client-trace-v5/src/trace/ProjectList.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: red"> 参与中 </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"
          style="color: green"
          @click="isTheArchive"
        >
          已归档的项目
        </button>
      </div>

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

<script>
var Common = require('../common/Common.js');
var Uuid = require('pc-component-v3').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').Navbar;

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

  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 GuoZhiBo 20180226
     */
    getDatas: function () {
      var _self = this;

      _self.range = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };
      var val = _self.$refs.queryWidget.getSearchText();
      if (val != undefined && val.length > 0) {
        _self.range = {
          start: 0,
          length: _self.pagination.per_page,
        };
      }
      var queryParam = {
        range: _self.range,
        condition: _self.$refs.queryWidget.getSearchText(),
      };

      $.ajax({
        url: Common.getApiURL(
          'ProjectItemUserResource/queryProjectItemUserDto',
        ),
        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 = Math.ceil(
            data.totalSize / data.range.length,
          );
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 显示归档/未归档的项目
     */
    isTheArchive: function () {
      this.$router.push('/trace/completeProjectList');
    },
    /**
     * 打开明细
     */
    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>