smsb-web-develop/src/views/device/back/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <div
      v-loading="options.loading"
      class="l-flex__auto l-flex--col"
    >
      <div class="l-flex__none l-flex--row has-bottom-padding">
        <div class="l-flex__auto c-sibling-item" />
        <div class="l-flex__none c-sibling-item">
          <svg-icon
            class="c-sibling-item o-menu-icon u-pointer"
            :class="{ active: gridClass === 'one' }"
            icon-class="menu-one"
            @click="onChange(1)"
          />
          <svg-icon
            class="c-sibling-item o-menu-icon u-pointer"
            :class="{ active: gridClass === 'four' }"
            icon-class="menu-four"
            @click="onChange(4)"
          />
          <svg-icon
            class="c-sibling-item o-menu-icon u-pointer"
            :class="{ active: gridClass === 'nine' }"
            icon-class="menu-nine"
            @click="onChange(9)"
          />
        </div>
      </div>
      <div class="l-flex__auto u-overflow-y--auto">
        <div
          class="c-back-grid"
          :class="gridClass"
        >
          <device-player
            v-for="item in options.list"
            :key="item.identifier"
            :device="item"
          >
            <div class="o-video__tag" />
            <div class="c-footer u-ellipsis">{{ item.name }}</div>
          </device-player>
        </div>
        <pagination
          :total="options.totalCount"
          :page.sync="options.params.pageNum"
          :limit.sync="options.params.pageSize"
          @pagination="getDevices"
        />
      </div>
      <status-wrapper
        v-if="isAbnormal"
        :error="options.error"
        @click="getDevices"
      />
    </div>
  </wrapper>
</template>

<script>
import { getDevices } from '@/api/device'
import { createListOptions } from '@/utils'

export default {
  name: 'Back',
  data () {
    return {
      options: createListOptions({ activate: 2, pageSize: 4 })
    }
  },
  computed: {
    gridClass () {
      switch (this.options.params.pageSize) {
        case 4:
          return 'four'
        case 9:
          return 'nine'
        default:
          return 'one'
      }
    },
    isAbnormal () {
      const options = this.options
      return options.error || !options.loading && options.list.length === 0
    }
  },
  created () {
    this.getDevices()
  },
  methods: {
    getDevices () {
      const options = this.options
      options.error = false
      options.loading = true
      options.list = []
      getDevices(options.params).then(
        ({ data, totalCount }) => {
          options.totalCount = totalCount
          options.list = data
        },
        () => {
          options.error = true
          options.totalCount = 0
          options.list = []
        }
      ).finally(() => {
        options.loading = false
      })
    },
    onChange (num) {
      const params = this.options.params
      if (num === params.pageSize) {
        return
      }
      params.pageSize = num
      params.pageNum = 1
      this.getDevices()
    }
  }
}
</script>

<style lang="scss" scoped>
.o-menu-icon {
  color: #d5d9e4;
  font-size: 32px;

  &.active {
    color: $blue;
  }
}

.c-back-grid {
  display: grid;
  grid-template-rows: max-content;
  grid-row-gap: 4px;
  grid-column-gap: 4px;
  min-height: 0;
  min-width: 0;

  &.one {
    grid-template-columns: 1fr;
  }

  &.four {
    grid-template-columns: 1fr 1fr;
  }

  &.nine {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
</style>