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

<template>
  <!--  v-loading="isLoading" -->
  <div class="message-item"
       @click="handleClick">
    <el-row class="full"
            type="flex"
            align="middle">
      <el-col class="item-left">
        <el-row class="title"
                type="flex"
                align="middle">
          <div class="icon-place"
               :class="iconClass"></div>
          {{ title }}
        </el-row>
        <el-row class="desc"
                type="flex"
                align="middle">
          <div class="icon-place"></div>
          {{ desc }}
        </el-row>
      </el-col>
      <el-col class="item-right">
        <el-row class="full"
                type="flex"
                align="middle">
          <el-col>
            <div class="time">{{ time }}</div>
          </el-col>
          <el-col>
            <el-button class="handle-btn"
                       :class="handleBtnClass"
                       type="text">{{ statusText }}</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import handleType from '../types/handleType'
import i18n from '@/lang'
import * as utils from '../utils'
import { msgConfirmed } from '@/model/indexRx'
import { EventBus } from 'base-core-lib'
const HandleConfig = {
  [handleType.RETURN]: {
    iconClass: 'need-handle',
    btnClass: 'need-handle',
    btnText: i18n.t('workNotification.msg.needHandle')
  },
  [handleType.NEED_HANDLE]: {
    iconClass: 'need-handle',
    btnClass: 'need-handle',
    btnText: i18n.t('workNotification.msg.needHandle')
  },
  [handleType.NEED_CONFIRMED]: {
    iconClass: 'need-confirmed',
    btnClass: 'need-confirmed',
    btnText: i18n.t('workNotification.msg.needConfirmed')
  },
  [handleType.CONFIRMED]: {
    iconClass: 'confirmed',
    btnClass: 'confirmed',
    btnText: i18n.t('workNotification.msg.confirmed')
  },
  [handleType.HANDLED]: {
    iconClass: 'handled',
    btnClass: 'handled',
    btnText: i18n.t('workNotification.msg.handled')
  },
  [handleType.COMPLETED]: {
    iconClass: 'completed',
    btnClass: 'completed',
    btnText: i18n.t('workNotification.msg.completed')
  }
}

export default {
  name: 'MessageItem',
  // filters: {
  //   datetimeAgo
  // },
  props: ['info'],
  data () {
    return {
      isLoading: false
    }
  },
  computed: {
    title () {
      return this.info && this.info.messageTitle
    },
    desc () {
      return this.info && this.info.messageContent
    },
    time () {
      return this.info && this.info.showTime
    },
    acceptanceType () {
      return this.info.acceptanceType
    },
    iconClass () {
      var at = this.info.acceptanceType
      return HandleConfig[at] && HandleConfig[at].iconClass
    },
    statusText () {
      var at = this.info.acceptanceType
      return HandleConfig[at] && HandleConfig[at].btnText
    },
    handleBtnClass () {
      var at = this.info.acceptanceType
      return HandleConfig[at] && HandleConfig[at].btnClass
    }
  },
  methods: {
    async handleClick () {
      try {
        this.isLoading = true
        await msgConfirmed({ id: this.info.id }).toPromise()
        this.isLoading = false
      } catch (error) {
        this.isLoading = false
      }

      const id = this.info.businessId
      const title = this.info.messageContent
      const url = utils.code2Url(
        this.info.businessType,
        this.info.businessCode,
        this.info.acceptanceType
      )
      if (!url) {
        EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
      } else {
        if (
          url == 'certificateDetailSecond' ||
          url == 'certificateDetailThird'
        ) {
          let num = url == 'certificateDetailSecond' ? 'second' : 'third'
          this.$router.push({
            name: 'certificateDetail',
            query: {
              id: id,
              title: title,
              code: this.info.businessCode,
              tabNum: num
            }
          })
        } else if (url === 'systemOperation') {
          sessionStorage.setItem('ws-pf_systemFile', 2)
          this.$router.push({
            name: url,
            query: { id: id, title: title, code: this.info.businessCode }
          })
        } else {
          this.$router.push({
            name: url,
            query: { id: id, title: title, code: this.info.businessCode }
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.message-item {
  height: 86px;
  background: #fff;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;

  & + .message-item {
    margin-top: 10px;
  }
}

.full {
  width: 100%;
  height: 100%;
}

.item-left {
  .icon-place {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    margin-right: 8px;

    &.need-handle {
      //待处理
      color: #f56c6c;
      background: url(../../../assets/images/page/notification/mail_blue_close.png)
        no-repeat;
      background-position: center;
      background-size: contain;
    }
    &.need-confirmed {
      //待查看
      color: #f56c6c;
      background: url(../../../assets/images/page/notification/mail_blue_close.png)
        no-repeat;
      background-position: center;
      background-size: contain;
    }
    &.confimed {
      //已查看
      color: #333;
      background: url(../../../assets/images/page/notification/mail_gray_open.png)
        no-repeat;
      background-position: center;
      background-size: contain;
    }
    &.handled {
      //已处理
      color: #1d6ced;
      background: url(../../../assets/images/page/notification/mail_blue_open.png)
        no-repeat;
      background-position: center;
      background-size: contain;
    }
    &.completed {
      //已完成
      color: #333;
      background: url(../../../assets/images/page/notification/mail_gray_open.png)
        no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  .title {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .desc {
    color: #666666;
    font-size: 14px;
  }
}
.item-right {
  width: 280px;

  .time {
    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;
    width: 160px;
  }

  .handle-btn {
    width: 90px;
    margin-left: 20px;
    margin-right: 10px;
    font-size: 14px;

    &.need-handle {
      //待处理
      color: #f56c6c;
    }
    &.need-confirmed {
      //待查看
      color: #f56c6c;
    }
    &.confimed {
      //已查看
      color: #333;
    }
    &.handled {
      //已处理
      color: #1d6ced;
    }
    &.completed {
      //已完成
      color: #333;
    }
  }
}
</style>