yiliangyiyun-pc/src/views/workNotification/components/WorkNotificationItem.vue

<template>
  <div class="work-notification-item">
    <div class="desc-group">
      <span class="yhimg"></span>
      <div class="content">
        <div class="work-notification-title">{{ info.messageTitle }}</div>
        <div class="work-notification-padding">{{ info. messageContent }}</div>
      </div>
    </div>
    <div class="right-group">
      <div class="warn-icon"
           v-if="isOutOfDate && isOutOfDateType">
        <img src="../../../assets/images/common/notification/limit.png">
      </div>
      <div class="right">
        <p class="notification-size">{{ info.showTime	 | dateFilter }}</p>
      </div>
      <div class="action">
        <el-button @click="showDialog = true">{{ $t('workNotification.handleLater') }}</el-button>
        <el-button type="primary"
                   @click="handleNow">{{ $t('workNotification.handle') }}</el-button>
      </div>
    </div>
    <ws-dialog :title="$t('workNotification.handleLater')"
               :visible.sync="showDialog"
               @closed="days = '0'"
               width="500px">
      <div class="dialog-content">
        <ws-form label-width="180px"
                 style="width: 100%">
          <ws-form-item :label="$t('workNotification.inputDelayDays')"
                        required>
            <ws-input v-model="days"></ws-input>
          </ws-form-item>
        </ws-form>
        <ws-radio-group v-model="days">
          <ws-radio label="1">{{ $t('workNotification.oneDay') }}</ws-radio>
          <ws-radio label="7">{{ $t('workNotification.oneWeek') }}</ws-radio>
          <ws-radio label="30">{{ $t('workNotification.oneMonth') }}</ws-radio>
        </ws-radio-group>
      </div>
      <div slot="footer">
        <ws-button @click="showDialog = false">{{ $t('button.cancel') }}</ws-button>
        <ws-button @click="doHandleLater"
                   type="primary">{{ $t('button.confirm') }}</ws-button>
      </div>
    </ws-dialog>
  </div>
</template>

<script>
import notificationType from '../types/notificationType';
import * as utils from '../utils';
import { handleLater } from '@/model/indexRx';
import XEUtils from 'xe-utils';
import { EventBus, dayjs } from 'base-core-lib'
export default {
  name: 'WorkNotificationItem',
  //filters: {
  //  dateFilter(date) {
  //    const now = new Date();
  //    const targetDate = new Date(date);
  //    now.setHours(now.getHours() + 8);
  //    targetDate.setHours(targetDate.getHours() + 8);
  //    // 如果时间差小于一天  17:30
  //    if (now - targetDate < 24 * 60 * 60 * 1000) {
  //      return `${targetDate.toISOString().slice(11, 16)} `
  //      // eslint-disable-next-line brace-style
  //    }
  //    // 如果时间差小于一年  07-20 17:30
  //    else if (now - targetDate < 24 * 60 * 60 * 1000 * 365) {
  //      return `${targetDate.toISOString().slice(5, 10)} ${targetDate.toISOString().slice(11, 16)} `
  //     // eslint-disable-next-line brace-style
  //    }
  // 如果时间差大于一年  2019-07-20 17:30
  //    else {
  //      return `${targetDate.toISOString().slice(0, 10)} ${targetDate.toISOString().slice(11, 16)} `
  //   }
  //  }
  //},
  filters: {
    dateFilter (date) {
      let currDate = XEUtils.toStringDate(date);
      // let newDate = new Date();
      if (XEUtils.isDate(currDate)) {
        // if (newDate.getFullYear() === currDate.getFullYear() && newDate.getMonth() === currDate.getMonth() && newDate.getDay() === currDate.getDay()) {
        if (dayjs().year() === dayjs(currDate).year() && (dayjs().month() + 1) === (dayjs(currDate).month() + 1) && dayjs().day() === dayjs(currDate).day()) {
          return XEUtils.toDateString(currDate, 'HH:mm');
          // } else if (newDate.getFullYear() === currDate.getFullYear()) {
        } else if (dayjs().year() === dayjs(currDate).year()) {
          return XEUtils.toDateString(currDate, 'MM-dd HH:mm');
        } else {
          return XEUtils.toDateString(currDate, 'yyyy-MM-dd HH:mm');
        }
      } else {
        return '';
      }
    }
  },
  props: {
    info: Object,
  },
  data () {
    return {
      msgKey: 0,
      showDialog: false,
      days: '0',
    }
  },
  computed: {
    isOutOfDate () {
      // 任务超期时间
      // const behindTime = new Date(this.info.behindTime);
      // behindTime.setHours(23, 59, 59);
      const behindTime = dayjs(this.info.behindTime).format('YYYY-MM-DD') + ' 23:59:59'
      // 任务未在任务日期当天23:59前处理的，该任务被标识为超期
      // 现在时间过了任务日期当天23:59,并且任务状态处在未处理状态的 返回true
      return this.info.acceptanceType === 'NEED_HANDLE' && dayjs() > behindTime
    },
    isOutOfDateType () {
      return !(this.info.businessType !== notificationType.SEAFARERS_MANAGEMENT && this.info.businessType !== notificationType.SHIP_CERTIFICATE);
    }
  },
  methods: {
    handleNow () {
      const info = this.info;
      const id = info.businessId;
      const title = info.messageContent;
      const url = this.checkType(info);
      if (!url) {
        EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
      } else {
        if (url === 'appPurDetail' || url === 'appPurDetailMa') {
          this.$router.push({ name: url, query: { id: id, applId: id, pageBtnShowType: false, title: title, code: info.businessCode } });
        } else if (url === 'systemOperation') {
          sessionStorage.setItem('ws-pf_systemFile', 2)
          this.$router.push({ name: url, query: { id: id, applId: id, pageBtnShowType: false, title: title, code: info.businessCode } });
        } else {
          this.$router.push({ name: url, query: { id: id, title: title, code: info.businessCode } });
        }
      }
    },
    async doHandleLater () {
      try {
        const info = this.info;
        const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
        await handleLater({
          id: info.id,
          time,
          delay: this.days,
        }).toPromise()
        EventBus.$emit('success', this.$t('workNotification.successDelay'))
        this.showDialog = false;
        this.$emit('handleLater');
      } catch (error) {
        EventBus.$emit('error', this.$t('workNotification.errorDelay'))
        this.showDialog = false;
      }
    },
    checkType () {
      return utils.code2Url(this.info.businessType, this.info.businessCode, this.info.acceptanceType);
    },
  }
}

</script>

<style scoped lang="scss">
.work-notification-title {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.yhimg:before {
  top: 3px;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  content: '';
  background: url(../../../assets/images/page/certificate/certificateBlue.png)
    no-repeat;
}

.work-notification-padding {
  margin-top: 16px;
  color: #666666;
}

.work-notification-item {
  margin-top: 10px;
  padding: 20px 0 20px 20px;
  background: #fff;
  position: relative;
  display: flex;
  font-size: 14px;
  color: grey;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.work-notification-divider {
  border-right: 1px solid gray;
}

.right {
  text-align: right;
  line-height: 20px;
}

.padding-right {
  padding-right: 15px;
  color: #999999;
}

.notification-size {
  color: #999;
  font-size: 14px;
  text-align: right;
  border-right: 1px solid #ccc;
  padding-right: 20px;
  line-height: 28px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.warn-icon {
  position: absolute;
  right: 300px;
}
.desc-group {
  flex: 1;
  text-align: left;
  display: flex;
  .content {
    margin-left: 8px;
  }
}
.right-group {
  flex: none;
  display: flex;
  align-items: center;
  margin-left: 16px;
  .action {
    padding: 0 16px;
  }
}
</style>