diff --git a/src/assets/css/globel.css b/src/assets/css/globel.css
index f49681b..5ebaad7 100644
--- a/src/assets/css/globel.css
+++ b/src/assets/css/globel.css
@@ -19,4 +19,10 @@ html,body,#app{
 }
 .el-pagination {
     margin-top: 15px;
+}
+.el-steps{
+    margin-top: 10px;
+}
+.el-step__title{
+    font-size: 13px;
 }
\ No newline at end of file
diff --git a/src/components/goods/edit.vue b/src/components/goods/edit.vue
new file mode 100644
index 0000000..4329ea1
--- /dev/null
+++ b/src/components/goods/edit.vue
@@ -0,0 +1,210 @@
+<template>
+<div class="goods-add">
+  <el-breadcrumb separator-class="el-icon-arrow-right">
+    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+    <el-breadcrumb-item>添加商品</el-breadcrumb-item>
+  </el-breadcrumb>
+  <el-card>
+    <el-alert
+      title="添加商品信息"
+      type="info" center show-icon :closable="false">
+    </el-alert>
+
+    <el-steps :active="active - 0" align-center finish-status="process">
+      <el-step title="基本信息"></el-step>
+      <el-step title="商品参数"></el-step>
+      <el-step title="商品属性"></el-step>
+      <el-step title="商品图片"></el-step>
+      <el-step title="商品内容"></el-step>
+      <el-step title="商品完成"></el-step>
+    </el-steps>
+
+    <el-form ref="form" :model="form" label-width="100px" :rules="rules" label-position="top">
+      <el-tabs  tab-position="left"  v-model="active" :before-leave="tabSwitch" @tab-click="tabClick">
+        <el-tab-pane label="基本信息" name="0">
+          <el-form-item label="商品名称" prop="goods_name">
+            <el-input v-model="form.goods_name"></el-input>
+          </el-form-item>
+          <el-form-item label="商品价格" prop="goods_price">
+            <el-input type="number" v-model="form.goods_price"></el-input>
+          </el-form-item>
+          <el-form-item label="商品重量" prop="goods_weight">
+            <el-input v-model="form.goods_weight" type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="商品数量" prop="goods_number">
+            <el-input type="number" v-model="form.goods_number"></el-input>
+          </el-form-item>
+
+          <el-form-item label="商品分类" prop="goods_cat">
+
+            <el-cascader
+              :options="category" :props="selectedOptions"
+              v-model="selectKey"
+              @change="handleChange"></el-cascader>
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane label="商品参数" name="1">
+
+          <el-form-item :key="item.attr_id" v-for="item in many" :label="item.attr_name">
+            <el-checkbox-group @change="change" v-model="item.attr_vals">
+              <el-checkbox border v-for="(v,i) in item.attr_vals"  :key="i" :label="v"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane name="2" label="商品属性">
+          <el-form-item :key="item.attr_id" v-for="item in only" :label="item.attr_name">
+            <el-checkbox-group  v-model="item.attr_vals">
+              <el-checkbox border v-for="(v,i) in item.attr_vals"  :key="i" :label="v"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane name="3"
+                     label="商品图片">
+
+          <el-upload
+            :headers="headers"
+            :action="uploadUrl"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-success="uploadSuccess"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </el-tab-pane>
+        <el-tab-pane name="4" label="商品内容">商品内容</el-tab-pane>
+      </el-tabs>
+    </el-form>
+  </el-card>
+
+  <el-dialog
+    title="预览"
+    :visible.sync="picVisible"
+    width="50%"
+    >
+    <img class="preview-pic" :src="imageUrl" alt="">
+  </el-dialog>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'add',
+  data () {
+    return {
+      active: '0',
+      form: {
+        goods_name: '',
+        goods_price: 0,
+        goods_weight: 0,
+        goods_number: 0,
+        goods_cat: '',
+        pics: []
+      },
+      selectedOptions: {
+        label: 'cat_name',
+        value: 'cat_id',
+        children: 'children',
+        expandTrigger: 'hover'
+      },
+      uploadUrl: 'http://127.0.0.1:8888/api/private/v1/upload',
+      many: [],
+      only: [],
+      headers: {
+        Authorization: window.sessionStorage.getItem('token')
+      },
+      selectKey: [],
+      category: [],
+      imageUrl: '',
+      picVisible: false,
+      rules: {
+        goods_name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        goods_price: [
+          { required: true, message: '请输入价格', trigger: 'blur' }
+        ],
+        goods_weight: [
+          { required: true, message: '请输入重量', trigger: 'blur' }
+        ],
+        goods_number: [
+          { required: true, message: '请输入数量', trigger: 'blur' }
+        ],
+        goods_cat: [
+          {
+            required: true, message: '请选择商品分类'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    uploadSuccess (response) {
+      if (response.meta.status !== 200) {
+        return this.$message.error(response.meta.msg)
+      }
+      this.form.pics.push({
+        pic: response.data.tmp_path
+      })
+    },
+    handleRemove (file) {
+      const path = file.response.data.tmp_path
+      this.form.pics.splice(this.form.pics.indexOf(path), 1)
+    },
+    handlePreview (file) {
+      this.imageUrl = file.response.data.url
+      this.picVisible = true
+    },
+    async threeCategories (type) {
+      const { data: res } = await this.$http.get(`categories/${this.selectKey[2]}/attributes`, {
+        params: {
+          sel: type
+        }
+      })
+      this[type] = res.data
+      this[type].forEach(item => {
+        item.attr_vals = item.attr_vals.length > 0 ? item.attr_vals.split(' ') : []
+      })
+    },
+    tabClick () {
+      if (this.active === '1') {
+        this.threeCategories('many')
+      } else if (this.active === '2') {
+        this.threeCategories('only')
+      }
+    },
+    tabSwitch (dist, source) {
+      if (source === '0') {
+        if (this.selectKey.length !== 3) {
+          this.$message.error('请先选择分类')
+          return false
+        }
+      }
+    },
+    handleChange () {
+      if (this.selectKey.length !== 3) {
+        this.selectKey = []
+      } else {
+        this.form.goods_cat = this.selectKey.join(',')
+      }
+    },
+    async categories () {
+      const { data: res } = await this.$http.get('categories')
+      this.category = res.data
+    }
+  },
+  mounted () {
+    this.categories()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-checkbox{
+  margin: 0 5px 0 0;
+}
+  .preview-pic{
+    width: 100%;
+  }
+</style>
diff --git a/src/components/goods/goods.vue b/src/components/goods/goods.vue
index 0f2fe1e..a9ba965 100644
--- a/src/components/goods/goods.vue
+++ b/src/components/goods/goods.vue
@@ -1,12 +1,124 @@
 <template>
     <div class="goods">
-        <pre v-text="$attrs"/>
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <el-card class="box-card">
+        <el-row :gutter="10">
+         <el-col :span="8">
+           <el-input class="input-with-select" v-model="query.query" placeholder="请输入内容" clearable>
+             <el-button slot="append" icon="el-icon-search" @click="list"></el-button>
+           </el-input>
+
+         </el-col>
+         <el-col :span="4">
+           <el-button @click="edit" type="primary">添加商品</el-button>
+         </el-col>
+        </el-row>
+
+        <el-table
+          :data="data" border stripe
+          style="width: 100%">
+          <el-table-column
+            type="index"
+            label="#">
+          </el-table-column>
+          <el-table-column
+            prop="goods_name"
+            label="商品内容"
+            >
+          </el-table-column>
+          <el-table-column
+            prop="goods_price"
+            label="商品价格（元）" width="100">
+          </el-table-column>
+          <el-table-column
+            prop="goods_weight"
+            label="商品重量（g）" width="100">
+          </el-table-column>
+          <el-table-column
+            prop="add_time"
+            label="商品创建时间" width="150">
+            <template slot-scope="scope">
+              {{scope.row.add_time*1000 | dataFormat}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作">
+            <template slot-scope="scope">
+              <el-button @click="edit(scope.row)" size="mini" icon="el-icon-edit" type="primary"></el-button>
+              <el-button size="mini" icon="el-icon-delete" @click="del(scope.row.goods_id)" type="danger"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="query.pagenum"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="query.pagesize"
+          layout="total, sizes, prev, pager, next, jumper" background
+          :total="total">
+        </el-pagination>
+      </el-card>
+
     </div>
 </template>
 
 <script>
 export default {
   props: {
+  },
+  data () {
+    return {
+
+      data: [],
+      query: {
+        query: '',
+        pagenum: 1,
+        pagesize: 10
+      },
+      total: 0
+    }
+  },
+  methods: {
+    edit () {
+      this.$router.push('/goods/add')
+    },
+    del (id) {
+      this.$confirm('确定删除么？').then(_ => {
+        this.$http.delete('goods/' + id).then(response => {
+          const res = response.data
+          if (res.meta.status !== 200) {
+            return this.$message.error(res.meta.msg)
+          }
+          this.$message.success(res.meta.msg)
+          this.list()
+        })
+      }).catch(error => error)
+    },
+    handleSizeChange (val) {
+      this.query.pagesize = val
+      this.list()
+    },
+    handleCurrentChange (val) {
+      this.query.pagenum = val
+      this.list()
+    },
+    async list () {
+      const { data: res } = await this.$http.get('goods', {
+        params: this.query
+      })
+      this.data = res.data.goods
+      this.total = res.data.total
+    }
+  },
+  mounted () {
+    this.list()
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 2980fa1..c23fb8b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,10 +10,23 @@ import axios from 'axios'
 
 Vue.component('table-tree', tableTree)
 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
+// 为每个请求头挂一个 token
 axios.interceptors.request.use(config => {
   config.headers.Authorization = sessionStorage.getItem('token')
   return config
 })
+
+Vue.filter('dataFormat', (time) => {
+  const dt = (new Date(time))
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  const H = dt.getHours().toString().padStart(2, '0')
+  const i = dt.getMinutes().toString().padStart(2, '0')
+  const s = dt.getSeconds().toString().padStart(2, '0')
+  return `${y}-${m}-${d} ${H}:${i}:${s}`
+})
+
 Vue.prototype.$http = axios
 Vue.use(ElementUI)
 
diff --git a/src/router/router.js b/src/router/router.js
index 234ae82..b23cb84 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -8,6 +8,8 @@ import access from '../components/access/access'
 import roles from '../components/access/roles'
 import categories from '../components/goods/categories'
 import params from '../components/goods/params'
+import goods from '../components/goods/goods'
+import goodsEdit from '../components/goods/edit'
 
 Vue.use(VueRouter)
 
@@ -24,7 +26,9 @@ const routes = [
       { path: '/rights', component: access },
       { path: '/roles', component: roles },
       { path: '/categories', component: categories },
-      { path: '/params', component: params }
+      { path: '/params', component: params },
+      { path: '/goods', component: goods },
+      { path: '/goods/add', component: goodsEdit }
     ]
   }
 ]