refactor(form): 移除i18n相关

This commit is contained in:
悠静萝莉 2024-09-03 01:24:31 +08:00
parent c5535de8f9
commit ad8f477483
No known key found for this signature in database
GPG Key ID: 4EDF1CA1CEA8EBCC
4 changed files with 104 additions and 130 deletions

View File

@ -27,19 +27,19 @@ export const INITIAL_DATA = {
}; };
export const TYPE_OPTIONS = [ export const TYPE_OPTIONS = [
{ label: 'Type A', value: '1' }, { label: '类型A', value: '1' },
{ label: 'Type B', value: '2' }, { label: '类型B', value: '2' },
{ label: 'Type C', value: '3' }, { label: '类型C', value: '3' },
]; ];
export const PARTY_A_OPTIONS = [ export const PARTY_A_OPTIONS = [
{ label: 'Company A', value: '1' }, { label: '公司A', value: '1' },
{ label: 'Company B', value: '2' }, { label: '公司B', value: '2' },
{ label: 'Company C', value: '3' }, { label: '公司C', value: '3' },
]; ];
export const PARTY_B_OPTIONS = [ export const PARTY_B_OPTIONS = [
{ label: 'Company A', value: '1' }, { label: '公司A', value: '1' },
{ label: 'Company B', value: '2' }, { label: '公司B', value: '2' },
{ label: 'Company C', value: '3' }, { label: '公司C', value: '3' },
]; ];

View File

@ -11,19 +11,25 @@
> >
<div class="form-basic-container"> <div class="form-basic-container">
<div class="form-basic-item"> <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-row class="row-gap" :gutter="[32, 24]">
<t-col :span="6"> <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-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractType')" name="type"> <t-form-item label="合同类型" name="type">
<t-select v-model="formData.type" :style="{ width: '322px' }" class="demo-select-base" clearable> <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"> <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
@ -33,25 +39,25 @@
<!-- 合同收付类型 --> <!-- 合同收付类型 -->
<t-col :span="8"> <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-group v-model="formData.payment">
<t-radio value="1"> {{ $t('pages.formBase.receive') }} </t-radio> <t-radio value="1"> 收款 </t-radio>
<t-radio value="2"> {{ $t('pages.formBase.pay') }} </t-radio> <t-radio value="2"> 付款 </t-radio>
</t-radio-group> </t-radio-group>
<span class="space-item" /> <span class="space-item" />
<div> <div>
<t-input :placeholder="$t('pages.formBase.contractAmountPlaceholder')" :style="{ width: '160px' }" /> <t-input placeholder="请输入金额" :style="{ width: '160px' }" />
</div> </div>
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.company')" name="partyA"> <t-form-item label="甲方" name="partyA">
<t-select <t-select
v-model="formData.partyA" v-model="formData.partyA"
:style="{ width: '322px' }" :style="{ width: '322px' }"
class="demo-select-base" class="demo-select-base"
:placeholder="$t('pages.formBase.contractTypePlaceholder')" placeholder="请选择类型"
clearable clearable
> >
<t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label"> <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-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.employee')" name="partyB"> <t-form-item label="乙方" name="partyB">
<t-select <t-select
v-model="formData.partyB" v-model="formData.partyB"
:style="{ width: '322px' }" :style="{ width: '322px' }"
:placeholder="$t('pages.formBase.contractTypePlaceholder')" placeholder="请选择类型"
class="demo-select-base" class="demo-select-base"
clearable clearable
> >
@ -76,7 +82,7 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractSignDate')" name="signDate"> <t-form-item label="合同签订日期" name="signDate">
<t-date-picker <t-date-picker
v-model="formData.signDate" v-model="formData.signDate"
:style="{ width: '322px' }" :style="{ width: '322px' }"
@ -87,7 +93,7 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractEffectiveDate')" name="startDate"> <t-form-item label="合同生效日期" name="startDate">
<t-date-picker <t-date-picker
v-model="formData.startDate" v-model="formData.startDate"
:style="{ width: '322px' }" :style="{ width: '322px' }"
@ -98,7 +104,7 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractEndDate')" name="endDate"> <t-form-item label="合同结束日期" name="endDate">
<t-date-picker <t-date-picker
v-model="formData.endDate" v-model="formData.endDate"
:style="{ width: '322px' }" :style="{ width: '322px' }"
@ -109,30 +115,28 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.upload')" name="files"> <t-form-item label="上传文件" name="files">
<t-upload <t-upload
v-model="formData.files" v-model="formData.files"
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" 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' }" :size-limit="{ size: 60, unit: 'MB' }"
:format-response="formatResponse" :format-response="formatResponse"
:before-upload="beforeUpload" :before-upload="beforeUpload"
@fail="handleFail" @fail="handleFail"
> >
<t-button class="form-submit-upload-btn" variant="outline"> <t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
{{ $t('pages.formBase.uploadFile') }}
</t-button>
</t-upload> </t-upload>
</t-form-item> </t-form-item>
</t-col> </t-col>
</t-row> </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-form-item label="备注" name="comment">
<t-textarea v-model="formData.comment" :height="124" :placeholder="$t('pages.formBase.remarkPlaceholder')" /> <t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formBase.notaryPublic')"> <t-form-item label="公证人">
<t-avatar-group> <t-avatar-group>
<t-avatar>D</t-avatar> <t-avatar>D</t-avatar>
<t-avatar>S</t-avatar> <t-avatar>S</t-avatar>
@ -145,12 +149,8 @@
<div class="form-submit-container"> <div class="form-submit-container">
<div class="form-submit-sub"> <div class="form-submit-sub">
<div class="form-submit-left"> <div class="form-submit-left">
<t-button theme="primary" class="form-submit-confirm" type="submit"> <t-button theme="primary" class="form-submit-confirm" type="submit"> 确认提交 </t-button>
{{ $t('pages.formBase.confirm') }} <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
</t-button>
<t-button type="reset" class="form-submit-cancel" theme="default" variant="base">
{{ $t('pages.formBase.cancel') }}
</t-button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,26 +1,26 @@
import { FormRule } from 'tdesign-vue-next'; import { FormRule } from 'tdesign-vue-next';
export const FORM_RULES: Record<string, FormRule[]> = { export const FORM_RULES: Record<string, FormRule[]> = {
name: [{ required: true, type: 'error' }], name: [{ required: true, message: '请选择合同名称', type: 'error' }],
type: [{ required: true, type: 'error' }], type: [{ required: true, message: '请选择发票类型', type: 'error' }],
title: [{ required: true, type: 'error' }], title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
taxNum: [{ required: true, type: 'error' }], taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
consignee: [{ required: true, type: 'error' }], consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
mobileNum: [{ required: true, type: 'error' }], mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
deliveryAddress: [{ required: true, type: 'error' }], deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
fullAddress: [{ required: true, type: 'error' }], fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
}; };
export const NAME_OPTIONS = [ export const NAME_OPTIONS = [
{ label: 'A', value: '1' }, { label: '合同A', value: '1' },
{ label: 'B', value: '2' }, { label: '合同B', value: '2' },
{ label: 'C', value: '3' }, { label: '合同C', value: '3' },
]; ];
export const TYPE_OPTIONS = [ export const TYPE_OPTIONS = [
{ label: 'Type A', value: '1' }, { label: '类型A', value: '1' },
{ label: 'Type B', value: '2' }, { label: '类型B', value: '2' },
{ label: 'Type C', value: '3' }, { label: '类型C', value: '3' },
]; ];
export const ADDRESS_OPTIONS = [ export const ADDRESS_OPTIONS = [

View File

@ -4,22 +4,22 @@
<!-- 简单步骤条 --> <!-- 简单步骤条 -->
<t-card :bordered="false"> <t-card :bordered="false">
<t-steps class="step-container" :current="1" status="process"> <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="提交申请" content="已于12月21日提交" />
<t-step-item :title="$t('pages.formStep.step2.title')" :content="$t('pages.formStep.step2.subtitle')" /> <t-step-item title="电子信息" content="预计1-3个工作日" />
<t-step-item :title="$t('pages.formStep.step3.title')" :content="$t('pages.formStep.step3.subtitle')" /> <t-step-item title="发票已邮寄" content="电子发票开出后联系" />
<t-step-item :title="$t('pages.formStep.step4.title')" :content="$t('pages.formStep.step4.subtitle')" /> <t-step-item title="完成申请" content="如有疑问联系客服" />
</t-steps> </t-steps>
</t-card> </t-card>
<!-- 分步表单1 --> <!-- 分步表单1 -->
<div v-show="activeForm === 0" class="rule-tips"> <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> <template #message>
<p> <p>
{{ $t('pages.formStep.step1.rule1') }} 1申请开票后电子发票在13个工作日内开具增值税专用发票纸质如资质审核通过将在电子发票开具后10个工作日内为您寄出
</p> </p>
<p>{{ $t('pages.formStep.step1.rule2') }}</p> <p>2开票金额为您实际支付金额</p>
<p>{{ $t('pages.formStep.step1.rule3') }}</p> <p>3如有疑问请直接联系13300001111</p>
</template> </template>
</t-alert> </t-alert>
</div> </div>
@ -31,23 +31,23 @@
label-align="right" label-align="right"
@submit="(result: SubmitContext) => onSubmit(result, 1)" @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-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"> <t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </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-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"> <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </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-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-item>
</t-form> </t-form>
@ -61,58 +61,30 @@
@reset="onReset(0)" @reset="onReset(0)"
@submit="(result: SubmitContext) => onSubmit(result, 2)" @submit="(result: SubmitContext) => onSubmit(result, 2)"
> >
<t-form-item :label="$t('pages.formStep.step2.invoiceTitle')" name="title"> <t-form-item label="发票抬头" name="title">
<t-input <t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
v-model="formData2.title"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.invoiceTitlePlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.taxNum')" name="taxNum"> <t-form-item label="纳税人识别号" name="taxNum">
<t-input <t-input v-model="formData2.taxNum" :style="{ width: '480px' }" placeholder="请输入纳税人识别号" />
v-model="formData2.taxNum"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.taxNumPlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.address')" name="address"> <t-form-item label="单位地址" name="address">
<t-input <t-input v-model="formData2.address" :style="{ width: '480px' }" placeholder="请输入单位地址" />
v-model="formData2.address"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.addressPlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.bank')" name="bank"> <t-form-item label="开户行" name="bank">
<t-input <t-input v-model="formData2.bank" :style="{ width: '480px' }" placeholder="请输入开户行" />
v-model="formData2.bank"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.bankPlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.bankAccount')" name="bankAccount"> <t-form-item label="银行账号" name="bankAccount">
<t-input <t-input v-model="formData2.bankAccount" :style="{ width: '480px' }" placeholder="请输入银行账号" />
v-model="formData2.bankAccount"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.bankAccountPlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.email')" name="email"> <t-form-item label="通知邮箱" name="email">
<t-input <t-input v-model="formData2.email" :style="{ width: '480px' }" placeholder="请输入通知邮箱" />
v-model="formData2.email"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.emailPlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.tel')" name="tel"> <t-form-item label="通知手机" name="tel">
<t-input <t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
v-model="formData2.tel"
:style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.telPlaceholder')"
/>
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button> <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button> <t-button theme="primary" type="submit"> 下一步 </t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
@ -126,41 +98,43 @@
@reset="onReset(1)" @reset="onReset(1)"
@submit="(result: SubmitContext) => onSubmit(result, 6)" @submit="(result: SubmitContext) => onSubmit(result, 6)"
> >
<t-form-item :label="$t('pages.formStep.step3.consignee')" name="consignee"> <t-form-item label="收货人" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" /> <t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step3.mobileNum')" name="mobileNum"> <t-form-item label="手机号码" name="mobileNum">
<t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" /> <t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" placeholder="请输入手机号码" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step3.deliveryAddress')" name="deliveryAddress"> <t-form-item label="收货地址" name="deliveryAddress">
<t-select v-model="formData3.deliveryAddress" :style="{ width: '480px' }" class="demo-select-base" clearable> <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"> <t-option v-for="(item, index) in ADDRESS_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step3.fullAddress')" name="fullAddress"> <t-form-item label="详细地址" name="fullAddress">
<t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" /> <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button> <t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button> <t-button theme="primary" type="submit"> 下一步 </t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
<!-- 分步表单4 --> <!-- 分步表单4 -->
<div v-show="activeForm === 6" class="step-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" /> <t-icon name="check-circle-filled" style="color: green" size="52px" />
<p class="text">{{ $t('pages.formStep.step4.finishTitle') }}</p> <p class="text">完成开票申请</p>
<p class="tips">{{ $t('pages.formStep.step4.finishTips') }}</p> <p class="tips">预计13个工作日会将电子发票发至邮箱发票邮寄请耐心等待</p>
<div class="button-group"> <div class="button-group">
<t-button theme="primary" @click="onReset(0)"> {{ $t('pages.formStep.step4.reapply') }} </t-button> <t-button theme="primary" @click="onReset(0)"> 再次申请 </t-button>
<t-button variant="base" theme="default" @click="complete"> <t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
{{ $t('pages.formStep.step4.check') }}
</t-button>
</div> </div>
</t-space>
</div> </div>
</div> </div>
</div> </div>