From a397ab328ba9cfb048c74d7d57a33ae782ed7d02 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Wed, 17 Aug 2022 15:21:55 +0800
Subject: [PATCH] feat: upgrade tdesign-vue to 0.46 (#161)

---
 package.json                    |   6 +-
 src/pages/form/base/index.vue   | 291 ++++++++++++++++----------------
 src/pages/form/step/index.vue   |   4 +-
 src/pages/list/filter/index.vue |   4 +-
 src/pages/list/tree/index.vue   |   4 +-
 5 files changed, 155 insertions(+), 154 deletions(-)

diff --git a/package.json b/package.json
index 5aa6d92..75dfc32 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,10 @@
     "nprogress": "^0.2.0",
     "qrcode.vue": "^1.7.0",
     "tdesign-icons-vue": "^0.1.0",
-    "tdesign-vue": "^0.45.0",
+    "tdesign-vue": "^0.46.0",
     "tvision-color": "~1.4.0",
     "typescript": "^4.2.4",
-    "vue": "~2.6.11",
+    "vue": "~2.6.14",
     "vue-clipboard2": "^0.3.1",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
@@ -60,7 +60,7 @@
     "vite-plugin-theme": "^0.8.1",
     "vite-plugin-vue2": "^2.0.1",
     "vite-plugin-vue2-svg": "~0.3.0",
-    "vue-template-compiler": "2.6.14"
+    "vue-template-compiler": "~2.6.14"
   },
   "config": {
     "commitizen": {
diff --git a/src/pages/form/base/index.vue b/src/pages/form/base/index.vue
index adc4af6..201b352 100644
--- a/src/pages/form/base/index.vue
+++ b/src/pages/form/base/index.vue
@@ -1,158 +1,159 @@
 <template>
-  <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-card>
+    <t-form
+      ref="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-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 typeOptions" :key="index" :value="item.value" :label="item.label">
-                  {{ item.label }}
-                </t-option>
-              </t-select>
-            </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 typeOptions" :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-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 partyAOptions" :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 partyBOptions" :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-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 partyAOptions" :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 partyBOptions" :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>
+          <div class="form-basic-container-title form-title-gap">其它信息</div>
 
-        <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-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>
-    </div>
 
-    <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-button>
-          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
+      <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-button>
+            <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
+          </div>
         </div>
       </div>
-    </div>
-  </t-form>
+    </t-form>
+  </t-card>
 </template>
 <script>
 import { prefix } from '@/config/global';
diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue
index d6791a1..56081b1 100644
--- a/src/pages/form/step/index.vue
+++ b/src/pages/form/step/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <t-card>
     <div class="form-step-container">
       <!-- 简单步骤条 -->
       <t-card :bordered="false">
@@ -141,7 +141,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </t-card>
 </template>
 <script>
 import { CheckCircleFilledIcon } from 'tdesign-icons-vue';
diff --git a/src/pages/list/filter/index.vue b/src/pages/list/filter/index.vue
index bb25f66..83f9ed6 100644
--- a/src/pages/list/filter/index.vue
+++ b/src/pages/list/filter/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <t-card>
     <common-table />
-  </div>
+  </t-card>
 </template>
 <script lang="ts">
 import CommonTable from '../components/CommonTable.vue';
diff --git a/src/pages/list/tree/index.vue b/src/pages/list/tree/index.vue
index ccdaf47..91c19a0 100644
--- a/src/pages/list/tree/index.vue
+++ b/src/pages/list/tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <t-card>
     <div class="table-tree-container">
       <div class="list-tree-wrapper">
         <div class="list-tree-operator">
@@ -13,7 +13,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </t-card>
 </template>
 <script>
 import { SearchIcon } from 'tdesign-icons-vue';