国内品牌管理-中英文

src/locales/system/domesticBrand/cn.json

+{
+  "handleAdd": "新建",
+  "serialNumber": "序号",
+  "type": "类型",
+  "brand": "品牌",
+  "updateUserName": "更新人",
+  "updateTime": "更新时间",
+  "remark": "备注",
+  "add": "新增",
+  "handleUpdate": "编辑",
+  "handleDelete": "删除",
+  "operation":"操作",
+  "handleSelectionChange": "多选框选中数据",
+  "submitForm": "确定",
+  "cancel": "取消",
+  "typeCannotBeEmpty": "类型不能为空",
+  "brandCannotBeEmpty": "品牌不能为空",
+  "getList": "查询国内品牌数据列表",
+  "reset": "表单重置",
+  "handleQuery": "搜索按钮操作",
+  "resetQuery": "重置按钮操作",
+  "handleExport": "导出按钮操作",
+  "modifySuccess": "修改成功",
+  "addSuccess": "新增成功",
+  "deleteSuccess": "删除成功",
+  "confirmDelete": "是否确认删除该数据项？"
+}

src/locales/system/domesticBrand/en.json

+{
+  "handleAdd": "Create New",
+  "serialNumber": "Serial Number",
+  "type": "Type",
+  "brand": "Brand",
+  "updateUserName": "Updater's Name",
+  "updateTime": "Update Time",
+  "remark": "Remark",
+  "add": "add",
+  "handleUpdate": "Edit",
+  "handleDelete": "Delete",
+  "operation":"operation",
+  "handleSelectionChange": "Handle Selection Change of Checkbox",
+  "submitForm": "Confirm",
+  "cancel": "Cancel",
+  "typeCannotBeEmpty": "Type cannot be empty",
+  "brandCannotBeEmpty": "Brand cannot be empty",
+  "getList": "Query Domestic Brand Data List",
+  "reset": "Form Reset",
+  "handleQuery": "Search Button Operation",
+  "resetQuery": "Reset Button Operation",
+  "handleExport": "Export Button Operation",
+  "modifySuccess": "Modification Successful",
+  "addSuccess": "Addition Successful",
+  "deleteSuccess": "Deletion Successful",
+  "confirmDelete": "Are you sure you want to delete this data item?"
+}

src/views/system/domesticBrand/index.vue

@@ -8,26 +8,71 @@
           class="btn-C"
           @click="handleAdd"
           style=""
-      >新建</el-button>
+      >{{cn.handleAdd}}/{{en.handleAdd}}</el-button>
     </div>
 
     <el-table style="margin-top: 15px" border v-loading="loading" :data="brandDataList" @selection-change="handleSelectionChange">
-      <el-table-column type="index" label="序号" width="55" align="center" />
-      <el-table-column label="类型" align="center" prop="type" />
-      <el-table-column label="品牌" align="center" prop="brand" />
-      <el-table-column label="更新人" align="center" prop="updateUserName" />
+      <el-table-column type="index" label="序号" width="105" align="center" >
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.serialNumber}}</div>
+            <div>{{en.serialNumber}}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" align="center" prop="type" >
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.type}}</div>
+            <div>{{en.type}}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="品牌" align="center" prop="brand" >
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.brand}}</div>
+            <div>{{en.brand}}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新人" align="center" prop="updateUserName" >
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.updateUserName}}</div>
+            <div>{{en.updateUserName}}</div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="更新时间" align="center" prop="updateTime">
-
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.updateTime}}</div>
+            <div>{{en.updateTime}}</div>
+          </div>
+        </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" >
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.remark}}</div>
+            <div>{{en.remark}}</div>
+          </div>
+        </template>
         <template #default="scope">
           {{scope.row.remark || '--'}}
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #header>
+          <div style="display: flex;flex-direction: column">
+            <div>{{cn.operation}}</div>
+            <div>{{en.operation}}</div>
+          </div>
+        </template>
         <template #default="scope">
-          <el-button link type="primary"  @click="handleUpdate(scope.row)" >编辑</el-button>
-          <el-button link  type="danger"  @click="handleDelete(scope.row)" >删除</el-button>
+          <el-button link type="primary"  @click="handleUpdate(scope.row)" >{{cn.handleUpdate}}/{{en.handleUpdate}}</el-button>
+          <el-button link  type="danger"  @click="handleDelete(scope.row)" >{{cn.handleDelete}}/{{en.handleDelete}}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -44,20 +89,20 @@
     <el-dialog  top="30" :title="title"  v-model="open" width="500px" append-to-body>
       <el-form ref="brandDataRef" label-position="top" :model="form" :rules="rules" label-width="80px">
 
-        <el-form-item label="类型" prop="type">
+        <el-form-item :label="`${cn.type}/${en.type}`" prop="type">
           <el-input  v-model="form.type" disabled placeholder="请输入类型" />
         </el-form-item>
-        <el-form-item label="品牌" prop="brand">
+        <el-form-item :label="`${cn.brand}/${en.brand}`" prop="brand">
           <el-input v-model="form.brand" placeholder="请输入品牌" />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
+        <el-form-item :label="`${cn.remark}/${en.remark}`" prop="remark">
           <el-input v-model="form.remark"  placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+          <el-button class="btn-A" type="primary" @click="submitForm">{{cn.submitForm}}/{{en.submitForm}}</el-button>
+          <el-button class="btn-B" @click="cancel">{{cn.cancel}}/{{en.cancel}}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -66,7 +111,8 @@
 
 <script setup >
 import { listBrandData, getBrandData, delBrandData, addBrandData, updateBrandData } from "@/api/brandData/brandData";
-
+import cn from "@/locales/system/domesticBrand/cn.json"
+import en from "@/locales/system/domesticBrand/en.json"
 const { proxy } = getCurrentInstance();
 
 const brandDataList = ref([]);
@@ -149,7 +195,7 @@ function handleSelectionChange(selection) {
 function handleAdd() {
   reset();
   open.value = true;
-  title.value = "新增";
+  title.value = cn.add + '/' + en.add;
 }
 
 /** 修改按钮操作 */
@@ -159,7 +205,7 @@ function handleUpdate(row) {
   getBrandData(_id).then(response => {
     form.value = response.data;
     open.value = true;
-    title.value = "编辑";
+    title.value = cn.handleUpdate + "/" +en.handleUpdate;
   });
 }