sendya 6 سال پیش
والد
کامیت
bfe1e2a9d4
5فایلهای تغییر یافته به همراه59 افزوده شده و 96 حذف شده
  1. 6 1
      README.md
  2. 0 58
      src/components/HelloWorld.vue
  3. 7 1
      src/components/chart/Liquid.vue
  4. 45 34
      src/views/form/BasicForm.vue
  5. 1 2
      src/views/user/Register.vue

+ 6 - 1
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

+ 0 - 58
src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

+ 7 - 1
src/components/chart/Liquid.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']"

+ 45 - 34
src/views/form/BasicForm.vue

@@ -1,49 +1,64 @@
 <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="邀评人"
@@ -51,7 +66,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="权重"
@@ -59,7 +74,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>

+ 1 - 2
src/views/user/Register.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>