增加数据中心 标签管理页面的多语言处理

src/i18n/index.ts

@@ -46,6 +46,7 @@ import pagesDateCenterZhcn from './pages/dateCenter/zh-cn';
 import pagesDateCenterEn from './pages/dateCenter/en';
 import pagesDateCenterZhtw from './pages/dateCenter/zh-tw';
 
+
 // 定义语言国际化内容
 /**
  * 说明：

src/i18n/pages/dateCenter/en.ts

@@ -93,4 +93,61 @@ export default {
     input: 'Please enter',
     sourceType: 'Source Type',
   },
+  tags: {
+    labels: {
+      entity: 'Tag',
+      name: 'Tag Name',
+      code: 'English Code',
+      parent: 'Parent Tag',
+      color: 'Tag Color',
+      description: 'Description',
+    },
+    columns: {
+      name: 'Tag Name',
+      code: 'English Code',
+      color: 'Color',
+      description: 'Description',
+      createdAt: 'Created At',
+      action: 'Actions',
+    },
+    actions: {
+      search: 'Search',
+      createTag: 'New Tag',
+      add: 'Add',
+      edit: 'Edit',
+      delete: 'Delete',
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+    },
+    options: {
+      colors: {
+        red: 'Red',
+        green: 'Green',
+        blue: 'Blue',
+        yellow: 'Yellow',
+        purple: 'Purple',
+        pink: 'Pink',
+        indigo: 'Indigo',
+        gray: 'Gray',
+        orange: 'Orange',
+        cyan: 'Cyan',
+      },
+    },
+    placeholders: {
+      searchNameOrCode: 'Search tag name or English code',
+      inputName: 'Please enter tag name',
+      inputCode: 'Please enter English code',
+      selectParent: 'Please select parent tag',
+      selectColor: 'Please select tag color',
+      inputDesc: 'Please enter description',
+    },
+    messages: {
+      tip: 'Tip',
+      deleteRowConfirm: 'This will permanently delete the tag: "{name}". Continue?',
+      deleteSuccess: 'Deleted successfully',
+      addSuccess: 'Added successfully',
+      editSuccess: 'Edited successfully',
+      required: ' is required',
+    },
+  },
 };

src/i18n/pages/dateCenter/zh-cn.ts

@@ -93,4 +93,61 @@ export default {
     input: '请输入',
     sourceType: '数据源类型',
   },
+  tags: {
+    labels: {
+      entity: '标签',
+      name: '标签名称',
+      code: '英文标识',
+      parent: '父级标签',
+      color: '标签颜色',
+      description: '描述',
+    },
+    columns: {
+      name: '标签名称',
+      code: '英文标识',
+      color: '颜色',
+      description: '描述',
+      createdAt: '创建时间',
+      action: '操作',
+    },
+    actions: {
+      search: '查询',
+      createTag: '新增标签',
+      add: '添加',
+      edit: '修改',
+      delete: '删除',
+      cancel: '取消',
+      confirm: '确认',
+    },
+    options: {
+      colors: {
+        red: '红色',
+        green: '绿色',
+        blue: '蓝色',
+        yellow: '黄色',
+        purple: '紫色',
+        pink: '粉色',
+        indigo: '靛蓝',
+        gray: '灰色',
+        orange: '橙色',
+        cyan: '青色',
+      },
+    },
+    placeholders: {
+      searchNameOrCode: '搜索标签名称或英文标识',
+      inputName: '请输入标签名称',
+      inputCode: '请输入英文标识',
+      selectParent: '请选择父级标签',
+      selectColor: '请选择标签颜色',
+      inputDesc: '请输入描述',
+    },
+    messages: {
+      tip: '提示',
+      deleteRowConfirm: '此操作将永久删除标签：“{name}”，是否继续?',
+      deleteSuccess: '删除成功',
+      addSuccess: '添加成功',
+      editSuccess: '修改成功',
+      required: '不能为空',
+    },
+  },
 };

src/i18n/pages/dateCenter/zh-tw.ts

@@ -91,6 +91,63 @@ export default {
   },
   placeholders: {
     input: '請輸入',
-    sourceType: '資料源類型',
+    sourceType: '數據源類型',
+  },
+  tags: {
+    labels: {
+      entity: '標籤',
+      name: '標籤名稱',
+      code: '英文標識',
+      parent: '父級標籤',
+      color: '標籤顏色',
+      description: '描述',
+    },
+    columns: {
+      name: '標籤名稱',
+      code: '英文標識',
+      color: '顏色',
+      description: '描述',
+      createdAt: '創建時間',
+      action: '操作',
+    },
+    actions: {
+      search: '查詢',
+      createTag: '新增標籤',
+      add: '添加',
+      edit: '修改',
+      delete: '刪除',
+      cancel: '取消',
+      confirm: '確認',
+    },
+    options: {
+      colors: {
+        red: '紅色',
+        green: '綠色',
+        blue: '藍色',
+        yellow: '黃色',
+        purple: '紫色',
+        pink: '粉色',
+        indigo: '靛藍',
+        gray: '灰色',
+        orange: '橙色',
+        cyan: '青色',
+      },
+    },
+    placeholders: {
+      searchNameOrCode: '搜索標籤名稱或英文標識',
+      inputName: '請輸入標籤名稱',
+      inputCode: '請輸入英文標識',
+      selectParent: '請選擇父級標籤',
+      selectColor: '請選擇標籤顏色',
+      inputDesc: '請輸入描述',
+    },
+    messages: {
+      tip: '提示',
+      deleteRowConfirm: '此操作將永久刪除標籤：「{name}」，是否繼續?',
+      deleteSuccess: '刪除成功',
+      addSuccess: '添加成功',
+      editSuccess: '修改成功',
+      required: '不能為空',
+    },
   },
 };

src/views/system/datahub/tags/component/edit.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="system-edit-dept-container">
-    <el-dialog :title="(formData.id ? '修改' : '添加') + '标签'" v-model="isShowDialog" width="600px">
-      <el-form ref="formRef" :model="formData" :rules="rules" v-if="isShowDialog" label-width="90px">
+    <el-dialog :title="(formData.id ? t('message.dateCenter.tags.actions.edit') : t('message.dateCenter.tags.actions.add')) + t('message.dateCenter.tags.labels.entity')" v-model="isShowDialog" width="700px">
+      <el-form ref="formRef" :model="formData" :rules="rules" v-if="isShowDialog" label-width="120px">
         <div class="flex-row">
-          <el-form-item label="标签名称" prop="name" class="flex1">
-            <el-input v-model.trim="formData.name" show-word-limit placeholder="请输入标签名称" clearable></el-input>
+          <el-form-item :label="$t('message.dateCenter.tags.labels.name')" prop="name" class="flex1">
+            <el-input v-model.trim="formData.name" show-word-limit :placeholder="$t('message.dateCenter.tags.placeholders.inputName')" clearable></el-input>
           </el-form-item>
-          <el-form-item label="英文标识" prop="code" class="flex1">
-            <el-input v-model.trim="formData.code" show-word-limit placeholder="请输入英文标识" clearable></el-input>
+          <el-form-item :label="$t('message.dateCenter.tags.labels.code')" prop="code" class="flex1">
+            <el-input v-model.trim="formData.code" show-word-limit :placeholder="$t('message.dateCenter.tags.placeholders.inputCode')" clearable></el-input>
           </el-form-item>
         </div>
         <div class="flex-row">
-          <el-form-item label="父级标签" prop="parentId" class="flex1">
-            <el-cascader :options="treeData" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择父级标签" clearable class="w100" v-model="formData.parentId">
+          <el-form-item :label="$t('message.dateCenter.tags.labels.parent')" prop="parentId" class="flex1">
+            <el-cascader :options="treeData" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }" :placeholder="$t('message.dateCenter.tags.placeholders.selectParent')" clearable class="w100" v-model="formData.parentId">
               <template #default="{ node, data }">
                 <span>{{ data.name }}</span>
                 <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
               </template>
             </el-cascader>
           </el-form-item>
-          <el-form-item label="标签颜色" prop="color" class="flex1">
-            <el-select v-model.trim="formData.color" placeholder="请选择标签颜色" clearable style="width: 100%">
+          <el-form-item :label="$t('message.dateCenter.tags.labels.color')" prop="color" class="flex1">
+            <el-select v-model.trim="formData.color" :placeholder="$t('message.dateCenter.tags.placeholders.selectColor')" clearable style="width: 100%">
               <el-option v-for="item in colorList" :label="item.label" :key="item.value" :value="item.value">
                 <template #default>
                   <div class="flex items-center">
@@ -32,14 +32,14 @@
             </el-select>
           </el-form-item>
         </div>
-        <el-form-item label="描述" prop="description">
-          <el-input v-model="formData.description" type="textarea" show-word-limit placeholder="请输入描述" clearable></el-input>
+        <el-form-item :label="$t('message.dateCenter.tags.labels.description')" prop="description">
+          <el-input v-model="formData.description" type="textarea" show-word-limit :placeholder="$t('message.dateCenter.tags.placeholders.inputDesc')" clearable></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
-          <el-button type="primary" @click="onSubmit">{{ formData.id ? "修 改" : "添 加" }}</el-button>
+          <el-button @click="closeDialog">{{ $t('message.dateCenter.tags.actions.cancel') }}</el-button>
+          <el-button type="primary" @click="onSubmit">{{ formData.id ? $t('message.dateCenter.tags.actions.edit') : $t('message.dateCenter.tags.actions.add') }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -47,9 +47,12 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, computed } from "vue";
 import api from "/@/api/datahub";
 import { ElMessage } from "element-plus";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const emit = defineEmits(["update"]);
 
@@ -73,12 +76,12 @@ const isShowDialog = ref(false);
 const treeData = ref([]);
 const formRef = ref();
 const formData = reactive({ ...baseForm });
-const rules = {
-  name: [{ required: true, message: "标签名称不能为空", trigger: "blur" }],
-  code: [{ required: true, message: "标签英文标识不能为空", trigger: "blur" }],
-  color: [{ required: true, message: "标签颜色不能为空", trigger: "blur" }],
-  description: [{ required: true, message: "标签描述不能为空", trigger: "blur" }],
-};
+const rules = computed(() => ({
+  name: [{ required: true, message: `${t('message.dateCenter.tags.labels.name')}${t('message.dateCenter.tags.messages.required')}` , trigger: 'blur' }],
+  code: [{ required: true, message: `${t('message.dateCenter.tags.labels.code')}${t('message.dateCenter.tags.messages.required')}` , trigger: 'blur' }],
+  color: [{ required: true, message: `${t('message.dateCenter.tags.labels.color')}${t('message.dateCenter.tags.messages.required')}` , trigger: 'blur' }],
+  description: [{ required: true, message: `${t('message.dateCenter.tags.labels.description')}${t('message.dateCenter.tags.messages.required')}` , trigger: 'blur' }],
+}));
 
 // 打开弹窗
 const openDialog = (row: any) => {
@@ -111,7 +114,7 @@ const onSubmit = () => {
       const theApi = formData.id ? api.tags.edit : api.tags.add;
 
       theApi(submitData).then(() => {
-        ElMessage.success("添加成功");
+        ElMessage.success(formData.id ? t('message.dateCenter.tags.messages.editSuccess') : t('message.dateCenter.tags.messages.addSuccess'));
         closeDialog(); // 关闭弹窗
         emit("update");
       });

src/views/system/datahub/tags/index.vue

@@ -3,29 +3,29 @@
     <el-card shadow="never">
       <el-form :model="param" inline ref="queryRef" @keyup.enter="getData">
         <el-form-item label="" prop="name">
-          <el-input v-model="param.name" placeholder="搜索标签名称或英文标识" style="width: 250px" clearable />
+          <el-input v-model="param.name" :placeholder="$t('message.dateCenter.tags.placeholders.searchNameOrCode')" style="width: 250px" clearable />
           <el-button type="primary" class="ml10" @click="getData">
             <el-icon>
               <ele-Search />
             </el-icon>
-            查询
+            {{ $t("message.dateCenter.tags.actions.search") }}
           </el-button>
           <el-button type="primary" class="ml10" @click="addOrEdit()" v-auth="'add'">
             <el-icon>
               <ele-FolderAdd />
             </el-icon>
-            新增标签
+            {{ $t("message.dateCenter.tags.actions.createTag") }}
           </el-button>
         </el-form-item>
       </el-form>
       <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="loading">
-        <el-table-column prop="name" v-col="'name'" label="标签名称" min-width="180" show-overflow-tooltip> </el-table-column>
-        <el-table-column prop="code" v-col="'code'" label="英文标识" align="center" width="120">
+        <el-table-column prop="name" v-col="'name'" :label="$t('message.dateCenter.tags.columns.name')" min-width="180" show-overflow-tooltip> </el-table-column>
+        <el-table-column prop="code" v-col="'code'" :label="$t('message.dateCenter.tags.columns.code')" align="center" width="120">
           <template #default="scope">
             <el-tag type="primary" size="small">{{ scope.row.code }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="color" v-col="'color'" label="颜色" align="center" width="120">
+        <el-table-column prop="color" v-col="'color'" :label="$t('message.dateCenter.tags.columns.color')" align="center" width="120">
           <template #default="scope">
             <div class="flex" style="justify-content: center">
               <div class="color" :style="{ backgroundColor: colorMap.get(scope.row.color)?.color }"></div>
@@ -33,13 +33,13 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="description" v-col="'description'" label="描述" align="center" show-overflow-tooltip min-width="180"></el-table-column>
-        <el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" align="center" width="180"></el-table-column>
-        <el-table-column le-column label="操作" align="center" width="140" v-col="'handle'">
+        <el-table-column prop="description" v-col="'description'" :label="$t('message.dateCenter.tags.columns.description')" align="center" show-overflow-tooltip min-width="180"></el-table-column>
+        <el-table-column prop="createdAt" v-col="'createdAt'" :label="$t('message.dateCenter.tags.columns.createdAt')" align="center" width="180"></el-table-column>
+        <el-table-column le-column :label="$t('message.dateCenter.tags.columns.action')" align="center" width="140" v-col="'handle'">
           <template #default="scope">
             <template v-if="scope.row.name !== '硬件设施'">
-              <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
-              <el-button size="small" text type="info" @click="onTabelRowDel(scope.row)" v-auth="'del'">删除</el-button>
+              <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">{{ $t("message.dateCenter.tags.actions.edit") }}</el-button>
+              <el-button size="small" text type="info" @click="onTabelRowDel(scope.row)" v-auth="'del'">{{ $t("message.dateCenter.tags.actions.delete") }}</el-button>
             </template>
           </template>
         </el-table-column>
@@ -50,27 +50,33 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import EditDept from "./component/edit.vue";
 import api from "/@/api/datahub";
+import { useI18n } from "vue-i18n";
 
-const colorList = ref([
-  { value: "red", label: "红色", color: "#FF0000" },
-  { value: "green", label: "绿色", color: "#00FF00" },
-  { value: "blue", label: "蓝色", color: "#0000FF" },
-  { value: "yellow", label: "黄色", color: "#E8A92A" },
-  { value: "purple", label: "紫色", color: "#9A4FF0" },
-  { value: "pink", label: "粉色", color: "#E7408C" },
-  { value: "indigo", label: "靛蓝", color: "#525EE9" },
-  { value: "gray", label: "灰色", color: "#606774" },
-  { value: "orange", label: "橙色", color: "#F86724" },
-  { value: "cyan", label: "青色", color: "#00C853" },
-]);
+const { t } = useI18n();
 
-const colorMap = new Map();
-colorList.value.forEach((item) => {
-  colorMap.set(item.value, item);
+const colorList = computed(() => {
+  return [
+    { value: "red", label: t("message.dateCenter.tags.options.colors.red"), color: "#FF0000" },
+    { value: "green", label: t("message.dateCenter.tags.options.colors.green"), color: "#00FF00" },
+    { value: "blue", label: t("message.dateCenter.tags.options.colors.blue"), color: "#0000FF" },
+    { value: "yellow", label: t("message.dateCenter.tags.options.colors.yellow"), color: "#E8A92A" },
+    { value: "purple", label: t("message.dateCenter.tags.options.colors.purple"), color: "#9A4FF0" },
+    { value: "pink", label: t("message.dateCenter.tags.options.colors.pink"), color: "#E7408C" },
+    { value: "indigo", label: t("message.dateCenter.tags.options.colors.indigo"), color: "#525EE9" },
+    { value: "gray", label: t("message.dateCenter.tags.options.colors.gray"), color: "#606774" },
+    { value: "orange", label: t("message.dateCenter.tags.options.colors.orange"), color: "#F86724" },
+    { value: "cyan", label: t("message.dateCenter.tags.options.colors.cyan"), color: "#00C853" },
+  ];
+});
+
+const colorMap = computed(() => {
+  const m = new Map<string, { value: string; label: string; color: string }>();
+  colorList.value.forEach((item) => m.set(item.value, item));
+  return m;
 });
 
 const editDeptRef = ref();
@@ -96,13 +102,13 @@ const addOrEdit = (row?: any) => {
 };
 // 删除当前行
 const onTabelRowDel = (row: any) => {
-  ElMessageBox.confirm(`此操作将永久删除标签：${row.name}, 是否继续?`, "提示", {
-    confirmButtonText: "删除",
-    cancelButtonText: "取消",
+  ElMessageBox.confirm(t("message.dateCenter.tags.messages.deleteRowConfirm", { name: row.name }), t("message.dateCenter.tags.messages.tip"), {
+    confirmButtonText: t("message.dateCenter.tags.actions.confirm"),
+    cancelButtonText: t("message.dateCenter.tags.actions.cancel"),
     type: "warning",
   }).then(() => {
     api.tags.del(row.id).then(() => {
-      ElMessage.success("删除成功");
+      ElMessage.success(t("message.dateCenter.tags.messages.deleteSuccess"));
       getData();
     });
   });