smsb-web-develop/src/components/table/GridTable/index.vue

<template>
  <div
    v-loading="options.loading"
    class="l-flex__auto l-flex--col c-table"
  >
    <div
      v-if="hasHeader"
      class="l-flex__none l-flex--row c-table__header"
    >
      <div class="l-flex__greedy">
        <slot
          name="header"
          :condition="options.params"
          :total-count="options.totalCount"
        />
        <template v-if="buttons">
          <button
            v-for="(button, index) in buttons"
            :key="index"
            class="o-button"
            @click="onClickButton(button)"
          >
            <i
              v-if="button.icon"
              class="o-button__icon"
              :class="button.icon"
            />
            {{ button.label }}
          </button>
        </template>
      </div>
      <template v-if="filters">
        <div
          v-for="filter in filters"
          :key="filter.key"
          class="l-flex__none l-flex--row c-sibling-item"
        >
          <schema-select
            v-if="filter.type === 'select'"
            v-model="options.params[filter.key]"
            class="o-select"
            :schema="filter"
            @change="onChange"
          />
          <template v-if="filter.type === 'switch'">
            <span class="c-sibling-item">{{ filter.placeholder }}</span>
            <el-switch
              v-model="options.params[filter.key]"
              class="c-sibling-item"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="onChange"
            />
          </template>
          <template v-if="filter.type === 'search'">
            <search-input
              v-model.trim="options.params[filter.key]"
              class="c-sibling-item"
              :placeholder="filter.placeholder"
              @search="onChange"
            />
            <button
              class="c-sibling-item o-button"
              @click="onChange"
            >
              搜索
            </button>
          </template>
        </div>
      </template>
    </div>
    <status-wrapper
      v-if="isAbnormal"
      :error="options.error"
      @click="onPagination"
    />
    <template v-else>
      <grid-table-body
        :data="tableData"
        :item-render="itemRender"
        v-bind="$attrs"
      />
      <pagination
        :total="options.totalCount"
        :page.sync="options.params.pageNum"
        :limit.sync="options.params.pageSize"
        v-bind="paginationConfig"
        @pagination="onPagination"
      />
    </template>
    <slot />
  </div>
</template>

<script>
import tableMixin from '../mixins/table'
import GridTableBody from './GridTableBody'

export default {
  name: 'GridTable',
  components: {
    GridTableBody
  },
  mixins: [tableMixin],
  data () {
    return {
      itemRender: null
    }
  },
  computed: {
    pageSize () {
      return this.schema.pageSize || 8
    },
    isAbnormal () {
      const options = this.options
      return options.error || !options.loading && options.totalCount === 0
    }
  },
  methods: {
    setItemRender (render) {
      this.itemRender = render
    }
  }
}
</script>