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

2023-08-30 17:30:36 +08:00
parent 2d5aa25f2a
commit 0ad7d7e295
41 changed files with 401 additions and 194 deletions
--- a/nezha-fronted/src/assets/css/font/iconfont.css
+++ b/nezha-fronted/src/assets/css/font/iconfont.css
--- a/nezha-fronted/src/assets/css/font/iconfont.js
+++ b/nezha-fronted/src/assets/css/font/iconfont.js
--- a/nezha-fronted/src/assets/css/font/iconfont.json
+++ b/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": "展开",
--- a/nezha-fronted/src/assets/css/font/iconfont.ttf
+++ b/nezha-fronted/src/assets/css/font/iconfont.ttf
--- a/nezha-fronted/src/assets/css/font/iconfont.woff
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff
--- a/nezha-fronted/src/assets/css/font/iconfont.woff2
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff2
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/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)
--- a/nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue
+++ b/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()
        }
      }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/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: '',
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/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()
      }
    }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/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()
        }
      }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
+++ b/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 {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/networkBottomTab.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/processBottomTab.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/rolesTab.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogSftpTab.vue
+++ b/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()
        }
      }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/vsysBottomTab.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/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
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/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()
    },
    // 禁止拖动的对象
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/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 () {
-    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    if (pageSize && pageSize !== 'undefined') {
-      this.pageObj.pageSize = pageSize
-    }
+  async mounted () {
+    // 先设置默认的表头
    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
+    if (tableTitle && this.tableId) {
+      this.tools.customTableTitle = tableTitle
    }
-    let localStorageTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-    localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : tableTitle
-    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) {
+    if (!this.fromBottom && !this.projectPopTable) {
+      await this.getPreference()
      this.getTableData()
-      this.$nextTick(() => {
-        if (this.$refs.dataTable) {
-          this.$refs.dataTable.$refs.dataTable && this.$refs.dataTable.$refs.dataTable.doLayout()
-        }
-      })
    }
  },
  beforeDestroy () {
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/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) {
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js
@@ -33,19 +33,19 @@ export default {
          cb()
        }
      }
-      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)
-      }
+      // 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)
+      // }
    },
    // 更新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
          }
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/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
      }
    }
  }
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/project/popData/assetTable.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/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 () {
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/table/special/recordRulesQueryTab.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/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: '',
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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: '',
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/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"
--- a/nezha-fronted/src/components/page/config/terminalLog.vue
+++ b/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"
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/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: [
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/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']"
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/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 () {
    // 初始化表头