一点存基础查询页面

章志军

<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="filter-container">

      <el-card class="">
        <el-row :gutter="20">

          <el-col :span="6">
            <el-input placeholder="请输入查询名称" v-model="queryInfo.name" clearable @clear="searchUserList" class="input-with-select" :span="6">
              <el-button slot="append" icon="el-icon-search" @click="searchUserList"></el-button>
            </el-input>
          </el-col>

        </el-row>
      </el-card>
      
      <!--搜索框end-->
      <template>
        <!--账户信息列表开始-->
        <el-table
          :data="userlist"  stripe max-height="100%;">
          <el-table-column label="序号" align="left" width="150" type="index"></el-table-column>

          <el-table-column prop="type" label="类型" width="180">
            <template slot-scope="{row: {type}}">
              <span v-if="type === 1">客户</span>
              <span v-else-if="type === 2">公证处</span>
              <span v-else>代理商</span>
            </template>
          </el-table-column>


          <el-table-column prop="name" label="名称" width="180">

<div slot-scope="scope" >
  <router-link  v-if="scope.row.type == 1"
   :to="{path: '/srm/admin/custom/research/view', query: {id:scope.row.common_id }}" >{{scope.row.name}}</router-link>
</div>

<div slot-scope="scope" >
  <router-link v-if="scope.row.type == 2" 
  :to="{path: '/srm/admin/custom/research/gzview', query: {id:scope.row.common_id }}" >{{scope.row.name}}</router-link>
</div>

<div slot-scope="scope" >
<router-link v-if="scope.row.type == 3" 
:to="{path: '/srm/admin/custom/research/dlview', query: {id:scope.row.common_id }}" >{{scope.row.name}}</router-link>
</div>


</el-table-column>
<el-table-column prop="address" label="所在地"></el-table-column>
</el-table>
        <!--账户信息列表end-->

        <!--分页开始-->
        <div class="block elpagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="queryInfo.pageNo"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize">
          </el-pagination>
        </div>
        <!--分页end-->


      </template>

    </div>
  </div>
</template>

<script>
  import request from '@/utils/request';

  export default {
    data() {
      return {
        queryInfo: {
          name: '',
          query:'',
          pageNo:1,
          pageSize:10
        },
        userlist: [],
        totalSize: 0
      }

    },

    created() {
      this.searchUserList()
    },
    methods: {
      handleSizeChange(newSize){
        console.log(newSize)
        this.queryInfo.pageSize = newSize
        this.searchUserList()
      },
      handleCurrentChange(newPage){
        // console.log(newPage)
        this.queryInfo.pageNo = newPage
        this.searchUserList()
      },
      searchUserList() {
        const params = this.queryInfo;
        request({

          url: 'lit/protected/lit/platform_user/searchName',
          method: 'get',
          params
        }).then((result) => {
          console.log(result)
          this.userlist =result.list
          this.totalSize = result.page.totalSize
        })
      }
    }

  }
</script>

<style >
  .el-table--medium td, .el-table--medium th {
    padding: 15px 0!important;
  }
  .elpagination{padding:20px 0;text-align: center;}
  .el-table{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
  }
  .el-table td {
    line-height: 40px!important;
  }
  .el-table tr {
    line-height: 40px!important;
  }
</style>