refactor: add eslint-plugin-vue && lint code (#976)

2018-08-19 16:55:24 +08:00
parent 8f58baf617
commit e5d4290938
124 changed files with 1329 additions and 1084 deletions
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -1,26 +1,26 @@
 <template>
  <el-card class="box-card-component" style="margin-left:8px;">
    <div slot="header" class="box-card-header">
-      <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
+      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
    </div>
    <div style="position:relative;">
-      <pan-thumb class="panThumb" :image="avatar"></pan-thumb>
-      <mallki className='mallki-text' text='vue-element-admin'></mallki>
-      <div style="padding-top:35px;" class='progress-item'>
+      <pan-thumb :image="avatar" class="panThumb"/>
+      <mallki class-name="mallki-text" text="vue-element-admin"/>
+      <div style="padding-top:35px;" class="progress-item">
        <span>Vue</span>
-        <el-progress :percentage="70"></el-progress>
+        <el-progress :percentage="70"/>
      </div>
-      <div class='progress-item'>
+      <div class="progress-item">
        <span>JavaScript</span>
-        <el-progress :percentage="18"></el-progress>
+        <el-progress :percentage="18"/>
      </div>
-      <div class='progress-item'>
+      <div class="progress-item">
        <span>Css</span>
-        <el-progress :percentage="12"></el-progress>
+        <el-progress :percentage="12"/>
      </div>
-       <div class='progress-item'>
+      <div class="progress-item">
        <span>ESLint</span>
-        <el-progress :percentage="100" status="success"></el-progress>
+        <el-progress :percentage="100" status="success"/>
      </div>
    </div>
  </el-card>
@@ -34,6 +34,15 @@ import Mallki from '@/components/TextHoverEffect/Mallki'
 export default {
  components: { PanThumb, Mallki },

+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
  data() {
    return {
      statisticsData: {
@@ -48,15 +57,6 @@ export default {
      'avatar',
      'roles'
    ])
-  },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        success: 'success',
-        pending: 'danger'
-      }
-      return statusMap[status]
-    }
  }
 }
 </script>
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
@@ -26,7 +26,8 @@ export default {
      default: true
    },
    chartData: {
-      type: Object
+      type: Object,
+      required: true
    }
  },
  data() {
@@ -34,6 +35,14 @@ export default {
      chart: null
    }
  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
@@ -63,14 +72,6 @@ export default {
    this.chart.dispose()
    this.chart = null
  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
  methods: {
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -1,13 +1,13 @@
 <template>
-  <el-row class="panel-group" :gutter="40">
+  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">New Visits</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
+          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
@@ -18,7 +18,7 @@
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">Messages</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
+          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
@@ -29,7 +29,7 @@
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">Purchases</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
+          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
@@ -40,7 +40,7 @@
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">Shoppings</div>
-          <count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
+          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>

 <script>
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@@ -1,17 +1,19 @@
 <template>
-  <li class="todo" :class="{ completed: todo.done, editing: editing }">
+  <li :class="{ completed: todo.done, editing: editing }" class="todo">
    <div class="view">
-      <input class="toggle"
-        type="checkbox"
+      <input
        :checked="todo.done"
+        class="toggle"
+        type="checkbox"
        @change="toggleTodo( todo)">
-      <label v-text="todo.text" @dblclick="editing = true"></label>
-      <button class="destroy" @click="deleteTodo( todo )"></button>
+      <label @dblclick="editing = true" v-text="todo.text"/>
+      <button class="destroy" @click="deleteTodo( todo )"/>
    </div>
-    <input class="edit"
-      v-show="editing"
+    <input
      v-focus="editing"
+      v-show="editing"
      :value="todo.text"
+      class="edit"
      @keyup.enter="doneEdit"
      @keyup.esc="cancelEdit"
      @blur="doneEdit">
@@ -21,12 +23,6 @@
 <script>
 export default {
  name: 'Todo',
-  props: ['todo'],
-  data() {
-    return {
-      editing: false
-    }
-  },
  directives: {
    focus(el, { value }, { context }) {
      if (value) {
@@ -36,6 +32,19 @@ export default {
      }
    }
  },
+  props: {
+    todo: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      editing: false
+    }
+  },
  methods: {
    deleteTodo(todo) {
      this.$emit('deleteTodo', todo)
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -201,6 +201,7 @@
    font-size: 30px;
    color: #cc9a9a;
    transition: color 0.2s ease-out;
+    cursor: pointer;
  }
  .todo-list li .destroy:hover {
    color: #af5b5e;
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -5,16 +5,21 @@
      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
    </header>
    <!-- main section -->
-    <section class="main" v-show="todos.length">
-      <input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })">
-      <label for="toggle-all"></label>
+    <section v-show="todos.length" class="main">
+      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+      <label for="toggle-all"/>
      <ul class="todo-list">
-        <todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index"
-          :todo="todo"></todo>
+        <todo
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+          @toggleTodo="toggleTodo"
+          @editTodo="editTodo"
+          @deleteTodo="deleteTodo"/>
      </ul>
    </section>
    <!-- footer -->
-    <footer class="footer" v-show="todos.length">
+    <footer v-show="todos.length" class="footer">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize('item') }} left
@@ -52,6 +57,10 @@ const defalutList = [
 ]
 export default {
  components: { Todo },
+  filters: {
+    pluralize: (n, w) => n === 1 ? w : w + 's',
+    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+  },
  data() {
    return {
      visibility: 'all',
@@ -108,10 +117,6 @@ export default {
        this.setLocalStorage()
      })
    }
-  },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  }
 }
 </script>
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -2,17 +2,17 @@
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
-        {{scope.row.order_no |  orderNoFilter}}
+        {{ scope.row.order_no | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="scope">
-        ¥{{scope.row.price | toThousandslsFilter}}
+        ¥{{ scope.row.price | toThousandslsFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="scope">
-        <el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
+        <el-tag :type="scope.row.status | statusFilter"> {{ scope.row.status }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
@@ -22,11 +22,6 @@
 import { fetchList } from '@/api/transaction'

 export default {
-  data() {
-    return {
-      list: null
-    }
-  },
  filters: {
    statusFilter(status) {
      const statusMap = {
@@ -39,6 +34,11 @@ export default {
      return str.substring(0, 30)
    }
  },
+  data() {
+    return {
+      list: null
+    }
+  },
  created() {
    this.fetchData()
  },
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,48 +1,47 @@
 <template>
  <div class="dashboard-editor-container">

-    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
+    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>

-    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
+    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData"></line-chart>
+      <line-chart :chart-data="lineChartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
-          <raddar-chart></raddar-chart>
+          <raddar-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
-          <pie-chart></pie-chart>
+          <pie-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
-          <bar-chart></bar-chart>
+          <bar-chart/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table></transaction-table>
+        <transaction-table/>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list></todo-list>
+        <todo-list/>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card></box-card>
+        <box-card/>
      </el-col>
    </el-row>

  </div>
 </template>

-
 <script>
 import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'
@@ -74,7 +73,7 @@ const lineChartData = {
 }

 export default {
-  name: 'dashboard-admin',
+  name: 'DashboardAdmin',
  components: {
    GithubCorner,
    PanelGroup,
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -1,17 +1,17 @@
 <template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
-      <pan-thumb style="float: left" :image="avatar"> Your roles:
-        <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
+      <pan-thumb :image="avatar" style="float: left"> Your roles:
+        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
-      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
      <div class="info-container">
-        <span class="display_name">{{name}}</span>
+        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
      </div>
    </div>
    <div>
-      <img class="emptyGif" :src="emptyGif">
+      <img :src="emptyGif" class="emptyGif">
    </div>
  </div>
 </template>
@@ -22,7 +22,7 @@ import PanThumb from '@/components/PanThumb'
 import GithubCorner from '@/components/GithubCorner'

 export default {
-  name: 'dashboard-editor',
+  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="dashboard-container">
-    <component :is="currentRole"></component>
+    <component :is="currentRole"/>
  </div>
 </template>

@@ -10,7 +10,7 @@ import adminDashboard from './admin'
 import editorDashboard from './editor'

 export default {
-  name: 'dashboard',
+  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {