国际化页面及功能修改

src/App.vue

@@ -1,11 +1,7 @@
 <template>
   <div id="app" style="position: relative">
     <router-view />
-    <div
+    <div v-show="show" v-adaptive @click="openI18n" style="
-      v-show="show"
-      v-adaptive
-      @click="openI18n"
-      style="
         position: fixed;
         bottom: 50px;
         left: 50px;
@@ -18,68 +14,65 @@
         color: #fff;
         border-radius: 50%;
         cursor: pointer;
-      "
+      ">
-    >
       i18n
     </div>
-    <el-drawer title="国际化" :visible.sync="drawer" direction="rtl" size="80%">
+    <el-drawer :title="$t('il8n:title')" :visible.sync="drawer" :wrapperClosable="false" direction="rtl" size="80%">
-      <div style="width: 320px">
+      <div style="width: 800px">
-        <el-form label-width="100px" size="small">
+        <el-form label-width="100px" @submit.native.prevent size="small" :inline="true" class="demo-form-inline">
-          <el-form-item label="关键字">
+          <el-form-item :label="$t('il8n:search:keyword')">
             <el-input v-model="key" @input="keyChange" />
-            <el-input v-model="key" @input="keyChange" style="display: none" />
+          </el-form-item>
+          <el-form-item :label="$t('il8n:search:state')">
+            <el-select v-model="State" clearable filterable @change="handleStateChange">
+              <el-option v-for="item of $d.InternationalizationKeyState"
+                :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </el-form-item>
         </el-form>
       </div>
-      <el-table
+      <el-table :data="tableData" v-adaptive="{ bottomOffset: 50 }" height="100" style="width: 100%"
-        :data="tableData"
+        @sort-change="handleSortByColumn">
-        v-adaptive="{ bottomOffset: 50 }"
+        <el-table-column prop="Code" :label="$t('il8n:table:label')" width="300" sortable="custom">
-        height="100"
-        style="width: 100%"
-      >
-        <el-table-column prop="Code" label="标签" width="300">
-        </el-table-column>
-        <!--        <el-table-column-->
-        <!--          prop="Description"-->
-        <!--          label="路由"-->
-        <!--          show-overflow-tooltip-->
-        <!--          width="180">-->
-        <!--          <template slot-scope="scope">-->
-        <!--            {{scope.row.Description}}-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
-        <el-table-column prop="Value" label="英文">
           <template slot-scope="scope">
-            <el-input
+            <span @click="$copyText(scope.row.Code)">{{ scope.row.Code }}</span>
-              v-model="scope.row.Value"
-              @input="
-                (e) => {
-                  $set(scope.row, 'Value', e)
-                }
-              "
-              size="mini"
-            ></el-input>
           </template>
         </el-table-column>
-        <el-table-column prop="ValueCN" label="中文">
+        <el-table-column prop="Value" :label="$t('il8n:table:en')" sortable="custom">
           <template slot-scope="scope">
-            <el-input
+            <el-input v-model.trim="scope.row.Value" @input="
-              v-model="scope.row.ValueCN"
-              @input="
               (e) => {
-                  $set(scope.row, 'ValueCN', e)
+                $set(scope.row, 'Value', e.trim())
               }
-              "
+            " size="mini"></el-input>
-              size="mini"
-            ></el-input>
           </template>
         </el-table-column>
+        <el-table-column prop="ValueCN" :label="$t('il8n:table:cn')" sortable="custom">
+          <template slot-scope="scope">
+            <el-input v-model.trim="scope.row.ValueCN" @input="
+              (e) => {
+                $set(scope.row, 'ValueCN', e.trim())
+              }
+            " size="mini"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ValueCN" :label="$t('il8n:table:state')" sortable="custom">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.State" clearable filterable size="mini">
+              <el-option v-for="item of $d.InternationalizationKeyState"
+                :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="Version" :label="$t('il8n:table:Version')" sortable="custom">
+        </el-table-column>
       </el-table>
       <div style="text-align: right; padding-top: 10px; padding-right: 10px">
-        <el-button size="mini" @click="drawer = false">取消 </el-button>
+        <el-button size="mini" @click="drawer = false">{{ $t('common:button:cancel') }}
-        <el-button size="mini" type="primary" @click="handleSave"
+        </el-button>
-          >保存</el-button
+        <el-button size="mini" type="primary" @click="handleSave">{{
-        >
+          $t('common:button:save')
+        }}</el-button>
       </div>
     </el-drawer>
   </div>
@@ -101,6 +94,8 @@ export default {
       show: false,
       key: null,
       arr: [],
+      il8nExternal: false,
+      State: null,
     }
   },
   mounted() {
@@ -108,6 +103,23 @@ export default {
     // this.show = false;
   },
   methods: {
+    // 排序
+    handleSortByColumn(column) {
+      if (column.order === 'ascending') {
+        this.tableData.sort((a, b) =>
+          (a[column.prop] || '').localeCompare(b[column.prop])
+        )
+      } else {
+        this.tableData.sort((a, b) =>
+          (b[column.prop] || '').localeCompare(a[column.prop])
+        )
+      }
+    },
+    handleStateChange() {
+      this.tableData.forEach((item) => {
+        item.State = this.State
+      })
+    },
     changeValue(target, attr, e) {
       this.$set(target, attr, e)
     },
@@ -117,9 +129,12 @@ export default {
           [],
           this.arr.filter(
             (v) =>
-              ~v.Code.indexOf(this.key) ||
+              (v.Code &&
-              ~v.Value.indexOf(this.key) ||
+                ~v.Code.toLowerCase().indexOf(this.key.toLowerCase())) ||
-              ~v.ValueCN.indexOf(this.key)
+              (v.Value &&
+                ~v.Value.toLowerCase().indexOf(this.key.toLowerCase())) ||
+              (v.ValueCN &&
+                ~v.ValueCN.toLowerCase().indexOf(this.key.toLowerCase()))
           )
         )
       } else {
@@ -127,12 +142,14 @@ export default {
       }
     },
     handleSave() {
-      this.$confirm('确定修改当前页面国际化内容？').then(() => {
+      this.$confirm(this.$t("i18n:confirm:updatei18n"))
+        .then(() => {
           batchAddOrUpdateFrontInternationalization(this.tableData).then(
             async (res) => {
               var zhMessages = {},
                 enMessages = {}
-            var Internationalization = await getFrontInternationalizationList()
+              var Internationalization =
+                await getFrontInternationalizationList()
               Vue.prototype.$tl = Internationalization.Result
               this.tableData.forEach((v) => {
                 // zhMessages[v.Description + '_' + v.Code] = v.ValueCN
@@ -143,23 +160,57 @@ export default {
               i18n.mergeLocaleMessage('zh', zhMessages)
               i18n.mergeLocaleMessage('en', enMessages)
               this.drawer = false
-            this.$message.success('国际化修改成功')
+              this.$message.success(this.$t("i18n:message:updatei18nSuccessfully"))
+              if (this.il8nExternal) {
+                this.$EventBus.$emit('il8nUpdate')
+              }
             }
           )
         })
+        .catch((err) => {
+          console.log(err)
+        })
     },
-    openI18n() {
+    openI18n(ARRAY) {
       this.tableData = []
+      this.il8nExternal = false
+      this.State = null
       this.key = null
       this.drawer = true
       let arr = []
-      let tableData = this.$tl.map((v) => {
+      let tableData = []
+      if (ARRAY && Array.isArray(ARRAY)) {
+        this.il8nExternal = true
+        let data = ARRAY.map((v) => {
+          let a = { ...v }
+
+          return a
+        })
+        tableData = data.map((item) => {
+          return {
+            Code: item.Code,
+            Description: item.Description,
+            FrontType: item.FrontType,
+            Module: item.Module,
+            Value: item.Value,
+            ValueCN: item.ValueCN,
+            State: item.State,
+            Version: item.Version,
+            InternationalizationType: item.InternationalizationType,
+          }
+        })
+        this.tableData = Object.assign([], tableData)
+        this.arr = Object.assign([], tableData)
+        return false
+      } else {
+        tableData = this.$tl.map((v) => {
           let a = { ...v }
           // if (!a.Description) {
           //   a.Description = this.$route.path
           // }
           return a
         })
+      }
       tableData = tableData.filter((v) => {
         // return  ~this.$path.indexOf(v.Description + '_' + v.Code)
         return ~this.$path.indexOf(v.Code)
@@ -176,6 +227,9 @@ export default {
             Description: null,
             Value: null,
             ValueCN: null,
+            State: 0,
+            Version: this.$version.Version,
+            InternationalizationType: 0,
           })
         }
       })
@@ -193,21 +247,21 @@ export default {
       } else {
         this.tableData = Object.assign([], this.arr)
       }
-      // console.log(JSON.stringify(this.$path));
-      // console.log(JSON.stringify(this.tableData));
-    },
     },
   }
+}
 </script>
 
 <style lang="scss">
 .el-tooltip__popper {
   max-width: 400px;
 }
+
 .my_multiple {
   .el-input--medium .el-input__inner {
     height: 36px !important;
   }
+
   .el-select__tags {
     flex-wrap: nowrap;
     overflow: hidden;
@@ -216,6 +270,7 @@ export default {
     display: block;
   }
 }
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none !important;
@@ -228,6 +283,7 @@ input[type='number'] {
 .viewer-fixed.viewer-container {
   z-index: 10000;
 }
+
 textarea {
   white-space: break-spaces;
   word-break: normal;
@@ -236,9 +292,11 @@ textarea {
 * {
   word-break: normal !important;
 }
+
 .box-body .el-button.is-circle:not(.is-disabled) i:before {
   color: #428bca;
 }
+
 .box-body .el-button.is-circle i.el-icon-question:before {
   color: #fff;
 }

src/api/dictionary/dictionary.js

@@ -51,3 +51,10 @@ export function batchAddOrUpdateFrontInternationalization(params) {
     data: params
   })
 }
+// 获取当前版本
+export function getCurrentPublishInfo() {
+  return request({
+    url: `/PublishLog/getCurrentPublishInfo`,
+    method: 'get'
+  })
+}

src/main.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
-import { getBasicDataAllSelect, getFrontInternationalizationList } from '@/api/dictionary/dictionary'
+import { getBasicDataAllSelect, getFrontInternationalizationList,getCurrentPublishInfo } from '@/api/dictionary/dictionary'
 import './assets/css/theme-blue/index.css' // 浅绿色主题
 import './assets/css/iconfont/index.css' // 阿里巴巴图标库
 import i18n from './lang'
@@ -185,6 +185,9 @@ async function VueInit() {
     zhMessages[v.Code] = v.ValueCN
     enMessages[v.Code] = v.Value
   })
+    // 获取版本信息
+  let PublishInfo = await getCurrentPublishInfo();
+  Vue.prototype.$version = PublishInfo.Result;
   i18n.mergeLocaleMessage('zh', zhMessages)
   i18n.mergeLocaleMessage('en', enMessages)
   let d = function (code) {

src/views/system/i18n/components/BatchAddForm.vue

@@ -1,153 +1,127 @@
 <template>
   <base-model :config="model_cfg">
     <template slot="dialog-body">
-      <el-form
+      <el-form ref="batcnAddForm" v-loading="loading" :model="form" size="small" :rules="rules">
-        ref="batcnAddForm"
+        <el-form-item :label="$t('system:l18n:search:InternationalizationType')" prop="InternationalizationType">
-        v-loading="loading"
-        :model="form"
-        size="small"
-      >
-        <el-form-item label="国际化类型" prop="InternationalizationType">
           <el-radio-group v-model="form.InternationalizationType">
-            <el-radio
+            <el-radio v-for="item of $d.InternationalizationType" :key="'InternationalizationType' + item.value"
-              v-for="item of $d.InternationalizationType"
+              :label="item.value">{{ item.label }}</el-radio>
-              :key="'InternationalizationType'+item.value"
-              :label="item.value"
-            >{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="状态" prop="State">
+        <el-form-item :label="$t('system:l18n:search:State')" prop="State">
           <el-radio-group v-model="form.State">
-            <el-radio
+            <el-radio v-for="item of $d.InternationalizationKeyState" :key="'InternationalizationKeyState' + item.value"
-              v-for="item of $d.InternationalizationKeyState"
+              :label="item.value">{{ item.label }}</el-radio>
-              :key="'InternationalizationKeyState'+item.value"
-              :label="item.value"
-            >{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-table
+        <el-form-item :label="$t('system:l18n:search:PublishVersion')" prop="PublishLogId">
-          :data="form.AddList"
+          <el-select v-model="form.PublishLogId" clearable filterable>
-          style="width: 100%"
+            <el-option v-for="item in PublishVersionList" :key="item.Id" :label="item.Version" :value="item.Id" />
-          height="300"
+          </el-select>
-        >
+        </el-form-item>
-          <el-table-column
+        <el-table :data="form.AddList" style="width: 100%" height="300">
-            prop=""
+          <el-table-column prop="" :label="$t('system:l18n:search:Module')">
-            label="功能模块/服务名"
-          >
             <template slot-scope="scope">
-              <el-form-item
+              <el-form-item label="" :prop="`AddList.${scope.$index}.Module`" :rules="[
-                label=""
+                {
-                :prop="`AddList.${scope.$index}.Description`"
+                  max: 200,
-                :rules="[
+                  message: `${$t('common:ruleMessage:maxLength')} 200`,
-                  { required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
+                  trigger: ['change', 'blur'],
-                  { max: 200, message: `${$t('common:ruleMessage:maxLength')} 200` }
+                },
-                ]"
+              ]">
-              >
+                <el-input v-model="scope.row.Module" type="textarea" maxlength="200"
-                <el-input
+                  :autosize="{ minRows: 2, maxRows: 4 }" />
-                  v-model="scope.row.Description"
-                  type="textarea"
-                  maxlength="200"
-                  :autosize="{ minRows: 2, maxRows: 4}"
-                />
               </el-form-item>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="" :label="$t('system:l18n:search:Code')">
-            prop=""
-            label="标识"
-          >
             <template slot-scope="scope">
-              <el-form-item
+              <el-form-item label="" :prop="`AddList.${scope.$index}.Code`" :rules="[
-                label=""
+                {
-                :prop="`AddList.${scope.$index}.Code`"
+                  required: true,
-                :rules="[
+                  message: $t('common:ruleMessage:specify'),
-                  { required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
+                  trigger: ['change', 'blur'],
-                  { max: 200, message: `${$t('common:ruleMessage:maxLength')} 200` }
+                },
-                ]"
+                {
-              >
+                  max: 200,
-                <el-input
+                  message: `${$t('common:ruleMessage:maxLength')} 200`,
-                  v-model="scope.row.Code"
+                },
-                  type="textarea"
+              ]">
-                  maxlength="200"
+                <el-input v-model="scope.row.Code" type="textarea" maxlength="200"
-                  :autosize="{ minRows: 2, maxRows: 4}"
+                  :autosize="{ minRows: 2, maxRows: 4 }" />
-                />
               </el-form-item>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="" :label="$t('system:l18n:search:ValueCN')">
-            prop=""
-            label="中文值"
-          >
             <template slot-scope="scope">
-              <el-form-item
+              <el-form-item label="" :prop="`AddList.${scope.$index}.ValueCN`" :rules="[
-                label=""
+                {
-                :prop="`AddList.${scope.$index}.ValueCN`"
+                  required: true,
-                :rules="[
+                  message: $t('common:ruleMessage:specify'),
-                  { required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
+                  trigger: ['change', 'blur'],
-                  { max: 1000, message: `${$t('common:ruleMessage:maxLength')} 1000` }
+                },
-                ]"
+                {
-              >
+                  max: 1000,
-                <el-input
+                  message: `${$t('common:ruleMessage:maxLength')} 1000`,
-                  v-model="scope.row.ValueCN"
+                },
-                  type="textarea"
+              ]">
-                  maxlength="1000"
+                <el-input v-model="scope.row.ValueCN" type="textarea" maxlength="1000"
-                  :autosize="{ minRows: 2, maxRows: 4}"
+                  :autosize="{ minRows: 2, maxRows: 4 }" />
-                />
               </el-form-item>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="" :label="$t('system:l18n:search:Value')">
-            prop=""
-            label="英文值"
-          >
             <template slot-scope="scope">
-              <el-form-item
+              <el-form-item label="" :prop="`AddList.${scope.$index}.Value`" :rules="[
-                label=""
+                {
-                :prop="`AddList.${scope.$index}.Value`"
+                  required: true,
-                :rules="[
+                  message: $t('common:ruleMessage:specify'),
-                  { required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
+                  trigger: ['change', 'blur'],
-                  { max: 1000, message: `${$t('common:ruleMessage:maxLength')} 1000` }
+                },
-                ]"
+                {
-              >
+                  max: 1000,
-                <el-input
+                  message: `${$t('common:ruleMessage:maxLength')} 1000`,
-                  v-model="scope.row.Value"
+                },
-                  type="textarea"
+              ]">
-                  maxlength="1000"
+                <el-input v-model="scope.row.Value" type="textarea" maxlength="1000"
-                  :autosize="{ minRows: 2, maxRows: 4}"
+                  :autosize="{ minRows: 2, maxRows: 4 }" />
-                />
               </el-form-item>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="" :label="$t('system:l18n:search:Description')">
-            align="right"
+            <template slot-scope="scope">
-            width="100"
+              <el-form-item label="" :prop="`AddList.${scope.$index}.Description`" :rules="[
-          >
+                {
+                  max: 200,
+                  message: `${$t('common:ruleMessage:maxLength')} 200`,
+                  trigger: ['change', 'blur'],
+                },
+              ]">
+                <el-input v-model="scope.row.Description" type="textarea" maxlength="200"
+                  :autosize="{ minRows: 2, maxRows: 4 }" />
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column align="right" width="100">
             <template slot="header">
               <!-- 新增 -->
-              <el-button
+              <el-button size="small" type="primary" @click="handleAdd">{{ $t('common:button:new') }}</el-button>
-                size="small"
-                type="primary"
-                icon="el-icon-plus"
-                @click="handleAdd"
-              >{{ $t('common:button:new') }}</el-button>
             </template>
             <template slot-scope="scope">
               <!-- 删除 -->
-              <el-button
+              <el-button type="text" @click="handleDelete(scope.$index)">{{ $t('common:button:delete') }}</el-button>
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.$index)"
-              >{{ $t('common:button:delete') }}</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form>
-
     </template>
     <template slot="dialog-footer">
-      <el-button size="small" type="primary" @click="handleCancle">取消</el-button>
+      <el-button size="small" type="primary" @click="handleCancle">{{
-      <el-button size="small" type="primary" @click="handleSave">保存</el-button>
+        $t('common:button:cancel')
+      }}</el-button>
+      <el-button size="small" type="primary" @click="handleSave">{{
+        $t('common:button:save')
+      }}</el-button>
     </template>
   </base-model>
 </template>
@@ -158,7 +132,8 @@ const formDataDefault = () => {
   return {
     State: 0,
     InternationalizationType: 1,
-    AddList: []
+    PublishLogId: null,
+    AddList: [],
   }
 }
 export default {
@@ -168,28 +143,45 @@ export default {
     return {
       loading: false,
       form: formDataDefault(),
-      model_cfg: { visible: false, showClose: true, width: '800px', title: '', appendToBody: true }
+      model_cfg: {
+        visible: false,
+        showClose: true,
+        width: '800px',
+        title: '',
+        appendToBody: true,
+      },
+      rules: {
+        PublishLogId: [
+          {
+            required: true,
+            message: this.$t('system:l18n:rule:selectPublishLogId'),
+            trigger: 'blur',
+          },
+        ],
+      },
+      PublishVersionList: [],
     }
   },
-  mounted() {
+  mounted() { },
-  },
   methods: {
-
+    openDialog(title, data, options = []) {
-    openDialog(title, data) {
+      this.PublishVersionList = options
       this.model_cfg.visible = true
       this.model_cfg.title = title
       this.form = formDataDefault()
     },
     handleSave() {
-      this.$refs.batcnAddForm.validate(valid => {
+      this.$refs.batcnAddForm.validate((valid) => {
         if (!valid) return
         this.loading = true
-        batchAddInternationalization(this.form).then(res => {
+        batchAddInternationalization(this.form)
+          .then((res) => {
             this.loading = false
-          this.$message.success('保存成功！')
+            this.$message.success(this.$t('common:message:savedSuccessfully'))
             this.model_cfg.visible = false
             this.$emit('getList')
-        }).catch(() => {
+          })
+          .catch(() => {
             this.loading = false
           })
       })
@@ -202,17 +194,17 @@ export default {
         Description: '',
         Code: '',
         ValueCN: '',
-        Value: ''
+        Value: '',
       })
     },
     handleDelete(index) {
-      this.$confirm('是否确认删除？', {
+      this.$confirm(this.$t('system:l18n:confirm:delete'), {
         type: 'warning',
-        distinguishCancelAndClose: true
+        distinguishCancelAndClose: true,
       }).then(() => {
         this.form.AddList.splice(index, 1)
       })
-    }
+    },
-  }
+  },
 }
 </script>

src/views/system/i18n/components/I18nForm.vue

@@ -1,70 +1,49 @@
 <template>
   <base-model :config="model_cfg">
     <template slot="dialog-body">
-      <el-form
+      <el-form ref="i18nForm" v-loading="loading" :model="form" :rules="rules" label-width="130px" size="small">
-        ref="i18nForm"
+        <el-form-item :label="$t('system:l18n:search:InternationalizationType')" prop="InternationalizationType"
-        v-loading="loading"
+          v-if="status !== 'batch'">
-        :model="form"
-        :rules="rules"
-        label-width="130px"
-        size="small"
-      >
-        <el-form-item label="国际化类型" prop="InternationalizationType">
           <el-radio-group v-model="form.InternationalizationType">
-            <el-radio
+            <el-radio v-for="item of $d.InternationalizationType" :key="'InternationalizationType' + item.value"
-              v-for="item of $d.InternationalizationType"
+              :label="item.value">{{ item.label }}</el-radio>
-              :key="'InternationalizationType'+item.value"
-              :label="item.value"
-            >{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="功能模块/服务名" prop="Description">
+        <el-form-item :label="$t('system:l18n:search:Module')" prop="Module" v-if="status !== 'batch'">
-          <el-input
+          <el-input v-model="form.Module" type="textarea" maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" />
-            v-model="form.Description"
-            type="textarea"
-            maxlength="200"
-            :autosize="{ minRows: 2, maxRows: 4}"
-          />
         </el-form-item>
-        <el-form-item label="标识" prop="Code">
+        <el-form-item :label="$t('system:l18n:search:Code')" prop="Code" v-if="status !== 'batch'">
-          <el-input
+          <el-input v-model="form.Code" type="textarea" maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" />
-            v-model="form.Code"
-            type="textarea"
-            maxlength="200"
-            :autosize="{ minRows: 2, maxRows: 4}"
-          />
         </el-form-item>
-        <el-form-item label="中文值" prop="ValueCN">
+        <el-form-item :label="$t('system:l18n:search:ValueCN')" prop="ValueCN" v-if="status !== 'batch'">
-          <el-input
+          <el-input v-model="form.ValueCN" type="textarea" maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }" />
-            v-model="form.ValueCN"
-            type="textarea"
-            maxlength="1000"
-            :autosize="{ minRows: 2, maxRows: 4}"
-          />
         </el-form-item>
-        <el-form-item label="英文值" prop="Value">
+        <el-form-item :label="$t('system:l18n:search:Value')" prop="Value" v-if="status !== 'batch'">
-          <el-input
+          <el-input v-model="form.Value" type="textarea" maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }" />
-            v-model="form.Value"
-            type="textarea"
-            maxlength="1000"
-            :autosize="{ minRows: 2, maxRows: 4}"
-          />
         </el-form-item>
-
+        <el-form-item :label="$t('system:l18n:search:State')" prop="State">
-        <el-form-item label="状态" prop="State">
           <el-radio-group v-model="form.State">
-            <el-radio
+            <el-radio v-for="item of $d.InternationalizationKeyState" :key="'InternationalizationKeyState' + item.value"
-              v-for="item of $d.InternationalizationKeyState"
+              :label="item.value">{{ item.label }}</el-radio>
-              :key="'InternationalizationKeyState'+item.value"
-              :label="item.value"
-            >{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item :label="$t('system:l18n:search:Description')" prop="Description" v-if="status !== 'batch'">
+          <el-input v-model="form.Description" type="textarea" maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" />
+        </el-form-item>
+        <el-form-item :label="$t('system:l18n:search:PublishVersion')" prop="PublishLogId">
+          <el-select v-model="form.PublishLogId" clearable filterable>
+            <el-option v-for="item in PublishVersionList" :key="item.Id" :label="item.Version" :value="item.Id" />
+          </el-select>
+        </el-form-item>
       </el-form>
     </template>
     <template slot="dialog-footer">
-      <el-button size="small" type="primary" @click="handleCancle">取消</el-button>
+      <el-button size="small" type="primary" @click="handleCancle">{{
-      <el-button size="small" type="primary" @click="handleSave">保存</el-button>
+        $t('common:button:cancel')
+      }}</el-button>
+      <el-button size="small" type="primary" @click="handleSave">{{
+        $t('common:button:save')
+      }}</el-button>
     </template>
   </base-model>
 </template>
@@ -76,10 +55,12 @@ const formDataDefault = () => {
     Id: null,
     State: 0,
     Description: null,
+    Module: null,
     Code: null,
     Value: null,
     ValueCN: null,
-    InternationalizationType: 1
+    InternationalizationType: 1,
+    PublishLogId: null,
   }
 }
 export default {
@@ -87,40 +68,95 @@ export default {
   components: { BaseModel },
   data() {
     return {
+      status: 'add', // add update batch
       loading: false,
       form: formDataDefault(),
       rules: {
         State: [
-          { required: true, message: '请选择', trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t('system:l18n:rule:selectState'),
+            trigger: 'blur',
+          },
+        ],
+        Module: [
+          {
+            max: 200,
+            message: `${this.$t('common:ruleMessage:maxLength')} 200`,
+            trigger: 'blur',
+          },
         ],
         Description: [
-          { required: true, message: '请注明', trigger: 'blur' },
+          {
-          { max: 200, message: `${this.$t('common:ruleMessage:maxLength')} 200` }
+            max: 200,
+            message: `${this.$t('common:ruleMessage:maxLength')} 200`,
+            trigger: 'blur',
+          },
         ],
         Code: [
-          { required: true, message: '请注明', trigger: 'blur' },
+          {
-          { max: 200, message: `${this.$t('common:ruleMessage:maxLength')} 200` }
+            required: true,
+            message: this.$t('system:l18n:rule:inputCode'),
+            trigger: 'blur',
+          },
+          {
+            max: 200,
+            message: `${this.$t('common:ruleMessage:maxLength')} 200`,
+          },
         ],
         Value: [
-          { required: true, message: '请注明', trigger: 'blur' },
+          {
-          { max: 1000, message: `${this.$t('common:ruleMessage:maxLength')} 1000` }
+            required: true,
+            message: this.$t('system:l18n:rule:inputValue'),
+            trigger: 'blur',
+          },
+          {
+            max: 1000,
+            message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
+          },
         ],
         ValueCN: [
-          { required: true, message: '请注明', trigger: 'blur' },
+          {
-          { max: 1000, message: `${this.$t('common:ruleMessage:maxLength')} 1000` }
+            required: true,
+            message: this.$t('system:l18n:rule:inputValueCN'),
+            trigger: 'blur',
+          },
+          {
+            max: 1000,
+            message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
+          },
         ],
         InternationalizationType: [
-          { required: true, message: '请选择', trigger: 'blur' }
+          {
-        ]
+            required: true,
+            message: this.$t('system:l18n:rule:selectInternationalizationType'),
+            trigger: 'blur',
           },
-      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true }
+        ],
+        PublishLogId: [
+          {
+            required: true,
+            message: this.$t('system:l18n:rule:selectPublishLogId'),
+            trigger: 'blur',
+          },
+        ],
+      },
+      model_cfg: {
+        visible: false,
+        showClose: true,
+        width: '600px',
+        title: '',
+        appendToBody: true,
+      },
+      PublishVersionList: [],
     }
   },
-  mounted() {
+  mounted() { },
-  },
   methods: {
-
+    openDialog(title, data, options = [], status) {
-    openDialog(title, data) {
+      this.PublishVersionList = options
+      this.loading = false
+      this.status = status
       this.model_cfg.visible = true
       this.model_cfg.title = title
       if (Object.keys(data).length > 0) {
@@ -134,22 +170,32 @@ export default {
       }
     },
     handleSave() {
-      this.$refs.i18nForm.validate(valid => {
+      this.$refs.i18nForm.validate((valid) => {
         if (!valid) return
         this.loading = true
-        addOrUpdateInternationalization(this.form).then(res => {
+        if (this.status === 'batch') {
+          return this.$emit('batch', this.form)
+        }
+        addOrUpdateInternationalization(this.form)
+          .then((res) => {
             this.loading = false
-          this.$message.success('保存成功！')
+            this.$message.success(this.$t('common:message:savedSuccessfully'))
             this.model_cfg.visible = false
             this.$emit('getList')
-        }).catch(() => {
+          })
+          .catch(() => {
             this.loading = false
           })
       })
     },
     handleCancle() {
       this.model_cfg.visible = false
-    }
+    },
-  }
+  },
 }
 </script>
+<style lang="scss" scoped>
+::v-deep .el-select {
+  width: 100%;
+}
+</style>

src/views/system/i18n/index.vue

@@ -2,156 +2,118 @@
   <div class="log">
     <div ref="leftContainer" class="left">
       <el-form :inline="true">
-        <el-form-item label="国际化类型">
+        <el-form-item :label="$t('system:l18n:search:InternationalizationType')">
-          <el-select
+          <el-select v-model="searchData.InternationalizationType" clearable filterable style="width: 130px">
-            v-model="searchData.InternationalizationType"
+            <el-option v-for="item of $d.InternationalizationType" :key="'InternationalizationType' + item.value"
-            clearable
+              :label="item.label" :value="item.value" />
-            filterable
-            style="width:130px;"
-          >
-            <el-option
-              v-for="item of $d.InternationalizationType"
-              :key="'InternationalizationType'+item.value"
-              :label="item.label"
-              :value="item.value"
-            />
           </el-select>
         </el-form-item>
-        <el-form-item label="功能模块/服务名">
+        <el-form-item :label="$t('system:l18n:search:Module')">
-          <el-input
+          <el-input v-model="searchData.Module" clearable style="width: 130px" />
-            v-model="searchData.Description"
-            size="small"
-            clearable
-            style="width:130px;"
-          />
         </el-form-item>
-        <el-form-item label="标识">
+        <el-form-item :label="$t('system:l18n:search:Code')">
-          <el-input
+          <el-input v-model="searchData.Code" clearable style="width: 130px" />
-            v-model="searchData.Code"
-            size="small"
-            clearable
-            style="width:130px;"
-          />
         </el-form-item>
-        <el-form-item label="中文值">
+        <el-form-item :label="$t('system:l18n:search:ValueCN')">
-          <el-input
+          <el-input v-model="searchData.ValueCN" clearable style="width: 130px" />
-            v-model="searchData.ValueCN"
-            size="small"
-            clearable
-            style="width:130px;"
-          />
         </el-form-item>
-        <el-form-item label="英文值">
+        <el-form-item :label="$t('system:l18n:search:Value')">
-          <el-input
+          <el-input v-model="searchData.Value" style="width: 130px" clearable />
-            v-model="searchData.Value"
-            size="small"
-            style="width:130px;"
-            clearable
-          />
         </el-form-item>
-        <el-form-item label="状态">
+        <el-form-item :label="$t('system:l18n:search:State')">
-          <el-select v-model="searchData.State" clearable filterable style="width:130px;">
+          <el-select v-model="searchData.State" clearable filterable style="width: 130px">
-            <el-option
+            <el-option v-for="item of $d.InternationalizationKeyState"
-              v-for="item of $d.InternationalizationKeyState"
+              :key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
-              :key="'InternationalizationKeyState'+item.value"
-              :label="item.label"
-              :value="item.value"
-            />
           </el-select>
         </el-form-item>
+        <el-form-item :label="$t('system:l18n:search:Description')">
+          <el-input v-model="searchData.Description" clearable style="width: 130px" />
+        </el-form-item>
+        <el-form-item :label="$t('system:l18n:search:PublishVersion')">
+          <el-select v-model="searchData.PublishLogId" clearable filterable style="width: 130px">
+            <el-option v-for="item in PublishVersionList" :key="item.Id" :label="item.Version" :value="item.Id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('system:l18n:form:createTime')">
+          <el-date-picker v-model="datetimerange_createTime" type="datetimerange"
+            :default-time="['00:00:00', '23:59:59']" :start-placeholder="$t('system:l18n:search:beginTime')"
+            :end-placeholder="$t('system:l18n:search:endTime')" value-format="yyyy-MM-dd HH:mm:ss"
+            @change="(val) => handleDatetimeChange(val, 'createTime')" style="width: 250px" />
+        </el-form-item>
+        <el-form-item :label="$t('system:l18n:form:uploadTime')">
+          <el-date-picker v-model="datetimerange_updateTime" type="datetimerange"
+            :default-time="['00:00:00', '23:59:59']" :start-placeholder="$t('system:l18n:search:beginTime')"
+            :end-placeholder="$t('system:l18n:search:endTime')" value-format="yyyy-MM-dd HH:mm:ss"
+            @change="(val) => handleDatetimeChange(val, 'updateTime')" style="width: 250px" />
+        </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button type="primary" icon="el-icon-search" @click="getList">
-            type="primary"
+            {{ $t('common:button:search') }}
-            icon="el-icon-search"
-            size="mini"
-            @click="getList"
-          >
-            查询
           </el-button>
-          <el-button
+          <!-- 重置 -->
-            type="primary"
+          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
-            icon="el-icon-plus"
+            {{ $t('common:button:reset') }}
-            size="mini"
-            @click="handleAdd"
-          >
-            新增
           </el-button>
-          <el-button
+          <el-button type="primary" @click="handleAdd">
-            type="primary"
+            {{ $t('common:button:new') }}
-            icon="el-icon-plus"
+          </el-button>
-            size="mini"
+          <el-button type="primary" @click="handleBatchAdd">
-            @click="handleBatchAdd"
+            {{ $t('system:l18n:button:batchAdd') }}
-          >
+          </el-button>
-            批量新增
+          <el-button type="primary" :disabled="selectTableList.length <= 0" @click="handleBatchUpdate">
+            {{ $t('system:l18n:button:batchUpdate') }}
+          </el-button>
+          <el-button type="primary" :disabled="selectTableList.length <= 0" @click="handleBatchUpdateToChange">
+            {{ $t('system:l18n:button:batchEdit') }}
+          </el-button>
+          <el-button type="primary" @click="exportTable">
+            {{ $t('common:button:export') }}
           </el-button>
         </el-form-item>
       </el-form>
-      <el-table
+      <el-table v-loading="loading" v-adaptive="{ bottomOffset: 45 }" height="100" :data="list" class="table"
-        v-loading="loading"
+        @sort-change="handleSortByColumn" @selection-change="handleSelectionChange"><el-table-column type="selection"
-        v-adaptive="{bottomOffset:45}"
+          width="50" />
-        height="100"
+        <el-table-column type="index" width="50" />
-        :data="list"
+        <el-table-column :label="$t('system:l18n:search:InternationalizationType')" prop="InternationalizationType"
-        class="table"
+          width="120" show-overflow-tooltip sortable="custom">
-        @sort-change="handleSortByColumn"
-      >
-        <el-table-column
-          type="index"
-          width="50"
-        />
-        <el-table-column
-          label="国际化类型"
-          prop="InternationalizationType"
-          width="120"
-          show-overflow-tooltip
-          sortable="custom"
-        >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.InternationalizationType === 0" type="primary">
-              {{ $fd('InternationalizationType', scope.row.InternationalizationType) }}
+              {{
+                $fd(
+                  'InternationalizationType',
+                  scope.row.InternationalizationType
+                )
+              }}
             </el-tag>
             <el-tag v-else-if="scope.row.InternationalizationType === 1" type="warning">
-              {{ $fd('InternationalizationType', scope.row.InternationalizationType) }}
+              {{
+                $fd(
+                  'InternationalizationType',
+                  scope.row.InternationalizationType
+                )
+              }}
             </el-tag>
             <el-tag v-else>
-              {{ $fd('InternationalizationType', scope.row.InternationalizationType) }}
+              {{
+                $fd(
+                  'InternationalizationType',
+                  scope.row.InternationalizationType
+                )
+              }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column :label="$t('system:l18n:search:Module')" prop="Module" min-width="140" show-overflow-tooltip
-          label="功能模块/服务名"
+          sortable="custom" />
-          prop="Description"
+        <el-table-column :label="$t('system:l18n:search:Code')" prop="Code" min-width="150" show-overflow-tooltip
-          min-width="100"
+          sortable="custom" />
-          show-overflow-tooltip
+        <el-table-column :label="$t('system:l18n:search:ValueCN')" prop="ValueCN" min-width="150" show-overflow-tooltip
-          sortable="custom"
+          sortable="custom" />
-        />
+        <el-table-column :label="$t('system:l18n:search:Value')" prop="Value" min-width="150" show-overflow-tooltip
-        <el-table-column
+          sortable="custom" />
-          label="标识"
+        <el-table-column :label="$t('system:l18n:search:State')" prop="State" width="100" show-overflow-tooltip
-          prop="Code"
+          sortable="custom">
-          min-width="150"
-          show-overflow-tooltip
-          sortable="custom"
-        />
-        <el-table-column
-          label="中文值"
-          prop="ValueCN"
-          min-width="150"
-          show-overflow-tooltip
-          sortable="custom"
-        />
-        <el-table-column
-          label="英文值"
-          prop="Value"
-          min-width="150"
-          show-overflow-tooltip
-          sortable="custom"
-        />
-        <el-table-column
-          label="状态"
-          prop="State"
-          width="100"
-          show-overflow-tooltip
-          sortable="custom"
-        >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.State === 0" type="danger">
               {{ $fd('InternationalizationKeyState', scope.row.State) }}
@@ -164,61 +126,43 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column :label="$t('system:l18n:search:Description')" prop="Description" min-width="110"
-          label="更新时间"
+          show-overflow-tooltip sortable="custom" />
-          prop="UpdateTime"
+        <el-table-column :label="$t('system:l18n:search:PublishVersion')" prop="Version" min-width="100"
-          width="150"
+          show-overflow-tooltip sortable="custom" />
-          show-overflow-tooltip
+        <el-table-column :label="$t('system:l18n:form:uploadTime')" prop="UpdateTime" width="150" show-overflow-tooltip
-          sortable="custom"
+          sortable="custom" />
-        />
+        <el-table-column :label="$t('system:l18n:form:createTime')" prop="CreateTime" width="150" show-overflow-tooltip
-
+          sortable="custom" />
-        <el-table-column
+        <el-table-column :label="$t('common:action:action')" fixed="right" prop="" min-width="120"
-          label="操作"
+          show-overflow-tooltip>
-          fixed="right"
-          prop=""
-          min-width="120"
-          show-overflow-tooltip
-        >
           <template slot-scope="scope">
-            <el-button
+            <el-button type="text" @click="handleEdit(scope.row)">
-              size="mini"
+              {{ $t('common:button:edit') }}
-              type="text"
-              icon="el-icon-edit-outline"
-              @click="handleEdit(scope.row)"
-            >
-              编辑
             </el-button>
-            <el-button
+            <el-button :disabled="scope.row.State === 1" type="text" @click="handleDelete(scope.row)">
-              :disabled="scope.row.State === 1"
+              {{ $t('common:button:delete') }}
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-            >
-              删除
             </el-button>
-
           </template>
         </el-table-column>
       </el-table>
-      <div class="pagination" style="text-align: right;margin-top:5px;">
+      <div class="pagination" style="text-align: right; margin-top: 5px">
-        <pagination
+        <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
-          :total="total"
+          @pagination="getList" />
-          :page.sync="searchData.PageIndex"
-          :limit.sync="searchData.PageSize"
-          @pagination="getList"
-        />
       </div>
-      <i18n-form
+      <i18n-form ref="i18nForm" @getList="getList" @batch="batch" />
-        ref="i18nForm"
-        @getList="getList"
-      />
       <BatchAddForm ref="batcnAddForm" @getList="getList" />
     </div>
   </div>
 </template>
 <script>
-import { getInternationalizationList, deleteInternationalization } from '@/api/admin'
+import {
+  getInternationalizationList,
+  deleteInternationalization,
+  getPublishVersionSelect,
+  batchUpdateInternationalInfo,
+} from '@/api/admin'
+import { GetInternationalizationList_Export } from '@/api/export'
 import Pagination from '@/components/Pagination'
 import I18nForm from './components/I18nForm.vue'
 import BatchAddForm from './components/BatchAddForm.vue'
@@ -230,10 +174,16 @@ const searchDataDefault = () => {
     ValueCN: null,
     InternationalizationType: null,
     State: null,
+    Module: null,
+    PublishLogId: null,
     Asc: true,
     SortField: '',
     PageIndex: 1,
-    PageSize: 20
+    PageSize: 20,
+    BeginCreateTime: null,
+    EndCreatTime: null,
+    BeginUpdateTime: null,
+    EndUpdateTime: null,
   }
 }
 export default {
@@ -245,59 +195,135 @@ export default {
       searchData: searchDataDefault(),
       list: [],
       total: 0,
-      loading: false
+      loading: false,
+      PublishVersionList: [],
+      selectTableList: [],
+      datetimerange_createTime: [],
+      datetimerange_updateTime: [],
     }
   },
   mounted() {
     this.getList()
+    this.getPublishVersionSelect()
+    this.$EventBus.$on('il8nUpdate', (data) => {
+      this.getList()
+    })
   },
   methods: {
+    // 获取迭代
+    async getPublishVersionSelect() {
+      try {
+        let res = await getPublishVersionSelect()
+        if (res.IsSuccess) {
+          this.PublishVersionList = res.Result
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
     getList() {
       this.loading = true
-      getInternationalizationList(this.searchData).then((res) => {
+      getInternationalizationList(this.searchData)
+        .then((res) => {
           this.loading = false
           this.list = res.Result.CurrentPageData
           this.total = res.Result.TotalCount
-      }).catch(() => {
+        })
+        .catch(() => {
           this.loading = false
         })
     },
+    // 批量更新
+    handleBatchUpdate() {
+      this.$nextTick(() => {
+        this.$refs['i18nForm'].openDialog(
+          this.$t('system:l18n:button:batchUpdate'),
+          {},
+          this.PublishVersionList,
+          'batch'
+        )
+      })
+    },
+    // 批量编辑国际化内容
+    handleBatchUpdateToChange() {
+      this.$openI18n(this.selectTableList)
+    },
+    async batch(row) {
+      let { PublishLogId, State } = row
+      let data = {
+        PublishLogId,
+        State,
+        IdList: this.selectTableList.map((item) => item.Id),
+      }
+      try {
+        let res = await batchUpdateInternationalInfo(data)
+        if (res.IsSuccess) {
+          this.$message.success(this.$t('common:message:updatedSuccessfully'))
+          this.getList()
+          this.$nextTick(() => {
+            this.$refs['i18nForm'].handleCancle()
+          })
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
     handleAdd() {
       this.$nextTick(() => {
-        this.$refs['i18nForm'].openDialog('新增', {})
+        this.$refs['i18nForm'].openDialog(
+          this.$t("system:l18n:button:add"),
+          {},
+          this.PublishVersionList,
+          'add'
+        )
       })
     },
     handleBatchAdd() {
       this.$nextTick(() => {
-        this.$refs['batcnAddForm'].openDialog('批量新增', {})
+        this.$refs['batcnAddForm'].openDialog(
+          this.$t("system:l18n:button:batchAdd"),
+          {},
+          this.PublishVersionList
+        )
       })
     },
     handleEdit(row) {
       this.$nextTick(() => {
-        this.$refs['i18nForm'].openDialog('编辑', row)
+        this.$refs['i18nForm'].openDialog(
+          this.$t("system:l18n:button:edit"),
+          row,
+          this.PublishVersionList,
+          'update'
+        )
       })
     },
     // 重置列表查询
     handleReset() {
       this.searchData = searchDataDefault()
+      this.datetimerange_createTime = []
+      this.datetimerange_updateTime = []
       this.getList()
     },
     // 删除
     handleDelete(row) {
-      this.$confirm('是否确认删除？', {
+      this.$confirm(this.$t("system:l18n:confirm:delete"), {
         type: 'warning',
-        distinguishCancelAndClose: true
+        distinguishCancelAndClose: true,
-      })
+      }).then(() => {
-        .then(() => {
         this.loading = true
         deleteInternationalization(row.Id)
-            .then(res => {
+          .then((res) => {
             this.loading = false
             if (res.IsSuccess) {
               this.getList()
-                this.$message.success(this.$t('common:message:deletedSuccessfully'))
+              this.$message.success(
+                this.$t('common:message:deletedSuccessfully')
+              )
             }
-            }).catch(() => { this.loading = false })
+          })
+          .catch(() => {
+            this.loading = false
+          })
       })
     },
     // 排序
@@ -310,8 +336,36 @@ export default {
       this.searchData.SortField = column.prop
       this.searchData.PageIndex = 1
       this.getList()
+    },
+    // 选择
+    handleSelectionChange(val) {
+      this.selectTableList = val
+    },
+    handleDatetimeChange(val, key) {
+      if (val) {
+        if (key === 'createTime') {
+          this.searchData.BeginCreateTime = val[0]
+          this.searchData.EndCreatTime = val[1]
+        }
+        if (key === 'updateTime') {
+          this.searchData.BeginUpdateTime = val[0]
+          this.searchData.EndUpdateTime = val[1]
+        }
+      } else {
+        if (key === 'createTime') {
+          this.searchData.BeginCreateTime = ''
+          this.searchData.EndCreatTime = ''
+        }
+        if (key === 'updateTime') {
+          this.searchData.BeginUpdateTime = ''
+          this.searchData.EndUpdateTime = ''
         }
       }
+    },
+    exportTable() {
+      return GetInternationalizationList_Export(this.searchData)
+    },
+  },
 }
 </script>
 <style lang="scss">
@@ -321,21 +375,25 @@ export default {
   display: flex;
   padding: 10px;
   border-radius: 5px;
+
   .left {
     display: flex;
     flex-direction: column;
     width: 0;
     flex-grow: 4;
+
     // border-right: 1px solid #ccc;
     .filter-container {
       display: flex;
       align-items: center;
       margin: 5px;
     }
+
     .data-table {
       flex: 1;
       padding: 5px 0px;
     }
+
     .pagination-container {
       text-align: right;
     }