mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-11-10 10:48:25 +08:00
fix(form/base): fix form base validate (#48)
* fix(form/base): fix form base validate * chore(form/base): optimize form/base dom * chore(form/base): remove console
This commit is contained in:
PY
GitHub
parent
8bea964e9f
commit
9ad352d9ac
|
|
@ -21,7 +21,7 @@
|
|||
"nprogress": "^0.2.0",
|
||||
"qrcode.vue": "^3.2.2",
|
||||
"tdesign-icons-vue-next": "^0.0.6",
|
||||
"tdesign-vue-next": "0.6.4",
|
||||
"tdesign-vue-next": "0.7.0-alpha.0",
|
||||
"tvision-color": "^1.3.1",
|
||||
"vue": "^3.1.5",
|
||||
"vue-color-kit": "^1.0.5",
|
||||
|
|
|
|||
|
|
@ -1,167 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<t-form
|
||||
ref="form"
|
||||
class="base-form"
|
||||
:data="formData"
|
||||
:rules="FORM_RULES"
|
||||
label-align="top"
|
||||
:label-width="100"
|
||||
@reset="onReset"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<div class="form-basic-container">
|
||||
<div class="form-basic-item">
|
||||
<div class="form-basic-container-title">合同信息</div>
|
||||
<!-- 表单内容 -->
|
||||
<t-form
|
||||
ref="form"
|
||||
class="base-form"
|
||||
:data="formData"
|
||||
:rules="FORM_RULES"
|
||||
label-align="top"
|
||||
:label-width="100"
|
||||
@reset="onReset"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<!-- 合同名称,合同类型 -->
|
||||
<t-row class="row-gap" :gutter="[16, 24]">
|
||||
<t-col :span="6">
|
||||
<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="合同类型" 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>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
|
||||
<!-- 合同收付类型 -->
|
||||
<t-col :span="8">
|
||||
<t-form-item label="合同收付类型" name="payment">
|
||||
<t-radio-group v-model="formData.payment">
|
||||
<t-radio value="1"> 收款 </t-radio>
|
||||
<t-radio value="2"> 付款 </t-radio>
|
||||
</t-radio-group>
|
||||
<span class="space-item" />
|
||||
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<!-- 合同名称,合同类型 -->
|
||||
<t-row class="row-gap" :gutter="[16, 24]">
|
||||
<t-col :span="6">
|
||||
<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="合同类型" 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>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
|
||||
<t-col :span="6">
|
||||
<t-form-item label="甲方" name="partyA">
|
||||
<t-select
|
||||
v-model="formData.partyA"
|
||||
:style="{ width: '322px' }"
|
||||
class="demo-select-base"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
>
|
||||
<t-option
|
||||
v-for="(item, index) in PARTY_A_OPTIONS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="乙方" name="partyB">
|
||||
<t-select
|
||||
v-model="formData.partyB"
|
||||
:style="{ width: '322px' }"
|
||||
placeholder="请选择类型"
|
||||
class="demo-select-base"
|
||||
clearable
|
||||
>
|
||||
<t-option
|
||||
v-for="(item, index) in PARTY_B_OPTIONS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同签订日期" name="signDate">
|
||||
<t-date-picker
|
||||
v-model="formData.signDate"
|
||||
:style="{ width: '322px' }"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
separator="/"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同生效日期" name="startDate">
|
||||
<t-date-picker
|
||||
v-model="formData.startDate"
|
||||
:style="{ width: '322px' }"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
separator="/"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同结束日期" name="endDate">
|
||||
<t-date-picker
|
||||
v-model="formData.endDate"
|
||||
:style="{ width: '322px' }"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
separator="/"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<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="请上传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-button>
|
||||
</t-upload>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
</t-row>
|
||||
</t-form>
|
||||
<!-- 合同收付类型 -->
|
||||
<t-col :span="8">
|
||||
<t-form-item label="合同收付类型" name="payment">
|
||||
<t-radio-group v-model="formData.payment">
|
||||
<t-radio value="1"> 收款 </t-radio>
|
||||
<t-radio value="2"> 付款 </t-radio>
|
||||
</t-radio-group>
|
||||
<span class="space-item" />
|
||||
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
|
||||
<t-col :span="6">
|
||||
<t-form-item label="甲方" name="partyA">
|
||||
<t-select
|
||||
v-model="formData.partyA"
|
||||
:style="{ width: '322px' }"
|
||||
class="demo-select-base"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
>
|
||||
<t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="乙方" name="partyB">
|
||||
<t-select
|
||||
v-model="formData.partyB"
|
||||
:style="{ width: '322px' }"
|
||||
placeholder="请选择类型"
|
||||
class="demo-select-base"
|
||||
clearable
|
||||
>
|
||||
<t-option v-for="(item, index) in PARTY_B_OPTIONS" :key="index" :value="item.value" :label="item.label">
|
||||
{{ item.label }}
|
||||
</t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同签订日期" name="signDate">
|
||||
<t-date-picker
|
||||
v-model="formData.signDate"
|
||||
:style="{ width: '322px' }"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
separator="/"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同生效日期" name="startDate">
|
||||
<t-date-picker
|
||||
v-model="formData.startDate"
|
||||
:style="{ width: '322px' }"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
separator="/"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同结束日期" name="endDate">
|
||||
<t-date-picker
|
||||
v-model="formData.endDate"
|
||||
:style="{ width: '322px' }"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
separator="/"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<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="请上传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-button>
|
||||
</t-upload>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
</t-row>
|
||||
|
||||
<div class="form-basic-container-title form-title-gap">其它信息</div>
|
||||
<t-form
|
||||
ref="form"
|
||||
class="base-form"
|
||||
:data="formData"
|
||||
:rules="FORM_RULES"
|
||||
label-align="top"
|
||||
:label-width="100"
|
||||
@reset="onReset"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<t-form-item label="备注" name="comment">
|
||||
<t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
|
||||
</t-form-item>
|
||||
<t-form-item label="公证人">
|
||||
<t-avatar-group>
|
||||
<t-avatar>D</t-avatar>
|
||||
<t-avatar>S</t-avatar>
|
||||
<t-avatar>+</t-avatar>
|
||||
</t-avatar-group>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
|
||||
<t-form-item label="备注" name="comment">
|
||||
<t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
|
||||
</t-form-item>
|
||||
<t-form-item label="公证人">
|
||||
<t-avatar-group>
|
||||
<t-avatar>D</t-avatar>
|
||||
<t-avatar>S</t-avatar>
|
||||
<t-avatar>+</t-avatar>
|
||||
</t-avatar-group>
|
||||
</t-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -173,7 +152,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t-form>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
|
@ -184,7 +163,6 @@ export default defineComponent({
|
|||
name: 'FormBase',
|
||||
setup() {
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
|
||||
return {
|
||||
TYPE_OPTIONS,
|
||||
PARTY_A_OPTIONS,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user