From 9ad352d9ac5a418fb76a6edbfe8ae7c2a9831cfb Mon Sep 17 00:00:00 2001
From: PY <pengyue970715@gmail.com>
Date: Tue, 25 Jan 2022 14:44:12 +0800
Subject: [PATCH] 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
---
 package.json                  |   2 +-
 src/pages/form/base/index.vue | 292 ++++++++++++++++------------------
 2 files changed, 136 insertions(+), 158 deletions(-)

diff --git a/package.json b/package.json
index 3e78559..81e9ceb 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/pages/form/base/index.vue b/src/pages/form/base/index.vue
index e46e998..596e7ef 100644
--- a/src/pages/form/base/index.vue
+++ b/src/pages/form/base/index.vue
@@ -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,