feat: group by product on the publishing page

src/components/tree/DeviceGroupTree/index.vue

@@ -8,13 +8,17 @@
       class="c-tabs has-bottom-padding"
     >
       <el-tab-pane
-        label="分组"
+        label="按分组"
         name="group"
       />
       <el-tab-pane
-        label="分辨率"
+        label="按分辨率"
         name="ratio"
       />
+      <el-tab-pane
+        label="按屏幕配置"
+        name="product"
+      />
     </el-tabs>
     <warning
       v-if="error"
@@ -249,28 +253,44 @@ export default {
       }
       return getDeviceTree().then(({ data }) => {
         this.$groupCache = data
-        const map = {}
-        const cache = []
-        const ids = {}
+        const ratioCacheOptions = {
+          key: 'resolutionRatio',
+          ids: {},
+          map: {},
+          cache: []
+        }
+        const productCacheOptions = {
+          key: 'productId',
+          nameKey: 'productName',
+          ids: {},
+          map: {},
+          cache: []
+        }
         data.forEach(({ list }) => {
           list.forEach(device => {
-            const resolutionRatio = device.resolutionRatio
-            if (!ids[device.id]) {
-              if (!map[resolutionRatio]) {
-                map[resolutionRatio] = []
-                cache.push({
-                  name: resolutionRatio,
-                  list: map[resolutionRatio]
-                })
-              }
-              ids[device.id] = 1
-              map[resolutionRatio].push(device)
-            }
+            this.setCache(device, ratioCacheOptions)
+            this.setCache(device, productCacheOptions)
           })
         })
-        this.$ratioCache = cache
-        return this[key]
-      })
+        this.$ratioCache = ratioCacheOptions.cache
+        this.$productCache = productCacheOptions.cache
+        return this.getDevicesByActive()
+      }, console.log)
+    },
+    setCache (device, { key, nameKey, ids, map, cache }) {
+      const id = device.id
+      if (!ids[id]) {
+        const value = device[key]
+        if (!map[value]) {
+          map[value] = []
+          cache.push({
+            name: nameKey ? device[nameKey] : value,
+            list: map[value]
+          })
+        }
+        ids[id] = 1
+        map[value].push(device)
+      }
     },
     onSearch () {
       this.isAll = false
@@ -280,10 +300,11 @@ export default {
         if (regx) {
           list = list.filter(({ name }) => regx.test(name))
         }
+        const empty = list.length === 0
         return {
           name,
-          expand: false,
-          empty: list.length === 0,
+          expand: !!(regx && !empty),
+          empty,
           all: false,
           indeterminate: false,
           list: list.map(({ id, name, resolutionRatio }) => {