oms/src/components/byLog/byLog.vue

<template>
  <div class="log">
    <div class="log-main">
      <div class="log-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="log-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>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class ByLog extends VueViews {
  config:any={}
  data:Array<any>=[];
  load=false;
  formValue:any;
  page = {
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
  }

  mounted(){
    this.request();
    if(this.parentValue){
      this.setBillValue(this.parentValue);
    }
  }
  resertPage(){
    this.page={
      pageNo: 1, //当前页
      pageSize: 20, //每页条数
      total: 0 //总条数
    }
  }
  setBillValue(v:any){
    this.formValue = v;
  }
  handleCurrentChange(v:number){
    this.page.pageNo = v;
    this.request();
  }
  request(){
    if(!this.requestConfig || !this.requestConfig.url){
      return
    }
    if(!this.formValue || !this.formValue.orderNumber){
      return
    }
    let parame = (this as any).$lodash.cloneDeep(this.requestConfig);
    parame.params={
      docId:this.formValue.orderNumber,
      pageNo:this.page.pageNo,
      pageSize:this.page.pageSize
    }
    parame.success = (res:any) => {
      this.load = false;
      if(res.data && res.data.records){
        this.data = res.data.records;
      }
      this.page.pageNo = res.data.current;
      this.page.total = res.data.total;
    }
    parame.fail = () => {
      this.load = false;
    }
    this.load = true;
    this.requestHandle(parame);
  }
}
</script>

<style lang="scss" scoped>
.log{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  .log-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;
      
    }
  }
  .log-main{
    height: calc(100% - 50px);
    overflow-y: auto;
  }
  .log-page{
    height:50px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
  }
}

</style>

<style lang="scss">
.log-desc{
  .mData{
    font-style: italic;
  }
  .mCode{
    font-size: 14px;
    font-weight: 700;
  }
  .mNum,.mPrice{
    font-size: 14px;
    font-weight: 700;
    color: #F00;
  }
  .mCont{
    font-size: 14px;
    font-weight: 700;
  }
}

</style>