首页 > 其他分享 >VUE后台管理系统(三)

VUE后台管理系统(三)

时间：2023-08-17 14:12:25浏览次数：33  
标签：sku Sku VUE 管理系统 res ...... limit 后台 ###

SKU管理模块 开发

  • 先完成静态组件
### Sku.index.vue

<template>
  <div>
    <el-table style="width: 100%" border >
      <el-table-column type="index" label="序号" width="80px" align="center">
      </el-table-column>

      <el-table-column prop="prop" label="名称" width="width">
      </el-table-column>

      <el-table-column prop="prop" label="描述" width="width">
      </el-table-column>

      <el-table-column prop="prop" label="默认图片" width="110">
      </el-table-column>

      <el-table-column prop="prop" label="重量" width="80">
      </el-table-column>

      <el-table-column prop="prop" label="价格" width="80">
      </el-table-column>

      <el-table-column prop="prop" label="操作" width="width">
      </el-table-column>

    </el-table>

    <!--
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      page-sizes: 选择器,每页选择显示几条数据,[3,5,10]
      page-count: 页码数量,必须奇数
      layout: 组件布局
    -->
    <el-pagination style="margin-top: 20px;textAlign:center" :current-page="page" :page-size="limit"
      :page-sizes="[3,5,10]" :page-count="7" :total="total" layout="prev,pager,next,jumper,->,sizes,total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'Sku'
  }
</script>

<style>
</style>
  • 配置请求并存储后端返回的数据
### product.sku.js
......
export const reqSkuList = (page,limit)=>request({url:`/admin/product/list/${page}/${limit}`,method:'get'})

### Sku.index.vue
......
<script>
  export default {
    name:'Sku',
    data(){
      return {
        // 分页相关
        page:1,
        limit:10,
        total:0,
        // 存储SKU列表数据
        records:[]
      }
    },
    methods:{

      async getSkuList(){
        const {page,limit} = this;
        let res = await this.$API.sku.reqSkuList(page,limit)
        if(res.code == 200){
          this.records = res.data.records
          this.total = res.data.total
        }
      }
    },
    mounted(){
      this.getSkuList() // 挂载完毕即发请求
    },
  }
</script>
  • 渲染数据
### Sku.index.vue

<template>
  <div>
  	<!--数据源:data-->
    <el-table style="width: 100%" border :data="records">
      <el-table-column type="index" label="序号" width="80px" align="center">
      </el-table-column>
	  <!--渲染数据-->
      <el-table-column prop="skuName" label="名称" width="width">
      </el-table-column>

      <el-table-column prop="skuDesc" label="描述" width="width">
      </el-table-column>

      <el-table-column label="默认图片" width="110">
        <template slot-scope="{row,$index}">
          <img :src="row.skuDefaultImg" style="width: 80px;height: 80px;">
        </template>
      </el-table-column>

      <el-table-column prop="weight" label="重量" width="80">
      </el-table-column>

      <el-table-column prop="price" label="价格" width="80">
      </el-table-column>

      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{row,$index}">
          <el-button type="success" icon="el-icon-sort-down" size="mini"></el-button>
          <el-button type="success" icon="el-icon-sort-up" size="mini"></el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="info" icon="el-icon-info" size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
      
    </el-table>
	<!--绑定页码事件和每页展示数据量事件-->
    <el-pagination style="margin-top: 20px;textAlign:center" :current-page="page" :page-size="limit"
      :page-sizes="[3,5,10]" :page-count="7" :total="total" layout="prev,pager,next,jumper,->,sizes,total"
      @current-change="getSkuList" @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'Sku',
    ......
    methods:{

      async getSkuList(pages=1){
       ......
      },
      // 每页展示多少条数据
      handleSizeChange(limit){
        this.limit = limit
        this.getSkuList()
      }
    },
   ......
  }
</script>

SKU商品的"上架"与"下架" 功能实现

  • 结构互斥,是否上架由isSale字段来决定
......
<!--互斥-->
<el-button type="success" icon="el-icon-sort-down" size="mini" v-if="row.isSale==0"></el-button>
<el-button type="success" icon="el-icon-sort-up" size="mini" v-else></el-button>
  • 发请求通知后端,用户的动作(是'上架'还是'下架')
### product.sku.js
......
// 通知SKU商品是否'上架'
export const reqCancel = (skuId)=>request({url:`/admin/product/cancelSale/${skuId}`,method:'get'})
  • 绑定点击事件并书写逻辑
### Sku.index.vue
......
<el-table-column prop="prop" label="操作" width="width">
	<template slot-scope="{row,$index}">
	  <!--绑定两个点击事件-->
	  <el-button type="success" icon="el-icon-sort-down" size="mini" v-if="row.isSale==0" @click="sale(row)"></el-button>
	  <el-button type="success" icon="el-icon-sort-up" size="mini" v-else @click="cancel(row)"></el-button>
	  ......
	</template>
</el-table-column>
......
async sale(sku){
	let res = await this.$API.sku.reqCancel(sku.id)
	if(res.code == 200){
	  sku.isSale = 1;
	  this.$message({type:'success',message:'上架成功'})
	}
},
async cancel(sku){
	let res = await this.$API.sku.reqCancel(sku.id)
	if(res.code == 200){
	  sku.isSale = 0;
	  this.$message({type:'success',message:'下架成功'})
	}
}

获取SKU详情 功能实现

  • 配置请求
### product.sku.js
......
// 获取SKU详情
export const reqSkuById = (skuId)=>request({url:`/admin/product/getSkuById/${skuId}`,method:'get'})
  • 搞定静态组件
### Sku.index.vue
......
 <el-pagination> 
 ......
</el-pagination>

<!--SKU详情抽屉效果-->
<el-drawer
  :visible.sync="drawer"
  :direction="direction"
  :show-close="false"
  size="50%"
  >
  <el-row>
	<el-col :span="5">名称</el-col>
	<el-col :span="16">sku</el-col>
  </el-row>

  <el-row>
	<el-col :span="5">名称</el-col>
	<el-col :span="16">sku</el-col>
  </el-row>

  <el-row>
	<el-col :span="5">名称</el-col>
	<el-col :span="16">sku</el-col>
  </el-row>

  <el-row>
	<el-col :span="5">名称</el-col>
	<el-col :span="16">sku</el-col>
  </el-row>

  <el-row>
	<el-col :span="5">名称</el-col>
	<el-col :span="16">sku</el-col>
  </el-row>

</el-drawer>
......
<script>
  export default {
    name:'Sku',
    data(){
      return {
       ......
        // 抽屉效果
        drawer: false,
        direction: 'rtl',
      }
    },
    methods:{
     ......
      async getSkuInfo(sku){
		// 若把逻辑写在"发请求"后面,会造成抽屉效果'延迟',故放到前面
        this.drawer = true; // 抽屉展示SKU详情
        let res= await this.$API.sku.reqSkuById(sku.id)
        ......
      },
    },
  }
</script>

标签：sku,Sku,VUE,管理系统,res,......,limit,后台,###
From： https://www.cnblogs.com/qinganning/p/17637414.html

相关文章

  • vue项目在360浏览器兼容模式下SCRIPT1002: 语法错误以及“fetch”未定义问题解决
    使用360浏览器的兼容模式，vue项目页面空白，打开控制台，发现如下报错：SCRIPT1002:语法错误 解决方法如下：1、安装依赖npminstall--savecore-jsregenerator-runtime2、在main.js引入import'core-js/stable';import'regenerator-runtime/runtime';3、在babel.confi......
  • 智能仓储管理系统（自动化仓库管理解决方案）
        企业实际的仓储管理中，往往会出现那样这样的错误，归根结底，主要是由于没使用合适的仓库管理工具。相反，人工使用合适的仓库管理工具，不仅可以在日常仓库管理方法中根据采集到的产品信息数据，大大地提高管理效率，降低库存实际管控成本，还可降低人工管理库存的操作失误，智能化仓储......
  • 智能仓储管理系统（自动化仓库管理解决方案）
        企业实际的仓储管理中，往往会出现那样这样的错误，归根结底，主要是由于没使用合适的仓库管理工具。相反，人工使用合适的仓库管理工具，不仅可以在日常仓库管理方法中根据采集到的产品信息数据，大大地提高管理效率，降低库存实际管控成本，还可降低人工管理库存的操作失误，智能化仓储......
  • Vuejs装饰器风格开发教程（计算属性、事件派发、侦听器）
    计算属性计算属性的设计背景：在Vuejs开发时我们可以在模板中通过编写表达式的方式做一系列的逻辑处理，但这就偏离的模板的概念，还会使得模板的内容变得臃肿且难以维护，所以引入了计算属性的来对不该出现在模板中的复杂逻辑处理进行重构，使用计算属性重构后的依然保持了状态的响应式......
  • 会议记录管理系统-计算机毕业设计源码+LW文档
    摘 要随着信息技术的发展，管理系统越来越成熟，各种企事业单位使用各种类型的管理系统来提高工作效率，从而降低手工劳动的弊端。公司一直以来都非常重视公司信息化的发展，近几年来随着公司规模扩大，业务逐渐增加，公司对会员的管理也愈发的困难。因此，公司提出通过开发会议记录管理系统......
  • 简单高效的api文档管理系统是如何提升工作效率的?
    简单高效的api文档管理系统是如何提升工作效率的?轻松管理文档，提高协作效率在现代软件开发过程中，api文档的管理至关重要。一套简单高效的api文档管理系统可以极大地提升工作效率，并且减少文档管理方面的麻烦。那么，api文档管理系统到底有什么特点？在日常工作中使用起来又有哪些好处呢？......
  • [18章]Vue3+NestJS 全栈开发企业级管理后台
    点击下载：[18章]Vue3+NestJS全栈开发企业级管理后台提取码：zzbv Next.js是一个用于构建现代化React应用程序的框架。它强调性能、开发体验和SEO优化，是许多React开发者的首选。Next.js提供了许多功能，包括：服务器渲染：Next.js允许在服务器端渲染React应用程序，从而提高了应......
  • 数据库管理系统——Oracle
    学习视频：01-day01-oracle-数据库相关概念介绍_哔哩哔哩_bilibili Oracle管理系统的介绍Oracle数据库的数据管理（增删改查）Oracle账户管理Oracle二维表管理 Oracle是市场上目前很流行的大型数据库，适用于大型项目的数据存储。合理的管理数据的存储和读取。 软件的安装和卸......
  • 基于springcolud微服务的超市仓库管理系统
    随着信息技术和网络技术的飞速发展，人类已进入全新信息化时代，传统管理技术已无法高效，便捷地管理信息。为了迎合时代需求，优化管理效率，各种各样的管理系统应运而生，各行各业相继进入信息管理时代，超市仓库管理系统就是信息时代变革中的产物之一。任何系统都要遵循系统设计的基本流程，本系......
  • 基于SSM的毕业生就业管理系统
    毕业生就业管理系统是为学生和企业单位提供规范化科学化的求职招聘管理平台，本系统的研发设计能够提升毕业生求职招聘的管理效率。传统的毕业生管理采用手工管理的方式，各种招聘报名、简历递送和面试录用管理都采用手工登记处理，这种管理手段在短期的活动结束之后，可以方便的进行查看统......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99