添加商品页面页面

src/assets/css/global.css

@@ -26,4 +26,11 @@ html, body , #app {
 }
 .el-cascader-panel {
     height: 300px;
+}
+.el-steps {
+    margin: 15px 0px;
+}
+
+.el-step__title {
+    font-size: 13px;
 }

src/components/Home.vue

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 18:27:01
- * @LastEditTime: 2021-11-21 22:36:07
+ * @LastEditTime: 2021-11-29 22:56:05
 -->
 
 <template>
@@ -52,7 +52,8 @@
             <el-menu-item :index="'/'+subItem.path"
                           v-for="subItem in item.children"
                           :key="subItem.id+''"
-                          @click="saveNavState('/'+subItem.path)">
+                          @click="saveNavState('/'+subItem.path)"
+                          style="margin-left:15px">
               <!-- 二级菜单模板区 -->
               <template slot="title">
                 <!-- 图标 -->

src/components/goods/Add.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-29 22:13:51
+ * @LastEditTime: 2021-11-29 23:03:29
+-->
+<template>
+  <div>
+    <!-- 面包屑导航区 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{path:'/goods'}">商品列表</el-breadcrumb-item>
+      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- 卡片区 -->
+    <el-card>
+      <!-- 提示区域 -->
+      <el-alert title="添加商品信息"
+                center
+                show-icon
+                :closable="false"
+                type="info">
+      </el-alert>
+      <!-- 步骤条 -->
+      <el-steps :space="200"
+                :active="activeIndex"
+                finish-status="success"
+                align-center>
+        <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>
+      <!-- tab栏区域 -->
+      <el-tabs :tab-position="tabPosition"
+               style="height: 200px;">
+        <el-tab-pane label="基本信息">基本信息</el-tab-pane>
+        <el-tab-pane label="商品参数">商品参数</el-tab-pane>
+        <el-tab-pane label="商品属性">商品属性</el-tab-pane>
+        <el-tab-pane label="商品图片">商品图片</el-tab-pane>
+        <el-tab-pane label="商品内容">商品内容</el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      activeIndex: 0,
+      tabPosition: 'left'
+    }
+  },
+  created () {
+
+  },
+  methods: {
+
+  },
+  computed: {
+
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

src/components/goods/GoodsList.vue

@@ -0,0 +1,157 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-28 15:48:07
+ * @LastEditTime: 2021-11-29 22:13:11
+-->
+<template>
+  <div>
+    <!-- 面包屑导航区 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- 卡片区域 -->
+    <el-card>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-input placeholder="请输入内容"
+                    v-model="queryInfo.query"
+                    clearable
+                    @clear="getGoodsList">
+            <el-button slot="append"
+                       icon="el-icon-search"
+                       @click="getGoodsList"></el-button>
+          </el-input>
+        </el-col>
+
+        <el-col :span="4">
+          <el-button type="primary"
+                     icon="el-icon-search"
+                     @click="goAddPage">添加商品</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="goodsList"
+                border
+                stripe>
+        <el-table-column label="#"
+                         type="index"
+                         width="50px">
+        </el-table-column>
+        <!-- <el-table-column label="商品编号"
+                         prop="goods_id"
+                         width="90px">
+        </el-table-column> -->
+        <el-table-column label="商品名称"
+                         prop="goods_name">
+        </el-table-column>
+        <el-table-column label="商品价格(元)"
+                         prop="goods_price"
+                         width="90px">
+        </el-table-column>
+        <el-table-column label="商品数量(个)"
+                         prop="goods_number"
+                         width="70px">
+        </el-table-column>
+        <el-table-column label="商品重量"
+                         prop="goods_weight"
+                         width="70px">
+        </el-table-column>
+        <el-table-column label="
+                         创建时间"
+                         prop="add_time"
+                         width="140px">
+          <template slot-scope="scope">
+            {{scope.row.add_time | dateFormat}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作"
+                         width="130px">
+          <template slot-scope="scope">
+            <el-button type="primary"
+                       icon="el-icon-edit"
+                       size="mini">编辑</el-button>
+            <el-button type="danger"
+                       icon="el-icon-delete"
+                       size="mini"
+                       @click="removeById(scope.row.goods_id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination @size-change="handleSizeChange"
+                     @current-change="handleCurrentChange"
+                     :current-page="queryInfo.pagenum"
+                     :page-sizes="[10, 20, 50, 100]"
+                     :page-size="queryInfo.pagesize"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      queryInfo: {
+        query: '',
+        pagenum: 1,
+        pagesize: 10
+      },
+      goodsList: [],
+      total: 0
+    }
+  },
+  created () {
+    this.getGoodsList()
+  },
+  methods: {
+    async getGoodsList () {
+      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.goodsList = res.data.goods
+      this.total = res.data.total
+    },
+    handleSizeChange (newSize) {
+      this.queryInfo.pagesize = newSize
+      this.getGoodsList()
+    },
+    handleCurrentChange (newPage) {
+      this.queryInfo.pagenum = newPage
+      this.getGoodsList()
+    },
+    async removeById (id) {
+      const confirmResule = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      if (confirmResule !== 'confirm') {
+        return this.$message.info('取消删除')
+      }
+      const { data: res } = await this.$http.delete(`goods/${id}`)
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.$message.success(res.meta.msg)
+      this.getGoodsList()
+    },
+    // 路由转跳
+    goAddPage () {
+      this.$router.push('/goods/add')
+    }
+  },
+  computed: {
+
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

src/main.js

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 23:56:19
- * @LastEditTime: 2021-11-23 21:12:57
+ * @LastEditTime: 2021-11-28 16:22:39
  */
 import Vue from 'vue'
 import App from './App.vue'
@@ -31,6 +31,17 @@ Vue.prototype.$http = axios
 Vue.config.productionTip = false
 
 Vue.component('tree-table', TreeTable)
+// 全局过滤器
+Vue.filter('dateFormat', function (originVal) {
+    const dt = new Date(originVal)
+    const y = dt.getFullYear()
+    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+    const d = (dt.getDate() + '').padStart(2, '0')
+    const hh = (dt.getHours() + '').padStart(2, '0')
+    const mm = (dt.getMinutes() + '').padStart(2, '0')
+    const ss = (dt.getSeconds() + '').padStart(2, '0')
+    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+})
 new Vue({
     router,
     render: h => h(App)

src/plugins/element.js

@@ -3,14 +3,14 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 23:56:19
- * @LastEditTime: 2021-11-25 23:13:27
+ * @LastEditTime: 2021-11-29 22:49:05
  */
 import Vue from 'vue'
 import {
     Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Footer,
     Menu, MenuItem, Submenu, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table,
     TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select,
-    Option, Cascader, Alert, Tabs, TabPane
+    Option, Cascader, Alert, Tabs, TabPane, Step, Steps
 } from 'element-ui'
 Vue.use(Button)
 Vue.use(Form)
@@ -43,5 +43,7 @@ Vue.use(Cascader)
 Vue.use(Alert)
 Vue.use(Tabs)
 Vue.use(TabPane)
+Vue.use(Steps)
+Vue.use(Step)
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm

src/router/index.js

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 23:56:19
- * @LastEditTime: 2021-11-25 22:54:12
+ * @LastEditTime: 2021-11-29 22:43:27
  */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
@@ -15,6 +15,10 @@ import Rights from '../components/power/Rights.vue'
 import Roles from '../components/power/Roles.vue'
 import Cate from '../components/goods/Cate.vue'
 import Params from '../components/goods/Params.vue'
+import GoodsList from '../components/goods/GoodsList.vue'
+import Add from '../components/goods/Add.vue'
+
+
 Vue.use(VueRouter)
 
 const routes = [
@@ -56,7 +60,19 @@ const routes = [
             {
                 path: '/params',
                 component: Params
+            },
+            {
+                path: '/goods',
+                component: GoodsList,
+                children: [
+
+                ]
+            },
+            {
+                path: '/goods/add',
+                component: Add
             }
+
         ]
     }
 ]