|
@@ -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>
|