From ad8f4774839460b4ba805fa2720c0a5c19314818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Tue, 3 Sep 2024 01:24:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor(form):=20=E7=A7=BB=E9=99=A4i18n?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/form/base/constants.ts |  18 ++---
 src/pages/form/base/index.vue    |  60 +++++++--------
 src/pages/form/step/constants.ts |  28 +++----
 src/pages/form/step/index.vue    | 128 ++++++++++++-------------------
 4 files changed, 104 insertions(+), 130 deletions(-)

diff --git a/src/pages/form/base/constants.ts b/src/pages/form/base/constants.ts
index 0eccc6e..e8503a0 100644
--- a/src/pages/form/base/constants.ts
+++ b/src/pages/form/base/constants.ts
@@ -27,19 +27,19 @@ export const INITIAL_DATA = {
 };
 
 export const TYPE_OPTIONS = [
-  { label: 'Type A', value: '1' },
-  { label: 'Type B', value: '2' },
-  { label: 'Type C', value: '3' },
+  { label: '类型A', value: '1' },
+  { label: '类型B', value: '2' },
+  { label: '类型C', value: '3' },
 ];
 
 export const PARTY_A_OPTIONS = [
-  { label: 'Company A', value: '1' },
-  { label: 'Company B', value: '2' },
-  { label: 'Company C', value: '3' },
+  { label: '公司A', value: '1' },
+  { label: '公司B', value: '2' },
+  { label: '公司C', value: '3' },
 ];
 
 export const PARTY_B_OPTIONS = [
-  { label: 'Company A', value: '1' },
-  { label: 'Company B', value: '2' },
-  { label: 'Company C', value: '3' },
+  { label: '公司A', value: '1' },
+  { label: '公司B', value: '2' },
+  { label: '公司C', value: '3' },
 ];
diff --git a/src/pages/form/base/index.vue b/src/pages/form/base/index.vue
index 8398b73..575bc64 100644
--- a/src/pages/form/base/index.vue
+++ b/src/pages/form/base/index.vue
@@ -11,19 +11,25 @@
   >
     <div class="form-basic-container">
       <div class="form-basic-item">
-        <div class="form-basic-container-title">{{ $t('pages.formBase.title') }}</div>
+        <div class="form-basic-container-title">合同信息</div>
         <!-- 表单内容 -->
 
         <!-- 合同名称,合同类型 -->
         <t-row class="row-gap" :gutter="[32, 24]">
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.contractName')" name="name">
+            <t-form-item label="合同名称" name="name">
               <t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.contractType')" name="type">
-              <t-select v-model="formData.type" :style="{ width: '322px' }" class="demo-select-base" clearable>
+            <t-form-item label="合同类型" name="type">
+              <t-select
+                v-model="formData.type"
+                :style="{ width: '322px' }"
+                placeholder="请选择类型"
+                class="demo-select-base"
+                clearable
+              >
                 <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
                   {{ item.label }}
                 </t-option>
@@ -33,25 +39,25 @@
 
           <!-- 合同收付类型 -->
           <t-col :span="8">
-            <t-form-item :label="$t('pages.formBase.contractPayType')" name="payment">
+            <t-form-item label="合同收付类型" name="payment">
               <t-radio-group v-model="formData.payment">
-                <t-radio value="1"> {{ $t('pages.formBase.receive') }} </t-radio>
-                <t-radio value="2"> {{ $t('pages.formBase.pay') }} </t-radio>
+                <t-radio value="1"> 收款 </t-radio>
+                <t-radio value="2"> 付款 </t-radio>
               </t-radio-group>
               <span class="space-item" />
               <div>
-                <t-input :placeholder="$t('pages.formBase.contractAmountPlaceholder')" :style="{ width: '160px' }" />
+                <t-input placeholder="请输入金额" :style="{ width: '160px' }" />
               </div>
             </t-form-item>
           </t-col>
 
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.company')" name="partyA">
+            <t-form-item label="甲方" name="partyA">
               <t-select
                 v-model="formData.partyA"
                 :style="{ width: '322px' }"
                 class="demo-select-base"
-                :placeholder="$t('pages.formBase.contractTypePlaceholder')"
+                placeholder="请选择类型"
                 clearable
               >
                 <t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
@@ -61,11 +67,11 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.employee')" name="partyB">
+            <t-form-item label="乙方" name="partyB">
               <t-select
                 v-model="formData.partyB"
                 :style="{ width: '322px' }"
-                :placeholder="$t('pages.formBase.contractTypePlaceholder')"
+                placeholder="请选择类型"
                 class="demo-select-base"
                 clearable
               >
@@ -76,7 +82,7 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.contractSignDate')" name="signDate">
+            <t-form-item label="合同签订日期" name="signDate">
               <t-date-picker
                 v-model="formData.signDate"
                 :style="{ width: '322px' }"
@@ -87,7 +93,7 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.contractEffectiveDate')" name="startDate">
+            <t-form-item label="合同生效日期" name="startDate">
               <t-date-picker
                 v-model="formData.startDate"
                 :style="{ width: '322px' }"
@@ -98,7 +104,7 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.contractEndDate')" name="endDate">
+            <t-form-item label="合同结束日期" name="endDate">
               <t-date-picker
                 v-model="formData.endDate"
                 :style="{ width: '322px' }"
@@ -109,30 +115,28 @@
             </t-form-item>
           </t-col>
           <t-col :span="6">
-            <t-form-item :label="$t('pages.formBase.upload')" name="files">
+            <t-form-item label="上传文件" name="files">
               <t-upload
                 v-model="formData.files"
                 action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
-                :tips="$t('pages.formBase.uploadTips')"
+                tips="请上传pdf文件，大小在60M以内"
                 :size-limit="{ size: 60, unit: 'MB' }"
                 :format-response="formatResponse"
                 :before-upload="beforeUpload"
                 @fail="handleFail"
               >
-                <t-button class="form-submit-upload-btn" variant="outline">
-                  {{ $t('pages.formBase.uploadFile') }}
-                </t-button>
+                <t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
               </t-upload>
             </t-form-item>
           </t-col>
         </t-row>
 
-        <div class="form-basic-container-title form-title-gap">{{ $t('pages.formBase.otherInfo') }}</div>
+        <div class="form-basic-container-title form-title-gap">其它信息</div>
 
-        <t-form-item :label="$t('pages.formBase.remark')" name="comment">
-          <t-textarea v-model="formData.comment" :height="124" :placeholder="$t('pages.formBase.remarkPlaceholder')" />
+        <t-form-item label="备注" name="comment">
+          <t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formBase.notaryPublic')">
+        <t-form-item label="公证人">
           <t-avatar-group>
             <t-avatar>D</t-avatar>
             <t-avatar>S</t-avatar>
@@ -145,12 +149,8 @@
     <div class="form-submit-container">
       <div class="form-submit-sub">
         <div class="form-submit-left">
-          <t-button theme="primary" class="form-submit-confirm" type="submit">
-            {{ $t('pages.formBase.confirm') }}
-          </t-button>
-          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base">
-            {{ $t('pages.formBase.cancel') }}
-          </t-button>
+          <t-button theme="primary" class="form-submit-confirm" type="submit"> 确认提交 </t-button>
+          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
         </div>
       </div>
     </div>
diff --git a/src/pages/form/step/constants.ts b/src/pages/form/step/constants.ts
index 6de203c..c4e0b8a 100644
--- a/src/pages/form/step/constants.ts
+++ b/src/pages/form/step/constants.ts
@@ -1,26 +1,26 @@
 import { FormRule } from 'tdesign-vue-next';
 
 export const FORM_RULES: Record<string, FormRule[]> = {
-  name: [{ required: true, type: 'error' }],
-  type: [{ required: true, type: 'error' }],
-  title: [{ required: true, type: 'error' }],
-  taxNum: [{ required: true, type: 'error' }],
-  consignee: [{ required: true, type: 'error' }],
-  mobileNum: [{ required: true, type: 'error' }],
-  deliveryAddress: [{ required: true, type: 'error' }],
-  fullAddress: [{ required: true, type: 'error' }],
+  name: [{ required: true, message: '请选择合同名称', type: 'error' }],
+  type: [{ required: true, message: '请选择发票类型', type: 'error' }],
+  title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
+  taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
+  consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
+  mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
+  deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
+  fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
 };
 
 export const NAME_OPTIONS = [
-  { label: 'A', value: '1' },
-  { label: 'B', value: '2' },
-  { label: 'C', value: '3' },
+  { label: '合同A', value: '1' },
+  { label: '合同B', value: '2' },
+  { label: '合同C', value: '3' },
 ];
 
 export const TYPE_OPTIONS = [
-  { label: 'Type A', value: '1' },
-  { label: 'Type B', value: '2' },
-  { label: 'Type C', value: '3' },
+  { label: '类型A', value: '1' },
+  { label: '类型B', value: '2' },
+  { label: '类型C', value: '3' },
 ];
 
 export const ADDRESS_OPTIONS = [
diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue
index 8309737..e2db393 100644
--- a/src/pages/form/step/index.vue
+++ b/src/pages/form/step/index.vue
@@ -4,22 +4,22 @@
       <!-- 简单步骤条 -->
       <t-card :bordered="false">
         <t-steps class="step-container" :current="1" status="process">
-          <t-step-item :title="$t('pages.formStep.step1.title')" :content="$t('pages.formStep.step1.subtitle')" />
-          <t-step-item :title="$t('pages.formStep.step2.title')" :content="$t('pages.formStep.step2.subtitle')" />
-          <t-step-item :title="$t('pages.formStep.step3.title')" :content="$t('pages.formStep.step3.subtitle')" />
-          <t-step-item :title="$t('pages.formStep.step4.title')" :content="$t('pages.formStep.step4.subtitle')" />
+          <t-step-item title="提交申请" content="已于12月21日提交" />
+          <t-step-item title="电子信息" content="预计1-3个工作日" />
+          <t-step-item title="发票已邮寄" content="电子发票开出后联系" />
+          <t-step-item title="完成申请" content="如有疑问联系客服" />
         </t-steps>
       </t-card>
 
       <!-- 分步表单1 -->
       <div v-show="activeForm === 0" class="rule-tips">
-        <t-alert theme="info" :title="$t('pages.formStep.step1.rules')" :close="true">
+        <t-alert theme="info" title="发票开具规则：" :close="true">
           <template #message>
             <p>
-              {{ $t('pages.formStep.step1.rule1') }}
+              1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；
             </p>
-            <p>{{ $t('pages.formStep.step1.rule2') }}</p>
-            <p>{{ $t('pages.formStep.step1.rule3') }}</p>
+            <p>2、开票金额为您实际支付金额；</p>
+            <p>3、如有疑问请直接联系：13300001111。</p>
           </template>
         </t-alert>
       </div>
@@ -31,23 +31,23 @@
         label-align="right"
         @submit="(result: SubmitContext) => onSubmit(result, 1)"
       >
-        <t-form-item :label="$t('pages.formStep.step1.contractName')" name="name">
+        <t-form-item label="合同名称" name="name">
           <t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
             <t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step1.invoiceType')" name="type">
+        <t-form-item label="发票类型" name="type">
           <t-select v-model="formData1.type" :style="{ width: '480px' }" class="demo-select-base" clearable>
             <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step1.amount')"> ¥ {{ amount }} </t-form-item>
+        <t-form-item label="开票金额"> {{ amount }} 元 </t-form-item>
         <t-form-item>
-          <t-button theme="primary" type="submit"> {{ $t('pages.formStep.step1.submit') }} </t-button>
+          <t-button theme="primary" type="submit"> 提交申请 </t-button>
         </t-form-item>
       </t-form>
 
@@ -61,58 +61,30 @@
         @reset="onReset(0)"
         @submit="(result: SubmitContext) => onSubmit(result, 2)"
       >
-        <t-form-item :label="$t('pages.formStep.step2.invoiceTitle')" name="title">
-          <t-input
-            v-model="formData2.title"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.invoiceTitlePlaceholder')"
-          />
+        <t-form-item label="发票抬头" name="title">
+          <t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step2.taxNum')" name="taxNum">
-          <t-input
-            v-model="formData2.taxNum"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.taxNumPlaceholder')"
-          />
+        <t-form-item label="纳税人识别号" name="taxNum">
+          <t-input v-model="formData2.taxNum" :style="{ width: '480px' }" placeholder="请输入纳税人识别号" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step2.address')" name="address">
-          <t-input
-            v-model="formData2.address"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.addressPlaceholder')"
-          />
+        <t-form-item label="单位地址" name="address">
+          <t-input v-model="formData2.address" :style="{ width: '480px' }" placeholder="请输入单位地址" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step2.bank')" name="bank">
-          <t-input
-            v-model="formData2.bank"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.bankPlaceholder')"
-          />
+        <t-form-item label="开户行" name="bank">
+          <t-input v-model="formData2.bank" :style="{ width: '480px' }" placeholder="请输入开户行" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step2.bankAccount')" name="bankAccount">
-          <t-input
-            v-model="formData2.bankAccount"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.bankAccountPlaceholder')"
-          />
+        <t-form-item label="银行账号" name="bankAccount">
+          <t-input v-model="formData2.bankAccount" :style="{ width: '480px' }" placeholder="请输入银行账号" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step2.email')" name="email">
-          <t-input
-            v-model="formData2.email"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.emailPlaceholder')"
-          />
+        <t-form-item label="通知邮箱" name="email">
+          <t-input v-model="formData2.email" :style="{ width: '480px' }" placeholder="请输入通知邮箱" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step2.tel')" name="tel">
-          <t-input
-            v-model="formData2.tel"
-            :style="{ width: '480px' }"
-            :placeholder="$t('pages.formStep.step2.telPlaceholder')"
-          />
+        <t-form-item label="通知手机" name="tel">
+          <t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
         </t-form-item>
         <t-form-item>
-          <t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button>
-          <t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button>
+          <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
+          <t-button theme="primary" type="submit"> 下一步 </t-button>
         </t-form-item>
       </t-form>
 
@@ -126,41 +98,43 @@
         @reset="onReset(1)"
         @submit="(result: SubmitContext) => onSubmit(result, 6)"
       >
-        <t-form-item :label="$t('pages.formStep.step3.consignee')" name="consignee">
-          <t-input v-model="formData3.consignee" :style="{ width: '480px' }" />
+        <t-form-item label="收货人" name="consignee">
+          <t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step3.mobileNum')" name="mobileNum">
-          <t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" />
+        <t-form-item label="手机号码" name="mobileNum">
+          <t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" placeholder="请输入手机号码" />
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step3.deliveryAddress')" name="deliveryAddress">
-          <t-select v-model="formData3.deliveryAddress" :style="{ width: '480px' }" class="demo-select-base" clearable>
+        <t-form-item label="收货地址" name="deliveryAddress">
+          <t-select
+            v-model="formData3.deliveryAddress"
+            :style="{ width: '480px' }"
+            placeholder="请选择收货地址"
+            class="demo-select-base"
+            clearable
+          >
             <t-option v-for="(item, index) in ADDRESS_OPTIONS" :key="index" :value="item.value" :label="item.label">
               {{ item.label }}
             </t-option>
           </t-select>
         </t-form-item>
-        <t-form-item :label="$t('pages.formStep.step3.fullAddress')" name="fullAddress">
-          <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" />
+        <t-form-item label="详细地址" name="fullAddress">
+          <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
         </t-form-item>
         <t-form-item>
-          <t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button>
-          <t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button>
+          <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
+          <t-button theme="primary" type="submit"> 下一步 </t-button>
         </t-form-item>
       </t-form>
 
       <!-- 分步表单4 -->
       <div v-show="activeForm === 6" class="step-form-4">
-        <t-space direction="vertical" style="align-items: center">
-          <t-icon name="check-circle-filled" style="color: green" size="52px" />
-          <p class="text">{{ $t('pages.formStep.step4.finishTitle') }}</p>
-          <p class="tips">{{ $t('pages.formStep.step4.finishTips') }}</p>
-          <div class="button-group">
-            <t-button theme="primary" @click="onReset(0)"> {{ $t('pages.formStep.step4.reapply') }} </t-button>
-            <t-button variant="base" theme="default" @click="complete">
-              {{ $t('pages.formStep.step4.check') }}
-            </t-button>
-          </div>
-        </t-space>
+        <t-icon name="check-circle-filled" style="color: green" size="52px" />
+        <p class="text">完成开票申请</p>
+        <p class="tips">预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待</p>
+        <div class="button-group">
+          <t-button theme="primary" @click="onReset(0)"> 再次申请 </t-button>
+          <t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
+        </div>
       </div>
     </div>
   </div>