From 3f742a4dc1fbf794052d4c7969800d18102e6b1a Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Wed, 15 Jul 2020 12:38:22 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20remove=20the=20deprecated=20API=20of?=
 =?UTF-8?q?=20Ant=20Design=20Vue;=20:star2:=20=E7=A7=BB=E9=99=A4=20Ant=20D?=
 =?UTF-8?q?esign=20Vue=20=E5=BA=9F=E5=BC=83=E7=9A=84=20API=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/detail/BasicDetail.vue          |  1 +
 src/pages/form/advance/RepositoryForm.vue | 74 +++++++++++------------
 src/pages/form/advance/TaskForm.vue       | 69 ++++++++++-----------
 src/pages/list/search/SearchForm.vue      | 23 +++----
 src/pages/login/Login.vue                 | 30 +++++----
 5 files changed, 103 insertions(+), 94 deletions(-)

diff --git a/src/pages/detail/BasicDetail.vue b/src/pages/detail/BasicDetail.vue
index 567b907..67ca385 100644
--- a/src/pages/detail/BasicDetail.vue
+++ b/src/pages/detail/BasicDetail.vue
@@ -18,6 +18,7 @@
         <a-divider style="margin-bottom: 32px"/>
         <div class="title">退货商品</div>
         <a-table
+          row-key="id"
           style="margin-bottom: 24px"
           :columns="goodsColumns"
           :dataSource="goodsData"
diff --git a/src/pages/form/advance/RepositoryForm.vue b/src/pages/form/advance/RepositoryForm.vue
index e84bc3a..dc357c9 100644
--- a/src/pages/form/advance/RepositoryForm.vue
+++ b/src/pages/form/advance/RepositoryForm.vue
@@ -1,31 +1,29 @@
 <template>
-  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+  <a-form @submit="handleSubmit" :form="form" class="form">
     <a-row class="form-row">
       <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          :label="$t('name')"
-          fieldDecoratorId="repository.name"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}"
-        >
-          <a-input :placeholder="$ta('input|name')" />
+        <a-form-item :label="$t('name')">
+          <a-input
+            :placeholder="$ta('input|name')"
+            v-decorator="['repository.name', {rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}]"
+          />
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          :label="$t('domain')"
-          fieldDecoratorId="repository.domain"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|domain'), whitespace: true}, {validator: validate}]}"
-        >
-          <a-input addonBefore="http://" addonAfter=".github.io" :placeholder="$ta('input|domain')"/>
+        <a-form-item :label="$t('domain')">
+          <a-input
+            addonBefore="http://" addonAfter=".github.io"
+            :placeholder="$ta('input|domain')"
+            v-decorator="['repository.domain', {rules: [{ required: true, message: $ta('input|domain'), whitespace: true}, {validator: validate}]}]"
+          />
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          :label="$t('manager')"
-          fieldDecoratorId="repository.manager"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|manager')}]}"
-        >
-          <a-select :placeholder="$ta('select|manager')">
+        <a-form-item :label="$t('manager')">
+          <a-select
+            :placeholder="$ta('select|manager')"
+            v-decorator="['repository.manager', {rules: [{ required: true, message: $ta('select|manager')}]}]"
+          >
             <a-select-option value="王同学">王同学</a-select-option>
             <a-select-option value="李同学">李同学</a-select-option>
             <a-select-option value="黄同学">黄同学</a-select-option>
@@ -35,33 +33,30 @@
     </a-row>
     <a-row class="form-row">
       <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          :label="$t('approval')"
-          fieldDecoratorId="repository.auditor"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|approval')}]}"
-        >
-          <a-select :placeholder="$ta('select|approval')">
+        <a-form-item :label="$t('approval')">
+          <a-select
+            :placeholder="$ta('select|approval')"
+            v-decorator="['repository.auditor', {rules: [{ required: true, message: $ta('select|approval')}]}]"
+          >
             <a-select-option value="王晓丽">王晓丽</a-select-option>
             <a-select-option value="李军">李军</a-select-option>
           </a-select>
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          :label="$t('date')"
-          fieldDecoratorId="repository.effectiveDate"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|date')}]}"
-        >
-          <a-range-picker style="width: 100%" />
+        <a-form-item :label="$t('date')">
+          <a-range-picker
+            style="width: 100%"
+            v-decorator="['repository.effectiveDate', {rules: [{ required: true, message: $ta('select|date')}]}]"
+          />
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          :label="$t('type')"
-          fieldDecoratorId="repository.type"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|type')}]}"
-        >
-          <a-select :placeholder="$ta('select|type')">
+        <a-form-item :label="$t('type')">
+          <a-select
+            :placeholder="$ta('select|type')"
+            v-decorator="['repository.type', {rules: [{ required: true, message: $ta('select|type')}]}]"
+          >
             <a-select-option value="公开">公开</a-select-option>
             <a-select-option value="私密">私密</a-select-option>
           </a-select>
@@ -79,6 +74,11 @@ export default {
   name: 'RepositoryForm',
   props: ['showSubmit'],
   i18n: require('./i18n-repository'),
+  data() {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
   methods: {
     handleSubmit (e) {
       e.preventDefault()
diff --git a/src/pages/form/advance/TaskForm.vue b/src/pages/form/advance/TaskForm.vue
index 7772211..3200c73 100644
--- a/src/pages/form/advance/TaskForm.vue
+++ b/src/pages/form/advance/TaskForm.vue
@@ -1,31 +1,30 @@
 <template>
-  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+  <a-form @submit="handleSubmit" :form="form" class="form">
     <a-row class="form-row">
       <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          :label="$t('name')"
-          fieldDecoratorId="task.name"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}"
-        >
-          <a-input :placeholder="$ta('input|name')" />
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['task.name', {rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}]"
+            :placeholder="$ta('input|name')"
+          />
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          :label="$t('describe')"
-          fieldDecoratorId="task.description"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|describe'), whitespace: true}]}"
-        >
-          <a-input :placeholder="$ta('input|describe')"/>
+        <a-form-item :label="$t('describe')">
+          <a-input
+            v-decorator="['task.description', {rules: [{ required: true, message: $ta('input|describe'), whitespace: true}]}]"
+            :placeholder="$ta('input|describe')"
+          />
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
         <a-form-item
           :label="$t('executor')"
-          fieldDecoratorId="task.executor"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|executor')}]}"
         >
-          <a-select :placeholder="$ta('select|executor')">
+          <a-select
+            :placeholder="$ta('select|executor')"
+            v-decorator="['task.executor', {rules: [{ required: true, message: $ta('select|executor')}]}]"
+          >
             <a-select-option value="黄丽丽">黄丽丽</a-select-option>
             <a-select-option value="李大刀">李大刀</a-select-option>
           </a-select>
@@ -34,33 +33,30 @@
     </a-row>
     <a-row class="form-row">
       <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          :label="$t('duty')"
-          fieldDecoratorId="task.manager"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|duty')}]}"
-        >
-          <a-select :placeholder="$ta('select|duty')">
+        <a-form-item :label="$t('duty')">
+          <a-select
+            :placeholder="$ta('select|duty')"
+            v-decorator="['task.manager', {rules: [{ required: true, message: $ta('select|duty')}]}]"
+          >
             <a-select-option value="王伟">王伟</a-select-option>
             <a-select-option value="李红军">李红军</a-select-option>
           </a-select>
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          :label="$t('time')"
-          fieldDecoratorId="task.time"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|time')}]}"
-        >
-          <a-time-picker style="width: 100%" />
+        <a-form-item :label="$t('time')">
+          <a-time-picker
+            v-decorator="['task.time', {rules: [{ required: true, message: $ta('select|time')}]}]"
+            style="width: 100%"
+          />
         </a-form-item>
       </a-col>
       <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          :label="$t('type')"
-          fieldDecoratorId="task.type"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|type')}]}"
-        >
-          <a-select :placeholder="$ta('select|type')">
+        <a-form-item :label="$t('type')">
+          <a-select
+            :placeholder="$ta('select|type')"
+            v-decorator="['task.type', {rules: [{ required: true, message: $ta('select|type')}]}]"
+          >
             <a-select-option value="定时执行">定时执行</a-select-option>
             <a-select-option value="周期执行">周期执行</a-select-option>
           </a-select>
@@ -78,6 +74,11 @@ export default {
   name: 'TaskForm',
   props: ['showSubmit'],
   i18n: require('./i18n-task'),
+  data() {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
   methods: {
     handleSubmit (e) {
       e.preventDefault()
diff --git a/src/pages/list/search/SearchForm.vue b/src/pages/list/search/SearchForm.vue
index 4db371a..5cd06d1 100644
--- a/src/pages/list/search/SearchForm.vue
+++ b/src/pages/list/search/SearchForm.vue
@@ -1,6 +1,6 @@
 <template>
   <a-card :bordered="false" class="search-form">
-    <a-form :autoFormCreate="(form) => {this.form = form;this.form.getFieldDecorator('owner',{initialValue: ['1', '2']})}">
+    <a-form :form="form">
       <form-row label="所属类目">
         <a-form-item>
           <tag-select>
@@ -24,11 +24,11 @@
         </a-form-item>
       </form-row>
       <form-row label="owner" style="padding-bottom: 11px">
-        <a-form-item
-          fieldDecoratorId="owner"
-          initialValue="['1', '2']"
-        >
-          <a-select mode="multiple" style="max-width: 286px">
+        <a-form-item>
+          <a-select
+            mode="multiple" style="max-width: 286px"
+            v-decorator="['owner', {initialValue: ['1', '2']}]"
+          >
             <a-select-option value="3">我自己</a-select-option>
             <a-select-option value="1">吴家豪</a-select-option>
             <a-select-option value="2">周星星</a-select-option>
@@ -40,11 +40,7 @@
       <form-row label="其他选项">
         <a-row>
           <a-col :span="8">
-            <a-form-item
-              label="活跃用户"
-              :labelCol="{span: 6}"
-              :wrapperCol="{span: 12}"
-            >
+            <a-form-item label="活跃用户" :labelCol="{span: 6}" :wrapperCol="{span: 12}">
               <a-select placeholder="不限">
                 <a-select-option value="1">周星星</a-select-option>
               </a-select>
@@ -76,6 +72,11 @@ const TagSelectOption = TagSelect.Option
 export default {
   name: 'SearchForm',
   components: {FormRow, TagSelectOption, TagSelect},
+  data() {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
   methods: {
     lookMyself () {
       this.form.setFieldsValue({
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index fff47c0..0cdba0d 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -8,23 +8,28 @@
       <div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
     </div>
     <div class="login">
-      <a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
+      <a-form @submit="onSubmit" :form="form">
         <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
           <a-tab-pane tab="账户密码登录" key="1">
             <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
-            <a-form-item
-              fieldDecoratorId="name"
-              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
-            >
-              <a-input size="large" placeholder="admin" >
+            <a-form-item>
+              <a-input
+                autocomplete="autocomplete"
+                size="large"
+                placeholder="admin"
+                v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
+              >
                 <a-icon slot="prefix" type="user" />
               </a-input>
             </a-form-item>
-            <a-form-item
-              fieldDecoratorId="password"
-              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
-            >
-              <a-input size="large" placeholder="888888" type="password">
+            <a-form-item>
+              <a-input
+                size="large"
+                placeholder="888888"
+                autocomplete="autocomplete"
+                type="password"
+                v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
+              >
                 <a-icon slot="prefix" type="lock" />
               </a-input>
             </a-form-item>
@@ -77,7 +82,8 @@ export default {
   data () {
     return {
       logging: false,
-      error: ''
+      error: '',
+      form: this.$form.createForm(this)
     }
   },
   computed: {