perf form demo

2018-05-08 17:09:27 +08:00 · 2018-05-08 17:09:27 +08:00 · de8a38d6ec
parent a57505fd1d
commit de8a38d6ec
8 changed files with 114 additions and 132 deletions
--- a/src/api/article.js
+++ b/src/api/article.js
@ -8,10 +8,11 @@ export function fetchList(query) {
  })
 }

-export function fetchArticle() {
+export function fetchArticle(id) {
  return request({
    url: '/article/detail',
-    method: 'get'
+    method: 'get',
+    params: { id }
  })
 }

--- a/src/mock/article.js
+++ b/src/mock/article.js
@ -4,6 +4,9 @@ import { param2Obj } from '@/utils'
 const List = []
 const count = 100

+const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+
 for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: '@increment',
@ -11,12 +14,17 @@ for (let i = 0; i < count; i++) {
    author: '@first',
    reviewer: '@first',
    title: '@title(5, 10)',
+    content_short: '我是测试数据',
+    content: baseContent,
    forecast: '@float(0, 100, 2, 2)',
    importance: '@integer(1, 3)',
    'type|1': ['CN', 'US', 'JP', 'EU'],
    'status|1': ['published', 'draft', 'deleted'],
    display_time: '@datetime',
-    pageviews: '@integer(300, 5000)'
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
  }))
 }

@ -45,22 +53,14 @@ export default {
  getPv: () => ({
    pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
  }),
-  getArticle: () => ({
-    id: 120000000001,
-    author: { key: 'mockPan' },
-    source_name: '原创作者',
-    category_item: [{ key: 'global', name: '全球' }],
-    comment_disabled: true,
-    content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
-    content_short: '我是测试数据',
-    display_time: +new Date(),
-    image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
-    platforms: ['a-platform'],
-    source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
-    status: 'published',
-    tags: [],
-    title: 'vue-element-admin'
-  }),
+  getArticle: (config) => {
+    const { id } = param2Obj(config.url)
+    for (const article of List) {
+      if (article.id === +id) {
+        return article
+      }
+    }
+  },
  createArticle: () => ({
    data: 'success'
  }),
--- a/src/router/index.js
+++ b/src/router/index.js
@ -166,7 +166,7 @@ export const asyncRouterMap = [
  {
    path: '/example',
    component: Layout,
-    redirect: '/example/table/complex-table',
+    redirect: '/example/list',
    name: 'example',
    meta: {
      title: 'example',
@ -174,7 +174,7 @@ export const asyncRouterMap = [
    },
    children: [
      { path: 'create', component: _import('example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
-      { path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle' }, hidden: true },
+      { path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
      { path: 'list', component: _import('example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
    ]
  },
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@ -3,8 +3,6 @@
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">

      <sticky :className="'sub-navbar '+postForm.status">
-        <template v-if="fetchSuccess">
-
        <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}">
          <el-button type="info">创建form</el-button>
        </router-link>
@ -50,15 +48,9 @@
          </el-dropdown-menu>
        </el-dropdown>

-          <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
        </el-button>
        <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
-
-        </template>
-        <template v-else>
-          <el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
-        </template>
-
      </sticky>

      <div class="createPost-main-container">
@ -68,27 +60,25 @@
              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
                标题
              </MDinput>
-              <span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
            </el-form-item>

            <div class="postInfo-container">
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
-                    <multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择"
-                      deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
-                      <span slot='noResult'>无结果</span>
-                    </multiselect>
+                    <el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
+                      <el-option v-for="item in userListOptions" :key="item" :label="item" :value="item">
+                      </el-option>
+                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
-                  <el-tooltip class="item" effect="dark" content="将替换作者" placement="top">
-                    <el-form-item label-width="50px" label="来源:" class="postInfo-container-item">
-                      <el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name">
-                      </el-input>
+                  <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
+                    <el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
+                      :high-threshold="3">
+                    </el-rate>
                  </el-form-item>
-                  </el-tooltip>
                </el-col>

                <el-col :span="8">
@ -139,11 +129,11 @@ const defaultForm = {
  content_short: '', // 文章摘要
  source_uri: '', // 文章外链
  image_uri: '', // 文章图片
-  source_name: '', // 文章外部作者
  display_time: undefined, // 前台展示时间
  id: undefined,
  platforms: ['a-platform'],
-  comment_disabled: false
+  comment_disabled: false,
+  importance: 0
 }

 export default {
@ -184,9 +174,8 @@ export default {
    }
    return {
      postForm: Object.assign({}, defaultForm),
-      fetchSuccess: true,
      loading: false,
-      userLIstOptions: [],
+      userListOptions: [],
      platformsOptions: [
        { key: 'a-platform', name: 'a-platform' },
        { key: 'b-platform', name: 'b-platform' },
@ -207,17 +196,20 @@ export default {
  },
  created() {
    if (this.isEdit) {
-      this.fetchData()
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
    } else {
      this.postForm = Object.assign({}, defaultForm)
    }
  },
  methods: {
-    fetchData() {
-      fetchArticle().then(response => {
+    fetchData(id) {
+      fetchArticle(id).then(response => {
        this.postForm = response.data
+        // Just for test
+        this.postForm.title += `   Article Id:${this.postForm.id}`
+        this.postForm.content_short += `   Article Id:${this.postForm.id}`
      }).catch(err => {
-        this.fetchSuccess = false
        console.log(err)
      })
    },
@ -261,9 +253,7 @@ export default {
      userSearch(query).then(response => {
        if (!response.data.items) return
        console.log(response)
-        this.userLIstOptions = response.data.items.map(v => ({
-          key: v.name
-        }))
+        this.userListOptions = response.data.items.map(v => v.name)
      })
    }
  }
@ -311,4 +301,3 @@ export default {
    }
  }
 </style>
-
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@ -1,8 +1,7 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">

    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
-
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
@ -35,22 +34,28 @@

      <el-table-column min-width="300px" label="Title">
        <template slot-scope="scope">
-          <template v-if="scope.row.edit">
-            <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
-            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
-          </template>
-          <span v-else>{{ scope.row.title }}</span>
+
+          <router-link class="link-type" :to="'/example/edit/'+scope.row.id">
+            <span>{{ scope.row.title }}</span>
+          </router-link>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Actions" width="120">
        <template slot-scope="scope">
-          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
-          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
+          <router-link :to="'/example/edit/'+scope.row.id">
+            <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
+          </router-link>
        </template>
      </el-table-column>
-
    </el-table>
+
+    <div class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
  </div>
 </template>

@ -58,10 +63,11 @@
 import { fetchList } from '@/api/article'

 export default {
-  name: 'inlineEditTable',
+  name: 'articleList',
  data() {
    return {
      list: null,
+      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
@ -86,32 +92,18 @@ export default {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
-        const items = response.data.items
-        this.list = items.map(v => {
-          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
-
-          v.originalTitle = v.title //  will be used when user click the cancel botton
-
-          return v
-        })
+        this.list = response.data.items
+        this.total = response.data.total
        this.listLoading = false
      })
    },
-    cancelEdit(row) {
-      row.title = row.originalTitle
-      row.edit = false
-      this.$message({
-        message: 'The title has been restored to the original value',
-        type: 'warning'
-      })
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
    },
-    confirmEdit(row) {
-      row.edit = false
-      row.originalTitle = row.title
-      this.$message({
-        message: 'The title has been edited',
-        type: 'success'
-      })
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
    }
  }
 }
--- a/src/views/table/complexTable.vue
+++ b/src/views/table/complexTable.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
      </el-input>
--- a/src/views/table/dragTable.vue
+++ b/src/views/table/dragTable.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
    <!-- Note that row-key is necessary to get a correct row order. -->
    <el-table :data="list" row-key="id"  v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

--- a/src/views/table/inlineEditTable.vue
+++ b/src/views/table/inlineEditTable.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">

    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">