✨ Introducing new features. 增加前段国际化管理并且能从后端获取对应的国际化数据

src/i18n/index.ts

@@ -2,6 +2,7 @@ import { createI18n } from 'vue-i18n';
 import pinia from '/@/stores/index';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
+import { info } from '/@/api/admin/i18n'
 
 // 定义语言国际化内容
 
@@ -20,7 +21,7 @@ import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
 // 定义变量内容
 const messages = {};
 const element = { en: enLocale, 'zh-cn': zhcnLocale};
-const itemize = { en: [], 'zh-cn': [] };
+const itemize = { en: [] as any[], 'zh-cn': [] as any[] };
 const modules: Record<string, any> = import.meta.glob('./**/*.ts', { eager: true });
 const pages: Record<string, any> = import.meta.glob('./../../**/**/**/i18n/*.ts', { eager: true });
 
@@ -44,15 +45,23 @@ function mergeArrObj<T>(list: T, key: string) {
 	});
 	return obj;
 }
+// 从后台获取数据
+info().then((res: any) => {
+	itemize["zh-cn"].push(...res.data['zh-cn'])
+	itemize.en.push(...res.data.en)
+}).finally(() => {
+	// 处理最终格式
+	for (const key in itemize) {
+		messages[key] = {
+			name: key,
+			el: element[key].el,
+			...mergeArrObj(itemize, key),
+		};
+	}
+	console.log(messages,'message')
+})
+
 
-// 处理最终格式
-for (const key in itemize) {
-	messages[key] = {
-		name: key,
-		el: element[key].el,
-		...mergeArrObj(itemize, key),
-	};
-}
 
 // 读取 pinia 默认语言
 const stores = useThemeConfig(pinia);

src/views/admin/i18n/form.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog v-model="visible" :close-on-click-modal="false"
+             :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">
+      <el-row :gutter="24">
+        <el-col :span="24" class="mb20">
+          <el-form-item :label="t('i18n.name')" prop="name">
+            <el-input v-model="form.name" :placeholder="t('i18n.inputKeyTip')"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mb20">
+          <el-form-item :label="t('i18n.zhCn')" prop="zhCn">
+            <el-input v-model="form.zhCn" :placeholder="t('i18n.inputZhCnTip')"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mb20">
+          <el-form-item :label="t('i18n.en')" prop="en">
+            <el-input v-model="form.en" :placeholder="t('i18n.inputEnTip')"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
+          <el-button type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" name="SysI18nDialog" setup>
+// 定义子组件向父组件传值/事件
+import {useMessage} from "/@/hooks/message";
+import {addObj, getObj, putObj} from '/@/api/admin/i18n'
+import {useI18n} from "vue-i18n"
+
+const emit = defineEmits(['refresh']);
+
+const {t} = useI18n();
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+// 定义字典
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  name: '',
+  zhCn: '',
+  en: '',
+});
+
+// 定义校验规则
+const dataRules = ref({
+  name: [{required: true, message: 'name不能为空', trigger: 'blur'}],
+  zhCn: [{required: true, message: '中文不能为空', trigger: 'blur'}],
+  en: [{required: true, message: '英文不能为空', trigger: 'blur'}],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields()
+  }
+
+  // 获取sysI18n信息
+  if (id) {
+    form.id = id
+    getsysI18nData(id)
+  }
+};
+
+// 提交
+const onSubmit = () => {
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false
+    }
+    // 更新
+    if (form.id) {
+      putObj(form).then(() => {
+        useMessage().success(t('common.editSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    } else {
+      addObj(form).then(() => {
+        useMessage().success(t('common.addSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    }
+  })
+}
+
+// 初始化表单数据
+const getsysI18nData = (id: string) => {
+  // 获取数据
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>

src/views/admin/i18n/i18n/en.ts

@@ -0,0 +1,24 @@
+export default {
+   sysi18n: {
+        index: 'index',
+        importsysI18nTip: 'import SysI18n',
+        id: 'id',
+        name: 'name',
+        zhCn: 'zh-cn',
+        en: 'en',
+        createBy: 'createBy',
+        createTime: 'createTime',
+        updateBy: 'updateBy',
+        updateTime: 'updateTime',
+        delFlag: 'delFlag',
+        inputIdTip: 'input id',
+        inputKeyTip: 'input key',
+        inputZhCnTip: 'input zh-cn',
+        inputEnTip: 'input en',
+        inputCreateByTip: 'input createBy',
+        inputCreateTimeTip: 'input createTime',
+        inputUpdateByTip: 'input updateBy',
+        inputUpdateTimeTip: 'input updateTime',
+        inputDelFlagTip: 'input delFlag',
+    }
+}

src/views/admin/i18n/i18n/zh-cn.ts

@@ -0,0 +1,24 @@
+export default {
+   i18n: {
+        index: '序号',
+        id: 'id',
+        name: '名称',
+        zhCn: '中文',
+        en: '英文',
+        createBy: '创建人',
+        createTime: '创建时间',
+        updateBy: '修改人',
+        updateTime: '更新时间',
+        delFlag: '删除标记',
+        inputIdTip: '请输入id',
+        inputKeyTip: '请输入key',
+        inputZhCnTip: '请输入中文',
+        inputEnTip: '请输入英文',
+        inputCreateByTip: '请输入创建人',
+        inputCreateTimeTip: '请输入创建时间',
+        inputUpdateByTip: '请输入修改人',
+        inputUpdateTimeTip: '请输入更新时间',
+        inputDelFlagTip: '请输入删除标记',
+        importsysI18nTip: '导入系统表-国际化',
+    }
+}

src/views/admin/i18n/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="layout-padding">
+    <el-card class="layout-padding-auto">
+      <el-row v-show="showSearch" class="mb8">
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true">
+          <el-form-item :label="$t('i18n.name')" prop="name" >
+            <el-input :placeholder="t('i18n.inputKeyTip')" v-model="state.queryForm.name"
+                      style="max-width: 180px" />
+          </el-form-item>
+          <el-form-item :label="$t('i18n.zhCn')" prop="zh-cn" >
+            <el-input :placeholder="t('i18n.inputZhCnTip')" v-model="state.queryForm.zhCn"
+                      style="max-width: 180px" />
+          </el-form-item>
+          <el-form-item :label="$t('i18n.en')" prop="en" >
+            <el-input :placeholder="t('i18n.inputEnTip')" v-model="state.queryForm.en"
+                      style="max-width: 180px" />
+          </el-form-item>
+          <el-form-item class="ml2">
+            <el-button formDialogRef icon="search" type="primary" @click="getDataList">
+              {{ $t('common.queryBtn') }}
+            </el-button>
+            <el-button icon="Refresh" formDialogRef @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button formDialogRef icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'admin_i18n_add'">
+            {{ $t('common.addBtn') }}
+          </el-button>
+          <el-button formDialogRef icon="Download" type="primary" class="ml10" @click="exportExcel"
+            v-auth="'admin_i18n_export'">
+            {{ $t('common.exportBtn') }}
+          </el-button>
+          <el-button formDialogRef :disabled="multiple" icon="Delete" type="primary" class="ml10"
+            v-auth="'admin_i18n_del'" @click="handleDelete(undefined)">
+            {{ $t('common.delBtn') }}
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
+            @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%"
+        @selection-change="handleSelectionChange" @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="60" align="center" />
+          <el-table-column prop="name" :label="t('i18n.name')"  show-overflow-tooltip/>
+          <el-table-column prop="zhCn" :label="t('i18n.zhCn')"  show-overflow-tooltip/>
+          <el-table-column prop="en" :label="t('i18n.en')"  show-overflow-tooltip/>
+          <el-table-column prop="createBy" :label="t('i18n.createBy')"  show-overflow-tooltip/>
+          <el-table-column prop="createTime" :label="t('i18n.createTime')"  show-overflow-tooltip/>
+        <el-table-column :label="$t('common.action')" width="150">
+          <template #default="scope">
+            <el-button text type="primary" v-auth="'admin_i18n_edit'"
+              @click="formDialogRef.openDialog(scope.row.id)">{{ $t('common.editBtn') }}</el-button>
+            <el-button text type="primary" v-auth="'admin_i18n_del'" @click="handleDelete(scope.row)">{{
+              $t('common.delBtn')
+            }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </el-card>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList()" />
+  </div>
+</template>
+
+<script setup lang="ts" name="systemSysI18n">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/admin/i18n";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useI18n } from "vue-i18n";
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const { t } = useI18n()
+// 定义查询字典
+
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([])
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    name: '',
+    zhCn: '',
+    en: ''
+  },
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value.resetFields()
+  // 清空排序规则
+  state.queryForm!.descs = []
+  state.queryForm!.ascs = []
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 多选事件
+const handleSelectionChange = (val: any) => {
+  selectObjs.value = val
+  multiple.value = !val.length
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/i18n/export', state.queryForm, 'i18n.xlsx')
+}
+
+// 删除操作
+const handleDelete = (row: any) => {
+  if (!row) {
+    selectObjs.value.forEach((val: any) => {
+      handleDelete(val)
+    });
+    return
+  }
+
+  useMessageBox().confirm(t('common.delConfirmText') + row.id)
+    .then(() => {
+      delObj(row.id).then(() => {
+        getDataList();
+        useMessage().success(t('common.delSuccessText'));
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    })
+};
+</script>