usoft-town/pages/repairs/_id/historicalInfo/index.vue

<template>
  <div class="historical-info">
    <div class="container">
      <div class="historical-top">
        <p>历史服务申请</p>
        <div class="top-list">
          <div class="list-left">
            <span>全部</span>
          </div>
          <div class="list-right">
            <span>共&nbsp;<b>{{ searchList ? searchList.listdata.length : '0' }}</b>&nbsp;条</span>
            <div class="nav-search">
              <input type="text">
              <i class="fa fa-search"/>
            </div>
          </div>
        </div>
      </div>
      <table class="table table-hover">
        <thead class="text-center">
          <tr style="background: #efefef;">
            <th class="text-center" v-for="list in searchList.columns">{{ list.caption }}</th>
          </tr>
        </thead>
        <tbody class="text-center" >
          <tr v-for="(item, index) in searchList.listdata" @click="onclick(index)">
            <td v-for="(sun, num) in searchList.columns">{{ item[searchList.columns[num].dataIndex] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'HistoricalInfo',
      layout: 'town',
      fetch ({ store, route }) {
        return Promise.all([
          store.dispatch('searchServiceList', { serve_id: route.params.id, page: 1, pageSize: 20, _self: true, client_type: 'cc', cityId: store.state.option.user.data.currentCity ? store.state.option.user.data.currentCity.id : null })
        ])
      },
      data () {
        return {
          page: 1,
          pageSize: 20
        }
      },
      computed: {
        searchList () {
          return this.$store.state.searchList.listData.data
        }
      },
      methods: {
        onclick (index) {
          let _self = this
          _self.$router.push('/repairs/' + _self.$route.params.id + '/historicalInfo/' + _self.searchList.listdata[index].rp_id)
        }
      }
    }
</script>

<style scoped>
.historical-info{
  margin-top:54px;
  border-bottom:8px solid #d5d5d5;
  color:#333;
}
.historical-info .container{width:1180px;}
.historical-info .historical-top{
  padding-top:40px;
  margin-bottom:12px;
}
.historical-info .historical-top p{
  padding-left:10px;
  font-size: 24px;
  color:#333;
  margin-bottom:25px;
}
.historical-info .historical-top .top-list{
  display:inline-flex;
  width:100%;
  justify-content:space-between;
}
.historical-info .historical-top .top-list .list-left span{
  display:inline-block;
  height:40px;
  line-height:40px;
  margin:0 14px;
  border-bottom:5px solid transparent;
}
.historical-info .historical-top .top-list .list-left span:hover{
  color:#d82128;
  border-bottom:5px solid #d82128;
  cursor:pointer;
}
.historical-info .historical-top .top-list .list-right{
  line-height: 40px;
}
.historical-info .historical-top .top-list .list-right span{
  margin-right:20px;
}
.historical-info .historical-top .top-list .list-right span b{
  color:#d82128;
}
.historical-info .historical-top .top-list .list-right .nav-search{
  display:inline-block;
  position:relative;
  margin-right:20px;
  padding-right:20px;
}
.historical-info .historical-top .top-list .list-right .nav-search i{
  position:absolute;
  font-weight: bold;
  top:12px ;
  right:25px;
  color:#9e9e9e;
}
.historical-info .historical-top .top-list .list-right .nav-search input{
  border-right:1px solid #ddd;
  border-radius: 10px;
  width:112px;
  height:24px;
  line-height: 22px;
  font-size: 14px;
  padding:0 20px 0 5px ;
}
</style>