Merge branch 'master' of git.caimei365.com:git_lijun/caimei-mall-admin-ui

mock/article.js

@@ -0,0 +1,116 @@
+import Mock from 'mockjs'
+
+const List = []
+const count = 100
+
+const baseContent = '<p>I am testing data, I am testing data.</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',
+    timestamp: +Mock.Random.date('T'),
+    author: '@first',
+    reviewer: '@first',
+    title: '@title(5, 10)',
+    content_short: 'mock data',
+    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',
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
+  }))
+}
+
+export default [
+  {
+    url: '/article/list',
+    type: 'get',
+    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: '/article/detail',
+    type: 'get',
+    response: config => {
+      const { id } = config.query
+      for (const article of List) {
+        if (article.id === +id) {
+          return {
+            code: 20000,
+            data: article
+          }
+        }
+      }
+    }
+  },
+
+  {
+    url: '/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: '/article/create',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  },
+
+  {
+    url: '/article/update',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
+

mock/remote-search.js

@@ -0,0 +1,51 @@
+import Mock from 'mockjs'
+
+const NameList = []
+const count = 100
+
+for (let i = 0; i < count; i++) {
+  NameList.push(Mock.mock({
+    name: '@first'
+  }))
+}
+NameList.push({ name: 'mock-Pan' })
+
+export default [
+  // username search
+  {
+    url: '/search/user',
+    type: 'get',
+    response: config => {
+      const { name } = config.query
+      const mockNameList = NameList.filter(item => {
+        const lowerCaseName = item.name.toLowerCase()
+        return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
+      })
+      return {
+        code: 20000,
+        data: { items: mockNameList }
+      }
+    }
+  },
+
+  // transaction list
+  {
+    url: '/transaction/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: {
+          total: 20,
+          'items|20': [{
+            order_no: '@guid()',
+            timestamp: +Mock.Random.date('T'),
+            username: '@name()',
+            price: '@float(1000, 15000, 0, 2)',
+            'status|1': ['success', 'pending']
+          }]
+        }
+      }
+    }
+  }
+]

mock/role/index.js

@@ -0,0 +1,98 @@
+import Mock from 'mockjs'
+import { deepClone } from '../../src/utils/index.js'
+import { asyncRoutes, constantRoutes } from './routes.js'
+
+const routes = deepClone([...constantRoutes, ...asyncRoutes])
+
+const roles = [
+  {
+    key: 'admin',
+    name: 'admin',
+    description: 'Super Administrator. Have access to view all pages.',
+    routes: routes
+  },
+  {
+    key: 'editor',
+    name: 'editor',
+    description: 'Normal Editor. Can see all pages except permission page',
+    routes: routes.filter(i => i.path !== '/permission')// just a mock
+  },
+  {
+    key: 'visitor',
+    name: 'visitor',
+    description: 'Just a visitor. Can only see the home page and the document page',
+    routes: [{
+      path: '',
+      redirect: 'dashboard',
+      children: [
+        {
+          path: 'dashboard',
+          name: 'Dashboard',
+          meta: { title: 'dashboard', icon: 'dashboard' }
+        }
+      ]
+    }]
+  }
+]
+
+export default [
+  // mock get all routes form server
+  {
+    url: '/routes',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: routes
+      }
+    }
+  },
+
+  // mock get all roles form server
+  {
+    url: '/roles',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        data: roles
+      }
+    }
+  },
+
+  // add role
+  {
+    url: '/role',
+    type: 'post',
+    response: {
+      code: 20000,
+      data: {
+        key: Mock.mock('@integer(300, 5000)')
+      }
+    }
+  },
+
+  // update role
+  {
+    url: '/role/[A-Za-z0-9]',
+    type: 'put',
+    response: {
+      code: 20000,
+      data: {
+        status: 'success'
+      }
+    }
+  },
+
+  // delete role
+  {
+    url: '/role/[A-Za-z0-9]',
+    type: 'delete',
+    response: {
+      code: 20000,
+      data: {
+        status: 'success'
+      }
+    }
+  }
+]

mock/role/routes.js

@@ -0,0 +1,525 @@
+// Just a mock data
+
+export const constantRoutes = [
+  {
+    path: '/redirect',
+    component: 'layout/Layout',
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path*',
+        component: 'views/redirect/index'
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: 'views/login/index',
+    hidden: true
+  },
+  {
+    path: '/auth-redirect',
+    component: 'views/login/auth-redirect',
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: 'views/error-page/404',
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: 'views/error-page/401',
+    hidden: true
+  },
+  {
+    path: '',
+    component: 'layout/Layout',
+    redirect: 'dashboard',
+    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 }
+      }
+    ]
+  },
+  {
+    path: '/guide',
+    component: 'layout/Layout',
+    redirect: '/guide/index',
+    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', 'editor']
+    },
+    children: [
+      {
+        path: 'page',
+        component: 'views/permission/page',
+        name: 'PagePermission',
+        meta: {
+          title: 'Page Permission',
+          roles: ['admin']
+        }
+      },
+      {
+        path: 'directive',
+        component: 'views/permission/directive',
+        name: 'DirectivePermission',
+        meta: {
+          title: 'Directive Permission'
+        }
+      },
+      {
+        path: 'role',
+        component: 'views/permission/role',
+        name: 'RolePermission',
+        meta: {
+          title: 'Role Permission',
+          roles: ['admin']
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/icon',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/icons/index',
+        name: 'Icons',
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/components',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    name: 'ComponentDemo',
+    meta: {
+      title: 'Components',
+      icon: 'component'
+    },
+    children: [
+      {
+        path: 'tinymce',
+        component: 'views/components-demo/tinymce',
+        name: 'TinymceDemo',
+        meta: { title: 'Tinymce' }
+      },
+      {
+        path: 'markdown',
+        component: 'views/components-demo/markdown',
+        name: 'MarkdownDemo',
+        meta: { title: 'Markdown' }
+      },
+      {
+        path: 'json-editor',
+        component: 'views/components-demo/json-editor',
+        name: 'JsonEditorDemo',
+        meta: { title: 'Json Editor' }
+      },
+      {
+        path: 'split-pane',
+        component: 'views/components-demo/split-pane',
+        name: 'SplitpaneDemo',
+        meta: { title: 'SplitPane' }
+      },
+      {
+        path: 'avatar-upload',
+        component: 'views/components-demo/avatar-upload',
+        name: 'AvatarUploadDemo',
+        meta: { title: 'Avatar Upload' }
+      },
+      {
+        path: 'dropzone',
+        component: 'views/components-demo/dropzone',
+        name: 'DropzoneDemo',
+        meta: { title: 'Dropzone' }
+      },
+      {
+        path: 'sticky',
+        component: 'views/components-demo/sticky',
+        name: 'StickyDemo',
+        meta: { title: 'Sticky' }
+      },
+      {
+        path: 'count-to',
+        component: 'views/components-demo/count-to',
+        name: 'CountToDemo',
+        meta: { title: 'Count To' }
+      },
+      {
+        path: 'mixin',
+        component: 'views/components-demo/mixin',
+        name: 'ComponentMixinDemo',
+        meta: { title: 'componentMixin' }
+      },
+      {
+        path: 'back-to-top',
+        component: 'views/components-demo/back-to-top',
+        name: 'BackToTopDemo',
+        meta: { title: 'Back To Top' }
+      },
+      {
+        path: 'drag-dialog',
+        component: 'views/components-demo/drag-dialog',
+        name: 'DragDialogDemo',
+        meta: { title: 'Drag Dialog' }
+      },
+      {
+        path: 'drag-select',
+        component: 'views/components-demo/drag-select',
+        name: 'DragSelectDemo',
+        meta: { title: 'Drag Select' }
+      },
+      {
+        path: 'dnd-list',
+        component: 'views/components-demo/dnd-list',
+        name: 'DndListDemo',
+        meta: { title: 'Dnd List' }
+      },
+      {
+        path: 'drag-kanban',
+        component: 'views/components-demo/drag-kanban',
+        name: 'DragKanbanDemo',
+        meta: { title: 'Drag Kanban' }
+      }
+    ]
+  },
+  {
+    path: '/charts',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    name: 'Charts',
+    meta: {
+      title: 'Charts',
+      icon: 'chart'
+    },
+    children: [
+      {
+        path: 'keyboard',
+        component: 'views/charts/keyboard',
+        name: 'KeyboardChart',
+        meta: { title: 'Keyboard Chart', noCache: true }
+      },
+      {
+        path: 'line',
+        component: 'views/charts/line',
+        name: 'LineChart',
+        meta: { title: 'Line Chart', noCache: true }
+      },
+      {
+        path: 'mixchart',
+        component: 'views/charts/mixChart',
+        name: 'MixChart',
+        meta: { title: 'Mix Chart', noCache: true }
+      }
+    ]
+  },
+  {
+    path: '/nested',
+    component: 'layout/Layout',
+    redirect: '/nested/menu1/menu1-1',
+    name: 'Nested',
+    meta: {
+      title: 'Nested',
+      icon: 'nested'
+    },
+    children: [
+      {
+        path: 'menu1',
+        component: 'views/nested/menu1/index',
+        name: 'Menu1',
+        meta: { title: 'Menu1' },
+        redirect: '/nested/menu1/menu1-1',
+        children: [
+          {
+            path: 'menu1-1',
+            component: 'views/nested/menu1/menu1-1',
+            name: '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: [
+              {
+                path: 'menu1-2-1',
+                component: 'views/nested/menu1/menu1-2/menu1-2-1',
+                name: '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' }
+              }
+            ]
+          },
+          {
+            path: 'menu1-3',
+            component: 'views/nested/menu1/menu1-3',
+            name: 'Menu1-3',
+            meta: { title: 'Menu1-3' }
+          }
+        ]
+      },
+      {
+        path: 'menu2',
+        name: 'Menu2',
+        component: 'views/nested/menu2/index',
+        meta: { title: 'Menu2' }
+      }
+    ]
+  },
+
+  {
+    path: '/example',
+    component: 'layout/Layout',
+    redirect: '/example/list',
+    name: 'Example',
+    meta: {
+      title: 'Example',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: 'views/example/create',
+        name: 'CreateArticle',
+        meta: { title: 'Create Article', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id(\\d+)',
+        component: 'views/example/edit',
+        name: 'EditArticle',
+        meta: { title: 'Edit Article', noCache: true },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: 'views/example/list',
+        name: 'ArticleList',
+        meta: { title: 'Article List', icon: 'list' }
+      }
+    ]
+  },
+
+  {
+    path: '/tab',
+    component: 'layout/Layout',
+    children: [
+      {
+        path: 'index',
+        component: 'views/tab/index',
+        name: 'Tab',
+        meta: { title: 'Tab', icon: 'tab' }
+      }
+    ]
+  },
+
+  {
+    path: '/error',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    name: 'ErrorPages',
+    meta: {
+      title: 'Error Pages',
+      icon: '404'
+    },
+    children: [
+      {
+        path: '401',
+        component: 'views/error-page/401',
+        name: 'Page401',
+        meta: { title: 'Page 401', noCache: true }
+      },
+      {
+        path: '404',
+        component: 'views/error-page/404',
+        name: 'Page404',
+        meta: { title: 'Page 404', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/error-log',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    children: [
+      {
+        path: 'log',
+        component: 'views/error-log/index',
+        name: 'ErrorLog',
+        meta: { title: 'Error Log', icon: 'bug' }
+      }
+    ]
+  },
+
+  {
+    path: '/excel',
+    component: 'layout/Layout',
+    redirect: '/excel/export-excel',
+    name: 'Excel',
+    meta: {
+      title: 'Excel',
+      icon: 'excel'
+    },
+    children: [
+      {
+        path: 'export-excel',
+        component: 'views/excel/export-excel',
+        name: 'ExportExcel',
+        meta: { title: 'Export Excel' }
+      },
+      {
+        path: 'export-selected-excel',
+        component: 'views/excel/select-excel',
+        name: 'SelectExcel',
+        meta: { title: 'Select Excel' }
+      },
+      {
+        path: 'export-merge-header',
+        component: 'views/excel/merge-header',
+        name: 'MergeHeader',
+        meta: { title: 'Merge Header' }
+      },
+      {
+        path: 'upload-excel',
+        component: 'views/excel/upload-excel',
+        name: 'UploadExcel',
+        meta: { title: 'Upload Excel' }
+      }
+    ]
+  },
+
+  {
+    path: '/zip',
+    component: 'layout/Layout',
+    redirect: '/zip/download',
+    alwaysShow: true,
+    meta: { title: 'Zip', icon: 'zip' },
+    children: [
+      {
+        path: 'download',
+        component: 'views/zip/index',
+        name: 'ExportZip',
+        meta: { title: 'Export Zip' }
+      }
+    ]
+  },
+
+  {
+    path: '/pdf',
+    component: 'layout/Layout',
+    redirect: '/pdf/index',
+    children: [
+      {
+        path: 'index',
+        component: 'views/pdf/index',
+        name: 'PDF',
+        meta: { title: 'PDF', icon: 'pdf' }
+      }
+    ]
+  },
+  {
+    path: '/pdf/download',
+    component: 'views/pdf/download',
+    hidden: true
+  },
+
+  {
+    path: '/theme',
+    component: 'layout/Layout',
+    redirect: 'noRedirect',
+    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: 'Clipboard Demo', icon: 'clipboard' }
+      }
+    ]
+  },
+
+  {
+    path: '/i18n',
+    component: 'layout/Layout',
+    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: 'External Link', icon: 'link' }
+      }
+    ]
+  },
+
+  { path: '*', redirect: '/404', hidden: true }
+]

src/router/index.js

@@ -116,6 +116,41 @@ export const constantRoutes = [
         name: 'List',
         component: () => import('@/views/goods/list'),
         meta: { title: '商品列表', icon: 'list' }
+      },
+      {
+        path: 'list/preferred',
+        name: 'PreferredProduct',
+        component: () => import('@/views/goods/list-preferred'),
+        meta: { title: '星范优选', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/preferential',
+        name: 'PreferentialProduct',
+        component: () => import('@/views/goods/list-preferential'),
+        meta: { title: '星范精品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/commonly',
+        name: 'CommonlyProduct',
+        component: () => import('@/views/goods/list-commonly'),
+        meta: { title: '常用商品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/select',
+        name: 'SelectProduct',
+        component: () => import('@/views/goods/list-select'),
+        meta: { title: '添加商品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
+      },
+      {
+        path: 'list/edit/:id(\\d+)',
+        name: 'EditGoods',
+        component: () => import('@/views/goods/goods-edit'),
+        meta: { title: '编辑商品', noCache: true, activeMenu: '/goods/list' },
+        hidden: true
       }
     ]
   },

src/views/dashboard/admin/components/TransactionTable.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { transactionList } from '@/api/remote-search'
+// import { transactionList } from '@/api/remote-search'
 
 export default {
   filters: {
@@ -46,9 +46,9 @@ export default {
   },
   methods: {
     fetchData() {
-      transactionList().then(response => {
+      /* transactionList().then(response => {
         this.list = response.data.items.slice(0, 8)
-      })
+      }) */
     }
   }
 }

src/views/goods/category.vue

@@ -13,41 +13,41 @@
       highlight-current-row
       style="width:100%;margin-top:20px;"
     >
-      <el-table-column align="center" label="序号" width="95">
+      <el-table-column align="center" label="序号">
         <template slot-scope="scope">
           {{ scope.$index }}
         </template>
       </el-table-column>
-      <el-table-column label="分类名称" align="center" prop="classifyName"></el-table-column>
-      <el-table-column label="分类图标" width="110" align="center" prop="classifyImage">
+      <el-table-column label="分类名称" align="center" prop="classifyName" />
+      <el-table-column label="分类图标" align="center" prop="classifyImage">
         <template slot-scope="{row}">
           <img :src="row.classifyImage" alt="">
         </template>
       </el-table-column>
-      <el-table-column label="排序值" width="110" align="center" prop="sort">
+      <el-table-column label="排序值" align="center" prop="sort">
         <template slot-scope="{row}">
-          <el-input v-model="row.sort" />
+          <el-input v-model="row.sort" style="width:60px;" size="small" />
         </template>
       </el-table-column>
-      <el-table-column label="邮费是否到付" width="110" align="center" prop="postage">
+      <el-table-column label="邮费是否到付" align="center" prop="postage">
         <template slot-scope="{row}">
           {{ row.postage }}
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="状态" width="110" align="center" prop="status">
+      <el-table-column class-name="status-col" label="状态" align="center" prop="status">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">{{ row.status*1 === 1 ? '启用' : '停用' }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="添加时间" width="200" prop="addTime">
+      <el-table-column align="center" label="添加时间" prop="addTime">
         <template slot-scope="{row}">
-          <i class="el-icon-time"></i>
+          <i class="el-icon-time" />
           <span>{{ row.addTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Actions" align="center" width="110" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <router-link :to="'/goods/category/edit/' + row.id "><el-button type="primary">编辑</el-button></router-link>
+          <router-link :to="'/goods/category/edit/' + row.id "><el-button type="primary" size="small">编辑</el-button></router-link>
         </template>
       </el-table-column>
     </el-table>
@@ -130,6 +130,7 @@ export default {
         ]
       })
       this.listLoading = false
+      this.total = 10
     }
   }
 }

src/views/goods/list-commonly.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="small">取消</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '4',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list-preferential.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '3',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list-preferred.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '2',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list-select.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="app-container">
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">选择商品</el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-check">确定选择</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-close" @click="toggleSelection()">取消选择</el-button>
+    </div>
+
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="成本价" align="center" prop="costPrice">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="售价" align="center" prop="retailPrice">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="起订量" align="center" prop="minBuyNumber">
+        <template slot-scope="{row}">
+          <el-input v-model="row.normalPrice" style="width:60px;" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="classifyID">
+        <template slot-scope="{row}">
+          <el-select v-model="row.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="">
+            <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '1',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      },
+      multipleSelection: []
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row)
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

src/views/goods/list.vue

@@ -1,14 +1,214 @@
 <template>
   <div class="app-container">
-    {{ msg }}
+
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1"><router-link to="/goods/list">全部商品</router-link></el-menu-item>
+      <el-menu-item index="2"><router-link to="/goods/list/preferred">星范优选</router-link></el-menu-item>
+      <el-menu-item index="3"><router-link to="/goods/list/preferential">星范精品</router-link></el-menu-item>
+      <el-menu-item index="4"><router-link to="/goods/list/commonly">常用商品</router-link></el-menu-item>
+    </el-menu>
+
+    <div class="filter-container" style="margin-top:20px;">
+      <el-input v-model="listQuery.form.id" placeholder="商品ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.productName" placeholder="商品名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.form.shopName" placeholder="供应商名称" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.form.validFlag" placeholder="商品状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="已上架" value="1" />
+        <el-option label="已下架" value="2" />
+      </el-select>
+      <el-select v-model="listQuery.form.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <!-- <el-option v-for="item in productsClassifyList" :key="item.id" :label="item.classifyName" :value="item.id" /> -->
+      </el-select>
+      <el-select v-model="listQuery.form.preferredProduct" placeholder="星范优选" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="是" value="1" />
+        <el-option label="否" value="0" />
+      </el-select>
+      <el-select v-model="listQuery.form.commonlyProduct" placeholder="常用商品" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="是" value="1" />
+        <el-option label="否" value="0" />
+      </el-select>
+      <el-select v-model="listQuery.form.preferentialProduct" placeholder="星范精品" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option label="是" value="1" />
+        <el-option label="否" value="0" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">
+        <router-link to="/goods/list/select">添加商品</router-link>
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;margin-top:20px;"
+    >
+      <el-table-column align="center" label="序号">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品ID" align="center" prop="id" />
+      <el-table-column label="商品图片" align="center" prop="classifyImage">
+        <template slot-scope="{row}">
+          <img :src="row.mainImage" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="productName" />
+      <el-table-column label="供应商名称" align="center" prop="shopName" />
+      <el-table-column label="市场价" align="center" prop="normalPrice" />
+      <el-table-column label="成本价" align="center" prop="costPrice" />
+      <el-table-column label="售价" align="center" prop="retailPrice" />
+      <el-table-column label="起订量" align="center" prop="minBuyNumber" />
+      <el-table-column label="星范优选" align="center" prop="preferredProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="星范精品" align="center" prop="preferentialProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="常用商品" align="center" prop="commonlyProduct">
+        <template slot-scope="{row}">
+          <el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="商品状态" align="center" prop="validFlag">
+        <template slot-scope="{row}">
+          <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品分类" align="center" prop="productClassifyName" />
+      <el-table-column align="center" label="添加时间" prop="addTime">
+        <template slot-scope="{row}">
+          <i class="el-icon-time" />
+          <span>{{ row.addTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <router-link :to="'/goods/edit/' + row.id "><el-button type="primary" size="small">编辑</el-button></router-link>
+          <el-button type="primary" size="small">上架</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
+
   </div>
 </template>
 
 <script>
+import { getList } from '@/api/goods'
+import Pagination from '@/components/Pagination'
 export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
   data() {
     return {
-      msg: '商品列表'
+      list: null,
+      listLoading: true,
+      total: 0,
+      activeIndex: '1',
+      listQuery: {
+        page: 1,
+        limit: 10,
+        form: {
+          id: '',
+          classifyImage: '',
+          productName: '',
+          shopName: '',
+          normalPrice: '', // 市场价',
+          costPrice: '', // 成本价',
+          retailPrice: '', // '售价',
+          minBuyNumber: '', // '最小起订量',
+          preferredProduct: '', // 是否是优选商品：0不是优选,1优选商品',
+          commonlyProduct: '', // 是否是常用商品：0不是常用,1常用商品',
+          preferentialProduct: '', // 是否是星范精品：0不是精品,1星范精品商品',
+          validFlag: '', // '商品状态,1已上架,2已下架',
+          productClassifyName: '', // '对应cm_mall_products_classify商品分类表id',
+          addTime: '', //  '添加时间',
+          organizeID: this.organizeID // '组织ID,具体对应cm_mall_organize表ID',
+        }
+      }
+    }
+  },
+  computed: {
+    organizeID() {
+      return this.$store.state.settings.organizeID
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          },
+          {
+            id: 0,
+            classifyImage: '',
+            productName: 'hahaah',
+            shopName: '',
+            normalPrice: '',
+            costPrice: '',
+            retailPrice: '',
+            minBuyNumber: '',
+            preferredProduct: '',
+            commonlyProduct: '',
+            preferentialProduct: '',
+            validFlag: '',
+            productClassifyName: 0,
+            addTime: '',
+            organizeID: this.organizeID
+          }
+        ]
+      })
+      this.listLoading = false
+      this.total = 2
+    },
+    handleFilter() {
+      alert('搜索')
+    },
+    handleCreate() {
+      alert('添加')
     }
   }
 }