perf(views): 优化"创建客户"模块多语言

src/i18n/locales/zh.json

@@ -202,6 +202,7 @@
     "rzpeat": "重复",
     "save": "保存",
     "search": "搜索",
+    "selectAll": "全选",
     "selectTime": "选择时间",
     "selected": "已选",
     "sequenceNumber": "序列号",
@@ -218,6 +219,7 @@
     "status": "状态",
     "submit": "提交",
     "success": "成功",
+    "taiwan": "台",
     "templateImport": "模板导入",
     "tenThousand": "万",
     "time": "时间",
@@ -603,10 +605,19 @@
     "userPermission": "账号管理"
   },
   "organizationManage": {
+    "custom": "可以自定义二级域名、Logo及主题色，以后可随时修改",
+    "dataRetentionPeriod": "数据存储时长",
+    "imageFormat": "请上传JPG/PNG/JPEG格式的图片！",
+    "leaseTerm": "租期",
+    "numberStations": "站房数（设备组)",
     "organizationDescription": "组织描述",
     "organizationName": "组织名称",
     "parentOrganization": "上级组织",
-    "pleaseEnterOrganizationName": "请输入组织名称"
+    "pleaseEnterOrganizationName": "请输入组织名称",
+    "quantityLimit": "设置数量上限",
+    "supportedImageFormats": "支持JPG/PNG/JPEG格式的图片",
+    "themeColor": "主题色",
+    "uploadImage": "上传图片"
   },
   "realTimeMonitor": {
     "activePower": "有功功率",
@@ -772,13 +783,24 @@
     "verificationSuccessful": "验证成功"
   },
   "roleManage": {
+    "addCharacters": "添加角色",
+    "administrator": "管理员",
+    "characterDescription": "角色描述",
+    "characterName": "角色名称",
+    "customRole": "可以直接使用默认角色，也可以自定义角色，权限后续可随时编辑",
     "dataPermission": "数据权限",
+    "defaultRole": "默认角色",
     "deviceGroupPermission": "设备组权限",
+    "editorialRole": "编辑角色",
     "functionalPermission": "功能权限",
+    "increaseCharacter": "增加角色",
+    "menuPermissionConfig": "菜单权限配置",
     "nameCannotBeEmpty": "名称不能为空！",
     "nameCannotContainSpaces": "名称不能包含空格！",
     "operationPermission": "操作权限",
+    "operationsStaff": "运维人员",
     "permission": "权限",
+    "pleaseEnterRoleName": "请输入角色名称",
     "viewPermission": "查看权限"
   },
   "setupProtocol": {
@@ -906,6 +928,7 @@
   "standardProtocolLibrary": {},
   "userManage": {
     "accountManagement": "账号管理",
+    "addAccount": "增加账号",
     "createDate": "创建日期",
     "defaultPassword": "默认密码8个0",
     "expiryDate": "到期日期",
@@ -913,6 +936,7 @@
     "mobileNumberFormatError": "手机号格式错误",
     "mobilePhoneNumber": "手机号",
     "password": "密码",
+    "pleaseAddAccount": "请添加账号！",
     "pleaseEnterMobileNumber": "请输入手机号、姓名",
     "role": "角色"
   }

src/views/create-customer/AddAccount.vue

@@ -22,7 +22,7 @@ const rules: Record<string, Rule[]> = {
     {
       validator: (_rule: unknown, value: string) => {
         if (!isValidPhone(value)) {
-          return Promise.reject('手机号格式错误');
+          return Promise.reject(t('userManage.mobileNumberFormatError'));
         }
         return Promise.resolve();
       },
@@ -61,13 +61,13 @@ defineExpose({
           <SvgIcon @click="deleteAccount" class="icon-delete" name="close-circle" />
         </template>
         <AFlex class="account-bgc" :vertical="true">
-          <AFormItem label="姓名" name="userName">
-            <AInput class="input-width" v-model:value="form.userName" placeholder="请输入" />
+          <AFormItem :label="t('userManage.fullName')" name="userName">
+            <AInput class="input-width" v-model:value="form.userName" :placeholder="t('common.pleaseEnter')" />
           </AFormItem>
-          <AFormItem label="手机号" name="mobile">
-            <AInput class="input-width" v-model:value="form.mobile" placeholder="请输入" />
+          <AFormItem :label="t('userManage.mobilePhoneNumber')" name="mobile">
+            <AInput class="input-width" v-model:value="form.mobile" :placeholder="t('common.pleaseEnter')" />
           </AFormItem>
-          <AFormItem label="角色" name="roleId">
+          <AFormItem :label="t('userManage.role')" name="roleId">
             <ASelect
               v-model:value="form.roleId"
               class="input-width"
@@ -76,7 +76,7 @@ defineExpose({
               :placeholder="$t('common.plzSelect')"
             />
           </AFormItem>
-          <AFormItem label="到期时间" name="accountTerm">
+          <AFormItem :label="t('userManage.expiryDate')" name="accountTerm">
             <ARangePicker
               v-model:value="form.accountTerm"
               class="input-width"
@@ -84,7 +84,7 @@ defineExpose({
               :separator="$t('common.to')"
             />
           </AFormItem>
-          <AFormItem label="启用" name="enabled">
+          <AFormItem :label="t('alarmManage.enable')" name="enabled">
             <ASwitch v-model:checked="form.enabled" />
           </AFormItem>
         </AFlex>

src/views/create-customer/CreateAccount.vue

@@ -45,7 +45,7 @@ const confirm = () => {
 
 const finish = async () => {
   if (!accountList.value.length) {
-    throw new Error('请添加账号！');
+    throw new Error(t('userManage.pleaseAddAccount'));
   }
   // eslint-disable-next-line no-useless-catch
   try {
@@ -84,7 +84,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="account"><span class="account-text">*</span>创建账号</div>
+    <div class="account"><span class="account-text">*</span>{{ t('createCustomer.createAccount') }}</div>
     <AFlex wrap="wrap">
       <div v-for="(item, index) in accountList" :key="index" class="account-list">
         <AddAccount
@@ -100,7 +100,7 @@ onMounted(() => {
     <AButton type="primary" ghost class="icon-button button-style" @click="addAccountForm">
       <AFlex align="center">
         <SvgIcon name="plus" />
-        <span> 增加账号 </span>
+        <span> {{ t('userManage.addAccount') }} </span>
       </AFlex>
     </AButton>
     <ConfirmModal

src/views/create-customer/CreateCharacter.vue

@@ -161,7 +161,7 @@ const getFindRolesByOrg = () => {
       characterList.value = [];
       const list = await getFindRolesByOrgIds([props.form.id]);
       list.forEach((item) => {
-        if (item.roleName !== '管理员' && item.roleName !== '工程师') {
+        if (item.roleName !== '管理员' && item.roleName !== '运维人员') {
           characterList.value.push(item);
         }
       });
@@ -192,15 +192,15 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="character"><span class="character-text">*</span>创建角色</div>
+    <div class="character"><span class="character-text">*</span>{{ t('createCustomer.createCharacter') }}</div>
     <AFlex :vertical="true" :gap="16">
       <AFlex align="center">
-        <AFlex class="input-style" align="center"> 管理员 </AFlex>
-        <div class="input-style-text">默认角色</div>
+        <AFlex class="input-style" align="center"> {{ t('roleManage.administrator') }} </AFlex>
+        <div class="input-style-text">{{ t('roleManage.defaultRole') }}</div>
       </AFlex>
       <AFlex align="center">
-        <AFlex class="input-style" align="center"> 运维人员 </AFlex>
-        <div class="input-style-text">默认角色</div>
+        <AFlex class="input-style" align="center"> {{ t('roleManage.operationsStaff') }} </AFlex>
+        <div class="input-style-text">{{ t('roleManage.defaultRole') }}</div>
       </AFlex>
       <AFlex align="center" v-for="(item, index) in characterList" :key="index">
         <AFlex class="input-style input-background" align="center"> {{ item.roleName }} </AFlex>
@@ -219,12 +219,12 @@ onMounted(() => {
     <AButton type="primary" ghost class="icon-button button-style" @click="addCharacter">
       <AFlex align="center">
         <SvgIcon name="plus" />
-        <span> 增加角色 </span>
+        <span> {{ t('roleManage.increaseCharacter') }} </span>
       </AFlex>
     </AButton>
     <AModal
       v-model:open="characterOpen"
-      :title="characterTitle ? '添加角色' : '编辑角色'"
+      :title="characterTitle ? t('roleManage.addCharacters') : t('roleManage.editorialRole')"
       width="920px"
       :mask-closable="false"
       :footer="null"
@@ -238,10 +238,14 @@ onMounted(() => {
         :rules="rules"
         :label-col="{ span: 3 }"
       >
-        <AFormItem label="角色名称" name="roleName">
-          <AInput class="input-width" v-model:value="characterForm.roleName" placeholder="请输入角色名称" />
+        <AFormItem :label="t('roleManage.characterName')" name="roleName">
+          <AInput
+            class="input-width"
+            v-model:value="characterForm.roleName"
+            :placeholder="t('roleManage.pleaseEnterRoleName')"
+          />
         </AFormItem>
-        <AFormItem label="角色描述">
+        <AFormItem :label="t('roleManage.characterDescription')">
           <ATextarea
             class="input-width"
             v-model:value="characterForm.remark"
@@ -249,10 +253,14 @@ onMounted(() => {
             :auto-size="{ minRows: 4 }"
           />
         </AFormItem>
-        <AFormItem label="菜单权限配置">
+        <AFormItem :label="t('roleManage.menuPermissionConfig')">
           <div class="permission-configuration">
-            <ACheckbox class="select-all" :indeterminate="indeterminate" v-model:checked="checked" @change="selectAll"
-              >全选</ACheckbox
+            <ACheckbox
+              class="select-all"
+              :indeterminate="indeterminate"
+              v-model:checked="checked"
+              @change="selectAll"
+              >{{ t('common.selectAll') }}</ACheckbox
             >
             <ATree
               v-model:expanded-keys="expandedKeys"
@@ -267,7 +275,7 @@ onMounted(() => {
       </AForm>
       <AFlex justify="flex-end" class="footer">
         <AButton class="button-right" type="primary" ghost @click="cancelSave">{{ $t('common.cancel') }}</AButton>
-        <AButton type="primary" @click="characterSave">保存</AButton>
+        <AButton type="primary" @click="characterSave">{{ t('common.save') }}</AButton>
       </AFlex>
     </AModal>
     <ConfirmModal

src/views/create-customer/CreateCustomer.vue

@@ -27,28 +27,28 @@ const rules = computed<FormRules<RegisterGatewayForm>>(() => {
     orgName: [
       {
         required: true,
-        message: '不能为空',
+        message: t('common.cannotEmpty'),
         trigger: 'change',
       },
     ],
     leaseTerm: [
       {
         required: true,
-        message: '不能为空',
+        message: t('common.cannotEmpty'),
         trigger: 'change',
       },
     ],
     stationsNumber: [
       {
         required: true,
-        message: '不能为空',
+        message: t('common.cannotEmpty'),
         trigger: 'change',
       },
     ],
     dataValidityPeriod: [
       {
         required: true,
-        message: '不能为空',
+        message: t('common.cannotEmpty'),
         trigger: 'change',
       },
     ],
@@ -59,14 +59,14 @@ const steps = ref<UseGuideStepItem[]>([
   {
     title: t('createCustomer.establishOrganization'),
     component: shallowRef(EstablishOrganization),
-    stepDescription: '可以自定义二级域名、Logo及主题色，以后可随时修改',
+    stepDescription: t('organizationManage.custom'),
     labelAlign: 'left',
     labelCol: { span: 2 },
   },
   {
     title: t('createCustomer.createCharacter'),
     component: shallowRef(CreateCharacter),
-    stepDescription: '可以直接使用默认角色，也可以自定义角色，权限后续可随时编辑',
+    stepDescription: t('roleManage.customRole'),
   },
   {
     title: t('createCustomer.createAccount'),

src/views/create-customer/EquipmentLimitations.vue

@@ -52,12 +52,12 @@ defineExpose({
               />
             </AFormItem>
 
-            <AFormItem label="数量" name="upperLimit">
+            <AFormItem :label="t('setupProtocol.protocolParamFields.quantity')" name="upperLimit">
               <AInputNumber
                 :placeholder="t('common.pleaseEnter')"
                 v-model:value="form.upperLimit"
                 class="time-width"
-                addon-after="台"
+                :addon-after="t('common.taiwan')"
               />
             </AFormItem>
           </AFlex>

src/views/create-customer/EstablishOrganization.vue

@@ -166,7 +166,7 @@ const beforeUpload = (file: Blob) => {
   const isJpgOrPng = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
   console.log(isJpgOrPng);
   if (!isJpgOrPng) {
-    message.error('请上传JPG/PNG/JPEG格式的图片！');
+    message.error(t('organizationManage.imageFormat'));
     return false;
   }
 };
@@ -239,10 +239,10 @@ onMounted(() => {
 
 <template>
   <div class="organization text">
-    <AFormItem label="组织名称" name="orgName">
+    <AFormItem :label="t('organizationManage.organizationName')" name="orgName">
       <AInput v-model:value="form.orgName" class="organization-input" :placeholder="$t('common.pleaseEnter')" />
     </AFormItem>
-    <AFormItem label="租期" name="leaseTerm">
+    <AFormItem :label="t('organizationManage.leaseTerm')" name="leaseTerm">
       <ARangePicker
         class="organization-input"
         v-model:value="form.leaseTerm"
@@ -250,8 +250,8 @@ onMounted(() => {
         :separator="$t('common.to')"
       />
     </AFormItem>
-    <div class="upper-limit">设置数量上限</div>
-    <AFormItem label="站房数（设备组)" name="stationsNumber">
+    <div class="upper-limit">{{ t('organizationManage.quantityLimit') }}</div>
+    <AFormItem :label="t('organizationManage.numberStations')" name="stationsNumber">
       <AInputNumber
         :placeholder="t('common.pleaseEnter')"
         v-model:value="form.stationsNumber"
@@ -270,7 +270,7 @@ onMounted(() => {
       />
     </div>
 
-    <AFormItem label="数据存储时长" name="dataValidityPeriod">
+    <AFormItem :label="t('organizationManage.dataRetentionPeriod')" name="dataValidityPeriod">
       <ASelect
         class="organization-input"
         v-model:value="form.dataValidityPeriod"
@@ -301,16 +301,16 @@ onMounted(() => {
 
           <div v-else>
             <SvgIcon class="icon-size" name="upload-pictures" />
-            <div class="text">上传图片</div>
+            <div class="text">{{ t('organizationManage.uploadImage') }}</div>
           </div>
         </AUpload>
-        <div class="format-text">支持JPG/PNG/JPEG格式的图片</div>
+        <div class="format-text">{{ t('organizationManage.supportedImageFormats') }}</div>
       </div>
     </AFormItem>
 
     <AFlex>
       <AFlex align="center">
-        <div class="text">主题色</div>
+        <div class="text">{{ t('organizationManage.themeColor') }}</div>
         <AFlex class="color-list">
           <div v-for="(item, index) in colorStyle" :key="index">
             <div @click="colorClick(item.color)">