yxk-electronic-archives/src/views/system/user/messageCenter/module/list.vue

<template>
  <div class="message-center-list">
    <div v-if="hasMore" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div>
    <div v-for="(item,index) in items" :key="index" class="message-item" @click="handleDetail(item)">
      <div class="message-date">{{ item.createTime | parseTime }}</div>
      <div class="message-cont">
        <div class="message-cont-info">
          <span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ titleType }}</span>
          <span class="is-read-tip">{{ item.isRead === 0 ? '未读' : '已读' }}</span>
          <div class="message-title">{{ item.noticeTitle }}</div>
          <ul class="message-list-info">
            <li>创建人：{{ item.createBy }}</li>
            <li>创建时间：{{ item.createTime | parseTime }}</li>
          </ul>
        </div>
        <div class="message-more">查看详情<i class="iconfont icon-chakan" /></div>
      </div>
    </div>

    <el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情">
      <div class="setting-dialog">
        <div class="message-detail">
          <span :class="['message-type-title',{'type-title1': isIndex === 0 },{'type-title2': isIndex === 1 },{'type-title3': isIndex === 2 },{'type-title4': isIndex === 3 }]">{{ titleType }}</span>
          <span class="detail-date">【{{ detailInfo && detailInfo.create_by }}】 {{ detailInfo && detailInfo.create_time | parseTime }}</span>
          <div class="message-title">{{ detailInfo && detailInfo.noticeTitle }}</div>
          <el-input v-model="detailInfo.noticeContext" placeholder="请输入" type="textarea" :rows="10" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="detailInfo.noticeType === 1" @click="dealWithCont">流程处理</el-button>
          <el-button type="primary" @click="messageVisible=false">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <detail ref="detail" />
  </div>
</template>

<script>
import { FetchInitNoticeDetails } from '@/api/system/new'
import detail from '../../processCenter/module/form'
export default {
  name: 'MessageList',
  components: { detail },
  props: {
    listIndex: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      isIndex: 0,
      titleType: '系统通知',
      messageVisible: false,
      opinionTxt: '',
      loading: false, // 是否正在加载中
      hasMore: true, // 是否还有更多数据
      currentPage: 1,
      pageSize: 10,
      detailInfo: {}
    }
  },
  watch: {
    listIndex: function(newValue, oldValue) {
      this.isIndex = newValue
      this.getIndex()
    }
  },
  created() {
    // this.loadData()
  },
  mounted() {
  },
  methods: {
    // 加载数据方法
    loadData() {
      this.loading = true
      setTimeout(() => {
        const newData = Array.from(Array(this.pageSize), (_, index) => {
          const key = (this.currentPage - 1) * this.pageSize + index
          return {
            key,
            name: `这是消息标题${key}`,
            age: 18 + key
          }
        })
        this.items = [...newData, ...this.items]
        console.log(this.items)
        this.currentPage++
        this.loading = false
        if (this.currentPage > 2) {
          this.hasMore = false
        }
      }, 1000)
    },
    loadMore() {
      if (this.loading) {
        return
      }
      this.loadData()
    },
    getIndex() {
      switch (this.isIndex) {
        case 0:
          this.titleType = '系统通知'
          this.opinionTxt = '这是一条系统通知'
          break
        case 1:
          this.titleType = '有流程达到'
          this.opinionTxt = '这是一条有流程达到提醒'
          break
        case 2:
          this.titleType = '流程完成提醒'
          this.opinionTxt = '这是一条流程完成提醒'
          break
        case 3:
          this.titleType = '赋权到期提醒'
          this.opinionTxt = '这是一条赋权到期提醒'
          break
      }
    },
    handleDetail(item) {
      switch (item.noticaType) {
        case 0:
          this.opinionTxt = '这是一条系统通知'
          break
        case 1:
          this.opinionTxt = '这是一条有流程达到提醒'
          break
        case 2:
          this.opinionTxt = '这是一条流程完成提醒'
          break
        case 3:
          this.opinionTxt = '这是一条赋权到期提醒'
          break
      }
      FetchInitNoticeDetails({ 'noticeId': item.noticeId }).then((res) => {
        console.log(res)
        this.detailInfo = res
        this.messageVisible = true
      }).catch(err => {
        console.log(err)
      })
    },
    dealWithCont() {
      this.$refs.detail.detailVisible = true
    }
  }
}
</script>

<style lang='scss' scoped>
[data-theme=dark] .message-center-list{
  background-color: transparent;
  .more-btn{
    color: #339cff;
  }
  .message-item{
    .message-cont{
      background-color: #02255f;
      .message-cont-info{
        color: #fff;
        .is-read-tip{
          color: #1890ff;
          border: 1px solid #339cff;
          background-color: #02255f;
        }
      }
      .message-more{
        color: #3a99fd;
        border-top: 1px solid #113d72;
        i{
          color: #3a99fd;
        }
      }
    }
  }
  .message-title{
    font-weight: 600;
    color: #3a99fd;
  }
}

.message-center-list{
  height: calc(100% - 90px);
  padding: 16px 30px;
  margin-bottom: 20px;
  background-color: #F5F5F5;
  overflow: hidden;
  overflow-y: scroll;
  .more-btn{
    margin-bottom: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    color: #0348F3;
    cursor: pointer;
    i{
      display: inline-block;
    }
  }
  .message-item{
    font-size: 14px;
    .message-date{
      text-align: center;
      color: #A6ADB6;
    }
    .message-cont{
      margin: 12px 0 16px 0;
      background-color: #fff;
      .message-cont-info{
        position: relative;
        padding: 16px 20px;
        color: #545B65;

        .is-read-tip{
          position: absolute;
          right: 20px;
          top: 16px;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          padding: 0 7px;
          color: #ED4A41;
          background-color: #FDEFEE;
          border-radius: 3px;
        }

        .message-list-info{
          font-size: 12px;
          line-height: 24px;
        }
      }
      .message-more{
        position: relative;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        color: #545B65;
        border-top: 1px solid #E6E8ED;
        cursor: pointer;
        i{
          position: absolute;
          right: 10px;
          top: 0;
          font-size: 12px;
          color: #888D94;
        }
      }
    }
  }
}
.message-type-title{
  display: block;
  padding-left: 33px;
  height: 33px;
  line-height: 33px;
  &.type-title1{
    background: url('~@/assets/images/icon/xttz.png') no-repeat left center;
    background-size: 23px 23px;
  }
  &.type-title2{
    background: url('~@/assets/images/icon/lcdd.png') no-repeat left center;
    background-size: 23px 23px;
  }
  &.type-title3{
    background: url('~@/assets/images/icon/lcwc.png') no-repeat left center;
    background-size: 23px 23px;
  }
  &.type-title4{
    background: url('~@/assets/images/icon/fqdq.png') no-repeat left center;
    background-size: 23px 23px;
  }
}
.message-title{
  margin: 8px 0 20px 0;
  font-weight: 400;
  color: #0C0E1E;
}
.message-detail{
  position: relative;
  .detail-date{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    line-height: 32px;
    color: #A6ADB6;
  }
  .message-title{
    margin: 10px 0 20px 0;
  }
}
</style>