controlPc/src/App.vue

<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <router-view />
  </a-config-provider>
</template>

<script>
import { enquireScreen } from "./utils/util";
import { mapState, mapMutations } from "vuex";
import themeUtil from "@/utils/themeUtil";
// import { getI18nKey } from "@/utils/routerUtil";
// import store from "@/store";
// import { loadRoutes } from "@/utils/routerUtil";
export default {
  name: "App",
  data() {
    return {
      locale: {},
    };
  },
  created() {
    this.setHtmlTitle();
    this.setLanguage(this.lang);
    enquireScreen((isMobile) => this.setDevice(isMobile));
    // this.$API.userService.getRoutesConfig().then((result) => {
    //   console.log(result);
    //   const routesConfig = result.data.data;
    //   loadRoutes(routesConfig);
    //   this.$router.push("/form/agreement");
    //   this.$message.success(loginRes.message, 3);
    // });
    // this.$API.sysManage.getMenuList().then((res) => {
    //   if (res.data.code === 200) {
    //     console.log(res.data.data);
    //     store.commit("setting/setMenuData", res.data.data);
    //   }
    // });
  },
  mounted() {
    this.setWeekModeTheme(this.weekMode);
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val);
    },
    lang(val) {
      this.setLanguage(val);
      this.setHtmlTitle();
    },
    $route() {
      this.setHtmlTitle();
    },
    "theme.mode": function (val) {
      let closeMessage = this.$message.loading(
        `您选择了主题模式 ${val}, 正在切换...`
      );
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage);
    },
    "theme.color": function (val) {
      let closeMessage = this.$message.loading(
        `您选择了主题色 ${val}, 正在切换...`
      );
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage);
    },
    layout: function () {
      window.dispatchEvent(new Event("resize"));
    },
  },
  computed: {
    ...mapState("setting", ["layout", "theme", "weekMode", "lang"]),
  },
  methods: {
    ...mapMutations("setting", ["setDevice"]),
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add("week-mode");
      } else {
        document.body.classList.remove("week-mode");
      }
    },
    setLanguage(lang) {
      this.$i18n.locale = lang;
      switch (lang) {
        case "CN":
          this.locale =
            require("ant-design-vue/es/locale-provider/zh_CN").default;
          break;
        case "HK":
          this.locale =
            require("ant-design-vue/es/locale-provider/zh_TW").default;
          break;
        case "US":
        default:
          this.locale =
            require("ant-design-vue/es/locale-provider/en_US").default;
          break;
      }
    },
    setHtmlTitle() {
      const route = this.$route;
      // console.log(route, 123);

      // const key =
      //   route.path === "/"
      //     ? "home.name"
      //     : getI18nKey(route.matched[route.matched.length - 1]?.path);
      document.title = route.name;
    },
    popContainer() {
      return document.getElementById("popContainer");
    },
  },
};
</script>

<style lang="less" scoped>
.ant-tree li ul {
  padding-left: 8px !important;
}
</style>