mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 05:03:31 +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",
|
"nprogress": "^0.2.0",
|
||||||
"qrcode.vue": "^3.2.2",
|
"qrcode.vue": "^3.2.2",
|
||||||
"tdesign-icons-vue-next": "^0.0.6",
|
"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",
|
"tvision-color": "^1.3.1",
|
||||||
"vue": "^3.1.5",
|
"vue": "^3.1.5",
|
||||||
"vue-color-kit": "^1.0.5",
|
"vue-color-kit": "^1.0.5",
|
||||||
|
|
|
||||||
|
|
@ -1,167 +1,146 @@
|
||||||
<template>
|
<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-container">
|
||||||
<div class="form-basic-item">
|
<div class="form-basic-item">
|
||||||
<div class="form-basic-container-title">合同信息</div>
|
<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-row class="row-gap" :gutter="[16, 24]">
|
||||||
<t-form-item label="合同收付类型" name="payment">
|
<t-col :span="6">
|
||||||
<t-radio-group v-model="formData.payment">
|
<t-form-item label="合同名称" name="name">
|
||||||
<t-radio value="1"> 收款 </t-radio>
|
<t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
|
||||||
<t-radio value="2"> 付款 </t-radio>
|
</t-form-item>
|
||||||
</t-radio-group>
|
</t-col>
|
||||||
<span class="space-item" />
|
<t-col :span="6">
|
||||||
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
|
<t-form-item label="合同类型" name="type">
|
||||||
</t-form-item>
|
<t-select
|
||||||
</t-col>
|
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-col :span="8">
|
||||||
<t-select
|
<t-form-item label="合同收付类型" name="payment">
|
||||||
v-model="formData.partyA"
|
<t-radio-group v-model="formData.payment">
|
||||||
:style="{ width: '322px' }"
|
<t-radio value="1"> 收款 </t-radio>
|
||||||
class="demo-select-base"
|
<t-radio value="2"> 付款 </t-radio>
|
||||||
placeholder="请选择类型"
|
</t-radio-group>
|
||||||
clearable
|
<span class="space-item" />
|
||||||
>
|
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
|
||||||
<t-option
|
</t-form-item>
|
||||||
v-for="(item, index) in PARTY_A_OPTIONS"
|
</t-col>
|
||||||
:key="index"
|
|
||||||
:value="item.value"
|
<t-col :span="6">
|
||||||
:label="item.label"
|
<t-form-item label="甲方" name="partyA">
|
||||||
>
|
<t-select
|
||||||
{{ item.label }}
|
v-model="formData.partyA"
|
||||||
</t-option>
|
:style="{ width: '322px' }"
|
||||||
</t-select>
|
class="demo-select-base"
|
||||||
</t-form-item>
|
placeholder="请选择类型"
|
||||||
</t-col>
|
clearable
|
||||||
<t-col :span="6">
|
>
|
||||||
<t-form-item label="乙方" name="partyB">
|
<t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
|
||||||
<t-select
|
{{ item.label }}
|
||||||
v-model="formData.partyB"
|
</t-option>
|
||||||
:style="{ width: '322px' }"
|
</t-select>
|
||||||
placeholder="请选择类型"
|
</t-form-item>
|
||||||
class="demo-select-base"
|
</t-col>
|
||||||
clearable
|
<t-col :span="6">
|
||||||
>
|
<t-form-item label="乙方" name="partyB">
|
||||||
<t-option
|
<t-select
|
||||||
v-for="(item, index) in PARTY_B_OPTIONS"
|
v-model="formData.partyB"
|
||||||
:key="index"
|
:style="{ width: '322px' }"
|
||||||
:value="item.value"
|
placeholder="请选择类型"
|
||||||
:label="item.label"
|
class="demo-select-base"
|
||||||
>
|
clearable
|
||||||
{{ item.label }}
|
>
|
||||||
</t-option>
|
<t-option v-for="(item, index) in PARTY_B_OPTIONS" :key="index" :value="item.value" :label="item.label">
|
||||||
</t-select>
|
{{ item.label }}
|
||||||
</t-form-item>
|
</t-option>
|
||||||
</t-col>
|
</t-select>
|
||||||
<t-col :span="6">
|
</t-form-item>
|
||||||
<t-form-item label="合同签订日期" name="signDate">
|
</t-col>
|
||||||
<t-date-picker
|
<t-col :span="6">
|
||||||
v-model="formData.signDate"
|
<t-form-item label="合同签订日期" name="signDate">
|
||||||
:style="{ width: '322px' }"
|
<t-date-picker
|
||||||
theme="primary"
|
v-model="formData.signDate"
|
||||||
mode="date"
|
:style="{ width: '322px' }"
|
||||||
separator="/"
|
theme="primary"
|
||||||
/>
|
mode="date"
|
||||||
</t-form-item>
|
separator="/"
|
||||||
</t-col>
|
/>
|
||||||
<t-col :span="6">
|
</t-form-item>
|
||||||
<t-form-item label="合同生效日期" name="startDate">
|
</t-col>
|
||||||
<t-date-picker
|
<t-col :span="6">
|
||||||
v-model="formData.startDate"
|
<t-form-item label="合同生效日期" name="startDate">
|
||||||
:style="{ width: '322px' }"
|
<t-date-picker
|
||||||
theme="primary"
|
v-model="formData.startDate"
|
||||||
mode="date"
|
:style="{ width: '322px' }"
|
||||||
separator="/"
|
theme="primary"
|
||||||
/>
|
mode="date"
|
||||||
</t-form-item>
|
separator="/"
|
||||||
</t-col>
|
/>
|
||||||
<t-col :span="6">
|
</t-form-item>
|
||||||
<t-form-item label="合同结束日期" name="endDate">
|
</t-col>
|
||||||
<t-date-picker
|
<t-col :span="6">
|
||||||
v-model="formData.endDate"
|
<t-form-item label="合同结束日期" name="endDate">
|
||||||
:style="{ width: '322px' }"
|
<t-date-picker
|
||||||
theme="primary"
|
v-model="formData.endDate"
|
||||||
mode="date"
|
:style="{ width: '322px' }"
|
||||||
separator="/"
|
theme="primary"
|
||||||
/>
|
mode="date"
|
||||||
</t-form-item>
|
separator="/"
|
||||||
</t-col>
|
/>
|
||||||
<t-col :span="6">
|
</t-form-item>
|
||||||
<t-form-item label="" name="files">
|
</t-col>
|
||||||
<t-upload
|
<t-col :span="6">
|
||||||
v-model="formData.files"
|
<t-form-item label="" name="files">
|
||||||
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
|
<t-upload
|
||||||
tips="请上传pdf文件，大小在60M以内"
|
v-model="formData.files"
|
||||||
:size-limit="{ size: 60, unit: 'MB' }"
|
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
|
||||||
:format-response="formatResponse"
|
tips="请上传pdf文件，大小在60M以内"
|
||||||
:before-upload="beforeUpload"
|
:size-limit="{ size: 60, unit: 'MB' }"
|
||||||
@fail="handleFail"
|
:format-response="formatResponse"
|
||||||
>
|
:before-upload="beforeUpload"
|
||||||
<t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
|
@fail="handleFail"
|
||||||
</t-upload>
|
>
|
||||||
</t-form-item>
|
<t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
|
||||||
</t-col>
|
</t-upload>
|
||||||
</t-row>
|
</t-form-item>
|
||||||
</t-form>
|
</t-col>
|
||||||
|
</t-row>
|
||||||
|
|
||||||
<div class="form-basic-container-title form-title-gap">其它信息</div>
|
<div class="form-basic-container-title form-title-gap">其它信息</div>
|
||||||
<t-form
|
|
||||||
ref="form"
|
<t-form-item label="备注" name="comment">
|
||||||
class="base-form"
|
<t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
|
||||||
:data="formData"
|
</t-form-item>
|
||||||
:rules="FORM_RULES"
|
<t-form-item label="公证人">
|
||||||
label-align="top"
|
<t-avatar-group>
|
||||||
:label-width="100"
|
<t-avatar>D</t-avatar>
|
||||||
@reset="onReset"
|
<t-avatar>S</t-avatar>
|
||||||
@submit="onSubmit"
|
<t-avatar>+</t-avatar>
|
||||||
>
|
</t-avatar-group>
|
||||||
<t-form-item label="备注" name="comment">
|
</t-form-item>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -173,7 +152,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</t-form>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { defineComponent, ref } from 'vue';
|
||||||
|
|
@ -184,7 +163,6 @@ export default defineComponent({
|
||||||
name: 'FormBase',
|
name: 'FormBase',
|
||||||
setup() {
|
setup() {
|
||||||
const formData = ref({ ...INITIAL_DATA });
|
const formData = ref({ ...INITIAL_DATA });
|
||||||
|
|
||||||
return {
|
return {
|
||||||
TYPE_OPTIONS,
|
TYPE_OPTIONS,
|
||||||
PARTY_A_OPTIONS,
|
PARTY_A_OPTIONS,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user