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

<!--
	作者：yangzhijie1488@163.com
	时间：2017-12-12
	描述：创建追踪单时间节点
	输入参数：从localstorage中输入参数
	{
		"canDelete": 是否可删除数据
		"canSave": 是否可保存数据
		"trace": 追踪单
		"traceTimeLine": 追踪单时间节点
	}
-->

<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>
          <a-select
            v-model:value="traceTimeLine.userName"
            style="width: 100%; height: 30px"
            :options="allUsers"
            @change="getUser"
          />
        </div>

        <div class="form-group">
          <label for="exampleInputEmail2">截止时间</label>
          <a-config-provider :locale="locale">
            <a-date-picker
              v-model:value="planFinishedDate"
              style="width: 100%"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              :show-now="false"
              placeholder="请选择日期"
            />
          </a-config-provider>
          <!-- <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>
          <button type="text" class="btn btn-default" @click="deleteById()">
            删除
          </button>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import { Notify } from 'pc-component-v3';
import Common from '../common/Common.js';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';
 
dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale('zh-cn');
export default {
  components: {},
  data: function () {
    return {
      traceTimeLineId: '', // 追踪单(输入参数)
      projectId: '', // 项目Id
      traceTimeLine: {
        trackId: undefined,
        userId: undefined,
        userName: undefined,
        content: undefined,
        endDate: undefined,
      }, // 追踪单时间节点(输入参数)
      loading: false,
      allUsers: [],
      locale: zhCN,
      planFinishedDate: '',
    };
  },

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

  methods: {
    /**
     * 初始化数据
     */
    initData: function () {
      var _self = this;
      this.traceTimeLineId = Number(this.$route.params.traceTimeLineId);
      this.projectId = Number(this.$route.query.projectId);
      this.loadTraceTimeLine();
    },
    // 获取负责人信息
    getUser: function (_, val) {
      this.traceTimeLine.userId = val.userId;
      this.traceTimeLine.userName = val.userName;
    },
    /**
     * 加载时间节点Id
     */
    loadTraceTimeLine: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceTimeLineResource/uniqueTraceTimeLineDto'),
        type: 'get',
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: {
          traceTimeLineId: _self.traceTimeLineId,
        },
        success: function (data) {
          _self.traceTimeLine = data;
          if(data.endDate !== '' && data.endDate){
            _self.planFinishedDate = dayjs(data.endDate,'YYYY-MM-DD HH:mm:ss');
          }
          _self.loadSelectUserName();
          _self.loading = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**@argument
     * 保存当前时间节点数据
     */
    saveTraceTimeLine: function () {
      var _self = this;
      _self.traceTimeLine.traceId = _self.traceId;
      var content = _self.traceTimeLine.content;
      _self.traceTimeLine.endDate = _self.dateConvert(_self.planFinishedDate);
      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
     * 根据时间节点ID删除时间节点信息
     */
    deleteById: function () {
      var _self = this;
      _self.loading = true;
      $.ajax({
        url: Common.getApiURL('TraceTimeLineResource/deleteById'),
        type: 'get',
        data: {
          traceTimeLineId: _self.traceTimeLine.id,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading = false;
          _self.returnBack();
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(xmlHttpRequest, textStatus, errorThrown);
        },
      });
    },

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

    /**
     * 加载用户
     */
    loadSelectUserName: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'ProjectItemUserResource/listByProjectItemId?projectItemId=' +
                  _self.projectId,
        ),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          data.forEach(item => {
            item.value = item.userId;
            item.label = item.userName;
          });
          _self.allUsers = data;
        },
        error: function (errorData) {
          Common.processException(errorData);
        },
      });
    },
    // 日期处理函数
    plusZero: function (n) {
      return n >= 10 ? n : '0' + n;
    },

    dateConvert: function (dateStr) {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      return (
        year +
        '-' +
        this.plusZero(month) +
        '-' +
        this.plusZero(day) +
        ' ' +
        this.plusZero(hour) +
        ':' +
        this.plusZero(minute) +
        ':' +
        this.plusZero(second)
      );
    },
  },
};
</script>
<style scoped>
</style>