platform-customsdeclaration-ssr/pages/severPage/customer/index.vue

<template>
  <div class="customer-view">
    <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>
        <!--<el-input style="width:400px" placeholder="请输入客户名称进行查询" v-model="key" @keyup.native.enter='searchSheet'>-->
          <!--<el-button slot="append" @click.native="searchSheet">搜索</el-button>-->
        <!--</el-input>-->
        <a @click="updateItem()"><i class="border_radius">+</i>客户资料新增</a>
      </div>

    </div>
    <ctable
      :headArr="headArr"
      :StyleWidth="StyleWidth"
      :data="tableData"
      :totalElements="totalElements"
      @handleCurrentChange="handleCurrentChange"
      :currentPage="currentPage"
      :controlArray="controlArray"
      @updateItem="updateItem"
      @lookItem="lookItem"
    >

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

<script>
  import { clone, Vuehttp } from '@/utils/tools'
  import { Ctable } from '@/components/base/table'
  import { CtableClass } from '@/utils/CtableClass'
  export default {
    name: 'CustomerView',
    data() {
      return {
        key: '',
        currentPage: 1
      }
    },
    components: {
      Ctable
    },
    fetch({store}) {
      return Promise.all([
        store.dispatch('loadcustomerInfo', {count: 10, page: 1})
      ])
    },
    computed: {
      headArr() {
        return ['客户名称', '成交方式', '发票类型', '发票地址', '发票电话', '操作']
      },
      StyleWidth() {
        return [180, 120, 158, 358, 148, 200]
      },
      tableData() {
        return CtableClass(this.getHttpResource, ['companyName', 'transactionMode', 'billType', 'address', 'telephone', '操作'])
      },
      getHttpResource() {
        return this.$store.state.customer.list.data.content.content || []
      },
      totalElements() {
        return this.$store.state.customer.list.data.content.totalElements || 0
      },
      controlArray() {
        return [['编辑', 'updateItem'],['查看', 'lookItem']]
      }
    },
    methods: {
      // 分页调整数据
      handleCurrentChange (page) {
        this.currentPage = page
        this.$store.dispatch('loadcustomerInfo', {count: 10, page: this.currentPage, keyword: this.key})
      },
      updateItem(item) {
        if (item === undefined) {
          this.$store.commit('customer/REQUEST_DETAILS_ERROR')
          this.$router.push('/severPage/customer/-1')
        } else {
          item = this.getHttpResource[item]
          this.$router.push(`/severPage/customer/${item.id}?type=update`)
        }
      },
      lookItem(item) {
        item = this.getHttpResource[item]
        this.$router.push(`/severPage/customer/${item.id}?type=look`)
      },
      searchSheet() {
        this.handleCurrentChange(1)
      }
    },
    mounted() {
      // this.addItem()
    }
  }
</script>

<style type="text/scss" lang="scss">
  .el-input .el-input-group__append {
    width: 100px;
    color: #fff;
    background: #1890ff;
    text-align: center;
  }
</style>