feat(record): online status filter

src/views/device/record/index.vue

@@ -5,161 +5,42 @@
     padding
     background
   >
-    <div
-      v-loading="options.loading"
-      class="l-flex__auto l-flex--col"
+    <grid-table
+      ref="table"
+      size="large"
+      :schema="schema"
     >
-      <div class="l-flex__none l-flex--row has-bottom-padding">
-        <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 class="l-flex__auto c-sibling-item" />
-        <div class="l-flex__none l-flex--row c-sibling-item">
-          <search-input
-            v-model.trim="options.params.name"
-            class="c-sibling-item"
-            placeholder="设备名称"
-            @search="getDevices"
-          />
-          <button
-            class="c-sibling-item near o-button"
-            @click="getDevices"
-          >
-            搜索
-          </button>
-        </div>
-      </div>
-      <div
-        class="l-flex__self c-record-grid u-overflow-y--auto"
-        :class="gridClass"
-      >
+      <grid-table-item v-slot="item">
         <device-player
-          v-for="item in options.list"
-          :key="item.identifier"
           :device="item"
           controls
         />
-      </div>
-      <pagination
-        :total="options.totalCount"
-        :page.sync="options.params.pageNum"
-        :limit.sync="options.params.pageSize"
-        @pagination="getDevices"
-      />
-      <status-wrapper
-        v-if="isAbnormal"
-        :error="options.error"
-        @click="getDevices"
-      />
-    </div>
+      </grid-table-item>
+    </grid-table>
   </wrapper>
 </template>
 
 <script>
 import { getDevices } from '@/api/device'
-import { createListOptions } from '@/utils'
 
 export default {
   name: 'DeviceRecord',
   data () {
     return {
-      options: createListOptions({ activate: 1, pageSize: 4, name: '' })
-    }
-  },
-  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
-      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
+      schema: {
+        pageSize: 9,
+        list: getDevices,
+        condition: { activate: 1, onlineStatus: 1 },
+        filters: [
+          { key: 'onlineStatus', type: 'select', options: [
+            { value: void 0, label: '所有' },
+            { value: 1, label: '在线' }
+          ] },
+          { key: 'name', placeholder: '设备名称', type: 'search' },
+          { type: 'refresh' }
+        ]
       }
-      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-record-grid {
-  display: grid;
-  grid-template-rows: max-content;
-  grid-row-gap: 4px;
-  grid-column-gap: 4px;
-
-  &.one {
-    grid-template-columns: 1fr;
-  }
-
-  &.four {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  &.nine {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-}
-</style>