zhgdyun/src/views/message.vue

<template>
  <div class="fullHeight pages">
    <!-- :showR="true" -->
    <vhead :titleName="'消息中心'"></vhead>
    <div class="pageContainer">
      <div class="pageDataContainer">
        <div class="searchBox whiteBlock">
          <el-form
            :inline="true"
            size="medium"
            :model="searchForm"
            ref="searchForm"
          >
            <el-form-item :label="'标题'" prop="title" class="last">
              <el-input
                v-model="searchForm.title"
                :placeholder="
                  $t('message.docManage.dialog_file_renaming.placeholder')
                "
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item :label="'消息类型'" prop="title" class="last">
              <el-select v-model="searchForm.type" placeholder="请选择">
                <el-option label="全部" value=""> </el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="timeData"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="getListData">{{
                $t('message.docManage.query')
              }}</el-button>
              <el-button type="warning" plain @click="resetForm">{{
                $t('message.docManage.refresh')
              }}</el-button>
              <el-button type="danger" plain @click="clearAllFn"
                >一键清空消息</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-row :gutter="25">
          <el-col :span="6" v-for="(item, index) in tableData" :key="index">
            <div class="whiteBlock fileContent">
              <img
                class="imgs"
                v-if="item.imageUrl"
                :src="item.imageUrl"
                :preview="item.imageUrl"
              />
              <div class="msgBox">
                <p class="title">标题：{{ item.title }}</p>
                <p class="content">内容：{{ item.msg }}</p>
                <p class="time">发送时间：{{ item.sendTime }}</p>
              </div>
              <!-- <div class="right">
                <img src="@/assets/images/eye.png" @click="viewFn(item)" />
                <img src="@/assets/images/download.png" @click="downFn(item)" />
              </div> -->
              <i class="el-icon-close" @click="deleteNotice(item)"></i>
            </div>
          </el-col>
        </el-row>
        <div class="placeholderBox" v-show="tableData.length == 0">
          <img src="@/assets/images/noData.png" />
          <p>暂无消息</p>
        </div>
        <el-pagination
          v-show="tableData.length > 0"
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(total)"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getNoticeListApi,
  cleanAllNoticeApi,
  deleteNoticeApi
} from '@/assets/js/api/company/project'
import vhead from '@/components/header'
export default {
  components: { vhead },
  data() {
    return {
      searchForm: {
        title: '',
        type: ''
      },
      timeData: '',
      total: 0,
      pageNo: 1,
      pageSize: 20,
      tableData: [],
      options: [
        {
          label: '高空火警',
          value: '8'
        },
        {
          label: '考勤提醒',
          value: '1'
        },
        {
          label: '防疫人员通知',
          value: '2'
        },
        {
          label: '防疫车辆通知',
          value: '3'
        },
        {
          label: '访客通知',
          value: '16'
        },
        {
          label: '混凝土监测',
          value: '4'
        },
        {
          label: '卸料平台',
          value: '5'
        },
        {
          label: '配电箱',
          value: '6'
        },
        {
          label: '扬尘',
          value: '7'
        },
        {
          label: '标养室',
          value: '9'
        },
        {
          label: '安全检查',
          value: '10'
        },
        {
          label: '质量检查',
          value: '11'
        },
        {
          label: '塔吊',
          value: '12'
        },
        {
          label: '升降机',
          value: '13'
        },
        {
          label: '电表',
          value: '14'
        },
        {
          label: '水表',
          value: '15'
        }
      ]
    }
  },
  created() {
    document.title = '消息中心'
    this.selectNowDate()
    this.getListData()
  },
  methods: {
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
      minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
      seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
      // var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
      var timer = year + '-' + month + '-' + day
      this.timeData = [timer, timer]
      console.log(timer)
      // return timer;
    },
    deleteNotice(val) {
      console.log(val)
      this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteNoticeApi({ id: val.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getListData()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    clearAllFn() {
      cleanAllNoticeApi({ userId: this.$store.state.userInfo.userId }).then(
        (res) => {
          this.$message.success(res.message)
          this.getListData()
        }
      )
    },
    //获取列表数据
    getListData() {
      let data = this.searchForm
      if (this.timeData) {
        data.startTime = this.timeData[0]
        data.endTime = this.timeData[1]
      } else {
        data.startTime = ''
        data.endTime = ''
      }
      data.pageNo = this.pageNo
      data.pageSize = this.pageSize
      data.accountId = this.$store.state.userInfo.userId
      getNoticeListApi(data).then((res) => {
        console.log(res)
        this.tableData = res.result.records
        this.total = res.result.total
      })
    },
    viewFn(item) {},
    resetForm() {
      this.$refs['searchForm'].resetFields()
      this.getListData()
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getListData()
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val
      this.getListData()
    }
  }
}
</script>
<style lang="less" scoped>
.fileContent {
  border-radius: 3px;
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  margin-bottom: 20px;
  position: relative;
  .el-icon-close {
    position: absolute;
    right: 10px;
    top: 6px;
    color: #f56c6c;
    font-size: 18px;
    cursor: pointer;
  }
  //   justify-content: space-between;
  //   .right {
  //     display: flex;
  //     align-items: center;
  //     img {
  //       margin-left: 18px;
  //       cursor: pointer;
  //     }
  //   }
  .imgs {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .msgBox {
    .title {
      font-size: 15px;
    }
    .content {
      font-size: 13px;
      opacity: 0.8;
      margin-top: 3px;
    }
    .time {
      font-size: 13px;
      opacity: 0.6;
      margin-top: 3px;
    }
  }
}

.pageContainer {
  height: calc(100% - 61px);
}
</style>