chore: remove the deprecated API of Ant Design Vue; 🌟

移除 Ant Design Vue 废弃的 API；

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"

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
+        <a-form-item :label="$t('name')">
-          :label="$t('name')"
+          <a-input
-          fieldDecoratorId="repository.name"
+            :placeholder="$ta('input|name')"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}"
+            v-decorator="['repository.name', {rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}]"
-        >
+          />
-          <a-input :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
+        <a-form-item :label="$t('domain')">
-          :label="$t('domain')"
+          <a-input
-          fieldDecoratorId="repository.domain"
+            addonBefore="http://" addonAfter=".github.io"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|domain'), whitespace: true}, {validator: validate}]}"
+            :placeholder="$ta('input|domain')"
-        >
+            v-decorator="['repository.domain', {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>
       </a-col>
       <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
+        <a-form-item :label="$t('manager')">
-          :label="$t('manager')"
+          <a-select
-          fieldDecoratorId="repository.manager"
+            :placeholder="$ta('select|manager')"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|manager')}]}"
+            v-decorator="['repository.manager', {rules: [{ required: true, message: $ta('select|manager')}]}]"
-        >
+          >
-          <a-select :placeholder="$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
+        <a-form-item :label="$t('approval')">
-          :label="$t('approval')"
+          <a-select
-          fieldDecoratorId="repository.auditor"
+            :placeholder="$ta('select|approval')"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|approval')}]}"
+            v-decorator="['repository.auditor', {rules: [{ required: true, message: $ta('select|approval')}]}]"
-        >
+          >
-          <a-select :placeholder="$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
+        <a-form-item :label="$t('date')">
-          :label="$t('date')"
+          <a-range-picker
-          fieldDecoratorId="repository.effectiveDate"
+            style="width: 100%"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|date')}]}"
+            v-decorator="['repository.effectiveDate', {rules: [{ required: true, message: $ta('select|date')}]}]"
-        >
+          />
-          <a-range-picker 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
+        <a-form-item :label="$t('type')">
-          :label="$t('type')"
+          <a-select
-          fieldDecoratorId="repository.type"
+            :placeholder="$ta('select|type')"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|type')}]}"
+            v-decorator="['repository.type', {rules: [{ required: true, message: $ta('select|type')}]}]"
-        >
+          >
-          <a-select :placeholder="$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()

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
+        <a-form-item :label="$t('name')">
-          :label="$t('name')"
+          <a-input
-          fieldDecoratorId="task.name"
+            v-decorator="['task.name', {rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}]"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}"
+            :placeholder="$ta('input|name')"
-        >
+          />
-          <a-input :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
+        <a-form-item :label="$t('describe')">
-          :label="$t('describe')"
+          <a-input
-          fieldDecoratorId="task.description"
+            v-decorator="['task.description', {rules: [{ required: true, message: $ta('input|describe'), whitespace: true}]}]"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|describe'), whitespace: true}]}"
+            :placeholder="$ta('input|describe')"
-        >
+          />
-          <a-input :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
+        <a-form-item :label="$t('duty')">
-          :label="$t('duty')"
+          <a-select
-          fieldDecoratorId="task.manager"
+            :placeholder="$ta('select|duty')"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|duty')}]}"
+            v-decorator="['task.manager', {rules: [{ required: true, message: $ta('select|duty')}]}]"
-        >
+          >
-          <a-select :placeholder="$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
+        <a-form-item :label="$t('time')">
-          :label="$t('time')"
+          <a-time-picker
-          fieldDecoratorId="task.time"
+            v-decorator="['task.time', {rules: [{ required: true, message: $ta('select|time')}]}]"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|time')}]}"
+            style="width: 100%"
-        >
+          />
-          <a-time-picker 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
+        <a-form-item :label="$t('type')">
-          :label="$t('type')"
+          <a-select
-          fieldDecoratorId="task.type"
+            :placeholder="$ta('select|type')"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|type')}]}"
+            v-decorator="['task.type', {rules: [{ required: true, message: $ta('select|type')}]}]"
-        >
+          >
-          <a-select :placeholder="$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()

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
+        <a-form-item>
-          fieldDecoratorId="owner"
+          <a-select
-          initialValue="['1', '2']"
+            mode="multiple" style="max-width: 286px"
-        >
+            v-decorator="['owner', {initialValue: ['1', '2']}]"
-          <a-select mode="multiple" style="max-width: 286px">
+          >
             <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
+            <a-form-item label="活跃用户" :labelCol="{span: 6}" :wrapperCol="{span: 12}">
-              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({

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
+            <a-form-item>
-              fieldDecoratorId="name"
+              <a-input
-              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
+                autocomplete="autocomplete"
-            >
+                size="large"
-              <a-input size="large" placeholder="admin" >
+                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
+            <a-form-item>
-              fieldDecoratorId="password"
+              <a-input
-              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
+                size="large"
-            >
+                placeholder="888888"
-              <a-input size="large" placeholder="888888" type="password">
+                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: {