fix: eslint

Author: sendya

README.md

@@ -39,7 +39,7 @@ Overview
 - yarn
 - webpack
 - eslint
-- @vue/cli 3.0.1
+- @vue/cli 3.2.1
 - [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
 - [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
 - [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
@@ -118,3 +118,8 @@ yarn run lint
 
 - 其他待补充...
 
+
+备注
+----
+
+> @vue/cli 升级后，eslint 规则更新了。由于影响到全部 .vue 文件，需要逐个验证。既暂时关闭部分原本不验证的规则，后期维护时，在逐步修正这些 rules

src/components/HelloWorld.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <v-chart :forceFit="true" :height="height" :width="width" :data="data" :scale="scale" :padding="0">
+    <v-chart 
+      :forceFit="true" 
+      :height="height" 
+      :width="width" 
+      :data="data" 
+      :scale="scale" 
+      :padding="0">
       <v-tooltip />
       <v-interval
         :shape="['liquid-fill-gauge']"

src/components/chart/Liquid.vue

@@ -1,65 +1,80 @@
 <template>
   <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
-    <a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
+    <a-form @submit="handleSubmit" :form="form">
       <a-form-item
         label="标题"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
-        fieldDecoratorId="name"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入标题' }]}"
-      >
-        <a-input name="name" placeholder="给目标起个名字" />
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-decorator="{
+            id: 'name',
+            options: {rules: [{ required: true, message: '请输入标题' }]}
+          }"
+          name="name"
+          placeholder="给目标起个名字" />
       </a-form-item>
       <a-form-item
         label="起止日期"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
-        fieldDecoratorId="buildTime"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择起止日期' }]}"
-      >
-        <a-range-picker name="buildTime" style="width: 100%" />
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-range-picker
+          name="buildTime"
+          style="width: 100%"
+          v-decorator="{
+            id: 'buildTime',
+            options: {rules: [{ required: true, message: '请选择起止日期' }]}
+          }" />
       </a-form-item>
       <a-form-item
         label="目标描述"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
-        fieldDecoratorId="description"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入目标描述' }]}"
-      >
-        <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-textarea
+          v-decorator="{
+            id: 'description',
+            options: {rules: [{ required: true, message: '请输入目标描述' }]}
+          }"
+          rows="4"
+          placeholder="请输入你阶段性工作目标" />
       </a-form-item>
       <a-form-item
         label="衡量标准"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
-        fieldDecoratorId="type"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入衡量标准' }]}"
-      >
-        <a-textarea rows="4" placeholder="请输入衡量标准"/>
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-textarea
+          v-decorator="{
+            id: 'type',
+            options: {rules: [{ required: true, message: '请输入衡量标准' }]}
+          }"
+          rows="4"
+          placeholder="请输入衡量标准" />
       </a-form-item>
       <a-form-item
         label="客户"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
-        :required="false"
-      >
-        <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input 
+          placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
+          v-decorator="{
+            id: 'customer',
+            options: {rules: [{ required: true, message: '请描述你服务的客户' }]}
+          }" />
       </a-form-item>
       <a-form-item
         label="邀评人"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         :required="false"
       >
-        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
+        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
       </a-form-item>
       <a-form-item
         label="权重"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         :required="false"
       >
-        <a-input-number :min="0" :max="100"/>
+        <a-input-number :min="0" :max="100" />
         <span> %</span>
       </a-form-item>
       <a-form-item
@@ -95,14 +110,14 @@
 
 <script>
   export default {
-    name: "BaseForm",
+    name: 'BaseForm',
     data () {
       return {
         description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
         value: 1,
 
         // form
-        form: null,
+        form: this.$form.createForm(this),
 
       }
     },
@@ -120,8 +135,4 @@
       }
     }
   }
-</script>
-
-<style scoped>
-
-</style>
+</script>

src/views/form/BasicForm.vue

@@ -21,8 +21,7 @@
         </template>
         <a-form-item
           fieldDecoratorId="password"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }
-        ], validateTrigger: ['change', 'blur']}">
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}">
           <a-input size="large" type="password" @click="handlePasswordInputClick" autocomplete="false" placeholder="至少6位密码，区分大小写"></a-input>
         </a-form-item>
       </a-popover>