epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/manage/CustomerList.vue

<template>
  <div class="registerList">
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="mod-demo__demo}">
        <el-form :inline="true"
                 :model="tableParams"
                 @keyup.enter.native="loadData()">
          <el-form-item>
            <el-input v-model="tableParams.customerName"
                      placeholder="组织名称">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="loadData()">查询</el-button>
          </el-form-item>
        </el-form>

        <c-table column-type=""
                 ref="table"
                 :url="tableUrl"
                 :params="tableParams"
                 keyword="CustomerList"
                 :operations="operations"
                 :tableHeight="tableHeight"
                 :operationWidth="80"
                 @config="config"
                 @edit="edit">
        </c-table>
      </div>
    </el-card>
    <edit-form ref="ref_edit_form"
               @refresh="loadData"></edit-form>
    <config-form ref="ref_config_form"
                 @refresh="loadData"></config-form>
  </div>
</template>

<script>
import CTable from '@c/CTable'
import EditForm from './EditForm'
import ConfigForm from './ConfigForm'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      // 列表相关
      tableUrl: '/oper/crm/customer/customerlist',
      // tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/crm/customer/customerlist',
      tableParams: {
        customerName: ''
      },
      // 列表操作栏的操作项数组
      operations: [
        {
          lable: '修改', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'edit', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '配置', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'config', // 回调方法名称
          isShow: (row) => {
            return true
          }
        }
      ],

      // 列表数据
      tableData: [

      ]

    }
  },
  components: {
    CTable, EditForm, ConfigForm
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 解决表格错位
    })
  },
  mounted () {
    // eslint-disable-next-line
    this.loadData()
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 70
    },
    ...mapGetters(['clientHeight', 'env'])
  },
  methods: {
    // 获取列表数据
    loadData () {
      this.$refs.table.loadData()
    },
    // 修改
    edit (row) {
      this.$refs['ref_edit_form'].initData(row)
    },

    // 网格数、有效期配置
    config (row) {
      this.$refs['ref_config_form'].initData(row)
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>
<style lang="css">
.aaa {
  height: 100px;
}
/* .register .el-table .el-table__header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}*/
/*
.register .el-table .el-table__fixed-body-wrapper {
  height: calc(100% - 44px);
  margin-top: 44px;
  overflow-y: auto !important;
} */
</style>