NEZ-3114 feat：列表页面个性化设置实现后台存储

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "37041244",
+      "name": "Show all series",
+      "font_class": "a-Showallseries",
+      "unicode": "e7f0",
+      "unicode_decimal": 59376
+    },
+    {
+      "icon_id": "37041245",
+      "name": "Show seleted series",
+      "font_class": "a-Showseletedseries",
+      "unicode": "e7ef",
+      "unicode_decimal": 59375
+    },
     {
       "icon_id": "680107",
       "name": "展开",

nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue

@@ -175,7 +175,7 @@ export default {
   },
   methods: {
     updateCustomTableTitle (custom) {
-      this.$emit('update:customTableTitle', custom)
+      this.$parent.updateCustomTableTitle(custom)
     },
     search (searchObj) {
       this.$emit('search', searchObj)

nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue

@@ -138,7 +138,8 @@ export default {
           readonly: true,
           disabled: false
         }]
-      }
+      },
+      fromBottom: true
     }
   },
   methods: {
@@ -179,9 +180,10 @@ export default {
     obj: {
       immediate: true,
       deep: true,
-      handler (n, o) {
+      async handler (n, o) {
         if (n) {
           this.searchLabel = {}
+          await this.getPreference()
           this.getTableData()
         }
       }

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

@@ -158,12 +158,13 @@ export default {
   watch: {
     obj: {
       immediate: true,
-      handler (n) {
+      async handler (n) {
         if (n) {
           this.searchLabel = {}
           if (this.from === fromRoute.alertSilence) {
             this.state = '2'
           }
+          await this.getPreference()
           this.searchLabel = {}
           // this.getTableData()
           setTimeout(() => {
@@ -187,7 +188,7 @@ export default {
       url: 'alert/message',
       urlNew: 'alert/message/query',
       alertSilenceUrl: '',
-      tableId: 'alertMessageModule', // 需要分页的table的id，用于记录每页数量
+      tableId: 'alertMessageTab', // 需要分页的table的id，用于记录每页数量
       state: '1',
       blankSilenceObject: {
         id: '',

nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue

@@ -132,7 +132,8 @@ export default {
       snmpCredentialData: [],
       fieldGroupData: [],
       needAlertDaysData: true,
-      trendKey: 'assetId'
+      trendKey: 'assetId',
+      fromBottom: true
     }
   },
   methods: {
@@ -294,7 +295,7 @@ export default {
     obj: {
       immediate: true,
       deep: true,
-      handler (n, o) {
+      async handler (n, o) {
         this.searchLabel = {}
         this.searchLabel.dcIds = n.id
         if (this.from === fromRoute.model) {
@@ -305,6 +306,7 @@ export default {
           delete this.searchLabel.dcIds
           this.searchLabel.pids = n.id
         }
+        await this.getPreference()
         this.getTableData()
       }
     }

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -132,7 +132,8 @@ export default {
             disabled: false
           }
         ]
-      }
+      },
+      fromBottom: true
     }
   },
   created () {
@@ -234,10 +235,11 @@ export default {
     obj: {
       immediate: true,
       deep: true,
-      handler (n) {
+      async handler (n) {
         if (n) {
           this.currentDc = JSON.parse(JSON.stringify(n))
           this.searchLabel = { dcIds: this.currentDc.id }
+          await this.getPreference()
           this.getTableData()
         }
       }

nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue

@@ -75,9 +75,10 @@ export default {
   watch: {
     obj: {
       immediate: true,
-      handler (n) {
+      async handler (n) {
         if (n) {
           this.searchLabel = {}
+          await this.getPreference()
           this.getTableData()
         }
       }
@@ -122,6 +123,7 @@ export default {
   },
   methods: {
     getTableData () {
+      this.tools.loading = true
       if (this.orderBy) {
         this.$set(this.searchLabel, 'orderBy', this.orderBy)
       } else {

nezha-fronted/src/components/common/bottomBox/tabs/networkBottomTab.vue

@@ -80,9 +80,15 @@ export default {
     }
   },
   watch: {
-    obj (n) {
+    obj: {
+      immediate: true,
+      async handler (n) {
+        if (n) {
           this.searchLabel = { id: n.id }
+          await this.getPreference()
           this.getTableData()
+        }
+      }
     },
     queryExpression (n) {
       const temp = this
@@ -109,7 +115,8 @@ export default {
       filterTime: [
         bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
         bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-      ]
+      ],
+      fromBottom: true
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue

@@ -53,10 +53,16 @@ export default {
     obj: Object
   },
   watch: {
-    obj (n) {
+    obj: {
+      immediate: true,
+      async handler (n) {
+        if (n) {
           this.searchLabel = { userId: n.id }
+          await this.getPreference()
           this.getTableData()
         }
+      }
+    }
   },
   data () {
     return {
@@ -106,7 +112,8 @@ export default {
           }
         ]
       },
-      searchLabel: { userId: this.obj.id }
+      searchLabel: { userId: this.obj.id },
+      fromBottom: true
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/tabs/processBottomTab.vue

@@ -80,9 +80,15 @@ export default {
     }
   },
   watch: {
-    obj (n) {
+    obj: {
+      immediate: true,
+      async handler (n) {
+        if (n) {
           this.searchLabel = { id: n.id }
+          await this.getPreference()
           this.getTableData()
+        }
+      }
     },
     queryExpression (n) {
       const temp = this
@@ -109,7 +115,8 @@ export default {
       filterTime: [
         bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
         bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
-      ]
+      ],
+      fromBottom: true
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue

@@ -60,10 +60,16 @@ export default {
     }
   },
   watch: {
-    obj (n) {
+    obj: {
+      immediate: true,
+      async handler (n) {
+        if (n) {
           this.searchLabel = { id: n.id }
+          await this.getPreference()
           this.getTableData()
         }
+      }
+    }
   },
   data () {
     return {
@@ -82,7 +88,8 @@ export default {
         ]
       },
       nowTime: '',
-      searchLabel: { id: this.obj.id }
+      searchLabel: { id: this.obj.id },
+      fromBottom: true
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/tabs/rolesTab.vue

@@ -92,7 +92,8 @@ export default {
           }
         ]
       },
-      searchLabel: { roleId: this.obj.id }
+      searchLabel: { roleId: this.obj.id },
+      fromBottom: true
     }
   },
   watch: {
@@ -119,10 +120,16 @@ export default {
         }
       }
     },
-    obj (n) {
+    obj: {
+      immediate: true,
+      async handler (n) {
+        if (n) {
           this.searchLabel = { roleId: this.obj.id }
+          await this.getPreference()
           this.getTableData()
         }
+      }
+    }
   },
   methods: {
     edit (u, copyFlag) {

nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue

@@ -75,7 +75,8 @@ export default {
       },
       timer: null,
       sameLabels: ['endpointLabels', 'labelsType', 'lastScrape', 'lastScrapeDuration', 'health', 'lastError', 'str'],
-      orderBy: {}
+      orderBy: {},
+      fromBottom: true
     }
   },
   watch: {
@@ -86,12 +87,13 @@ export default {
       }, 500)
     },
     obj: {
-      // immediate: true,
+      immediate: true,
       deep: true,
-      handler (n, o) {
+      async handler (n, o) {
         if (n) {
           this.searchLabel = {}
           this.inputDateSearch = ''
+          await this.getPreference()
           this.getTableData()
         }
       }
@@ -245,7 +247,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.handleCurrentChange()
     },
     // 计算当前分页需要返回数据的条数
@@ -314,8 +316,7 @@ export default {
     clearInterval(this.timer)
   },
   created () {
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+
-    this.pageObj.pageSize = pageSize || 20
   }
 }
 </script>

nezha-fronted/src/components/common/bottomBox/tabs/terminalLogSftpTab.vue

@@ -66,14 +66,17 @@ export default {
       },
       searchLabel: {},
       tableData: [],
-      orderBy: { order: 'ascending', prop: 'id' }
+      orderBy: { order: 'ascending', prop: 'id' },
+      fromBottom: true
     }
   },
   watch: {
     obj: {
       deep: true,
-      handler (n) {
+      immediate: true,
+      async handler (n) {
         if (n) {
+          await this.getPreference()
           this.getTableData()
         }
       }

nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue

@@ -60,10 +60,16 @@ export default {
     }
   },
   watch: {
-    obj (n) {
+    obj: {
+      immediate: true,
+      async handler (n) {
+        if (n) {
           this.searchLabel = { userId: n.id }
+          await this.getPreference()
           this.getTableData()
         }
+      }
+    }
   },
   data () {
     return {
@@ -124,7 +130,8 @@ export default {
         ]
       },
       nowTime: '',
-      searchLabel: { userId: this.obj.id }
+      searchLabel: { userId: this.obj.id },
+      fromBottom: true
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/tabs/vsysBottomTab.vue

@@ -66,8 +66,20 @@ export default {
       },
       searchLabel: {},
       tableData: [],
-      orderBy: { order: 'ascending', prop: 'id' }
+      orderBy: { order: 'ascending', prop: 'id' },
-
+      fromBottom: true
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      async handler (n) {
+        if (n) {
+          await this.getPreference()
+          this.getTableData()
+        }
+      }
     }
   },
   methods: {

nezha-fronted/src/components/common/detailView/nzDetailView.vue

@@ -209,9 +209,6 @@ export default {
     }
   },
   methods: {
-    updateCustomTableTitle (custom) {
-      this.$emit('update:customTableTitle', custom)
-    },
     // 全屏
     fullScreen () {
       const vm = this

nezha-fronted/src/components/common/elementSet.vue

@@ -84,7 +84,7 @@
         <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click.stop="esc">
           <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
         </button>
-        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" type="button" @click.stop="save">
+        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" :class="{'nz-btn-disabled': !custom.length}" :disabled="!custom.length" type="button" @click.stop="save">
           <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
         </button>
       </div>
@@ -112,10 +112,6 @@ export default {
     }
   },
   created () {
-    const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
-    if (localStorageTitle) {
-      localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
-    }
   },
   watch: {
     customTableTitle: {
@@ -166,10 +162,6 @@ export default {
         })
       }
       this.$emit('update', this.custom)
-      localStorage.setItem(
-        'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId,
-        JSON.stringify(this.custom)
-      )
       this.esc()
     },
     // 禁止拖动的对象

nezha-fronted/src/components/common/mixin/dataList.js

@@ -46,7 +46,9 @@ export default {
       delFlag: false,
       fromBottom: false,
       operationWidth: '165', // 操作列宽
-      searchCheckBox: {}
+      searchCheckBox: {},
+      detailType: 'list',
+      preferenceLoading: true
     }
   },
   provide () {
@@ -203,9 +205,9 @@ export default {
       this.pageObj.pageNo = val
       this.getTableData()
     },
-    pageSize (val) {
+    async pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.getTableData()
     },
     add () {
@@ -305,7 +307,7 @@ export default {
       } else {
         this.dataListLayout.push('clickSearch')
       }
-      localStorage.setItem('dataList-layout' + this.tableId, JSON.stringify(this.dataListLayout))
+      this.setPreference()
     },
     addSilence (row, type) {
       this.blankSilenceObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
@@ -376,6 +378,92 @@ export default {
     showText (row) {
       this.dialogShowText = true
       this.dialogText = row.alertRule.trbShot
+    },
+    // 获取用户偏好
+    async getPreference () {
+      this.preferenceLoading = true
+      const res = await this.$get('/sys/user/preference', { key: this.tableId })
+      let tableHeaders
+      if (res.data[this.tableId]) {
+        const data = JSON.parse(res.data[this.tableId])
+        this.pageObj.pageSize = data.pageSize
+        this.detailType = data.view
+        this.dataListLayout = data.layout
+        tableHeaders = data.tableHeaders
+      }
+      this.preferenceLoading = false
+      this.$nextTick(() => {
+        this.setCustomTableTitle(tableHeaders)
+      })
+      // 请求完用户偏好 打开底部弹窗
+      if (this.fromBottom || this.projectPopTable) { return }
+      const q = this.$route.query
+      if (q.bottomBox && JSON.parse(q.bottomBox)) {
+        this.$nextTick(() => {
+          this.detailType = q.detailType
+          const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
+          this.$refs[detailType].bottomBox.showSubList = JSON.parse(q.bottomBox)
+          this.$refs[detailType].bottomBox.targetTab = q.targetTab
+          this.$refs[detailType].bottomBox.object = JSON.parse(q.selectObj)
+        })
+      } else if (this.detailType === 'view' && q.detailType && q.selectObj) {
+        this.detailType = q.detailType
+        this.detailViewRightObj = JSON.parse(q.selectObj)
+        this.$store.commit('setGlobalSearchId', this.detailViewRightObj.id)
+      }
+    },
+    // 设置用户偏好
+    setPreference () {
+      const params = {
+        pageSize: this.pageObj.pageSize,
+        view: this.detailType || 'list',
+        tableHeaders: this.tools.customTableTitle
+      }
+      if (this.dataListLayout) {
+        params.layout = this.dataListLayout
+      }
+      this.$put('/sys/user/preference', { [this.tableId]: JSON.stringify(params) }).then(res => {
+        if (res.code !== 200) {
+          this.$message.error(res.msg || res.error)
+        }
+      })
+    },
+    setCustomTableTitle (tableHeaders) {
+      let tableTitle = ''
+      if (this.$refs.dataTable) {
+        tableTitle = this.$refs.dataTable.tableTitle
+      } else if (this.$refs.dataDetail) {
+        tableTitle = this.$refs.dataDetail.tableTitle
+      }
+      if (!tableTitle || !this.tableId) {
+        return
+      }
+      const preferenceTableTitle = tableHeaders || tableTitle
+      if (tableTitle) {
+        // 先根据本地缓存中的prop进行排序
+        tableTitle.sort(function (a, b) {
+          return preferenceTableTitle.findIndex(function (c) {
+            return c.prop === a.prop
+          }) - preferenceTableTitle.findIndex(function (c) {
+            return c.prop === b.prop
+          })
+        })
+        this.tools.customTableTitle = tableTitle.map((item, index) => { // 修复切换中英文的问题
+          item.show = preferenceTableTitle[index].show
+          return item
+        })
+      }
+      if (preferenceTableTitle && (preferenceTableTitle.length > tableTitle.length)) {
+        const arr = preferenceTableTitle.splice(tableTitle.length, preferenceTableTitle.length)
+        arr.forEach(item => {
+          item.minWidth = item.label.length * 16 + 20
+        })
+        this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
+      }
+    },
+    updateCustomTableTitle (custom) {
+      this.tools.customTableTitle = custom
+      this.setPreference()
     }
   },
   watch: {
@@ -1336,50 +1424,20 @@ export default {
     }
     this.initQueryFromPath(searchKeys)
   },
-  mounted () {
+  async mounted () {
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    // 先设置默认的表头
-    if (pageSize && pageSize !== 'undefined') {
-      this.pageObj.pageSize = pageSize
-    }
     let tableTitle = ''
     if (this.$refs.dataTable) {
       tableTitle = this.$refs.dataTable.tableTitle
     } else if (this.$refs.dataDetail) {
       tableTitle = this.$refs.dataDetail.tableTitle
     }
-    if (!tableTitle || !this.tableId) {
+    if (tableTitle && this.tableId) {
-      return
+      this.tools.customTableTitle = tableTitle
     }
-    let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (!this.fromBottom && !this.projectPopTable) {
-    localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : tableTitle
+      await this.getPreference()
-    if (tableTitle) {
-      // 先根据本地缓存中的prop进行排序
-      tableTitle.sort(function (a, b) {
-        return localStorageTableTitle.findIndex(function (c) {
-          return c.prop === a.prop
-        }) - localStorageTableTitle.findIndex(function (c) {
-          return c.prop === b.prop
-        })
-      })
-      this.tools.customTableTitle = tableTitle.map((item, index) => { // 修复切换中英文的问题
-        item.show = localStorageTableTitle[index].show
-        return item
-      })
-    }
-    if (localStorageTableTitle && (localStorageTableTitle.length > tableTitle.length)) {
-      const arr = localStorageTableTitle.splice(tableTitle.length, localStorageTableTitle.length)
-      arr.forEach(item => {
-        item.minWidth = item.label.length * 16 + 20
-      })
-      this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
-    }
-    if (!this.fromBottom) {
       this.getTableData()
-      this.$nextTick(() => {
-        if (this.$refs.dataTable) {
-          this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
-        }
-      })
     }
   },
   beforeDestroy () {

nezha-fronted/src/components/common/mixin/detailViewMixin.js

@@ -14,7 +14,6 @@ export default {
   },
   data () {
     return {
-      detailType: localStorage.getItem('detail-view-' + this.tableId) || 'list',
       detailViewRightObj: '',
       detailViewLoading: false,
       detailTimer: '',
@@ -22,7 +21,6 @@ export default {
     }
   },
   created () {
-    this.detailType = localStorage.getItem('detail-view-' + this.tableId) || 'list'
   },
   mounted () {
     setTimeout(() => {
@@ -43,12 +41,12 @@ export default {
         return
       }
       this.detailType = flag
+      this.setPreference()
       // this.$refs.dataList.bottomBox.showSubList = false
       // if (this.orderBy) {
       //   this.detailViewRightObj = ''
       // }
       let dataList = ''
-      localStorage.setItem('detail-view-' + this.tableId, this.detailType)
       if (this.detailType === 'view') {
         dataList = 'detailList'
         if (this.from === this.fromRoute.asset) {

nezha-fronted/src/components/common/mixin/routerPathParams.js

@@ -33,19 +33,19 @@ export default {
           cb()
         }
       }
-      if (q.bottomBox && JSON.parse(q.bottomBox)) {
+      // if (q.bottomBox && JSON.parse(q.bottomBox)) {
-        this.$nextTick(() => {
+      //   this.$nextTick(() => {
-          this.detailType = q.detailType
+      //     this.detailType = q.detailType
-          const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
+      //     const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
-          this.$refs[detailType].bottomBox.showSubList = JSON.parse(q.bottomBox)
+      //     this.$refs[detailType].bottomBox.showSubList = JSON.parse(q.bottomBox)
-          this.$refs[detailType].bottomBox.targetTab = q.targetTab
+      //     this.$refs[detailType].bottomBox.targetTab = q.targetTab
-          this.$refs[detailType].bottomBox.object = JSON.parse(q.selectObj)
+      //     this.$refs[detailType].bottomBox.object = JSON.parse(q.selectObj)
-        })
+      //   })
-      } else if (this.detailType === 'view' && q.detailType && q.selectObj) {
+      // } else if (this.detailType === 'view' && q.detailType && q.selectObj) {
-        this.detailType = q.detailType
+      //   this.detailType = q.detailType
-        this.detailViewRightObj = JSON.parse(q.selectObj)
+      //   this.detailViewRightObj = JSON.parse(q.selectObj)
-        this.$store.commit('setGlobalSearchId', this.detailViewRightObj.id)
+      //   this.$store.commit('setGlobalSearchId', this.detailViewRightObj.id)
-      }
+      // }
     },
     // 更新path，包含请求参数
     updatePath (param, path, from) {
@@ -58,7 +58,6 @@ export default {
         })
         if (!from) {
           const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
-          localStorage.setItem('detail-view-' + this.tableId, this.detailType)
           if (this.detailType) {
             params.detailType = this.detailType
           }

nezha-fronted/src/components/common/pagination.vue

@@ -125,11 +125,6 @@ export default {
     if (this.postPageSizes && this.postPageSizes.length > 0) {
       this.pageSize = this.postPageSizes[0]
       this.resetPageSizes()
-    } else {
-      const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageSize = parseInt(pageSize)
-      }
     }
   },
   watch: {
@@ -149,6 +144,7 @@ export default {
       immediate: true,
       deep: true,
       handler (n, o) {
+        this.pageSize = this.pageObj.pageSize
       }
     }
   }

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -96,7 +96,7 @@ export default {
       url: 'alert/message',
       mainTableHeight: 'calc(100% - 64px)',
       state: '1',
-      tableId: '',
+      tableId: 'projectAlert',
       stateOptions: alertMessageConstant.states,
       pageObj: {
         pageNo: 1,
@@ -175,20 +175,36 @@ export default {
 
       },
       deleteBox: {},
-      nowTime: ''
+      nowTime: '',
+      projectPopTable: true
     }
   },
   created () {
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
-    }
   },
-  mounted () {
+  async mounted () {
+    await this.getPreference()
     this.getTableData()
   },
   methods: {
+    // 获取用户偏好
+    async getPreference () {
+      const res = await this.$get('/sys/user/preference', { key: this.tableId })
+      if (res.data[this.tableId]) {
+        const data = JSON.parse(res.data[this.tableId])
+        this.pageObj.pageSize = data.pageSize
+      }
+    },
+    // 设置用户偏好
+    setPreference () {
+      const params = {
+        pageSize: this.pageObj.pageSize
+      }
+      this.$put('/sys/user/preference', { [this.tableId]: JSON.stringify(params) }).then(res => {
+        if (res.code !== 200) {
+          this.$message.error(res.msg || res.error)
+        }
+      })
+    },
     getTableData: function () {
       this.tools.loading = true
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
@@ -242,7 +258,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.getTableData()
     },
     selectChange (s) {

nezha-fronted/src/components/common/project/popData/assetTable.vue

@@ -7,7 +7,7 @@
         :api="url"
         :custom-table-title.sync="tableTitle"
         :from="fromRoute.asset"
-        :layout="dataListLayout"
+        :layout="['searchInput', 'pagination']"
         :search-msg="searchMsg"
         @search="search"
         :search-right="true"
@@ -80,7 +80,6 @@ export default {
     return {
       url: 'asset/asset',
       tableId: 'projectAsset',
-      dataListLayout: ['searchInput', 'pagination'],
       pageObj: {
         pageNo: 1,
         pageSize: this.$CONSTANTS.defaultPageSize,
@@ -145,21 +144,37 @@ export default {
       searchLabel: {},
       deleteBox: {},
       needAlertDaysData: true,
-      trendKey: 'assetId'
+      trendKey: 'assetId',
+      projectPopTable: true
     }
   },
   created () {
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
-    }
   },
-  mounted () {
+  async mounted () {
+    await this.getPreference()
     this.getTableTitle()
     this.getTableData()
   },
   methods: {
+    // 获取用户偏好
+    async getPreference () {
+      const res = await this.$get('/sys/user/preference', { key: this.tableId })
+      if (res.data[this.tableId]) {
+        const data = JSON.parse(res.data[this.tableId])
+        this.pageObj.pageSize = data.pageSize
+      }
+    },
+    // 设置用户偏好
+    setPreference () {
+      const params = {
+        pageSize: this.pageObj.pageSize
+      }
+      this.$put('/sys/user/preference', { [this.tableId]: JSON.stringify(params) }).then(res => {
+        if (res.code !== 200) {
+          this.$message.error(res.msg || res.error)
+        }
+      })
+    },
     getTableData: function () {
       this.tools.loading = true
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
@@ -202,7 +217,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.getTableData()
     },
     selectChange (s) {

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -84,7 +84,7 @@ export default {
   data () {
     return {
       url: 'monitor/endpoint',
-      tableId: 'endpointTableProject',
+      tableId: 'projectEndpoint',
       pageObj: {
         pageNo: 1,
         pageSize: this.$CONSTANTS.defaultPageSize,
@@ -138,20 +138,36 @@ export default {
       },
       deleteBox: {},
       needAlertDaysData: true,
-      trendKey: 'endpointId'
+      trendKey: 'endpointId',
+      projectPopTable: true
     }
   },
   created () {
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize != 'undefined' && pageSize != null) {
-      this.pageObj.pageSize = pageSize
-    }
   },
-  mounted () {
+  async mounted () {
+    await this.getPreference()
     this.getTableData()
   },
   methods: {
+    // 获取用户偏好
+    async getPreference () {
+      const res = await this.$get('/sys/user/preference', { key: this.tableId })
+      if (res.data[this.tableId]) {
+        const data = JSON.parse(res.data[this.tableId])
+        this.pageObj.pageSize = data.pageSize
+      }
+    },
+    // 设置用户偏好
+    setPreference () {
+      const params = {
+        pageSize: this.pageObj.pageSize
+      }
+      this.$put('/sys/user/preference', { [this.tableId]: JSON.stringify(params) }).then(res => {
+        if (res.code !== 200) {
+          this.$message.error(res.msg || res.error)
+        }
+      })
+    },
     getTableData: function () {
       this.tools.loading = true
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
@@ -208,7 +224,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.getTableData()
     },
     selectChange (s) {

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -267,7 +267,7 @@ export default {
       }
     },
     updateCustomTableTitle (custom) {
-      this.$emit('update:customTableTitle', custom)
+      this.$parent.updateCustomTableTitle(custom)
     },
     // 全屏
     fullScreen () {

nezha-fronted/src/components/common/table/special/endpointQueryTab.vue

@@ -113,9 +113,10 @@ export default {
     obj: {
       immediate: true,
       deep: true,
-      handler (n) {
+      async handler (n) {
         if (n) {
           this.currentEndpoint = JSON.parse(JSON.stringify(n))
+          await this.getPreference()
           this.queryEndpoint()
         }
       }
@@ -173,6 +174,25 @@ export default {
     }
   },
   methods: {
+    // 获取用户偏好
+    async getPreference () {
+      const res = await this.$get('/sys/user/preference', { key: this.tableId })
+      if (res.data[this.tableId]) {
+        const data = JSON.parse(res.data[this.tableId])
+        this.pageObj.pageSize = data.pageSize
+      }
+    },
+    // 设置用户偏好
+    setPreference () {
+      const params = {
+        pageSize: this.pageObj.pageSize
+      }
+      this.$put('/sys/user/preference', { [this.tableId]: JSON.stringify(params) }).then(res => {
+        if (res.code !== 200) {
+          this.$message.error(res.msg || res.error)
+        }
+      })
+    },
     selectChange (selection) { // selection 选中的row的数组
       this.batchDeleteObjs = selection
       this.$emit('changSelection', selection)
@@ -408,7 +428,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.handleCurrentChange()
     },
     handleCurrentChange () {
@@ -454,9 +474,6 @@ export default {
     }
   },
   created () {
-    // this.getPanelData()
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    this.pageObj.pageSize = pageSize || 20
   }
 }
 </script>

nezha-fronted/src/components/common/table/special/recordRulesQueryTab.vue

@@ -113,9 +113,10 @@ export default {
     obj: {
       immediate: true,
       deep: true,
-      handler (n) {
+      async handler (n) {
         if (n) {
           this.currentRecordRules = JSON.parse(JSON.stringify(n))
+          await this.getPreference()
           this.queryRecordRules()
         }
       }
@@ -167,6 +168,25 @@ export default {
     }
   },
   methods: {
+    // 获取用户偏好
+    async getPreference () {
+      const res = await this.$get('/sys/user/preference', { key: this.tableId })
+      if (res.data[this.tableId]) {
+        const data = JSON.parse(res.data[this.tableId])
+        this.pageObj.pageSize = data.pageSize
+      }
+    },
+    // 设置用户偏好
+    setPreference () {
+      const params = {
+        pageSize: this.pageObj.pageSize
+      }
+      this.$put('/sys/user/preference', { [this.tableId]: JSON.stringify(params) }).then(res => {
+        if (res.code !== 200) {
+          this.$message.error(res.msg || res.error)
+        }
+      })
+    },
     selectChange (selection) { // selection 选中的row的数组
       this.batchDeleteObjs = selection
       this.$emit('changSelection', selection)
@@ -396,7 +416,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.setPreference()
       this.handleCurrentChange()
     },
     handleCurrentChange () {
@@ -432,9 +452,6 @@ export default {
     }
   },
   created () {
-    // this.getPanelData()
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    this.pageObj.pageSize = pageSize || 20
   }
 }
 </script>

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -6,7 +6,7 @@
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertMessage"
       :nz-table-height-offset="alertMessageNzTableHeightOffset"
-      :layout="dataListLayout"
+      :layout="['searchInput', 'elementSet', 'pagination']"
       :search-msg="searchMsg"
       @search="search"
       v-my-loading="tools.loading"
@@ -15,9 +15,6 @@
         <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 100px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
-<!--        <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch" :title="$t('dashboard.dashboard.chartForm.filter')">-->
-<!--          <i class="nz-icon nz-icon-funnel"></i>-->
-<!--        </button>-->
         <pick-time ref="pickTime" v-model="searchTime" sign="message" :default-pick="defaultPick" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcel')" class="top-tool-btn margin-r-10" type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
@@ -218,8 +215,6 @@ export default {
       chartInfo: {},
       alertMessageNzTableHeightOffset: 242,
       stateOptions: alertMessageConstant.states,
-      // dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
-      dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'pagination'],
       state: '1',
       dialogShowText: false,
       dialogText: '',

nezha-fronted/src/components/page/asset/asset.vue

@@ -1,8 +1,8 @@
 <template>
-  <div style="height: 100%" id="asset-batch-table">
+  <div style="height: 100%" id="asset-batch-table" v-my-loading="preferenceLoading">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
-      v-if="detailType !== 'list'"
+      v-if="detailType !== 'list'&&!preferenceLoading"
       :api="url"
       ref="detailList"
       :layout="dataListLayout"
@@ -74,7 +74,7 @@
     </nzDetailView>
     <nz-data-list
       v-my-loading="detailViewLoading"
-      v-if="detailType === 'list'"
+      v-if="detailType === 'list'&&!preferenceLoading"
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
@@ -247,7 +247,7 @@ export default {
         batchShow: false
       },
       silenceBoxShow: false,
-      dataListLayout: localStorage.getItem('dataList-layoutassetNzTableHeightOffset' + 'assetTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'assetTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
+      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
       assetNzTableHeightOffset: 287, // 包含click-search时nz-table的高度
       blankObject: {
         id: '',

nezha-fronted/src/components/page/config/dc.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div v-my-loading="preferenceLoading">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
-      v-if="detailType !== 'list'"
+      v-if="detailType !== 'list'&&!preferenceLoading"
       :api="url"
       ref="detailList"
       :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
@@ -74,7 +74,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
-      v-if="detailType === 'list'"
+      v-if="detailType === 'list'&&!preferenceLoading"
       :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.dc"

nezha-fronted/src/components/page/config/terminalLog.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div v-my-loading="preferenceLoading">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
-      v-if="detailType !== 'list'"
+      v-if="detailType !== 'list'&&!preferenceLoading"
       :api="url"
       ref="detailList"
       :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
@@ -54,7 +54,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
-      v-if="detailType === 'list'"
+      v-if="detailType === 'list'&&!preferenceLoading"
       :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.terminalLog"

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="endpoint-list">
+  <div id="endpoint-list" v-my-loading="preferenceLoading">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
-      v-if="detailType !== 'list'"
+      v-if="detailType !== 'list'&&!preferenceLoading"
       :api="url"
       ref="detailList"
       :layout="dataListLayout"
@@ -71,7 +71,7 @@
     <nz-data-list
       v-my-loading="detailViewLoading"
       ref="dataList"
-      v-if="detailType === 'list'"
+      v-if="detailType === 'list'&&!preferenceLoading"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.endpoint"
@@ -385,7 +385,7 @@ export default {
       tableId: 'endpointTable',
       queryPermission: 'account_view',
       endpointTableHeight: 'calc(100% - 244px)', // 主列表table高度
-      dataListLayout: localStorage.getItem('dataList-layout' + 'endpointTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'endpointTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
+      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="module-list">
+  <div class="module-list" v-my-loading="preferenceLoading">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
-      v-if="detailType !== 'list'"
+      v-if="detailType !== 'list'&&!preferenceLoading"
       :api="url"
       ref="detailList"
       :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
@@ -72,7 +72,7 @@
       ref="dataList"
       :api="url"
       :tableId="tableId"
-      v-if="detailType === 'list'"
+      v-if="detailType === 'list'&&!preferenceLoading"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.module"
       :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"

nezha-fronted/src/components/page/monitor/project/project.vue

@@ -92,7 +92,7 @@ export default {
         topoData: {},
         querysArray: {},
         currentProject: {},
-        params: {},
+        params: {}
       },
       /* 二级页面相关 */
       bottomBox: {
@@ -311,7 +311,6 @@ export default {
     },
     endpointPageSize (val) {
       this.endpointPageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
       this.getEndpointTableData()
     },
 
@@ -608,11 +607,6 @@ export default {
   },
   created () {
     this.currentProject = this.$store.state.currentProject
-    // 是否存在分页缓存
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize) {
-      this.endpointPageObj.pageSize = pageSize
-    }
   },
   mounted () {
     // 初始化表头