peko-admin-web/src/views/users/UserRecordAdminView.vue

<template>
  <section class="content">
    <div class="box box-primary">
      <div class="box-body">
        <section class="content-header">
          <h1 id="itemTitle"></h1>
        </section>
        <section class="content">
          <div id="table"></div>
          <div id="toolbar">
            平台号:<input type="text"
                   class="input-sm validate[required]"
                   name="erbanNo"
                   id="erbanNo">
            手机号:<input type="text"
                   class="input-sm validate[required]"
                   name="phone"
                   id="phone">
            设备号:<input type="text"
                   class="input-sm validate[required]"
                   name="deviceId"
                   id="deviceId">
            查询类型:<select name="loginType"
                    id="loginType"
                    class="input-sm">
              <option value="">---全部---</option>
              <option value="1">微信登录</option>
              <option value="2">qq登录</option>
              <option value="3">手机号登录</option>
              <option value="4">一键登录</option>
              <option value="5">苹果登录</option>
              <option value="6">ticket登录</option>
            </select>
            <button id="btnSearch"
                    class="btn btn-sm btn-primary">查询</button>
          </div>
        </section>
      </div>
    </div>
  </section>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
  name: "UserRecordAdminView",
  setup () {
    return {};
  },
  created () {
    this.$nextTick(function () {
      this.initData();
    });
  },
  methods: {
    initData () {
      $(function () {
        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
          columns: [
            { field: 'recordId', title: 'recordId', align: 'center', valign: 'middle', width: '5%' },
            { field: 'phone', title: '手机号', align: 'center', valign: 'middle', width: '5%' },
            { field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '5%' },
            {
              field: 'loginType',
              title: '登录类型',
              align: 'center',
              width: '10%',
              valign: 'middle',
              formatter: function (val, row, index) {
                switch (val) {
                  case 1:
                    return '微信登录';

                  case 2:
                    return 'QQ登录';

                  case 3:
                    return '手机登录或者平台号登录';

                  case 4:
                    return '一键登录';

                  case 5:
                    return '苹果登录';

                  case 6:
                    return '冷启动';

                  case 7:
                    return '账号密码登录';

                  case 8:
                    return '谷歌登录';

                  case 9:
                    return 'line登录';

                  case 10:
                    return 'fackbook登录';
                }
              }
            },
            {
              field: 'loginIp',
              title: '登录IP',
              align: 'center',
              width: '10%',
              valign: 'middle'
            },
            {
              field: 'loginIpRegion',
              title: '登录IP地区',
              align: 'center',
              width: '10%',
              valign: 'middle'
            },
            /*{
                field: 'weixinOpenid',
                title: '微信号',
                align: 'center',
                width: '10%',
                valign: 'middle'
            },
            {field: 'qqOpenid',
                title: 'qq号',
                align: 'center', width: '10%',
                valign: 'middle'
            },*/
            {
              field: 'os',
              title: '系统类型',
              align: 'center',
              width: '5%',
              valign: 'middle'
            },
            { field: 'osversion', title: '系统版本', align: 'center', width: '5%', valign: 'middle' },
            { field: 'ispType', title: '运营商类型', align: 'center', width: '5%', valign: 'middle' },
            { field: 'deviceId', title: '设备号', align: 'center', width: '10%', valign: 'middle' },
            { field: 'model', title: '手机型号', align: 'center', width: '10%', valign: 'middle' },
            {
              field: 'createTime',
              title: '创建时间',
              align: 'center',
              width: '10%',
              valign: 'middle',
              formatter: function (val, row, index) {
                if (val) {
                  var date = new Date(val);
                  return date.format("yyyy-MM-dd hh:mm:ss");
                } else {
                  return '-';
                }
              }
            }
            /*{
                field: 'tmp',
                title: '操作',
                align: 'center',
                width: '20%',
                valign: 'middle',
                formatter: function (val, row, index) {
                    var key = row.blockId;
                    return "<button class='btn btn-sm btn-success opt-release'  data-id=" + key + ">解封</button>&nbsp;&nbsp;"+
                            "<button class='btn btn-sm btn-success opt-edit'  data-id=" + key + " >编辑</button>";
                }
            }*/
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 20,
          pagination: true,
          pageList: [20, 30, 50],
          sidePagination: "server", //表示服务端请求
          queryParamsType: "undefined",
          queryParams: function queryParams (params) {   //设置查询参数
            var param = {
              pageSize: params.pageSize,
              pageNum: params.pageNumber,
              phone: $('#phone').val(),
              erbanNo: $('#erbanNo').val(),
              deviceId: $('#deviceId').val(),
              loginType: $('#loginType').val(),
            };
            return param;
          },
          uniqueId: 'code',
          toolbar: '#toolbar',
          url: '/admin/accountLoginRecord/list',
          onLoadSuccess: function () {  //加载成功时执行
            console.log("load success");
          },
          onLoadError: function () {  //加载失败时执行
            console.log("load fail");
          }
        })

        /*查询刷新*/
        $('#btnSearch').on('click', function () {
          TableHelper.doRefresh('#table');
        })
      })
    }
  },

};
</script>

<style scoped>
.bar1,
.bar2 {
  margin-bottom: 10px;
}

label.col-sm-1 {
  padding: 0;
  line-height: 30px;
  text-align: right;
  /*padding-right: 4px;*/
}

label.col-sm-1 {
  padding: 0;
  line-height: 30px;
  text-align: right;
  /*padding-right: 4px;*/
}

input,
select {
  margin-left: 8px;
  margin-right: 8px;
}

#btnSearch {
  margin-left: 36px;
}

.record {
  margin-top: 10px;
}

.record .title {
  font-size: 16px;
}
</style>