oms/src/views/audit/sku/components/inStoreRecord.vue

<template>
  <el-drawer class="storeRecord" :size="600" append-to-body title="入库记录" :visible.sync="drawer" direction="rtl">
    <div class="record-main">
        <div class="re-box">
          <div class="record-row" v-for="(item,index) of data" :key="index">
            <div class="log-time"><i class="el-icon-time"></i> {{item.createTime}}</div>
            <div class="log-user"><i class="el-icon-user"></i> {{item.optUser}}</div>
            <div class="log-act"><i class="el-icon-setting"></i> {{item.optName}}</div>
            <div class="log-desc" v-html="item.optDesc"></div>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-size="page.pageSize"
            :total="page.total">
          </el-pagination>
        </div>
    </div>
  </el-drawer>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component({components:{}})
export default class InStoreRecord extends Vue {
  drawer=false
  data:Array<any>=[]
  value:any={}
  page = {
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  handleCurrentChange(v:number){
    this.page.pageNo = v
  }
  setShow(v:boolean){
    this.drawer = v
  }
  setData(data:any){
    this.value = data
  }
}
</script>

<style scoped lang="scss">
  .record-main{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    .re-box{
      height: calc(100% - 50px);
      overflow-y: auto;
      .record-row{
        width: 100%;
          display: flex;
          flex-flow: wrap;
          font-size: 14px;
          padding: 16px 0;
          border-bottom: dotted 1px #CCC;
          .log-time{
            width: 170px;
            color: #666;
          }
          .log-user{
            width: 120px;
            padding-right: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #666;
          }
          .log-act{
            width: 130px;
            padding-right: 8px;
            overflow: hidden;
            white-space: nowrap;
            color: #666;
            text-overflow: ellipsis;
          }
          .log-desc{
            // min-width: 150px;
            width: 100%;
            font-size: 12px;
            padding-top: 8px;
            // display: flex;
            // flex-wrap: wrap;
            
          }
      }
    }
    .page{
      height:50px;
      display: flex;
      align-items: flex-end;
      flex-direction: column;
      justify-content: center;
    }
  }
</style>
<style lang="scss">
.storeRecord {
		.el-drawer__body {
			height: calc(100% - 63px);
		}
	}
</style>