LT-MES-VUE/src/views/modules/board/delNotifyBoard.vue

<template>
  <div class="mod-config">
    <div style="text-align: center">
      <h1>本周发货预警</h1>
    </div>
    <div class="tableBoard">
      <!--      @mouseenter.native="mouseEnter"-->
      <!--      @mouseleave.native="mouseLeave"-->
      <el-table
        cell-style="cc"
        :height="height"
        :data="tableData"
        :row-class-name="tableRowClassName"
        ref="wt_table"
        border
        style="width: 100%;">
        <el-table-column
          prop="notifyDate"
          header-align="center"
          align="left"
          min-width="45"
          style="font-size: 20px"
          label="发货日期">
        </el-table-column>
        <el-table-column
          prop="delNotifyNo"
          header-align="center"
          align="left"
          min-width="45"
          label="发货单号">
        </el-table-column>
        <el-table-column
          prop="customerID"
          header-align="center"
          align="left"
          min-width="40"
          label="客户编码">
        </el-table-column>
        <el-table-column
          prop="customerDesc"
          header-align="center"
          align="left"
          min-width="120"
          style="font-size: 20px"
          label="客户名称">
        </el-table-column>
        <el-table-column
          prop="pickupStatus"
          header-align="center"
          align="left"
          min-width="45"
          label="配货状态">
        </el-table-column>
        <el-table-column
          prop="notifyQty"
          header-align="center"
          align="right"
          min-width="40"
          label="发货单数量">
        </el-table-column>
        <el-table-column
          prop="qtyRequired"
          header-align="center"
          align="right"
          min-width="40"
          label="已排产数量">
        </el-table-column>
        <el-table-column
          prop="qtyReported"
          header-align="center"
          align="right"
          min-width="40"
          label="入库数量">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="left"
          min-width="60"
          label="预警状态">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  let rollstop = ''
  let rolltimer = ''// 自动滚动的定时任务
  let refresher = '' //数据刷新定时器
  import {
    getDelNotifyBoardData,
  } from '@/api/board.js'
  export default {
    name: 'delNotifyBoard',
    data () {
      return {
        pageIndex: 1,
        totalPage: 1,
        height: 200,
        tableData: [],
        // 默认的刷新，滚动时间，滚动间距
        // refreshTime: 5,
        // rollTime: 5,
        // rollPx: 1,
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 80
      })
    },
    methods: {
      getFormatterNumber (row, column){
        // if(parseInt(row.weightperBag)==row.weightperBag){
        //   return parseInt(row.weightperBag);
        // }else{
        //   return row.weightperBag.toFixed(3);
        // }
      },
      tableRowClassName ({row, rowIndex}) {
        let date =new Date(this.dayjs().format('YYYY-MM-DD').replace('-', '/'));
        let notifyDate = new Date(row.notifyDate.replace('-', '/'))
        if (date>notifyDate) {
          return 'yellow-row'
        }

      },
      search () {
        let inData= {number:this.pageIndex};
        getDelNotifyBoardData(inData).then(({data}) => {
          this.tableData = data.rows;
          this.totalPage= data.maxPage;
          if(this.pageIndex+1>data.maxPage){
            this.pageIndex=1
          }else {
            this.pageIndex=Number(this.pageIndex)+Number(1)
          }
        })
      },
      // 鼠标进入
      // mouseEnter (time) {
      //   // 鼠标进入停止滚动和切换的定时任务
      //   this.autoRoll(true)
      // },
      // 鼠标离开
      //       mouseLeave () {
      //         // 开启
      //         this.autoRoll()
      //       },
      // 设置自动滚动
      //       autoRoll (stop) {
      //         if (stop) {
      //           clearInterval(rolltimer)
      //           return
      //         }
      //
      //         // 拿到表格挂载后的真实DOM
      //         const table = this.$refs.wt_table
      //         // 拿到表格中承载数据的div元素
      //         const divData = table.bodyWrapper
      //         // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      //         rolltimer = setInterval(() => {
      //           // 元素自增距离顶部像素
      //           divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
      //           // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      //           if (divData.clientHeight + divData.scrollTop +1>= divData.scrollHeight) {
      //             // 重置table距离顶部距离
      //
      //               divData.scrollTop = 0
      //
      //           }
      //         }, this.rollTime * 10)
      //       },
      refreshTable () {
        refresher = setInterval(() => {
          this.search()
        }, 10000)
      }
    },
    created () {
      this.search()
      this.refreshTable()
    }
  }
</script>

<style >
  .tableBoard .el-table .cell {
    line-height: 13px;
    font-size: 12px;
    height: 13px;
    padding: 0px;
  }


  .tableBoard .el-table .yellow-row {
    background: #cbc60e;
  }
  .tableBoard .el-table .false-row {
    background: #db1212;
  }

</style>