国际化

src/components/BusinessButton.vue

 <template>
     <div class="bus-button">        
-        <c-button type="primary" v-on:click="save">提交</c-button>
-        <c-button type="primary" v-on:click="pedding">暂存</c-button>
-        <c-button type="primary" v-on:click="check">校核</c-button>
-        <c-button v-on:click="exit">退出</c-button>
+        <c-button type="primary" v-on:click="save">{{ $t('buttons.submit') }}</c-button>
+        <c-button type="primary" v-on:click="pedding">{{ $t('buttons.stash') }}</c-button>
+        <c-button type="primary" v-on:click="check">{{ $t('buttons.check') }}</c-button>
+        <c-button v-on:click="exit">{{ $t('buttons.quit') }}</c-button>
     </div>
 </template>
 <script>
@@ -79,7 +79,7 @@ export default {
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(()=>{
-                this.$router.history.push("/business/office")
+                this.$router.history.push("/home")
             })
         },
         getVM(){

src/components/FormItem.vue

+<template>
+  <el-form-item
+    :label="getL18nLabel()"
+    :prop="prop"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <c-highlight-content
+      :id="previewLabel || label || prop"
+      :path="preProp ? preProp + '.' + prop : prop"
+      v-if="prop"
+    >
+      <slot></slot>
+    </c-highlight-content>
+    <slot v-else></slot>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  props: ["label", "prop", "previewLabel", "preProp"],
+  methods: {
+    getL18nLabel() {
+      if (!this.label || this.label.trim() === "") {
+        return "";
+      }
+      // 默认中文作 key
+      if (this.$store.state.I18n.lang === "zh") {
+        return this.label;
+      }
+      let vm = this,
+        root = null;
+      while (true) {
+        if (vm.root) {
+          root = vm.root;
+          break;
+        }
+        if (vm.$vnode.componentOptions.tag === "el-form") {
+          break;
+        }
+        vm = vm.$parent;
+      }
+      //  若找到了root，表明该form-item是在交易下的
+      if (root) {
+        const opts = root.$vnode.componentOptions
+        const name = opts.Ctor.options.name || opts.tag
+        // const key = `tx.${root.trnName}.${this.label}`;
+        const key = `tx.${name}.${this.label}`;
+        const tVal = this.$t(key);
+        return tVal === key ? this.label : tVal;
+      }
+      return this.label;
+    },
+  },
+};
+</script>
+
+<style></style>

src/components/FunctionBtn.vue

@@ -5,10 +5,10 @@
 <template>
   <div class="m-Btn-eContainer" v-if="!buttonHide && ((!isReview && !funcBtnHide) || showSetBtn)">
     <div class="m-funcBtn-eContainer" v-if="!isReview && !buttonHide && !funcBtnHide">
-      <el-button type="primary" size="small" @click="start" :loading="$store.state.Status.loading.submit">提交</el-button>
-      <el-button size="small" @click="check" :loading="$store.state.Status.loading.check">检核</el-button>
-      <el-button size="small" @click="save" :loading="$store.state.Status.loading.stash">暂存</el-button>
-      <el-button size="small" @click="handleCancel">退出</el-button>
+      <el-button type="primary" size="small" @click="start" :loading="$store.state.Status.loading.submit">{{ $t('buttons.submit') }}</el-button>
+      <el-button size="small" @click="check" :loading="$store.state.Status.loading.check">{{ $t('buttons.check') }}</el-button>
+      <el-button size="small" @click="save" :loading="$store.state.Status.loading.stash">{{ $t('buttons.stash') }}</el-button>
+      <el-button size="small" @click="handleCancel">{{ $t('buttons.quit') }}</el-button>
     </div>
     <div class="m-zhanWei-forfuncBtn" v-if="!buttonHide && showSetBtn && (funcBtnHide || isReview)"></div>
     <div class="m-openleft" v-if="!buttonHide && showSetBtn">
@@ -19,7 +19,8 @@
         class="m-setting-btn"
         v-show="!openflag"
         @click="open"
-        >展开
+        >
+        {{ $t('buttons.unfold') }}
         <i class="el-icon-setting" size="mini"></i>
       </el-button>
       <el-button
@@ -29,7 +30,8 @@
         class="m-setting-btn"
         v-show="openflag"
         @click="close"
-        >收起
+        >
+        {{ $t('buttons.fold') }}
         <i class="el-icon-setting" size="mini"></i>
       </el-button>
       <div class="m-openleft-item" v-show="openflag">
@@ -103,7 +105,7 @@ export default {
             }, 500)
           } else {
             setTimeout(() => {
-              this.$router.push('/business/office')
+              this.$router.push('/home')
             }, 500)
           }
         })

src/components/ListSearch.vue

@@ -2,16 +2,16 @@
   <div class="m-table-search">
     <slot v-bind:searchToggle="searchToggle"></slot>
     <div v-if="formCount>3" :class="searchToggle? (formCount%3 == 0?'m-table-search-operation':'m-table-search-operation-bottom'): 'm-table-search-operation-top'" >
-      <el-button size="small" @click="handleReset">重置</el-button>
-      <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
+      <el-button size="small" @click="handleReset">{{ $t('buttons.reset') }}</el-button>
+      <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">{{ $t('buttons.query') }}</el-button>
       <el-button type="text" @click="handleToggleSearch">
-        {{searchToggle?'收起': '展开'}}
+        {{searchToggle? $t('buttons.fold') : $t('buttons.unfold') }}
         <i :class="searchToggle? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
       </el-button>
     </div>
     <div v-if="formCount <= 3" :class="formCount == 3? 'm-table-search-operation': 'm-table-search-operation-top'">
-      <el-button size="small" @click="handleReset">重置</el-button>
-      <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
+      <el-button size="small" @click="handleReset">{{ $t('buttons.reset') }}</el-button>
+      <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">{{ $t('buttons.query') }}</el-button>
     </div>
   </div>
 </template>

src/components/TableColumnItem.vue

+<template>
+  <el-table-column :label="generateI18nLabel()" v-bind="$attrs" v-on="$listeners">
+		<slot />
+	</el-table-column>
+</template>
+
+<script>
+export default {
+	prop: {
+		label: {
+			type: String
+		}
+	},
+	methods: {
+		/**
+		 * 以英文为主
+		 * 	若 lang 为中文 zh ，则列 label 不变
+		 * 	若 lang 为英文 en ，则需将中文翻译为英文（得提前配置好表格头的国际化：中 --> 英）
+		 */
+		generateI18nLabel() {
+			const lang = this.$store.state.I18n.lang
+			if (lang === "zh") {
+				return this.label;
+			}
+			return this.$t(this.label)
+		}
+	}
+};
+</script>
+
+<style></style>

src/components/index.js

@@ -30,6 +30,8 @@ import List from "./List"
 import ListSearch from "./ListSearch"
 import HighlightContent from "./HighlightContent"
 import SearchInput from "./SearchInput.vue"
+import FormItem from "./FormItem.vue"
+import TableColumnItem from "./TableColumnItem.vue"
 // 循环组件
 import MessageArea from '~/widget/SwfMessage/MessageArea'
 import CycList from '~/widget/SwfMessage/CycList'
@@ -85,6 +87,8 @@ export default {
         Vue.component("c-cascader", Cascader)
         Vue.component("c-highlight-content", HighlightContent)
         Vue.component("c-search-input", SearchInput)
+        Vue.component("c-form-item", FormItem)
+        Vue.component("c-table-column", TableColumnItem)
         Vue.component("c-paged-select", PagedSelect)
         Vue.component("c-function-btn", FunctionBtn)
         Vue.component("c-bus-button", BusinessButon)

src/lang/local/zh/tx/public/index.js → src/lang/local/en/codeTable.js

 /**
- * 交易中的公共模块
+ * 码表值
  */
 export default {
     

src/lang/local/en/common.js

+/**
+ * 页面中的公共部分（顶部、左侧菜单栏、页签等）
+ */
+export default {
+  router: {
+
+  },
+  header: {
+
+  },
+  tagsView: {
+    refresh: "Refresh",
+    close: "Close",
+    closeOthers: "Close Others",
+    closeAll: "Close All",
+  },
+	login: {
+    namePlaceholder: "Please enter username",
+    pwdPlaceholder: "Please enter password",
+    loginBtn: "Login"
+	},
+	sideMenu: {
+
+	},
+	home: {
+		
+	},
+  buttons: {
+    add: "Add",
+    delete: "Delete",
+    query: "Query",
+    edit: "Edit",
+    update: "Update",
+    details: "Details",
+    submit: "Submit",
+    check: "Check",
+    stash: "Stash",
+    quit: "Quit",
+    cancel: "Cancel",
+    fold: "Fold",
+    unfold: "Unfold",
+    reset: "Reset",
+    toolBar: "ToolBar"
+  }
+};

src/lang/local/en/index.js

+import codeTable from "./codeTable";
+import common from "./common";
+import tx from "./tx";
+
 export default {
-  tagsView: {
-    refresh: "Refresh",
-    close: "Close",
-    closeOthers: "Close Others",
-    closeAll: "Close All",
-  },
+  ...common,
+  codeTable,
+  tx,
 };

src/lang/local/en/tx/index.js

+const modulesFiles = require.context('./modules', true, /\.js$/)
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {})
+
+/**
+ * 交易模块
+ */
+export default {
+	...modules
+}
\ No newline at end of file

src/lang/local/en/tx/modules/Ditopn.js

+import Setpan from "../public/Setpan"
+
+export default {
+    "电话": "Tel",
+    "邮编": "Email",
+    ...Setpan
+}
\ No newline at end of file

src/lang/local/en/tx/public/Setpan.js

+/**
+ * 对应交易中的公共组件（Setpan.vue）
+ */
+export default {
+
+}
\ No newline at end of file

src/lang/local/zh/common.js

@@ -2,19 +2,44 @@
  * 页面中的公共部分（顶部、左侧菜单栏、页签等）
  */
 export default {
+  router: {
+
+  },
+  header: {
+
+  },
   tagsView: {
     refresh: "刷新",
     close: "关闭",
-    closeOthers: "关闭其它",
+    closeOthers: "关闭其他",
     closeAll: "关闭所有",
   },
 	login: {
-
+    namePlaceholder: "请输入登录名",
+    pwdPlaceholder: "请输入密码",
+    loginBtn: "登录"
 	},
 	sideMenu: {
 
 	},
 	home: {
 		
+	},
+  buttons: {
+    add: "添加",
+    delete: "删除",
+    query: "查询",
+    edit: "编辑",
+    update: "更新",
+    details: "详情",
+    submit: "提交",
+    check: "检核",
+    stash: "暂存",
+    quit: "退出",
+    cancel: "取消",
+    fold: "收起",
+    unfold: "展开",
+    reset: "重置",
+    toolBar: "工具条"
   }
 };

src/lang/local/zh/tx/index.js

-const modulesFiles = require.context('./', true, /\.js$/)
+const modulesFiles = require.context('./modules', true, /\.js$/)
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
   const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
   const value = modulesFiles(modulePath)

src/lang/local/zh/tx/modules/ditopn.js

+import Setpan from "../public/Setpan"
+
 export default {
 
+    ...Setpan
 }
\ No newline at end of file

src/lang/local/zh/tx/public/Setpan.js

+/**
+ * 对应交易中的公共组件（Setpan.vue）
+ */
+export default {
+
+}
\ No newline at end of file

src/permission.js

@@ -8,13 +8,20 @@ import { Message } from "element-ui";
 router.beforeEach(async (to, from, next) => {
   // 限制页签的数量
   if (to.path.startsWith("/business")) {
-    if (store.state.TagsView.visitedViews.length >= store.state.TagsView.visitedViewsMaxVal) {
+    const visitedViews = store.state.TagsView.visitedViews;
+    const visitedViewsMaxVal = store.state.TagsView.visitedViewsMaxVal;
+    const fullPaths = visitedViews.map((tv) => tv.fullPath);
+    if (fullPaths.includes(to.fullPath)) {
+      next();
+    } else {
+      if (visitedViews.length >= visitedViewsMaxVal) {
         Message.warning(
-        `页签数超过最大限制（${store.state.TagsView.visitedViewsMaxVal}），请先关闭其他页签！`
+          `页签数超过最大限制（${visitedViewsMaxVal}），请先关闭其他页签！`
         );
         return;
       }
     }
+  }
   next();
 });
 

src/views/Business/Ditopn/Ovwp.vue

@@ -505,16 +505,16 @@
       </c-col> -->
 
       <c-col :span="14">
-        <el-form-item label="邮编" prop="didgrp.apl.pts.youzbm">
+        <c-form-item label="邮编" prop="didgrp.apl.pts.youzbm">
           <c-input
             v-model="model.didgrp.apl.pts.youzbm"
             maxlength="6"
             placeholder="请输入邮编"
           ></c-input>
-        </el-form-item>
+        </c-form-item>
       </c-col>
       <c-col :span="10">
-        <el-form-item
+        <c-form-item
           label="电话"
           label-width="40px"
           style="margin-left: 12px"
@@ -525,7 +525,7 @@
             maxlength="16"
             placeholder="请输入电话"
           ></c-input>
-        </el-form-item>
+        </c-form-item>
       </c-col>
 
       <c-col :span="24">

src/views/Business/index.vue

@@ -27,7 +27,7 @@ export default {
 <style>
 #business_container {
   /* height: 100%; */
-  height: calc(100% - 45px);
+  height: calc(100% - 36px);
   position: absolute;
   width: 100%;
 }

src/views/Layout/components/TagsView/index.vue

@@ -9,15 +9,20 @@
         v-for="tag in visitedViews"
         ref="tag"
         :key="tag.path"
-        :class="{'active': isActive(tag), activeIcon: !isAffix(tag)}"
+        :class="{ active: isActive(tag), activeIcon: !isAffix(tag) }"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
         class="tags-view-item"
         @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent.native="openMenu(tag, $event)"
       >
-        <span v-if="isAffix(tag) && tag.meta.icon" :class="tag.meta.icon"></span>
-        {{ typeof tag.title === 'function' ? tag.title(tag.params) : tag.title }}
+        <span
+          v-if="isAffix(tag) && tag.meta.icon"
+          :class="tag.meta.icon"
+        ></span>
+        {{
+          typeof tag.title === "function" ? tag.title(tag.params) : tag.title
+        }}
         <span
           v-if="!isAffix(tag)"
           class="el-icon-close"
@@ -30,12 +35,14 @@
       :style="{ left: left + 'px', top: top + 'px' }"
       class="contextmenu"
     >
-      <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
+      <li @click="refreshSelectedTag(selectedTag)">
+        {{ $t("tagsView.refresh") }}
+      </li>
       <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        {{ $t('tagsView.close') }}
+        {{ $t("tagsView.close") }}
       </li>
-      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
-      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
+      <li @click="closeOthersTags">{{ $t("tagsView.closeOthers") }}</li>
+      <li @click="closeAllTags(selectedTag)">{{ $t("tagsView.closeAll") }}</li>
     </ul>
   </div>
 </template>
@@ -43,7 +50,7 @@
 <script>
 import ScrollPane from "./ScrollPane";
 import path from "path";
-import { routes as allRoute } from "~/routers"
+import { routes as allRoute } from "~/routers";
 
 export default {
   components: { ScrollPane },
@@ -151,6 +158,10 @@ export default {
       });
     },
     closeSelectedTag(view) {
+      this.$confirm("您有未保存的数据，确定退出吗, 是否继续?", "提示", {
+        showCancelButton: true,
+        type: "warning",
+      }).then(() => {
         this.$store
           .dispatch("TagsView/delView", view)
           .then(({ visitedViews }) => {
@@ -158,6 +169,7 @@ export default {
               this.toLastView(visitedViews, view);
             }
           });
+      });
     },
     closeOthersTags() {
       this.$router.push(this.selectedTag);
@@ -254,7 +266,9 @@ export default {
   color: #fff;
   border-color: var(--themecolor);
 }
-.tags-view-container .tags-view-wrapper .tags-view-item.active.activeIcon::before {
+.tags-view-container
+  .tags-view-wrapper
+  .tags-view-item.active.activeIcon::before {
   content: "";
   background: #fff;
   display: inline-block;
@@ -264,7 +278,7 @@ export default {
   position: relative;
   margin-right: 2px;
 }
-.tags-view-container .tags-view-wrapper .tags-view-item [class^=el-icon-] {
+.tags-view-container .tags-view-wrapper .tags-view-item [class^="el-icon-"] {
   font-size: 15px;
 }
 .tags-view-container .tags-view-wrapper .tags-view-item .el-icon-close {

src/views/Login/index.vue

@@ -6,15 +6,15 @@
                 <p style="text-align:left;font-size:1.2em;color:#888">用户登录 / LOGIN IN</p>
                 <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"  size="small" >
                     <el-form-item  prop="username" >
-                        <el-input prefix-icon="el-icon-user" placeholder="请输入登录名" v-model="loginForm.username"></el-input>
+                        <el-input prefix-icon="el-icon-user" :placeholder="$t('login.namePlaceholder')" v-model="loginForm.username"></el-input>
                     </el-form-item>
 
                     <el-form-item  prop="password" >
-                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
+                        <el-input prefix-icon="el-icon-lock" :placeholder="$t('login.pwdPlaceholder')" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                     </el-form-item>
 
                     <el-form-item>
-                        <el-button style="width:100%;margin-top:1em;margin:0 0" type="primary" @click="submitForm('loginForm')">登录</el-button>
+                        <el-button style="width:100%;margin-top:1em;margin:0 0" type="primary" @click="submitForm('loginForm')">{{$t('login.loginBtn')}}</el-button>
                     </el-form-item>
                 </el-form>
             </div>

src/views/Public/Ptap.vue

@@ -49,7 +49,7 @@
         type="primary"
         @click="onAplpDet"
       >
-        详情
+        {{ $t('buttons.details') }}
       </c-button>
       <!-- </el-form-item> -->
     </c-col>