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

<!--
	作者：yangzhijie1488@163.com
	时间：2017-12-12
	描述：创建追踪单时间节点
-->

<template>
  <div>
    <div>
      <Navbar
        title="时间节点"
        :is-go-back="true"
      />
      <div>
        <div class="form-group">
          <label for="exampleInputEmail2">添加检查项</label>
          <textarea
            id="hcqk"
            v-model="traceTimeLine.content"
            style="width: 100%;"
            class="form-control"
            rows="5"
          />
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">负责人</label>
          <select
            id="userName"
            style="width: 100%;height: 30px;"
            class="form-control js-data-example-ajax"
          />
        </div>

        <div class="form-group">
          <label for="exampleInputEmail2">截止时间</label>
          <Date
            v-model="traceTimeLine.endDate"
            style="width: 100%;"
          />
        </div>
        <div style="margin-top: 10px;">
          <button
            type="text"
            class="btn btn-default"
            @click="saveTraceTimeLine()"
          >
            确认
          </button>
          <button
            type="text"
            class="btn btn-default"
            @click="returnBack()"
          >
            取消
          </button>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>





import Common from '../common/Common.js';

export default {

  components: {
    
    
    
    
    
    
  },
  data: function () {
    return {
      traceId: '',			// 追踪单(输入参数)
      projectId: '',		// 项目Id
      traceTimeLine: {
        'trackId': undefined,
        'userId': undefined,
        'userName': undefined,
        'content': undefined,
        'endDate': undefined,
      },	// 追踪单时间节点(输入参数)
      loading: false,
    };
  },


  mounted: function () {
    $('.input-tan').focus(function () {
      document.activeElement.blur();
    });
    this.initData();
  },

  methods: {
    /**
         * 初始化数据
         */
    initData: function () {
      var _self = this;
      this.traceId = Number(this.$route.params.traceId);
      this.projectId = Number(this.$route.query.projectId);
      this.loadSelectUserName();
    },


    /**@argument
         * 保存当前时间节点数据
         */
    saveTraceTimeLine: function () {
      var _self = this;
      _self.traceTimeLine.traceId = _self.traceId;
      var content = _self.traceTimeLine.content;
      var dates = _self.traceTimeLine.endDate;

      if (content != null && content != '' && dates != null && dates != undefined && dates != '') {
        _self.loading=true;
        $.ajax({
          url: Common.getApiURL('TraceTimeLineResource/saveTraceTimeLine'),
          type: 'post',
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify(_self.traceTimeLine),
          success: function (data) {
            _self.loading=false;
            _self.returnBack();
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            _self.loading=false;
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        _self.loading=false;
        Notify.error('提示', '请将界面内容填写完整！');
      }
    },


    /**@argument
         * 返回上一界面
         */
    returnBack: function () {
      history.back();
    },

    
    /**
         * 加载用户
         */
    loadSelectUserName: function () {
      var _self = this;
      $('#userName').select2({
        // 请求搜索框数据
        //data: 
        // placeholder: '用户',
        minimumInputLength: 0,
        placeholderOption: 'first',
        quietMillis: 250,
        allowClear: true,
        language: 'zh-CN',
        width: '100%',
        placeholder: { id: _self.traceTimeLine.userId, text: _self.traceTimeLine.userName },
        // 请求搜索框数据
        ajax: {
          url: function (params) {
            return Common.getApiURL('ProjectItemUserResource/listByProjectItemId?projectItemId=' + _self.projectId);//通过项目Id查找有权操作的项目的用户
          },
          dataType: 'json',
          type: 'get',
          delay: 250,
          minimumInputLength: 1,
          transport: function (params, success, failure) {
            params.beforeSend = Common.addTokenToRequest;
            params.error = Common.processException;
            var $request = $.ajax(params);
            $request.then(success);
            $request.fail(failure);
            return $request;
          },
          data: function (params) {
            return {

            };
          },
          processResults: function (data, params) {
            var more = (params * 10) <= data.length;
            for (var i = 0; i < data.length; i++) {
              data[i].id = data[i].userId;
              data[i].text = data[i].userName;
            }
            return {
              results: data,
              more: more,
            };
          },
        },
      }).on('change', function () {
        _self.traceTimeLine.userId = $(this).val();
        _self.traceTimeLine.userName = $(this).text();
      });
    },
  },
};
</script>
<style scoped>
</style>