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

<template>
  <div class="container-fluid">
    <Navbar
      :title="projectName + '-项目人员'"
      :is-go-back="true"
    />

    <button
      type="button"
      class="btn btn-success"
      style="margin-bottom: 10px; margin-top: 10px;"
      @click="edit"
    >
      编辑
    </button>

    <div v-if="editFlag">
      <div class="row">
        <div
          v-for="user in userList"
          :key="user.id"
          class="col-sm-6 col-md-4"
        >
          <div class="thumbnail">
            <div class="caption">
              <h4>
                <input
                  v-model="user.selected"
                  autocomplete="off"
                  type="checkbox"
                  :value="user.userId"
                />
                {{ user.name }}
              </h4>
            </div>
          </div>
        </div>
      </div>

      <button
        type="button"
        class="btn btn-danger"
        @click="save()"
      >
        保存项目管理人员
      </button>
    </div>

    <div v-else>
      <p
        v-if="projectItemUsers == null || projectItemUsers.length == 0"
        class="bg-danger"
        style="padding: 15px;"
      >
        该项目未有任何人员参与
      </p>
      <div class="row">
        <div
          v-for="user in projectItemUsers"
          :key="user.id"
          class="col-sm-6 col-md-4"
        >
          <div
            class="thumbnail"
            @click="openLine2(user)"
          >
            <div class="caption">
              <h4>
                {{ user.userName }}
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    Navbar,
  },
  data: function () {
    return {
      projectId: '',
      projectName: '',
      userList: [],
      projectItemUsers: [],
      // 编辑的标识符
      editFlag: false,
    };
  },

  mounted: function () {
    this.initData();
    this.initUsers();
  },
  methods: {
    /**
         * 初始化项目
         */
    initData: function () {
      this.projectId = this.$route.params.projectId;
      this.projectName = this.$route.query.projectName;
    },
        
    /**
         * 加载所有的人员
         * @author ZhangTeng 20190212
         */
    initUsers: function () {
      var _self = this;

      // 清空人员数组
      _self.userList.splice(0, _self.userList.length);

      $.ajax({
        url: Common.getApiURL('userResource/listByClientId'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          for (var index = 0; index < data.length; index++) {
            data[index].selected = false;
            _self.userList[index] = data[index];
            // _self.$set(_self.userList, index, data[index]);
          }
          _self.initProjectItemUser();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 打开用户的任务
         */
    openLine2: function (user) {
      var uuid = Uuid.createUUID();
      var obj={
        userId:user.userId,
        userName:user.userName,
      };
      localStorage.setItem(uuid, JSON.stringify(obj));
      this.$router.push('/trace/userNotFinishedTrace/' + uuid);
    },

    /**
         * 编辑人员
         * @author ZhangTeng 20190212
         */
    edit: function () {
      this.editFlag = !this.editFlag;
      this.initProjectItemUser();
    },

    /**
         * 初始化项目用户
         * @author ZhangTeng 20190212
         */
    initProjectItemUser: function () {
      var _self = this;

      // 清空项目-人员数组
      _self.projectItemUsers.splice(0, _self.projectItemUsers.length);

      $.ajax({
        url: Common.getApiURL('ProjectItemAdminUserResource/listByProjectItemId'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          'projectItemId': this.projectId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if(data == null){
            return;
          }
          for (var index1 = 0; index1 < _self.userList.length; index1++) {
            for (var index = 0; index < data.length; index++) {
              if (data[index].userId == _self.userList[index1].id) {
                _self.userList[index1].selected = true;
              }
            }
          }
          for (let index = 0; index < data.length; index++) {
            _self.projectItemUsers[index] = data[index];
            // _self.$set(_self.projectItemUsers, index, data[index]);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 保存项目用户
         */
    save: function () {
      var _self = this;

      var userIds = [];
      for (var index1 = 0; index1 < _self.userList.length; index1++) {
        if (true == _self.userList[index1].selected) {
          userIds.push(_self.userList[index1].id);
        }
      }

      if (userIds.length == 0) {
        Common.showDialog('不能保存', '至少需要选择一个人员', 'error');
        return;
      }

      $.ajax({
        url: Common.getApiURL('ProjectItemAdminUserResource/save?projectItemId=' + this.projectId),
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(userIds),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.edit();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });

    },
  },
};
</script>

<style scoped>
</style>