bloodCollectionAdmin/src/components/system/OperationLog.vue

<template>
  <div id="operationLog">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>操作日志</BreadcrumbItem>
    </Breadcrumb>
    <div class="toolBar">
      <Input type="text" placeholder="请输入账号或者用户操作" style="width: 200px" v-model="inputAccount"/>
      <Button type="primary" icon="md-search" @click="search">查询</Button>
    </div>
    <div>
      <Table border :columns="columns" :data="dataList"></Table>
    </div>
    <div class="pages">
      <Page :total="100" show-total show-elevator/>
    </div>
  </div>
</template>

<script>
    export default {
        name: "OperationLog",
        data(){
          return{
            inputAccount:'',
            /*配置表格*/
            columns: [
              {title: '操作日期', key: 'name',},
              {title: '账号', key: 'name'},
              {title: '用户操作', key: 'name'},
              {title: '请求方法', key: 'name'},
              {title: '请求参数', key: 'name'},
              {title: '请求时长（毫秒）', key: 'name'},
              {title: 'IP地址', key: 'name'},
            ],
            dataList: [
              {name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park'},
              {name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park'},
              {name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park'},
              {name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park'}],
          }
        },
      mounted(){},
      methods:{
          search(){
            this.$Message.info('查询');
          }
      }
    }
</script>

<style scoped>
  #operationLog{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #operationLog .bread{
    font-size: 13px;
    white-space: nowrap;
  }
  #operationLog .toolBar{
    margin: 34px 0 10px 0;
    white-space: nowrap;
  }
  #operationLog .toolBar button{
    margin-left: 10px;
  }
  #operationLog .pages{
    padding: 30px 0;
    text-align: center;
  }
</style>