mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 04:16:30 +08:00
refactor(form): 移除i18n相关
This commit is contained in:
parent
c5535de8f9
commit
ad8f477483
|
@ -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' },
|
||||
];
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 = [
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user