diff --git a/mock/prod/list.js b/mock/prod/list.js
deleted file mode 100644
index 7ff9407..0000000
--- a/mock/prod/list.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import Mock from 'mockjs'
-// import logoPath from "~@/assets/img/yp_logo.jpeg"
-
-const List = []
-const count = 20
-
-const baseContent = '<p>I am testing data, I am testing data.</p><p></p>'
-// const image_uri = logoPath
-const image_uri = 'https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'
-
-for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    pid: '@increment',
-    pname: '@title(5,10)',
-    timestamp: +Mock.Random.date('T'),
-    shoper: '@first', //所属工厂
-    salescount: '@first', //购买次数
-    importance: '@integer(1, 3)', //排序权重
-    prod_info_weight: '@integer(1, 3)', //重量
-    prod_info_leg_long: '@integer(1, 3)', //腿长
-    prod_info_glass_width: '@integer(1, 3)', //镜宽
-    prod_info_glass_height: '@integer(1, 3)', //镜高
-    prod_info_frame_width: '@integer(1, 3)', //框宽
-    prod_info_frame_height: '@integer(1, 3)', //框高
-    prod_info_norse_width: '@integer(1, 3)', //鼻宽
-    prod_info_window_pic: [], //鼻宽
-    image_uri: image_uri
-  }))
-}
-
-export default [{
-    url: '/yp/prod/list',
-    type: 'post',
-    response: config => {
-      const {
-        importance,
-        type,
-        title,
-        page = 1,
-        limit = 20,
-        sort
-      } = config.query
-
-      // let mockList = List.filter(item => {
-      //   if (importance && item.importance !== +importance) return false
-      //   if (type && item.type !== type) return false
-      //   if (title && item.title.indexOf(title) < 0) return false
-      //   return true
-      // })
-
-      if (sort === '-id') {
-        mockList = mockList.reverse()
-      }
-
-      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
-
-      return {
-        code: 20000,
-        data: {
-          total: mockList.length,
-          items: pageList
-        }
-      }
-    }
-  },
-
-  // {
-  //   url: '/yp/prod/detail',
-  //   type: 'get',
-  //   response: config => {
-  //     const {
-  //       id
-  //     } = config.query
-  //     for (const article of List) {
-  //       if (article.id === +id) {
-  //         return {
-  //           code: 20000,
-  //           data: article
-  //         }
-  //       }
-  //     }
-  //   }
-  // },
-
-  // {
-  //   url: '/yp/article/pv',
-  //   type: 'get',
-  //   response: _ => {
-  //     return {
-  //       code: 20000,
-  //       data: {
-  //         pvData: [{
-  //             key: 'PC',
-  //             pv: 1024
-  //           },
-  //           {
-  //             key: 'mobile',
-  //             pv: 1024
-  //           },
-  //           {
-  //             key: 'ios',
-  //             pv: 1024
-  //           },
-  //           {
-  //             key: 'android',
-  //             pv: 1024
-  //           }
-  //         ]
-  //       }
-  //     }
-  //   }
-  // },
-
-  // {
-  //   url: '/yp/article/create',
-  //   type: 'post',
-  //   response: _ => {
-  //     return {
-  //       code: 20000,
-  //       data: 'success'
-  //     }
-  //   }
-  // },
-
-  // {
-  //   url: '/yp/article/update',
-  //   type: 'post',
-  //   response: _ => {
-  //     return {
-  //       code: 20000,
-  //       data: 'success'
-  //     }
-  //   }
-  // }
-]
diff --git a/mock/role/routes.js b/mock/role/routes.js
index 21cbed1..c3a05f7 100755
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -1,16 +1,13 @@
 // Just a mock data
 
-export const constantRoutes = [
-  {
+export const constantRoutes = [{
     path: '/redirect',
     component: 'layout/Layout',
     hidden: true,
-    children: [
-      {
-        path: '/redirect/:path*',
-        component: 'views/redirect/index'
-      }
-    ]
+    children: [{
+      path: '/redirect/:path*',
+      component: 'views/redirect/index'
+    }]
   },
   {
     path: '/login',
@@ -46,100 +43,106 @@ export const constantRoutes = [
     path: '',
     component: 'layout/Layout',
     redirect: 'dashboard',
-    children: [
-      {
-        path: 'dashboard',
-        component: 'views/dashboard/index',
-        name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+    children: [{
+      path: 'dashboard',
+      component: 'views/dashboard/index',
+      name: 'Dashboard',
+      meta: {
+        title: 'dashboard',
+        icon: 'dashboard',
+        affix: true
       }
-    ]
+    }]
   },
   {
     path: '/documentation',
     component: 'layout/Layout',
-    children: [
-      {
-        path: 'index',
-        component: 'views/documentation/index',
-        name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
+    children: [{
+      path: 'index',
+      component: 'views/documentation/index',
+      name: 'Documentation',
+      meta: {
+        title: 'documentation',
+        icon: 'documentation',
+        affix: true
       }
-    ]
+    }]
   },
   {
     path: '/guide',
     component: 'layout/Layout',
     redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: 'views/guide/index',
-        name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+    children: [{
+      path: 'index',
+      component: 'views/guide/index',
+      name: 'Guide',
+      meta: {
+        title: 'guide',
+        icon: 'guide',
+        noCache: true
       }
-    ]
+    }]
   }
 ]
 
-export const asyncRoutes = [
-  // {
-  //   path: '/permission',
-  //   component: 'layout/Layout',
-  //   redirect: '/permission/index',
-  //   alwaysShow: true,
-  //   meta: {
-  //     title: 'permission',
-  //     icon: 'lock',
-  //     // roles: ['admin', 'assistant', 'runner', 'shoper']
-  //   },
-  //   children: [
-  //     {
-  //       path: 'page',
-  //       component: 'views/permission/page',
-  //       name: 'PagePermission',
-  //       meta: {
-  //         title: 'pagePermission',
-  //         roles: ['admin','assistant']
-  //       }
-  //     },
-  //     {
-  //       path: 'directive',
-  //       component: 'views/permission/directive',
-  //       name: 'DirectivePermission',
-  //       meta: {
-  //         title: 'directivePermission',
-  //         roles:['shoper']
-  //       }
-  //     },
-  //     {
-  //       path: 'role',
-  //       component: 'views/permission/role',
-  //       name: 'RolePermission',
-  //       meta: {
-  //         title: 'rolePermission',
-  //         roles: ['runner']
-  //       }
-  //     }
-  //   ]
-  // },
+export const asyncRoutes = [{
+    path: '/permission',
+    component: 'layout/Layout',
+    redirect: '/permission/index',
+    alwaysShow: true,
+    meta: {
+      title: 'permission',
+      icon: 'lock',
+      // roles: ['admin', 'assistant', 'runner', 'shoper']
+    },
+    children: [{
+        path: 'page',
+        component: 'views/permission/page',
+        name: 'PagePermission',
+        meta: {
+          title: 'pagePermission',
+          roles: ['admin', 'assistant']
+        }
+      },
+      {
+        path: 'directive',
+        component: 'views/permission/directive',
+        name: 'DirectivePermission',
+        meta: {
+          title: 'directivePermission',
+          roles: ['shoper']
+        }
+      },
+      {
+        path: 'role',
+        component: 'views/permission/role',
+        name: 'RolePermission',
+        meta: {
+          title: 'rolePermission',
+          roles: ['runner']
+        }
+      }
+    ]
+  },
 
   {
     path: '/icon',
     component: 'layout/Layout',
     meta: {
       title: 'ddddd',
-      icon:'people',
+      icon: 'people',
       roles: ['runner']
     },
-    children: [
-      {
-        path: 'index',
-        component: 'views/icons/index',
-        name: 'Icons',
-        meta: { title: 'icons', icon: 'icon', noCache: true }
+    children: [{
+      path: 'index',
+      component: 'views/icons/index',
+      name: 'Icons',
+      meta: {
+        title: 'icons',
+        icon: 'icon',
+        noCache: true
       }
-    ]
+    }]
   },
 
   {
@@ -151,90 +154,117 @@ export const asyncRoutes = [
       title: 'components',
       icon: 'component'
     },
-    children: [
-      {
+    children: [{
         path: 'tinymce',
         component: 'views/components-demo/tinymce',
         name: 'TinymceDemo',
-        meta: { title: 'tinymce' }
+        meta: {
+          title: 'tinymce'
+        }
       },
       {
         path: 'markdown',
         component: 'views/components-demo/markdown',
         name: 'MarkdownDemo',
-        meta: { title: 'markdown' }
+        meta: {
+          title: 'markdown'
+        }
       },
       {
         path: 'json-editor',
         component: 'views/components-demo/json-editor',
         name: 'JsonEditorDemo',
-        meta: { title: 'jsonEditor' }
+        meta: {
+          title: 'jsonEditor'
+        }
       },
       {
         path: 'split-pane',
         component: 'views/components-demo/split-pane',
         name: 'SplitpaneDemo',
-        meta: { title: 'splitPane' }
+        meta: {
+          title: 'splitPane'
+        }
       },
       {
         path: 'avatar-upload',
         component: 'views/components-demo/avatar-upload',
         name: 'AvatarUploadDemo',
-        meta: { title: 'avatarUpload' }
+        meta: {
+          title: 'avatarUpload'
+        }
       },
       {
         path: 'dropzone',
         component: 'views/components-demo/dropzone',
         name: 'DropzoneDemo',
-        meta: { title: 'dropzone' }
+        meta: {
+          title: 'dropzone'
+        }
       },
       {
         path: 'sticky',
         component: 'views/components-demo/sticky',
         name: 'StickyDemo',
-        meta: { title: 'sticky' }
+        meta: {
+          title: 'sticky'
+        }
       },
       {
         path: 'count-to',
         component: 'views/components-demo/count-to',
         name: 'CountToDemo',
-        meta: { title: 'countTo' }
+        meta: {
+          title: 'countTo'
+        }
       },
       {
         path: 'mixin',
         component: 'views/components-demo/mixin',
         name: 'ComponentMixinDemo',
-        meta: { title: 'componentMixin' }
+        meta: {
+          title: 'componentMixin'
+        }
       },
       {
         path: 'back-to-top',
         component: 'views/components-demo/back-to-top',
         name: 'BackToTopDemo',
-        meta: { title: 'backToTop' }
+        meta: {
+          title: 'backToTop'
+        }
       },
       {
         path: 'drag-dialog',
         component: 'views/components-demo/drag-dialog',
         name: 'DragDialogDemo',
-        meta: { title: 'dragDialog' }
+        meta: {
+          title: 'dragDialog'
+        }
       },
       {
         path: 'drag-select',
         component: 'views/components-demo/drag-select',
         name: 'DragSelectDemo',
-        meta: { title: 'dragSelect' }
+        meta: {
+          title: 'dragSelect'
+        }
       },
       {
         path: 'dnd-list',
         component: 'views/components-demo/dnd-list',
         name: 'DndListDemo',
-        meta: { title: 'dndList' }
+        meta: {
+          title: 'dndList'
+        }
       },
       {
         path: 'drag-kanban',
         component: 'views/components-demo/drag-kanban',
         name: 'DragKanbanDemo',
-        meta: { title: 'dragKanban' }
+        meta: {
+          title: 'dragKanban'
+        }
       }
     ]
   },
@@ -247,24 +277,32 @@ export const asyncRoutes = [
       title: 'charts',
       icon: 'chart'
     },
-    children: [
-      {
+    children: [{
         path: 'keyboard',
         component: 'views/charts/keyboard',
         name: 'KeyboardChart',
-        meta: { title: 'keyboardChart', noCache: true }
+        meta: {
+          title: 'keyboardChart',
+          noCache: true
+        }
       },
       {
         path: 'line',
         component: 'views/charts/line',
         name: 'LineChart',
-        meta: { title: 'lineChart', noCache: true }
+        meta: {
+          title: 'lineChart',
+          noCache: true
+        }
       },
       {
         path: 'mixchart',
         component: 'views/charts/mixChart',
         name: 'MixChart',
-        meta: { title: 'mixChart', noCache: true }
+        meta: {
+          title: 'mixChart',
+          noCache: true
+        }
       }
     ]
   },
@@ -277,38 +315,45 @@ export const asyncRoutes = [
       title: 'nested',
       icon: 'nested'
     },
-    children: [
-      {
+    children: [{
         path: 'menu1',
         component: 'views/nested/menu1/index',
         name: 'Menu1',
-        meta: { title: 'menu1' },
+        meta: {
+          title: 'menu1'
+        },
         redirect: '/nested/menu1/menu1-1',
-        children: [
-          {
+        children: [{
             path: 'menu1-1',
             component: 'views/nested/menu1/menu1-1',
             name: 'Menu1-1',
-            meta: { title: 'menu1-1' }
+            meta: {
+              title: 'menu1-1'
+            }
           },
           {
             path: 'menu1-2',
             component: 'views/nested/menu1/menu1-2',
             name: 'Menu1-2',
             redirect: '/nested/menu1/menu1-2/menu1-2-1',
-            meta: { title: 'menu1-2' },
-            children: [
-              {
+            meta: {
+              title: 'menu1-2'
+            },
+            children: [{
                 path: 'menu1-2-1',
                 component: 'views/nested/menu1/menu1-2/menu1-2-1',
                 name: 'Menu1-2-1',
-                meta: { title: 'menu1-2-1' }
+                meta: {
+                  title: 'menu1-2-1'
+                }
               },
               {
                 path: 'menu1-2-2',
                 component: 'views/nested/menu1/menu1-2/menu1-2-2',
                 name: 'Menu1-2-2',
-                meta: { title: 'menu1-2-2' }
+                meta: {
+                  title: 'menu1-2-2'
+                }
               }
             ]
           },
@@ -316,7 +361,9 @@ export const asyncRoutes = [
             path: 'menu1-3',
             component: 'views/nested/menu1/menu1-3',
             name: 'Menu1-3',
-            meta: { title: 'menu1-3' }
+            meta: {
+              title: 'menu1-3'
+            }
           }
         ]
       },
@@ -324,7 +371,9 @@ export const asyncRoutes = [
         path: 'menu2',
         name: 'Menu2',
         component: 'views/nested/menu2/index',
-        meta: { title: 'menu2' }
+        meta: {
+          title: 'menu2'
+        }
       }
     ]
   },
@@ -338,25 +387,33 @@ export const asyncRoutes = [
       title: 'example',
       icon: 'example'
     },
-    children: [
-      {
+    children: [{
         path: 'create',
         component: 'views/example/create',
         name: 'CreateArticle',
-        meta: { title: 'createArticle', icon: 'edit' }
+        meta: {
+          title: 'createArticle',
+          icon: 'edit'
+        }
       },
       {
         path: 'edit/:id(\\d+)',
         component: 'views/example/edit',
         name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
+        meta: {
+          title: 'editArticle',
+          noCache: true
+        },
         hidden: true
       },
       {
         path: 'list',
         component: 'views/example/list',
         name: 'ArticleList',
-        meta: { title: 'articleList', icon: 'list' }
+        meta: {
+          title: 'articleList',
+          icon: 'list'
+        }
       }
     ]
   },
@@ -364,14 +421,15 @@ export const asyncRoutes = [
   {
     path: '/tab',
     component: 'layout/Layout',
-    children: [
-      {
-        path: 'index',
-        component: 'views/tab/index',
-        name: 'Tab',
-        meta: { title: 'tab', icon: 'tab' }
+    children: [{
+      path: 'index',
+      component: 'views/tab/index',
+      name: 'Tab',
+      meta: {
+        title: 'tab',
+        icon: 'tab'
       }
-    ]
+    }]
   },
 
   {
@@ -383,24 +441,32 @@ export const asyncRoutes = [
       title: 'errorPages',
       icon: '404'
     },
-    children: [
-      {
+    children: [{
         path: '401',
         component: 'views/error-page/401',
         name: 'Page401',
-        meta: { title: 'page401', noCache: true }
+        meta: {
+          title: 'page401',
+          noCache: true
+        }
       },
       {
         path: '404',
         component: 'views/error-page/404',
         name: 'Page404',
-        meta: { title: 'page404', noCache: true }
+        meta: {
+          title: 'page404',
+          noCache: true
+        }
       },
       {
         path: '500',
         component: 'views/error-page/500',
         name: 'Page500',
-        meta: { title: 'page500', noCache: true }
+        meta: {
+          title: 'page500',
+          noCache: true
+        }
       }
     ]
   },
@@ -409,14 +475,15 @@ export const asyncRoutes = [
     path: '/error-log',
     component: 'layout/Layout',
     redirect: 'noRedirect',
-    children: [
-      {
-        path: 'log',
-        component: 'views/error-log/index',
-        name: 'ErrorLog',
-        meta: { title: 'errorLog', icon: 'bug' }
+    children: [{
+      path: 'log',
+      component: 'views/error-log/index',
+      name: 'ErrorLog',
+      meta: {
+        title: 'errorLog',
+        icon: 'bug'
       }
-    ]
+    }]
   },
 
   {
@@ -428,30 +495,37 @@ export const asyncRoutes = [
       title: 'excel',
       icon: 'excel'
     },
-    children: [
-      {
+    children: [{
         path: 'export-excel',
         component: 'views/excel/export-excel',
         name: 'ExportExcel',
-        meta: { title: 'exportExcel' }
+        meta: {
+          title: 'exportExcel'
+        }
       },
       {
         path: 'export-selected-excel',
         component: 'views/excel/select-excel',
         name: 'SelectExcel',
-        meta: { title: 'selectExcel' }
+        meta: {
+          title: 'selectExcel'
+        }
       },
       {
         path: 'export-merge-header',
         component: 'views/excel/merge-header',
         name: 'MergeHeader',
-        meta: { title: 'mergeHeader' }
+        meta: {
+          title: 'mergeHeader'
+        }
       },
       {
         path: 'upload-excel',
         component: 'views/excel/upload-excel',
         name: 'UploadExcel',
-        meta: { title: 'uploadExcel' }
+        meta: {
+          title: 'uploadExcel'
+        }
       }
     ]
   },
@@ -461,29 +535,33 @@ export const asyncRoutes = [
     component: 'layout/Layout',
     redirect: '/zip/download',
     alwaysShow: true,
-    meta: { title: 'zip', icon: 'zip' },
-    children: [
-      {
-        path: 'download',
-        component: 'views/zip/index',
-        name: 'ExportZip',
-        meta: { title: 'exportZip' }
+    meta: {
+      title: 'zip',
+      icon: 'zip'
+    },
+    children: [{
+      path: 'download',
+      component: 'views/zip/index',
+      name: 'ExportZip',
+      meta: {
+        title: 'exportZip'
       }
-    ]
+    }]
   },
 
   {
     path: '/pdf',
     component: 'layout/Layout',
     redirect: '/pdf/index',
-    children: [
-      {
-        path: 'index',
-        component: 'views/pdf/index',
-        name: 'PDF',
-        meta: { title: 'pdf', icon: 'pdf' }
+    children: [{
+      path: 'index',
+      component: 'views/pdf/index',
+      name: 'PDF',
+      meta: {
+        title: 'pdf',
+        icon: 'pdf'
       }
-    ]
+    }]
   },
   {
     path: '/pdf/download',
@@ -495,53 +573,61 @@ export const asyncRoutes = [
     path: '/theme',
     component: 'layout/Layout',
     redirect: 'noRedirect',
-    children: [
-      {
-        path: 'index',
-        component: 'views/theme/index',
-        name: 'Theme',
-        meta: { title: 'theme', icon: 'theme' }
+    children: [{
+      path: 'index',
+      component: 'views/theme/index',
+      name: 'Theme',
+      meta: {
+        title: 'theme',
+        icon: 'theme'
       }
-    ]
+    }]
   },
 
   {
     path: '/clipboard',
     component: 'layout/Layout',
     redirect: 'noRedirect',
-    children: [
-      {
-        path: 'index',
-        component: 'views/clipboard/index',
-        name: 'ClipboardDemo',
-        meta: { title: 'clipboardDemo', icon: 'clipboard' }
+    children: [{
+      path: 'index',
+      component: 'views/clipboard/index',
+      name: 'ClipboardDemo',
+      meta: {
+        title: 'clipboardDemo',
+        icon: 'clipboard'
       }
-    ]
+    }]
   },
 
   {
     path: '/i18n',
     component: 'layout/Layout',
-    children: [
-      {
-        path: 'index',
-        component: 'views/i18n-demo/index',
-        name: 'I18n',
-        meta: { title: 'i18n', icon: 'international' }
+    children: [{
+      path: 'index',
+      component: 'views/i18n-demo/index',
+      name: 'I18n',
+      meta: {
+        title: 'i18n',
+        icon: 'international'
       }
-    ]
+    }]
   },
 
   {
     path: 'external-link',
     component: 'layout/Layout',
-    children: [
-      {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'externalLink', icon: 'link' }
+    children: [{
+      path: 'https://github.com/PanJiaChen/vue-element-admin',
+      meta: {
+        title: 'externalLink',
+        icon: 'link'
       }
-    ]
+    }]
   },
 
-  { path: '*', redirect: '/404', hidden: true }
+  {
+    path: '*',
+    redirect: '/404',
+    hidden: true
+  }
 ]
diff --git a/src/api/prod.js b/src/api/prod.js
index 07c0964..61a6e06 100644
--- a/src/api/prod.js
+++ b/src/api/prod.js
@@ -1,7 +1,4 @@
 import request from '@/utils/request'
-import {
-  Notification
-} from 'element-ui'
 
 // export const getPersonInfo = data => {
 //   return service({
@@ -12,18 +9,45 @@ import {
 // }
 
 export function fetchList(query) {
-  // console.log('api/prod/list/ ==fetchList=== query', query);
-  const options = {
-    type: 'error',
-    message: query,
-    title: '==query value ===',
-    showClose: true,
-    duration: 4000
-  }
-  Notification(options)
   return request({
     url: '/yp/prod/list',
     method: 'post',
     params: query
   })
 }
+
+export function fetchArticle(id) {
+  return request({
+    url: '/yp/prod/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+export function fetchPv(pv) {
+  return request({
+    url: '/yp/prod/pv',
+    method: 'get',
+    params: {
+      pv
+    }
+  })
+}
+
+export function createArticle(data) {
+  return request({
+    url: '/yp/prod/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateArticle(data) {
+  return request({
+    url: '/yp/prod/update',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 57e7242..4cb0993 100755
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -67,18 +67,27 @@ const mutations = {
 }
 
 const actions = {
-  addView({ dispatch }, view) {
+  addView({
+    dispatch
+  }, view) {
     dispatch('addVisitedView', view)
     dispatch('addCachedView', view)
   },
-  addVisitedView({ commit }, view) {
+  addVisitedView({
+    commit
+  }, view) {
     commit('ADD_VISITED_VIEW', view)
   },
-  addCachedView({ commit }, view) {
+  addCachedView({
+    commit
+  }, view) {
     commit('ADD_CACHED_VIEW', view)
   },
 
-  delView({ dispatch, state }, view) {
+  delView({
+    dispatch,
+    state
+  }, view) {
     return new Promise(resolve => {
       dispatch('delVisitedView', view)
       dispatch('delCachedView', view)
@@ -88,20 +97,29 @@ const actions = {
       })
     })
   },
-  delVisitedView({ commit, state }, view) {
+  delVisitedView({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_VISITED_VIEW', view)
       resolve([...state.visitedViews])
     })
   },
-  delCachedView({ commit, state }, view) {
+  delCachedView({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_CACHED_VIEW', view)
       resolve([...state.cachedViews])
     })
   },
 
-  delOthersViews({ dispatch, state }, view) {
+  delOthersViews({
+    dispatch,
+    state
+  }, view) {
     return new Promise(resolve => {
       dispatch('delOthersVisitedViews', view)
       dispatch('delOthersCachedViews', view)
@@ -111,20 +129,29 @@ const actions = {
       })
     })
   },
-  delOthersVisitedViews({ commit, state }, view) {
+  delOthersVisitedViews({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_OTHERS_VISITED_VIEWS', view)
       resolve([...state.visitedViews])
     })
   },
-  delOthersCachedViews({ commit, state }, view) {
+  delOthersCachedViews({
+    commit,
+    state
+  }, view) {
     return new Promise(resolve => {
       commit('DEL_OTHERS_CACHED_VIEWS', view)
       resolve([...state.cachedViews])
     })
   },
 
-  delAllViews({ dispatch, state }, view) {
+  delAllViews({
+    dispatch,
+    state
+  }, view) {
     return new Promise(resolve => {
       dispatch('delAllVisitedViews', view)
       dispatch('delAllCachedViews', view)
@@ -134,20 +161,28 @@ const actions = {
       })
     })
   },
-  delAllVisitedViews({ commit, state }) {
+  delAllVisitedViews({
+    commit,
+    state
+  }) {
     return new Promise(resolve => {
       commit('DEL_ALL_VISITED_VIEWS')
       resolve([...state.visitedViews])
     })
   },
-  delAllCachedViews({ commit, state }) {
+  delAllCachedViews({
+    commit,
+    state
+  }) {
     return new Promise(resolve => {
       commit('DEL_ALL_CACHED_VIEWS')
       resolve([...state.cachedViews])
     })
   },
 
-  updateVisitedView({ commit }, view) {
+  updateVisitedView({
+    commit
+  }, view) {
     commit('UPDATE_VISITED_VIEW', view)
   }
 }
diff --git a/src/views/prod/list.vue b/src/views/prod/list.vue
index 5e89737..6f5e91a 100755
--- a/src/views/prod/list.vue
+++ b/src/views/prod/list.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="app-container">
-    <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table
-      ref="dragTable"
       v-loading="listLoading"
       :data="list"
-      row-key="id"
       border
       fit
       highlight-current-row
@@ -13,40 +10,31 @@
     >
       <el-table-column
         align="center"
-        label="PID"
-        width="65"
+        label="ID"
+        width="80"
       >
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
       <el-table-column
         width="180px"
         align="center"
-        label="Date2"
+        label="Date"
       >
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        <template slot-scope="scope">
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
       <el-table-column
-        min-width="300px"
-        label="Title"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.title }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        width="110px"
+        width="120px"
         align="center"
         label="Author"
       >
-        <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
+        <template slot-scope="scope">
+          <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
@@ -54,27 +42,17 @@
         width="100px"
         label="Importance"
       >
-        <template slot-scope="{row}">
+        <template slot-scope="scope">
           <svg-icon
-            v-for="n in + row.importance"
+            v-for="n in +scope.row.importance"
             :key="n"
             icon-class="star"
-            class="icon-star"
+            class="meta-item__icon"
           />
         </template>
       </el-table-column>
 
       <el-table-column
-        align="center"
-        label="Readings"
-        width="95"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.pageviews }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column
         class-name="status-col"
         label="Status"
         width="110"
@@ -87,43 +65,55 @@
       </el-table-column>
 
       <el-table-column
+        min-width="300px"
+        label="Title"
+      >
+        <template slot-scope="{row}">
+          <router-link
+            :to="'/example/edit/'+row.id"
+            class="link-type"
+          >
+            <span>{{ row.title }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column
         align="center"
-        label="Drag"
-        width="80"
+        label="Actions"
+        width="120"
       >
-        <template slot-scope="{}">
-          <svg-icon
-            class="drag-handler"
-            icon-class="drag"
-          />
+        <template slot-scope="scope">
+          <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>
-    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
-    <div class="show-d">
-      <el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
-    </div>
-    <div class="show-d">
-      <el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
-    </div>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
-import {
-  fetchList
-  // fetchPv
-  // createUser,
-  // updateUser,
-  // delUser
-} from '@/api/prod'
-import Sortable from 'sortablejs'
-// import waves from '@/directive/waves' // waves directive
-// import { parseTime } from "@/utils";
-// import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+import { fetchList } from '@/api/article'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
-  name: 'DragTable',
+  name: 'ArticleList',
+  components: { Pagination },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -137,78 +127,37 @@ export default {
   data() {
     return {
       list: null,
-      total: null,
+      total: 0,
       listLoading: true,
       listQuery: {
         page: 1,
-        limit: 10
-      },
-      sortable: null,
-      oldList: [],
-      newList: []
+        limit: 20
+      }
     }
   },
   created() {
     this.getList()
   },
   methods: {
-    async getList() {
-      console.log('test======>', 'prod ..... -----getList')
+    getList() {
       this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      console.log('data===========getList=======', data)
-      this.list = data.items
-      this.total = data.total
-      // this.listLoading = false;
-      // this.oldList = this.list.map(v => v.id);
-      // this.newList = this.oldList.slice();
-      // this.$nextTick(() => {
-      //   this.setSort();
-      // });
-    },
-    setSort() {
-      const el = this.$refs.dragTable.$el.querySelectorAll(
-        '.el-table__body-wrapper > table > tbody'
-      )[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-          dataTransfer.setData('Text', '')
-        },
-        onEnd: evt => {
-          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
-          this.list.splice(evt.newIndex, 0, targetRow)
-
-          // for show the changes, you can delete in you code
-          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
-          this.newList.splice(evt.newIndex, 0, tempIndex)
-        }
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.items
+        this.total = response.data.total
+        this.listLoading = false
       })
     }
   }
 }
 </script>
 
-<style>
-.sortable-ghost {
-  opacity: 0.8;
-  color: #fff !important;
-  background: #42b983 !important;
-}
-</style>
-
 <style scoped>
-.icon-star {
-  margin-right: 2px;
-}
-.drag-handler {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
+.edit-input {
+  padding-right: 100px;
 }
-.show-d {
-  margin-top: 15px;
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
 }
 </style>