NEZ-2162 feat：添加保留打开底部弹窗的状态

2022-09-05 15:35:32 +08:00
parent 3f3ce50513
commit c2ae213235
13 changed files with 110 additions and 18 deletions
--- a/nezha-fronted/build/webpack.dev.conf.js
+++ b/nezha-fronted/build/webpack.dev.conf.js
@@ -25,12 +25,14 @@ devWebpackConfig = merge(baseWebpackConfig, {
  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
-    historyApiFallback: {
-      index: indexHtml,
-      rewrites: [
-        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, indexHtml) }
-      ]
-    },
+    historyApiFallback: true,
+    // historyApiFallback: {
+    //   // rewrites: [
+    //   //   // { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, indexHtml) }
+    //   //   { from: /.*/, to: '/ui' },
+    //   //   { from: '/ui', to: path.posix.join(config.dev.assetsPublicPath, indexHtml) },
+    //   // ]
+    // },
    hot: true,
    inline: true,
    contentBase: false, // since we use CopyWebpackPlugin.
--- a/nezha-fronted/config/index.js
+++ b/nezha-fronted/config/index.js
@@ -3,7 +3,8 @@
 // see http://vuejs-templates.github.io/webpack for documentation.

 const path = require('path')
-
+const devStart = process.env.npm_lifecycle_event
+const indexHtml = devStart === 'dev' ? '/src/entrance/app/index.html' : '/src/entrance/exportHtml/exportHtml.html'
 module.exports = {
  dev: {
    // Paths
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -146,10 +146,10 @@ export default {
      /* 使用setTimeout延迟渲染图表，避免样式错乱 */
      setTimeout(() => {
        const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
-        myChart.clear()
        if (!myChart) {
          return
        }
+        myChart.clear()
        myChart.setOption(chartOption)
        this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿

--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -698,7 +698,6 @@ export default {
      if (this.fromTopologyDialog && !this.isPreview) {
        setTimeout(() => {
          this.topologyLoading = false
-          console.log(data)
          getTopology(this.topologyIndex).open(data || {})
          getTopology(this.topologyIndex).centerView()
          getTopology(this.topologyIndex).resize()
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -95,9 +95,11 @@ import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
+import routerPathParams from '@/components/common/mixin/routerPathParams'

 export default {
  name: 'bottomBox',
+  mixins: [routerPathParams],
  components: {
    scrapeEndpoint,
    LogBottomTab,
@@ -314,6 +316,9 @@ export default {
    },
    changeTab (tab) {
      this.$emit('update:targetTab', tab)
+      this.$nextTick(() => {
+        this.updatePath(this.$route.query, this.$route.path, 'bottomBox')
+      })
    },
    afterResize () {
      if (this.from === this.fromRoute.endpoint && this.targetTab === 'endpointQuery') {
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -64,9 +64,11 @@ import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import detailRightTop from './detailRightTop/detailRightTop'
+import routerPathParams from "@/components/common/mixin/routerPathParams";

 export default {
  name: 'detailViewRight',
+  mixins: [routerPathParams],
  components: {
    LogBottomTab,
    cabinetTab,
@@ -276,6 +278,9 @@ export default {
    },
    changeTab (tab) {
      this.targetTab = tab
+      this.$nextTick(() => {
+        this.updatePath(this.$route.query, this.$route.path, 'bottomBox')
+      })
    },
    afterResize () {
      if (this.from === this.fromRoute.endpoint && this.targetTab === 'endpointQuery') {
@@ -290,6 +295,10 @@ export default {
      this.$emit('getTableData')
    },
    setTargetTab () {
+      if (this.$route.query.targetTab) {
+        this.targetTab = this.$route.query.targetTab
+        return
+      }
      if (this.from === fromRoute.asset) {
        this.targetTab = 'panelTab'
      } else if (this.from === fromRoute.endpoint) {
--- a/nezha-fronted/src/components/common/latlngPicker.vue
+++ b/nezha-fronted/src/components/common/latlngPicker.vue
@@ -76,7 +76,6 @@ export default {
        maxBounds: [[-179, -85], [179, 85]],
        hash: false,
        transformRequest: function (url, resourceType) {
-          console.log(resourceType)
          if (resourceType === 'Tile' && url.indexOf('https://api.maptiler.com/tiles/v3') > -1) {
            const urlParams = url.split('.pbf')[0].split('/')
            const z = urlParams[urlParams.length - 3]
@@ -161,7 +160,6 @@ export default {
      })
      // const marker = L.marker([this.mapParam.latitude, this.mapParam.longitude]).addTo(map)
      this.map.on('click', function (e) {
-        console.log(e, e.lngLat)
        const coords = e.lngLat
        geoJSON.features[0].geometry.coordinates = [coords.lng, coords.lat]
        self.map.getSource('centerMarker').setData(geoJSON)
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/nezha-fronted/src/components/common/mixin/detailViewMixin.js
@@ -1,5 +1,14 @@
 export default {
  props: {},
+  watch: {
+    detailViewRightObj: {
+      handler (n) {
+        if (n) {
+          this.updatePath(this.$route.query, this.$route.path, 'nzDetailList')
+        }
+      }
+    }
+  },
  data () {
    return {
      detailType: localStorage.getItem('detail-view-' + this.tableId) || 'list',
@@ -21,6 +30,7 @@ export default {
      //   this.detailViewRightObj = ''
      // }
      this.detailType = flag
+      this.$router.replace({ query: { ...this.$route.query, detailType: flag } }).catch(err => {})
      let dataList = ''
      localStorage.setItem('detail-view-' + this.tableId, this.detailType)
      if (this.detailType === 'view') {
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js
@@ -27,16 +27,79 @@ export default {
        }, 200)
        qv && this.$set(val.target, val.propertyName, qv)
      })
+      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') {
+        this.detailType = q.detailType
+        this.detailViewRightObj = JSON.parse(q.selectObj)
+        this.$store.commit('setGlobalSearchId', this.detailViewRightObj.id)
+      }
    },
    // 更新path，包含请求参数
-    updatePath (param, path) {
+    updatePath (param, path, from) {
      const params = lodash.cloneDeep(param)
      Object.keys(params).forEach(key => {
        if (!params[key]) {
          delete params[key]
        }
      })
-      this.$router.replace({ path: path, query: params }).catch(err => {})
+      if (!from) {
+        const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
+        localStorage.setItem('detail-view-' + this.tableId, this.detailType)
+        params.detailType = this.detailType
+        params.bottomBox = this.$refs[detailType].bottomBox.showSubList
+        if (this.detailType === 'list') {
+          params.targetTab = this.$refs[detailType].bottomBox.targetTab
+        } else {
+          params.targetTab = this.$route.query.targetTab
+        }
+        if (this.detailType === 'list') {
+          params.selectObj = JSON.stringify({
+            id: this.$refs[detailType].bottomBox.object.id,
+            name: this.$refs[detailType].bottomBox.object.name,
+            config: this.$refs[detailType].bottomBox.object.config || '',
+            childrenNum: this.$refs[detailType].bottomBox.object.childrenNum || ''
+          })
+        } else {
+          this.$nextTick(() => {
+            params.selectObj = JSON.stringify({
+              id: this.$refs[detailType].detailViewRightObj.id,
+              name: this.$refs[detailType].detailViewRightObj.name,
+              config: this.$refs[detailType].detailViewRightObj.config || '',
+              childrenNum: this.$refs[detailType].detailViewRightObj.childrenNum || ''
+            })
+          })
+        }
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      } else if (from === 'nzDatalist') {
+        params.bottomBox = this.bottomBox.showSubList
+        params.targetTab = this.bottomBox.targetTab
+        params.selectObj = JSON.stringify({
+          id: this.bottomBox.object.id,
+          name: this.bottomBox.object.name,
+          config: this.bottomBox.object.config || '',
+          childrenNum: this.bottomBox.object.childrenNum || ''
+        })
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      } else if (from === 'nzDetailList') {
+        params.targetTab = this.$route.query.targetTab
+        params.selectObj = JSON.stringify({
+          id: this.detailViewRightObj.id,
+          name: this.detailViewRightObj.name,
+          config: this.detailViewRightObj.config || '',
+          childrenNum: this.detailViewRightObj.childrenNum || ''
+        })
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      } else if (from === 'bottomBox') {
+        params.targetTab = this.targetTab
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      }
    },
    setSearchInput (val, qv) {
      let dataList = ''
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -106,8 +106,11 @@ import bottomBox from '@/components/common/bottomBox/bottomBox'
 import { bottomBoxWindow } from '@/components/common/js/tools'
 import panelChart from '@/components/chart/panelChart'
 import bus from '@/libs/bus'
+import routerPathParams from "@/components/common/mixin/routerPathParams";
+import lodash from "lodash";
 export default {
  name: 'nzDataList',
+  mixins: [routerPathParams],
  components: {
    bottomBox,
    panelChart
@@ -217,6 +220,7 @@ export default {
      this.bottomBox.targetTab = targetTab
      this.bottomBox.object = JSON.parse(JSON.stringify(row))
      this.bottomBox.showSubList = true
+      this.updatePath(this.$route.query, this.$route.path, 'nzDatalist')
    },
    search (searchObj) {
      this.$emit('search', searchObj)
--- a/nezha-fronted/src/entrance/app/App.vue
+++ b/nezha-fronted/src/entrance/app/App.vue
@@ -22,7 +22,6 @@ export default {
    // }
    const Timestamp = new Date().getTime()
    const url = '/static/config.json?Timestamp=' + Timestamp
-    console.log(url)
    const result = await this.$http.get(url) // 获取本地的config.json 判断是否需要清空localStorage 以及设备的宽 和 axios的baseUrl
    this.$axios.defaults.baseURL = result.body.baseUrl
    const version = result.body.version
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -40,7 +40,7 @@ axios.interceptors.request.use(
 )
 const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008] // 账号锁定等
 const licenceErrorCode = [711001]
-const noJumpPath = ['#/', '#/login']
+const noJumpPath = ['/', '/login', '/ui/login']

 // 若get请求的url中带问号，则将url上的参数截取，改为对象形式传参
 axios.interceptors.request.use(
@@ -81,10 +81,10 @@ axios.interceptors.response.use(
      removePending(response.config)
      return response
    }
-    if (licenceErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.hash) == -1) {
+    if (licenceErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.pathname) == -1) {
      window.location.href = '/'
    } else if (response.status === 200) {
-      if (accountErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.hash) == -1) {
+      if (accountErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.pathname) == -1) {
        sessionStorage.setItem('nz-previous-page', router.currentRoute.fullPath)
        window.location.href = '/'
      }
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -5,6 +5,7 @@ import { returnMenuCode, sortByOrderNum } from '@/permission'
 import moment from 'moment-timezone'
 import { theme } from '@/components/common/js/constants'

+const noJumpPath = ['/', '/login', '/ui/login']
 const user = {
  state: {
    menuList: [],
@@ -143,7 +144,7 @@ const user = {
          })
        }
        // 登录成功后跳回到原来页面
-        if (sessionStorage.getItem('nz-previous-page')) {
+        if (sessionStorage.getItem('nz-previous-page') && noJumpPath.indexOf(sessionStorage.getItem('nz-previous-page')) === -1) {
          const route = sessionStorage.getItem('nz-previous-page')
          router.push({
            path: route
@@ -151,6 +152,7 @@ const user = {
            sessionStorage.removeItem('nz-previous-page')
          })
        } else {
+          sessionStorage.removeItem('nz-previous-page')
          router.push({
            path: path[0],
            query: {