platform-customsdeclaration-ssr/components/common/searchCustoms.vue

<template>
  <div>
    <div class="headline">
      <span>关务汇总单</span>
      <div class="search_time">
        <el-input style="width:400px" placeholder="请输入品牌/型号/商品名称进行查询" v-model="key" @keyup.native.enter='searchSheet'>
          <el-button slot="append" @click.native="searchSheet">搜索</el-button>
        </el-input>
      </div>
    </div>
    <ctable :data="tableData"
            :headArr="headArr"
            :StyleWidth="StyleWidth"
            :controlArray="controlArray"
            :totalElements="totalElements"
            @handleCurrentChange="handleCurrentChange"
            :currentPage="currentPage"
    >

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

<script>
  import { Ctable } from '@/components/base/table'
  import { CtableClass } from '@/utils/CtableClass'
  export default {
    name: 'SearchSever',
    data () {
      return {
        key: '',
        currentPage: 1,
        count: 10
      }
    },
    computed: {
      headArr() {
        return ['序号', '单号', '时间', '来源单号', '操作']
      },
      StyleWidth() {
        return [70, 210, 280, 340, 264]
      },
      controlArray() {
        return [
          ['报关单', '/facilitator/customerHouseServiceSheet/down?id='],
          ['合同', 'http://print.ubtob.com/report/print?userName=CUSTOMS&profile=test&reportName=CONTRACT&whereCondition=where id='],
          ['发票', 'http://print.ubtob.com/report/print?userName=CUSTOMS&profile=test&reportName=INVOICE&whereCondition=where id=']
        ]
      },
      sheetList () {
        return this.$store.state.customerHouse.list.data.content
      },
      totalElements() {
        return this.$store.state.customerHouse.list.data.content.totalElements
      },
      tableData() {
        return CtableClass(this.sheetList.content, ['序号', 'sheetNoSuffix', ['时间戳', 'createTime'], 'sourceSheet', ['报关单', 'id']])
      },
    },
    methods: {
      // 分页调整数据
      handleCurrentChange (page) {
        this.currentPage = page
        this.$store.dispatch('loadCustomsInfo', {count: this.count, page: this.currentPage, keyword: this.key})
      },
      // 数据详情跳转
      detailsInfo (type) {
        this.$router.push('/severPage/elements/' + type.id)
      },
      // 搜索内容
      searchSheet () {
        this.handleCurrentChange(1)
      }
    },
    components: {
      Ctable
    }
  }
</script>

<style type="text/scss" lang="scss">
.search-history{
  .search{
    margin-bottom:50px;
    position:relative;
    .el-input{
      max-width:50%;
    }
    .add{
      position:absolute;
      right:60px;
    }
  }
}
.block {
  padding-top:20px;
  text-align: right;
}
.dialog{
  .el-input{
    width:100%;
  }
}
.el-pagination {
  .el-pagination__jump .el-input{
    width: 60px !important;
  }
}
.el-input{
  .el-input-group__append{
    width:100px;
    color:#fff;
    background: #1890ff;
    text-align: center;
  }
}
  .el-table{
    thead{
      color:#686c75;
      font-weight: bold;
      th{
        background: #f6f6f6;
      }
    }
  }
</style>