Skip to content

Commit 9ad352d

Browse files
PengYYYYYPengYYYYY
authored
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
1 parent 8bea964 commit 9ad352d

2 files changed

Lines changed: 136 additions & 158 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"nprogress": "^0.2.0",
2222
"qrcode.vue": "^3.2.2",
2323
"tdesign-icons-vue-next": "^0.0.6",
24-
"tdesign-vue-next": "0.6.4",
24+
"tdesign-vue-next": "0.7.0-alpha.0",
2525
"tvision-color": "^1.3.1",
2626
"vue": "^3.1.5",
2727
"vue-color-kit": "^1.0.5",

‎src/pages/form/base/index.vue‎

Lines changed: 135 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,146 @@
11
<template>
2-
<div>
2+
<t-form
3+
ref="form"
4+
class="base-form"
5+
:data="formData"
6+
:rules="FORM_RULES"
7+
label-align="top"
8+
:label-width="100"
9+
@reset="onReset"
10+
@submit="onSubmit"
11+
>
312
<div class="form-basic-container">
413
<div class="form-basic-item">
514
<div class="form-basic-container-title">合同信息</div>
615
<!-- 表单内容 -->
7-
<t-form
8-
ref="form"
9-
class="base-form"
10-
:data="formData"
11-
:rules="FORM_RULES"
12-
label-align="top"
13-
:label-width="100"
14-
@reset="onReset"
15-
@submit="onSubmit"
16-
>
17-
<!-- 合同名称,合同类型 -->
18-
<t-row class="row-gap" :gutter="[16, 24]">
19-
<t-col :span="6">
20-
<t-form-item label="合同名称" name="name">
21-
<t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
22-
</t-form-item>
23-
</t-col>
24-
<t-col :span="6">
25-
<t-form-item label="合同类型" name="type">
26-
<t-select
27-
v-model="formData.type"
28-
:style="{ width: '322px' }"
29-
placeholder="请选择类型"
30-
class="demo-select-base"
31-
clearable
32-
>
33-
<t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
34-
{{ item.label }}
35-
</t-option>
36-
</t-select>
37-
</t-form-item>
38-
</t-col>
3916

40-
<!-- 合同收付类型 -->
41-
<t-col :span="8">
42-
<t-form-item label="合同收付类型" name="payment">
43-
<t-radio-group v-model="formData.payment">
44-
<t-radio value="1"> 收款 </t-radio>
45-
<t-radio value="2"> 付款 </t-radio>
46-
</t-radio-group>
47-
<span class="space-item" />
48-
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
49-
</t-form-item>
50-
</t-col>
17+
<!-- 合同名称,合同类型 -->
18+
<t-row class="row-gap" :gutter="[16, 24]">
19+
<t-col :span="6">
20+
<t-form-item label="合同名称" name="name">
21+
<t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
22+
</t-form-item>
23+
</t-col>
24+
<t-col :span="6">
25+
<t-form-item label="合同类型" name="type">
26+
<t-select
27+
v-model="formData.type"
28+
:style="{ width: '322px' }"
29+
placeholder="请选择类型"
30+
class="demo-select-base"
31+
clearable
32+
>
33+
<t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
34+
{{ item.label }}
35+
</t-option>
36+
</t-select>
37+
</t-form-item>
38+
</t-col>
5139

52-
<t-col :span="6">
53-
<t-form-item label="甲方" name="partyA">
54-
<t-select
55-
v-model="formData.partyA"
56-
:style="{ width: '322px' }"
57-
class="demo-select-base"
58-
placeholder="请选择类型"
59-
clearable
60-
>
61-
<t-option
62-
v-for="(item, index) in PARTY_A_OPTIONS"
63-
:key="index"
64-
:value="item.value"
65-
:label="item.label"
66-
>
67-
{{ item.label }}
68-
</t-option>
69-
</t-select>
70-
</t-form-item>
71-
</t-col>
72-
<t-col :span="6">
73-
<t-form-item label="乙方" name="partyB">
74-
<t-select
75-
v-model="formData.partyB"
76-
:style="{ width: '322px' }"
77-
placeholder="请选择类型"
78-
class="demo-select-base"
79-
clearable
80-
>
81-
<t-option
82-
v-for="(item, index) in PARTY_B_OPTIONS"
83-
:key="index"
84-
:value="item.value"
85-
:label="item.label"
86-
>
87-
{{ item.label }}
88-
</t-option>
89-
</t-select>
90-
</t-form-item>
91-
</t-col>
92-
<t-col :span="6">
93-
<t-form-item label="合同签订日期" name="signDate">
94-
<t-date-picker
95-
v-model="formData.signDate"
96-
:style="{ width: '322px' }"
97-
theme="primary"
98-
mode="date"
99-
separator="/"
100-
/>
101-
</t-form-item>
102-
</t-col>
103-
<t-col :span="6">
104-
<t-form-item label="合同生效日期" name="startDate">
105-
<t-date-picker
106-
v-model="formData.startDate"
107-
:style="{ width: '322px' }"
108-
theme="primary"
109-
mode="date"
110-
separator="/"
111-
/>
112-
</t-form-item>
113-
</t-col>
114-
<t-col :span="6">
115-
<t-form-item label="合同结束日期" name="endDate">
116-
<t-date-picker
117-
v-model="formData.endDate"
118-
:style="{ width: '322px' }"
119-
theme="primary"
120-
mode="date"
121-
separator="/"
122-
/>
123-
</t-form-item>
124-
</t-col>
125-
<t-col :span="6">
126-
<t-form-item label="" name="files">
127-
<t-upload
128-
v-model="formData.files"
129-
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
130-
tips="请上传pdf文件，大小在60M以内"
131-
:size-limit="{ size: 60, unit: 'MB' }"
132-
:format-response="formatResponse"
133-
:before-upload="beforeUpload"
134-
@fail="handleFail"
135-
>
136-
<t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
137-
</t-upload>
138-
</t-form-item>
139-
</t-col>
140-
</t-row>
141-
</t-form>
40+
<!-- 合同收付类型 -->
41+
<t-col :span="8">
42+
<t-form-item label="合同收付类型" name="payment">
43+
<t-radio-group v-model="formData.payment">
44+
<t-radio value="1"> 收款 </t-radio>
45+
<t-radio value="2"> 付款 </t-radio>
46+
</t-radio-group>
47+
<span class="space-item" />
48+
<t-input placeholder="请输入金额" :style="{ width: '160px' }" />
49+
</t-form-item>
50+
</t-col>
51+
52+
<t-col :span="6">
53+
<t-form-item label="甲方" name="partyA">
54+
<t-select
55+
v-model="formData.partyA"
56+
:style="{ width: '322px' }"
57+
class="demo-select-base"
58+
placeholder="请选择类型"
59+
clearable
60+
>
61+
<t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
62+
{{ item.label }}
63+
</t-option>
64+
</t-select>
65+
</t-form-item>
66+
</t-col>
67+
<t-col :span="6">
68+
<t-form-item label="乙方" name="partyB">
69+
<t-select
70+
v-model="formData.partyB"
71+
:style="{ width: '322px' }"
72+
placeholder="请选择类型"
73+
class="demo-select-base"
74+
clearable
75+
>
76+
<t-option v-for="(item, index) in PARTY_B_OPTIONS" :key="index" :value="item.value" :label="item.label">
77+
{{ item.label }}
78+
</t-option>
79+
</t-select>
80+
</t-form-item>
81+
</t-col>
82+
<t-col :span="6">
83+
<t-form-item label="合同签订日期" name="signDate">
84+
<t-date-picker
85+
v-model="formData.signDate"
86+
:style="{ width: '322px' }"
87+
theme="primary"
88+
mode="date"
89+
separator="/"
90+
/>
91+
</t-form-item>
92+
</t-col>
93+
<t-col :span="6">
94+
<t-form-item label="合同生效日期" name="startDate">
95+
<t-date-picker
96+
v-model="formData.startDate"
97+
:style="{ width: '322px' }"
98+
theme="primary"
99+
mode="date"
100+
separator="/"
101+
/>
102+
</t-form-item>
103+
</t-col>
104+
<t-col :span="6">
105+
<t-form-item label="合同结束日期" name="endDate">
106+
<t-date-picker
107+
v-model="formData.endDate"
108+
:style="{ width: '322px' }"
109+
theme="primary"
110+
mode="date"
111+
separator="/"
112+
/>
113+
</t-form-item>
114+
</t-col>
115+
<t-col :span="6">
116+
<t-form-item label="" name="files">
117+
<t-upload
118+
v-model="formData.files"
119+
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
120+
tips="请上传pdf文件，大小在60M以内"
121+
:size-limit="{ size: 60, unit: 'MB' }"
122+
:format-response="formatResponse"
123+
:before-upload="beforeUpload"
124+
@fail="handleFail"
125+
>
126+
<t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
127+
</t-upload>
128+
</t-form-item>
129+
</t-col>
130+
</t-row>
142131

143132
<div class="form-basic-container-title form-title-gap">其它信息</div>
144-
<t-form
145-
ref="form"
146-
class="base-form"
147-
:data="formData"
148-
:rules="FORM_RULES"
149-
label-align="top"
150-
:label-width="100"
151-
@reset="onReset"
152-
@submit="onSubmit"
153-
>
154-
<t-form-item label="备注" name="comment">
155-
<t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
156-
</t-form-item>
157-
<t-form-item label="公证人">
158-
<t-avatar-group>
159-
<t-avatar>D</t-avatar>
160-
<t-avatar>S</t-avatar>
161-
<t-avatar>+</t-avatar>
162-
</t-avatar-group>
163-
</t-form-item>
164-
</t-form>
133+
134+
<t-form-item label="备注" name="comment">
135+
<t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
136+
</t-form-item>
137+
<t-form-item label="公证人">
138+
<t-avatar-group>
139+
<t-avatar>D</t-avatar>
140+
<t-avatar>S</t-avatar>
141+
<t-avatar>+</t-avatar>
142+
</t-avatar-group>
143+
</t-form-item>
165144
</div>
166145
</div>
167146

@@ -173,7 +152,7 @@
173152
</div>
174153
</div>
175154
</div>
176-
</div>
155+
</t-form>
177156
</template>
178157
<script lang="ts">
179158
import { defineComponent, ref } from 'vue';
@@ -184,7 +163,6 @@ export default defineComponent({
184163
name: 'FormBase',
185164
setup() {
186165
const formData = ref({ ...INITIAL_DATA });
187-
188166
return {
189167
TYPE_OPTIONS,
190168
PARTY_A_OPTIONS,

0 commit comments

Comments
 (0)