布局设置支持保存&重置配置

RuoYi

2021-04-13 c8df1f5e1f1ba33caad650cbbbd4045e8f5948a3

布局设置支持保存&重置配置

 ruoyi-admin/src/main/resources/application-druid.yml

@@ -43,7 +43,7 @@
                allow:

                url-pattern: /druid/*

                # 控制台管理用户名和密码

                login-username: admin

                login-username: ruoyi

                login-password: 123456

            filter:

                stat:


 ruoyi-ui/src/components/TopNav/index.vue

@@ -30,6 +30,9 @@
<script>
import { constantRoutes } from "@/router";

// 不需要激活的路由
const noactiveList = ["/user/profile", "/dict/type", "/gen/edit", "/job/log"];

export default {
  data() {
    return {
@@ -42,10 +45,13 @@
  computed: {
    // 顶部显示菜单
    topMenus() {
      return this.routers.map((menu) => ({
        ...menu,
        children: undefined,
      }));
      let topMenus = [];
      this.routers.map((menu) => {
        if (menu.hidden === false) {
          topMenus.push(menu);
        }
      });
      return topMenus;
    },
    // 所有的路由信息
    routers() {
@@ -69,6 +75,12 @@
    activeMenu() {
      const path = this.$route.path;
      let activePath = this.routers[0].path;
      var noactive = noactiveList.some(function (item) {
        return path.indexOf(item) !== -1;
      });
      if (noactive) {
        return;
      }
      if (path.lastIndexOf("/") > 0) {
        const tmpPath = path.substring(1, path.length);
        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
@@ -89,7 +101,7 @@
  methods: {
    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width - 200;
      const width = document.body.getBoundingClientRect().width - 380;
      const elWidth = this.$el.getBoundingClientRect().width;
      const menuItemNodes = this.$el.children;
      const menuWidth = Array.from(menuItemNodes).map(
@@ -119,7 +131,7 @@
        });
      }
      this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
    },
    }
  },
};
</script>

 ruoyi-ui/src/layout/components/Settings/index.vue

@@ -62,6 +62,10 @@
        <el-switch v-model="sidebarLogo" class="drawer-switch" />

      </div>



      <el-divider/>



      <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>

      <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>

    </div>

  </div>

</template>

@@ -72,14 +76,13 @@
export default {

  components: { ThemePicker },

  data() {

    return {}

    return {

      sideTheme: this.$store.state.settings.sideTheme

    };

  },

  computed: {

    theme() {

      return this.$store.state.settings.theme

    },

    sideTheme() {

      return this.$store.state.settings.sideTheme

    },

    fixedHeader: {

      get() {

@@ -141,6 +144,38 @@
        key: 'sideTheme',

        value: val

      })

      this.sideTheme = val;

    },

    saveSetting() {

      const loading = this.$loading({

        lock: true,

        fullscreen: false,

        text: "正在保存到本地，请稍后...",

        spinner: "el-icon-loading",

        background: "rgba(0, 0, 0, 0.7)"

      });

      localStorage.setItem(

        "layout-setting",

        `{

            "topNav":${this.topNav},

            "tagsView":${this.tagsView},

            "fixedHeader":${this.fixedHeader},

            "sidebarLogo":${this.sidebarLogo},

            "sideTheme":"${this.sideTheme}"

          }`

      );

      setTimeout(loading.close(), 1000)

    },

    resetSetting() {

      this.$loading({

        lock: true,

        fullscreen: false,

        text: "正在清除设置缓存并刷新，请稍后...",

        spinner: "el-icon-loading",

        background: "rgba(0, 0, 0, 0.7)"

      });

      localStorage.removeItem("layout-setting")

      setTimeout("window.location.reload()", 1000)

    }

  }

}


 ruoyi-ui/src/settings.js

@@ -14,7 +14,7 @@
  /**

   * 是否显示顶部导航

   */

  topNav: true,

  topNav: false,



  /**

   * 是否显示 tagsView


 ruoyi-ui/src/store/modules/settings.js

@@ -3,16 +3,16 @@


const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = defaultSettings



const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''

const state = {

  theme: variables.theme,

  sideTheme: sideTheme,

  sideTheme: storageSetting.sideTheme || sideTheme,

  showSettings: showSettings,

  topNav: topNav,

  tagsView: tagsView,

  fixedHeader: fixedHeader,

  sidebarLogo: sidebarLogo

  topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,

  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,

  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo

}



const mutations = {

  CHANGE_SETTING: (state, { key, value }) => {

    if (state.hasOwnProperty(key)) {