多语言优化暂存

src/components/newLayout/index.vue

@@ -1,117 +1,157 @@
 <template>
   <div class="panel">
     <div class="flex-align-stretch">
-      <asideTemp @getModules="getModules"></asideTemp>
-      <div style="flex:100" class="body__panel">
-        <headeTemp></headeTemp>
+      <asideTemp ref="AsideTemp" @getModules="getModules"></asideTemp>
+      <div style="flex: 100" class="body__panel">
+        <headeTemp @onRender="onRender"></headeTemp>
         <div>
-<!--          <menuTemp class="sticky normal-margin" :style="marginTrue ? 'margin-bottom:70px !important' : 'margin-bottom:16px'" ref="menu" style="background: red"></menuTemp>-->
-          <menuTemp class="sticky normal-margin"  ref="menu" @switch="debouned"></menuTemp>
-          <div class="radius" ref="divContent" :style="{'marginTop':divTop,'height':divHeight}">
+          <!--          <menuTemp class="sticky normal-margin" :style="marginTrue ? 'margin-bottom:70px !important' : 'margin-bottom:16px'" ref="menu" style="background: red"></menuTemp>-->
+          <menuTemp
+            class="sticky normal-margin"
+            ref="menu"
+            @switch="debouned"
+          ></menuTemp>
+
+          <div
+            v-if="dateNow"
+            class="radius"
+            ref="divContent"
+            :style="{ marginTop: divTop, height: divHeight }"
+          >
             <keep-alive :include="pageCache">
               <router-view></router-view>
             </keep-alive>
           </div>
+
+          <div
+            v-else
+            class="radius"
+            ref="divContent"
+            :style="{ marginTop: divTop, height: divHeight }"
+          >
+            <keep-alive :include="pageCache">
+            </keep-alive>
+          </div>
         </div>
       </div>
-      <navTemp  @getModules="getModules"></navTemp>
+      <navTemp @getModules="getModules"></navTemp>
     </div>
     <socketMessage></socketMessage>
     <el-dialog
-        :title="$t('提示')"
-        style="margin-top: calc(28vh)"
-        :visible.sync="dialogVisible"
-        width="500px"
-        :before-close="handleClose"
-        >
-      <span>{{$t('当前密码为初始密码，请前往修改密码')}}</span>
+      :title="$t('提示')"
+      style="margin-top: calc(28vh)"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :before-close="handleClose"
+    >
+      <span>{{ $t("当前密码为初始密码，请前往修改密码") }}</span>
       <span slot="footer" class="dialog-footer">
-    <el-button size="small" @click="onClose">{{$t('取 消')}}</el-button>
-    <el-button size="small" type="primary" @click="goPassword">{{$t('确 定')}}</el-button>
-  </span>
+        <el-button size="small" @click="onClose">{{ $t("取 消") }}</el-button>
+        <el-button size="small" type="primary" @click="goPassword">{{
+          $t("确 定")
+        }}</el-button>
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import headeTemp from './modules/header.vue'
-import asideTemp from './modules/aside.vue'
-import menuTemp from './modules/menu.vue'
-import navTemp from './modules/navRight.vue'
-import socketMessage from '@/components/socketMessage/index.vue'
+import headeTemp from "./modules/header.vue";
+import asideTemp from "./modules/aside.vue";
+import menuTemp from "./modules/menu.vue";
+import navTemp from "./modules/navRight.vue";
+import socketMessage from "@/components/socketMessage/index.vue";
 
-import {mapGetters} from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-  components:{
+  components: {
     headeTemp,
     asideTemp,
     menuTemp,
     navTemp,
     socketMessage,
-
   },
   computed: {
     ...mapGetters({
-      pageCache: 'pageCache'
-    })
+      pageCache: "pageCache",
+    }),
   },
-  data () {
+  data() {
     return {
-      timer:null,
-      marginTrue:false,
-      divHeight:'',
-      divTop:'',
-      dialogVisible:false
-    }
+      timer: null,
+      marginTrue: false,
+      divHeight: "",
+      divTop: "",
+      dialogVisible: false,
+      show: true,
+      dateNow: Date.now(),
+    };
   },
-  methods:{
-    getModules (mod,type) {
+  methods: {
+    onRender() {
+      this.$refs.menu.rander();
+      this.$refs.AsideTemp.dateNow = Date.now();
+      this.$refs.AsideTemp.systemList = JSON.parse(
+        sessionStorage.getItem("module_info")
+      );
+      //部分路由切换后依旧不刷新，强制重新渲染
+      if(["salesfunnel"].includes(this.$route.name)) this.dateNow = false
+      this.$nextTick(() => {
+        this.debouned();
+        this.dateNow = Date.now();
+      });
+    },
+    getModules(mod, type) {
       // this.$refs['menu'].setModules(mod,type)
     },
-    debouned () {
+    debouned() {
       if (this.timer) {
-        clearTimeout(this.timer)
+        clearTimeout(this.timer);
       }
       this.timer = setTimeout(() => {
-        let size = this.$refs.menu.$refs.menuList.$el.clientHeight / 40 -1
-        if (this.$refs.menu.$refs.menuList.$el.clientHeight === 80){
-          this.divTop =(this.$refs.menu.$refs.menuList.$el.clientHeight - (25 * size))  + 'px'
-        }else {
-          this.divTop = 0 + 'px'
+        let size = this.$refs.menu.$refs.menuList.$el.clientHeight / 40 - 1;
+        if (this.$refs.menu.$refs.menuList.$el.clientHeight === 80) {
+          this.divTop =
+            this.$refs.menu.$refs.menuList.$el.clientHeight - 25 * size + "px";
+        } else {
+          this.divTop = 0 + "px";
         }
 
-       /* this.divHeight = (this.$refs.divContent.clientHeight - this.$refs.menu.$refs.menuList.$el.clientHeight + 10) + 'px'*/
-       /* if (this.$refs.menu.$el.clientWidth < 1206 && Array.from(this.$refs.menu.$el.getElementsByTagName('li')).filter(item => item.className.indexOf('el-submenu') != -1).length > 8) {
+        /* this.divHeight = (this.$refs.divContent.clientHeight - this.$refs.menu.$refs.menuList.$el.clientHeight + 10) + 'px'*/
+        /* if (this.$refs.menu.$el.clientWidth < 1206 && Array.from(this.$refs.menu.$el.getElementsByTagName('li')).filter(item => item.className.indexOf('el-submenu') != -1).length > 8) {
           this.marginTrue = true
         } else {
           this.marginTrue = false
         }*/
-      },200)
+      }, 200);
     },
-    goPassword(){
-      this.dialogVisible = false
-      this.$router.push('/user_center')
-      sessionStorage.setItem('password','1')
-      sessionStorage.setItem('isPassword','1')
+    goPassword() {
+      this.dialogVisible = false;
+      this.$router.push("/user_center");
+      sessionStorage.setItem("password", "1");
+      sessionStorage.setItem("isPassword", "1");
     },
-    handleClose(){
-      this.dialogVisible = false
-      sessionStorage.setItem('password','1')
-      sessionStorage.setItem('isPassword','0')
+    handleClose() {
+      this.dialogVisible = false;
+      sessionStorage.setItem("password", "1");
+      sessionStorage.setItem("isPassword", "0");
+    },
+    onClose() {
+      this.dialogVisible = false;
+      sessionStorage.setItem("password", "1");
+      sessionStorage.setItem("isPassword", "0");
     },
-    onClose(){
-      this.dialogVisible = false
-      sessionStorage.setItem('password','1')
-      sessionStorage.setItem('isPassword','0')
-    }
   },
   mounted() {
-    if (JSON.parse(sessionStorage.getItem('active_password')) == '1' && JSON.parse(sessionStorage.getItem('password')) != '1'){
-      this.dialogVisible = true
+    if (
+      JSON.parse(sessionStorage.getItem("active_password")) == "1" &&
+      JSON.parse(sessionStorage.getItem("password")) != "1"
+    ) {
+      this.dialogVisible = true;
     }
     /*this.debouned()*/
-   /* console.log('长度')
+    /* console.log('长度')
     console.log(this.$refs.menu.$refs.menuList.$el.clientHeight,'高度')
     console.log(this.$refs.menu.$refs.menuList.$el.clientHeight % 60)
     if (this.$refs.menu.$refs.menuList.$el.clientHeight === 120){
@@ -121,45 +161,42 @@ export default {
     }*/
   },
   created() {
-    window.addEventListener('resize',this.debouned)
+    window.addEventListener("resize", this.debouned);
     this.$nextTick(() => {
-      this.debouned()
-    })
+      this.debouned();
+    });
   },
-}
-
+};
 </script>
 <style>
-.panel{
+.panel {
   background: url("../../assets/wallhaven-0pq8gm.jpeg") no-repeat;
   background-size: cover;
 }
-.el-menu{
-  border-right:0
+.el-menu {
+  border-right: 0;
 }
 </style>
 <style scoped>
-.body__panel{
+.body__panel {
   height: 100vh;
   /* padding-right: 16px; */
   padding-right: 60px;
   margin-right: 10px;
   overflow-y: scroll;
 }
-.body__panel::-webkit-scrollbar{
-  display:none !important;
-
+.body__panel::-webkit-scrollbar {
+  display: none !important;
 }
 .sticky {
   position: sticky;
 }
-.radius{
+.radius {
   /* margin: 16px 0; */
-  border-radius:10px;
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
-  transform: translate3d(0,-2px,0);
+  transform: translate3d(0, -2px, 0);
   background: #fff;
 }
-
 </style>

src/components/newLayout/modules/aside.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div v-if='dateNow'>
   <div class="aside__panel" :class="!collapse?'width-160':'bg'">
     <div  class="logo flex-align-center" :class="collapse?'flex-around':''">
       <i class="el-icon-s-fold inline-16" @click="collapse = !collapse"></i>
@@ -52,13 +52,13 @@
       class="el-menu-vertical-demo">
       <div class="menu_scroll__panel">
         <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')">
-          <div slot="title"><span class="name__icon inline-16" style="text-align:center">{{item.systemname.substr(0, 1)}}</span>{{item.systemname}}</div>
+          <div slot="title"><span class="name__icon inline-16" style="text-align:center">{{item.systemname.substr(0, 1)}}</span>{{$t(item.systemname)}}</div>
         </el-menu-item>
         <el-divider class="divider"></el-divider>
         <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">应用</p> -->
         <!-- <el-divider content-position="left">应用</el-divider> -->
         <el-menu-item :index="String(index + 10)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')">
-          <div slot="title"><span class="name__icon inline-16" style="text-align:center">{{item.systemappname.substr(0, 1)}}</span>{{item.systemappname}}</div>
+          <div slot="title"><span class="name__icon inline-16" style="text-align:center">{{item.systemappname.substr(0, 1)}}</span>{{$t(item.systemappname)}}</div>
         </el-menu-item>
       </div>
       <div>
@@ -86,7 +86,8 @@ export default {
       collapse:false,
       fixedMenu:'no__panel',
       timer:null,
-      activeIndex:'0'
+      activeIndex:'0',
+      dateNow: Date.now()
     }
   },
   computed:{

src/components/newLayout/modules/header.vue

@@ -141,6 +141,7 @@ export default {
       languagename: "",
     };
   },
+  props:['onRender'],
   computed: {
     ...mapGetters({
       siteinfo: "siteinfo",
@@ -257,37 +258,38 @@ export default {
       localStorage.setItem("lang", type);
       this.$nextTick(() => {
         this.$i18n.locale = type;
+        this.$api
+          .requested({
+            classname: "sysmanage.develop.userauthforweb.userauth",
+            method: "query_userauth",
+            content: {
+              place: 1,
+              date: Date.now(),
+            },
+          })
+          .then((res) => {
+            let active_modules = JSON.parse(
+              sessionStorage.getItem("active_modules")
+            );
+            res.data.forEach((v) => {
+              let item = v.modules.find((e) => {
+                return e.systemmoduleid == active_modules.systemmoduleid;
+              });
+              if (item) {
+                console.log("重新获取权限",item)
+                active_modules = item;
+              }
+            });
+            sessionStorage.setItem("module_info", JSON.stringify(res.data));
+            sessionStorage.setItem(
+              "active_modules",
+              JSON.stringify(active_modules)
+            );
+            this.basicData.querySite_Parameter();
+            this.$emit('onRender')
+          });
       });
     },
-
-    async qusetLanguage() {
-      this.nowType = sessionStorage.getItem("lang").toUpperCase();
-      const res = await this.$api.requested({
-        id: 2024062809072801,
-        content: {
-          languagecode: this.nowType,
-        },
-      });
-      switch (this.nowType) {
-        case "EN":
-          Vue.config.lang = "en";
-          Vue.locale("en", Object.assign(enLocale, res.data.EN));
-          break;
-        case "RU":
-          Vue.config.lang = "ru-RU";
-          Vue.locale("ru-RU", Object.assign(ruLocale, res.data.RU));
-          break;
-
-        default:
-          Vue.config.lang = "zh-cn";
-          Vue.locale("zh-cn", Object.assign(zhLocale));
-          break;
-      }
-      this.languagename = this.langusge.filter(
-        (e) => e.languagecode == this.nowType
-      )[0].languagename;
-      console.log(this.languagename, "语言名称");
-    },
   },
 
   mounted() {
@@ -301,7 +303,6 @@ export default {
       return e.siteid !== this.accountInfo.siteid;
     });
     this.basicData.querySite_Parameter();
-    this.qusetLanguage();
   },
 };
 </script>

src/components/newLayout/modules/menu.vue

@@ -1,10 +1,31 @@
 <template>
-  <div class="menu_panel" >
-    <div  v-if="show">
-      <el-menu v-if="show"  :default-active="activeIndex" active-text-color="#3874f6" text-color="#333" class="el-menu-demo shadow" mode="horizontal" @select="handleSelect" ref="menuList" >
-        <el-submenu v-for="(mod,index) in sys_modules" :key="index" :index="String(index)" >
-          <template slot="title"><b>{{mod.systemmodulename}}</b></template>
-          <el-menu-item :index="app.path" v-for="(app) in mod.apps" :key="app.index" @click="setActiveModules(mod,app)">{{app.meta.title}}</el-menu-item>
+  <div class="menu_panel">
+    <div v-if="show">
+      <el-menu
+        v-if="key"
+        :default-active="activeIndex"
+        active-text-color="#3874f6"
+        text-color="#333"
+        class="el-menu-demo shadow"
+        mode="horizontal"
+        @select="handleSelect"
+        ref="menuList"
+      >
+        <el-submenu
+          v-for="(mod, index) in sys_modules"
+          :key="index"
+          :index="String(index)"
+        >
+          <template slot="title"
+            ><b>{{ $t(mod.systemmodulename) }}</b></template
+          >
+          <el-menu-item
+            :index="app.path"
+            v-for="app in mod.apps"
+            :key="app.index"
+            @click="setActiveModules(mod, app)"
+            >{{ $t(app.meta.title) }}</el-menu-item
+          >
         </el-submenu>
         <!-- <el-menu-item v-show="!hasMoreApp(mod)" :index="mod.path" v-for="(mod) in sys_modules" :key="mod.index" @click="setActiveModules(mod,mod.apps[0])"><b>{{mod.systemmodulename}}</b></el-menu-item> -->
       </el-menu>
@@ -13,89 +34,98 @@
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
+import { mapGetters } from "vuex";
 export default {
-  data () {
+  data() {
     return {
-      activeIndex:'2',
-      modules:[],
-      show:true
-    }
+      activeIndex: "2",
+      modules: [],
+      key: Date.now(),
+      show: true,
+    };
   },
-  computed:{
+  computed: {
     ...mapGetters({
-      activeApp:'activeApp',
-      sys_modules:'sys_modules'
-    })
+      activeApp: "activeApp",
+      sys_modules: "sys_modules",
+    }),
   },
-  methods:{
-    hasMoreApp (mod) {
+  methods: {
+    hasMoreApp(mod) {
       if (mod.apps.length > 1) {
-        return true
+        return true;
       } else {
-        mod.path = mod.apps[0].path
-        return false
+        mod.path = mod.apps[0].path;
+        return false;
       }
     },
-    setActiveModules (mod,app) {
-      const link = ()=>{
-        this.$router.push({path:app.path})
-      }
-      this.$store.dispatch('setActiveApp',{name:app.systemappname,app:app,val:'',link})
-      sessionStorage.setItem('active_modules',JSON.stringify(mod))
+    setActiveModules(mod, app) {
+      const link = () => {
+        this.$router.push({ path: app.path });
+      };
+      this.$store.dispatch("setActiveApp", {
+        name: app.systemappname,
+        app: app,
+        val: "",
+        link,
+      });
+      sessionStorage.setItem("active_modules", JSON.stringify(mod));
     },
-    setDefaultData (mod) {
-      let active_modules = JSON.parse(sessionStorage.getItem('active_modules'))
-      let sys_modules = JSON.parse(sessionStorage.getItem('module_info'))
-      let arr = sys_modules.filter(e=>{
+    setDefaultData(mod) {
+      let active_modules = JSON.parse(sessionStorage.getItem("active_modules"));
+      let sys_modules = JSON.parse(sessionStorage.getItem("module_info"));
+      let arr = sys_modules.filter((e) => {
         if (e.systemid === active_modules.systemid) {
-          return e
+          return e;
         }
-      })
-      this.$store.dispatch('getModules',{mod:arr[0].modules})
+      });
+      this.$store.dispatch("getModules", { mod: arr[0].modules });
     },
     handleSelect(key, keyPath) {
-      this.activeIndex = key
+      this.activeIndex = key;
+    },
+    rander() {
+      this.setDefaultData();
+      this.key = Date.now();
     },
   },
-  mounted () {
-    this.setDefaultData()
+  mounted() {
+    this.setDefaultData();
   },
-  watch:{
-    activeApp (val) {
-      this.show = false
-      this.$emit('switch')
+  watch: {
+    activeApp(val) {
+      this.show = false;
+      this.$emit("switch");
       setTimeout(() => {
-        this.show = true
-        this.activeIndex = val.path
+        this.show = true;
+        this.activeIndex = val.path;
       }, 0);
-    }
-  }
-}
-
+    },
+  },
+};
 </script>
 <style>
-.el-menu--popup{
+.el-menu--popup {
   padding: 0 10px;
   min-width: 50px;
 }
 </style>
 <style scoped>
-.shadow{
-   box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
-   transform: translate3d(0,-2px,0);
-   border-radius: 10px;
-   border:none;
-   overflow: hidden;
+.shadow {
+  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+  transform: translate3d(0, -2px, 0);
+  border-radius: 10px;
+  border: none;
+  overflow: hidden;
 }
-.menu_panel{
+.menu_panel {
   padding: 0;
-  height:40px;
+  height: 40px;
   width: 100%;
   background: #fff;
   border-radius: 10px;
 }
-/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {
+/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
   height: 40px;
   line-height: 40px;
 }

src/components/normal-basic-layout-new/index.vue

@@ -4,7 +4,7 @@
       <div class="layout-header-panel container normal-panel">
         <div class="flex-align-center flex-between">
           <div class="normal-margin flex-align-center">
-            <div v-if="activeApp" style="font-size:26px;font-weight:300;flex-shrink:0">{{customTitle ? customTitle : activeApp.meta.title}}&nbsp;
+            <div v-if="activeApp" style="font-size:26px;font-weight:300;flex-shrink:0">{{$t(customTitle ? customTitle : activeApp.meta.title)}}&nbsp;
               <!-- <i v-if="!customTitle" @click="addToAsideBar" style="color:#999" :class="showAppCollection()?'el-icon-star-on collection':'el-icon-star-off'"></i> -->
               <div v-if="!customTitle" style="display:inline">
                 <img width="20" v-if="showAppCollection()" src="@/assets/icons/incoll.svg" alt="">

src/components/normal-basic-layout/modules/table.vue

@@ -11,7 +11,7 @@
         align="center"
         @handleSelectionChange="handleSelectionChange">
       </el-table-column>
-      <el-table-column show-overflow-tooltip v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :min-width="tool.calcTableColWidth($refs.tables,layout,index)" :label="col.title" :fixed="checkFixed(col.columnname)">
+      <el-table-column show-overflow-tooltip v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :min-width="tool.calcTableColWidth($refs.tables,layout,index)" :label="$t(col.title)" :fixed="checkFixed(col.columnname)">
         <template slot-scope="scope">
 
           <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>

src/components/normal-basic-layout/normal.vue

@@ -2,7 +2,7 @@
   <div class="basic__layout__panel">
     <div style="padding:16px 16px 0 16px;" class="flex-align-center flex-between" >
       <div class="flex-align-center ">
-        <div class="inline-16" v-if="activeApp" style="font-size:26px;font-weight:300">{{customTitle ? customTitle : activeApp.meta.title}}&nbsp;
+        <div class="inline-16" v-if="activeApp" style="font-size:26px;font-weight:300">{{$t(customTitle ? customTitle : activeApp.meta.title)}}&nbsp;
           <div v-if="!customTitle && isPortraitShow !== 'true'" style="display:inline">
               <img width="20" v-if="showAppCollection()" src="@/assets/icons/incoll.svg" alt="">
               <img width="20" v-else src="@/assets/icons/uncoll.svg" @click="addToAsideBar" alt="">

src/components/table/index10.vue

@@ -8,7 +8,7 @@
           type="selection"
           width="35" fixed v-if="checkbox">
       </el-table-column>
-      <el-table-column v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="tool.calcTableColWidth($refs.table,layout,index)" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
+      <el-table-column v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="$t(col.title)" :min-width="tool.calcTableColWidth($refs.table,layout,index)" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
         <template :slot="headerOptions ? headerOptions.includes(col.columnname) ? 'header' : '' : ''" slot-scope="scope">
           <slot name="header" :column="{data:scope.row,columnname:col.columnname}"></slot>
         </template>
@@ -17,7 +17,7 @@
             <!-- 自定义表格显示内容 -->
             <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
             <!-- 否则就是默认 -->
-            <span v-else>{{scope.row[col.columnname]}}</span>
+            <span v-else>{{$t(scope.row[col.columnname])}}</span>
             <!-- 操作结构内容 -->
             <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
           </div>

src/utils/tool.js

@@ -241,7 +241,6 @@ export default {
         vm.doLayout()
       },1000)
       let isCheckbox = ths[0].querySelector('.el-checkbox__inner') ? 1 : 0
-      console.log(widths);
       
       if (typeof layout == 'number') {
         return widths[index+isCheckbox] > layout ? widths[index+isCheckbox]:layout