修改语言插件

manager/src/views/home/home.vue

@@ -197,6 +197,13 @@
       <Table stripe :columns="tophotShopsColumns" :data="topHotShopsData"></Table>
 
     </div>
+    <div>
+      <!-- 测试数据 -->
+      <Input v-model="test.a" />
+      {{test}}
+      <i18nBox :value="test.a" @language="(val)=>{test.languages = val}"></i18nBox>
+      <!-- 测试数据 -->
+    </div>
   </div>
 </template>
 
@@ -205,11 +212,22 @@ import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
 import * as API_Member from "@/api/member";
+// import i18nBox from '@/views/lili-components/i18n-translate'
 export default {
   name: "home",
+  // components:{
+  //   i18nBox
+  // },
   data() {
     return {
-      tophotShopsColumns: [ // 表格表头
+      // 测试数据
+      test: {
+        a: "test",
+        languages:[]
+      },
+      // 测试数据结束
+      tophotShopsColumns: [
+        // 表格表头
         {
           type: "index",
           width: 100,
@@ -275,7 +293,8 @@ export default {
       pvChart: "", // 流量统计
       orderChart: "", // 订单统计
       historyMemberChart: "", // 最近会员流量统计
-      params: { // 请求参数
+      params: {
+        // 请求参数
         searchType: "LAST_SEVEN",
       },
       // 订单传参
@@ -480,10 +499,8 @@ export default {
       let data = this.chartList;
 
       data.forEach((item) => {
-
         item.title = "历史在线人数";
-        item.date = item.date.substring(5)
-
+        item.date = item.date.substring(5);
       });
       this.historyMemberChart.data(data);
 
@@ -495,16 +512,14 @@ export default {
       this.historyMemberChart
         .line()
         .position("date*num")
-        .color("title",['#ffaa71'])
-        .shape("smooth")
-      ;
+        .color("title", ["#ffaa71"])
+        .shape("smooth");
 
       this.historyMemberChart
         .point()
         .position("date*num")
-        .color("title",['#ffaa71'])
-        .shape("circle")
-      ;
+        .color("title", ["#ffaa71"])
+        .shape("circle");
       this.historyMemberChart.render();
     },
     // 初始化信息

manager/src/views/lili-components/i18n-translate.vue

@@ -2,48 +2,52 @@
   <div>
     <Button @click="enable = true">语言设定</Button>
     <Modal v-model="enable" draggable sticky scrollable :mask="false" :title="title">
-      <div>
-        <RadioGroup v-model="language">
-          <Radio :label="item.value || item.label" :key="index" v-for="(item,index) in data">
-            <span>{{item.title || item.name}}</span>
-          </Radio>
-        </RadioGroup>
-      </div>
 
+      <Tabs closable type="card" @on-tab-remove="handleTabRemove" :value="language[0].title">
+        <TabPane v-for="(item,index) in language" :key="index" :label="item.title" :name="item.title">
+          <Input v-model="item.___i18n" />
+        </TabPane>
+      </Tabs>
     </Modal>
   </div>
 </template>
 
 <script>
+import {language} from "./languages";
 export default {
   /**
-   * data 循环的语言内容格式 [{'title':'test','value':'val'}]
+   * tabs 循环的语言内容格式 [{'title':'test','value':'val'}]
    */
   props: {
-    data: {
-      type: Array,
-      default: () => {
-        return [];
-      },
+    value: {
+      type: null,
+      default: "",
     },
   },
   watch: {
-    /**
-     * 回调语言内容
-     */
-    language(val) {
-      if (val) {
-        this.$emit("language", val);
-      }
+    language: {
+      handler(val) {
+        this.$emit("language", { language: [...val], val: this.value });
+      },
+      deep: true,
     },
   },
   data() {
     return {
-      language: "", //语言值
+      language,
+      tabVal: "",
       enable: false, //是否开启modal
       title: "转换语言",
     };
   },
+  methods: {
+    //   删除tab标签将没有用的语音进行删除
+    handleTabRemove(tab) {
+      this.language = this.language.filter((item) => {
+        return item.value != tab;
+      });
+    },
+  },
 };
 </script>
 

manager/src/views/lili-components/languages.js

@@ -0,0 +1 @@
+export const language = [{ title: "中文",value:1 }, { title: "英文" ,value:2}];

seller/src/views/lili-components/i18n-translate.vue

@@ -2,48 +2,52 @@
   <div>
     <Button @click="enable = true">语言设定</Button>
     <Modal v-model="enable" draggable sticky scrollable :mask="false" :title="title">
-      <div>
-        <RadioGroup v-model="language">
-          <Radio :label="item.value || item.label" :key="index" v-for="(item,index) in data">
-            <span>{{item.title || item.name}}</span>
-          </Radio>
-        </RadioGroup>
-      </div>
 
+      <Tabs closable type="card" @on-tab-remove="handleTabRemove" :value="language[0].title">
+        <TabPane v-for="(item,index) in language" :key="index" :label="item.title" :name="item.title">
+          <Input v-model="item.___i18n" />
+        </TabPane>
+      </Tabs>
     </Modal>
   </div>
 </template>
 
 <script>
+import {language} from "./languages";
 export default {
   /**
-   * data 循环的语言内容格式 [{'title':'test','value':'val'}]
+   * tabs 循环的语言内容格式 [{'title':'test','value':'val'}]
    */
   props: {
-    data: {
-      type: Array,
-      default: () => {
-        return [];
-      },
+    value: {
+      type: null,
+      default: "",
     },
   },
   watch: {
-    /**
-     * 回调语言内容
-     */
-    language(val) {
-      if (val) {
-        this.$emit("language", val);
-      }
+    language: {
+      handler(val) {
+        this.$emit("language", { language: [...val], val: this.value });
+      },
+      deep: true,
     },
   },
   data() {
     return {
-      language: "", //语言值
+      language,
+      tabVal: "",
       enable: false, //是否开启modal
       title: "转换语言",
     };
   },
+  methods: {
+    //   删除tab标签将没有用的语音进行删除
+    handleTabRemove(tab) {
+      this.language = this.language.filter((item) => {
+        return item.value != tab;
+      });
+    },
+  },
 };
 </script>
 

seller/src/views/lili-components/languages.js

@@ -0,0 +1 @@
+export const language = [{ title: "中文",value:1 }, { title: "英文" ,value:2}];