zhgdyun/src/views/messageV2.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="$t('message.messageCenter.title')"
              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="$t('message.messageCenter.messageType')"
              prop="title"
              class="last"
            >
              <el-select v-model="searchForm.type" :placeholder="$t('message.messageCenter.placeholderText')">
                <!-- 全部 -->
                <el-option
                  :label="$t('message.messageCenter.all')"
                  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="$t('message.messageCenter.to')"
                  :start-placeholder="$t('message.messageCenter.startTime')"
                  :end-placeholder="$t('message.messageCenter.endTime')">
              </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">{{$t('message.messageCenter.allClearMsg')}}</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">
                  <!-- 标题 -->
                    {{$t('message.messageCenter.title')}}：{{ item.title }}
                </p>
                <p class="content">
                  <!-- 内容 -->
                  {{$t('message.messageCenter.content')}}：{{ item.msg }}
                </p>
                <p class="time">
                  <!-- 发送时间 -->
                  {{$t('message.messageCenter.sendTime')}}：{{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>{{$t('message.messageCenter.noMsg')}}</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="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: "17"
      // },{
      //   label: "访客通知",
      //   value: "18"
      // }],
      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.$t('message.messageCenter.msgCenter')
    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(this.$t('message.messageCenter.hintContent'),this.$t('message.messageCenter.hint'), {
          confirmButtonText: this.$t('message.messageCenter.confirm'),
          cancelButtonText: this.$t('message.messageCenter.cancel'),
          type: 'warning'
        }).then(() => {
           deleteNoticeApi({id: val.id}).then(res=>{
             if(res.code == 200){
               this.$message({
                  type: 'success',
                  message: this.$t('message.messageCenter.removeSuccess')
                });
                this.getListData();
             }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('message.messageCenter.cancelRemove')
          });          
        });
    },
    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: 200px;
  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);
  overflow: auto;

  /deep/.el-input__inner{
    background: #fff;
    color: #000;
  }
}
</style>