FE-V2-PC/src/views/message.vue

<!--消息-->
<template>
  <div class="app-container manageInformation">
    <div class="top-title-box">
      <p class="color_one">消息</p>
      <i class="right-top-button el-icon-close" @click="backPage"></i>
    </div>
    <div class="table-box">
      <el-table v-loading="loading" border :data="hardwareList" @selection-change="handleSelectionChange">
        <el-table-column label="发送人" align="left" prop="sendName" width="200"/>
        <el-table-column label="发送时间" align="left" prop="createTime" width="270"/>
        <el-table-column label="发送内容" align="left" prop="meaasgeContext">
          <template slot-scope="scope">
            <el-collapse v-if="scope.row.meaasgeContext.length>70">
              <el-collapse-item title="点击查看">
                <div v-html="scope.row.meaasgeContext"></div>
              </el-collapse-item>
            </el-collapse>
            <span v-else>{{scope.row.meaasgeContext}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { myAlllistContent } from "@/api/laboratory/content";
  export default {
    props:{
      videoData:[],
    },
    name: 'manageInformation',
    data() {
      return {
        // 遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
        },
        // 总条数
        total: 1,
        // 表格数据
        hardwareList: [],
        demoTex:"点击查看"
      }
    },
    created() {
      this.hardwareList = this.getList();
    },
    mounted(){

    },
    methods: {
      backPage(){
        this.$parent.pageSwitchOff();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 查询列表 */
      getList() {
        // this.loading = false;
        this.loading = true;
        myAlllistContent(this.queryParams).then(response => {
          this.hardwareList = response.rows;
          for(let i=0;i<this.hardwareList.length;i++){
            this.hardwareList[i].collapseType = false;
            this.hardwareList[i].meaasgeContext = unescape(this.hardwareList[i].meaasgeContext);
          }
          this.total = response.total;
          this.loading = false;
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .manageInformation{
    flex:1;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    margin:20px 20px;
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    p{
      margin:0;
    }
    .top-title-box{
      border-bottom: 1px solid #E0E0E0;
      position: relative;
      .color_one{
        line-height:60px;
        padding-left:20px;
      }
      .right-top-button{
        height:30px;
        width:30px;
        font-size:20px;
        line-height:30px;
        text-align: center;
        color:#999;
        border-radius:50%;
        position: absolute;
        top:10px;
        right:10px;
      }
      .right-top-button:hover{
        background: #999;
        color:#fff;
        cursor:pointer;
      }
    }
    .table-box{
      overflow: hidden;
      padding:20px;
      flex:1;
      display: flex;
      flex-direction: column;
    }
  }
</style>