llh_project/src/views/duty/duty.vue

<template>
  <div id="duty">
    <el-row class="register">
      <el-col :span="24" class="btn">
        <el-col :span="20"><h3>责任认定</h3></el-col>
      </el-col>
      <el-col :span="24" class="search">
        <el-col :span="3" class="searchSel">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="输入用户信息"></el-input></el-col>
        <el-col :span="13" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
        <el-col :span="1"><el-button type="success" icon="el-icon-plus">认证报告批量导出</el-button></el-col>
      </el-col>
      <el-col>
        <el-table :data="tableData" style="width: 100%" border type="selection">
          <el-table-column align="center" type="selection" width="40"> </el-table-column>
          <el-table-column align="center" prop="user" label="用户" width="200"> </el-table-column>
          <el-table-column align="center" prop="behavior" label="行为"> </el-table-column>
          <el-table-column align="center" prop="type" label="类型"> </el-table-column>
          <el-table-column align="center" label="操作">
            <el-button type="text" @click="dialogTableVisible = true">查看日志</el-button>
            <el-button type="text">定位失信行为</el-button>
            <el-button type="text">警告</el-button>
            <el-button type="text">生成报告 </el-button>
          </el-table-column>
        </el-table>
        <el-col class="paging">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="查看日志详情" fullscreen :visible.sync="dialogTableVisible">
      <el-table :data="dialogData">
        <el-table-column align="center" property="time" label="时间"></el-table-column>
        <el-table-column align="center" property="place" label="地点"></el-table-column>
      </el-table>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { log } from 'util';
export default {
  name: 'duty',
  props: {},
  components: {},
  data: () => ({
    options: [
      {
        value: '选项1',
        label: '行为',
      },
      {
        value: '选项2',
        label: '类型',
      },
    ],
    tableData: [
      {
        user: 'Zedc',
        behavior: '登录',
        type: '普通行为',
      },
      {
        user: 'Abc',
        behavior: '修改',
        type: '普通行为',
      },
      {
        user: 'aBc',
        behavior: '删除',
        type: '关键行为',
      },
      {
        user: 'abC',
        behavior: '登录',
        type: '关键行为',
      },
    ],
    dialogData: [
      { time: '时间：2018年9月1日上午9：40', place: '长春' },
      { time: '时间：2018年12月3日下午5：23', place: '北京' },
      { time: '时间：2019年3月28日下午9：52', place: '深圳' },
      { time: '时间：2019年6月17日上午11：20', place: '上海' },
    ],
    input: '',
    dialogTableVisible: false,
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="scss" scoped>
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
.register {
  width: 100%;
  padding: 20px;
}
.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 20px 0;
}
.search {
  height: 40px;
  line-height: 40px;
  margin: 0 0 20px 0;
}
.searchSel .el-select {
  border-radius: 0;
}
/deep/.searchInp .el-input__inner {
  border-radius: 0;
}
.searchBtn .el-button {
  border-radius: 0;
}
.paging {
  text-align: right;
  margin: 10px 0;
}
</style>