后台管理系统: sku管理模块

news2024/11/18 6:22:03

完成添加SKU静态组件

完成添加SKU静态组件

点击添加sku，触发回调，场景为2

静态界面完成

<template>

  <div>

    <el-form ref="form" label-width="80px">

      <el-form-item label="SPU名称"> 海绵宝宝 </el-form-item>

      <el-form-item label="SKU名称">

        <el-input placeholder="sku名称"></el-input>

      </el-form-item>

      <el-form-item label="价格(元)">

        <el-input placeholder="价格(元)"></el-input>

      </el-form-item>

      <el-form-item label="重量(千克)">

        <el-input placeholder="重量(千克)"></el-input>

      </el-form-item>

      <el-form-item label="规格描述">

        <el-input type="textarea" rows="4"></el-input>

      </el-form-item>

      <el-form-item label="平台属性">

        <el-form ref="form" label-width="80px" :inline="true">

          <el-form-item label="屏幕尺寸">

            <el-select placeholder="请选择" value="">

              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>

            </el-select>

          </el-form-item>

        </el-form>

      </el-form-item>

      <el-form-item label="销售属性">

        <el-form ref="form" label-width="80px" :inline="true">

          <el-form-item label="颜色">

            <el-select placeholder="请选择" value="">

              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>

            </el-select>

          </el-form-item>

        </el-form>

      </el-form-item>

      <el-form-item label="图片列表">

        <el-table style="width: 100%" border>

          <el-table-column type="selection" prop="prop" label="label" width="80"> </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="width"> </el-table-column>

        </el-table>

      </el-form-item>

      <el-form-item>

        <el-button type="primary">保存</el-button>

        <el-button>取消</el-button>

      </el-form-item>

    </el-form>

  </div>

</template>



<script>

export default {}

</script>



<style>

</style>

获取添加sku的数据

http://localhost:9529/dev-api/admin/product/spuImageList/5704

http://localhost:9529/dev-api/admin/product/spuSaleAttrList/5704

http://localhost:9529/dev-api/admin/product/attrInfoList/1/1/1

在父组件上给他打一个节点，通过父组件调用子组件的方法，让子组件发请求----三个请求

回到子组件重新书写方法

然后书写三个接口

import request from '@/utils/request';

//获取图片的数据

export const reqSpuImageList = (spuId) => request({ url: `/dev1-api/admin/product/spuImageList/${spuId}`, method: 'get' });

// 获取销售数据的数据

export const reqSpuSaleAttrList = (spuId) => request({ url: `/dev1-api/admin/product/spuSaleAttrList/${spuId}`, method: 'get' });

// 获取平台的数据

export const reqAttrInfoList = (category1Id,category2Id,category3Id) => request({ url: `/dev1-api/admin/product/attrInfoList/${category1Id}/${category2Id}/${category3Id}`, method: 'get' });

把需要的参数值传进去，发请求

这样就实现了将服务器返回来的数据，存储到data中

SkuForm数据的展示与收集

{

  "category3Id": 0,

  "createTime": "2021-10-14T00:41:56.934Z",

  "id": 0,

  "isSale": 0,

  "price": 0,

  "skuAttrValueList": [

    {

      "attrId": 0,

      "attrName": "string",

      "id": 0,

      "skuId": 0,

      "valueId": 0,

      "valueName": "string"

    }

  ],

  "skuDefaultImg": "string",

  "skuDesc": "string",

  "skuImageList": [

    {

      "id": 0,

      "imgName": "string",

      "imgUrl": "string",

      "isDefault": "string",

      "skuId": 0,

      "spuImgId": 0

    }

  ],

  "skuName": "string",

  "skuSaleAttrValueList": [

    {

      "id": 0,

      "saleAttrId": 0,

      "saleAttrName": "string",

      "saleAttrValueId": 0,

      "saleAttrValueName": "string",

      "skuId": 0,

      "spuId": 0

    }

  ],

  "spuId": 0,

  "tmId": 0,

  "weight": "string"

}

收集父组件给予的数据（第一类）

需要通过数据双向绑定收集（第二类）

这个价格有一个小按钮可以用来加减，只需要type="number"

第三类需要上书写代码，自己收集

把这块变成动态属性

平台属性需要收集的就俩个参数，一个平台的id,另一个平台属性的id

收集到平台属性对象上

销售属性同理

完成图片的展示与收集

图片的展示通过spuImageList这个数组展示，接下来收集属性（勾选上的信息提交给服务器）

通过这个回调来实现

收集图片的数据字段,但是缺少isDefault属性，因此我们需要自己加上

首先这两个按钮只能展示一个出来，当isDefault为0展示设置默认按钮，当点击这个按钮的时候我们需要把当前的对象传进去，通过排他思想的方式，实现只能展示一个的效果。

把默认图片赋值上 this.skuInfo.skuDefaultImg=row.imgUrl;

完成SkuForm保存的操作

先写一个天添加sku的接口，然后在搞之前没有搞好的取消按钮的操作 

整理参数

这里有俩种方法

最后都能重新整理参数

其实需要发给服务器的参数都整理完成，（map方法是返回一个新数组）

保存成功，成功后切换场景（前面整理销售属性代码写错了，修改完毕）

整理参数如下

skuInfo.skuAttrValueList= attrInfoList.reduce((prev,item)=>{

        if(item.attrIdAndValueId){

          const [attrId,valueId]= item.attrIdAndValueId.split(":");

          prev.push({attrId,valueId})

        }

        return prev

      },[])

      // 整理销售属性

      skuInfo.skuSaleAttrValueList= spuSaleAttrList.reduce((prev,item)=>{

        if(item.attrIdAndValueId){

          const [saleAttrId,saleAttrValueId]= item.attrIdAndValueId.split(":");

          prev.push({saleAttrId,saleAttrValueId})

        }

        return prev

      },[])

      // 整理图片的数据

      skuInfo.skuImageList=imageList.map(item=>{

        return{

            "imgName": item.imgName,

            "imgUrl": item.imgUrl,

            "isDefault": item.isDefault,

            "spuImgId": item.id

        }

      })

完成SKU列表的展示

// 获取sku列表数据的接口

export const reqSkuList = (spuId) => request({ url: `/dev1-api/admin/product/findBySpuId/${spuId}`, method: 'get'});

我们需要的就是这种效果的

<el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog>

首先传入一个row,告诉用户你查看的是那个

把传入的参数保存到data中

最后显示出现

获取spu列表的数据进行展示（实现效果如下）

服务获取数据，保存到data中

table动态渲染出数据 注意：图片需要使用作用域插槽

完成查看SKU列表的loading效果

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上

但这样的话，loading会一直加载，因此需要的服务器请求成功后把他弄为false

但是会存在如下的问题

----loading效果目前只会展示一次

-----快速切换查看sku会发现上一次的数据会显示

解决方法

在关闭对话框的回调中，重新把加载打开，并且清空之前的数据，但是要注意的一点关闭对话框done() 格式function(done)

完成SKU模块数据的展示

先写接口

import request from '@/utils/request';

// 获取sku列表数据的接口
export const reqSkuList=(page,limit)=>request({url:`/dev1-api/admin/product/list/${page}/${limit}`,method:'get'});

 请求成功后的数据

 拿到真实数据并赋值上

把保存的数据重新在页面上渲染出来即可

效果实现

<template>
  <div>
    <!-- 表格 -->
    <el-table style="width: 100%" border stripe :data="records">
      <el-table-column type="index" label="序号" width="80" 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" alt="" 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>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- @size-change="sizeChange"
      @current-change="currentChange" -->
    <el-pagination style="text-align: center" :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit" layout="prev, pager, next, jumper,->,sizes,total" :total="total" background @current-change="getSkuList" @size-change="sizeChange"> </el-pagination>
  </div>
</template>

完成SKU的上架与下架操作

俩个按钮进行切换，发请求

俩个按钮进行切换，然后发请求（上架或下架） 

 然后点击按钮，发起响应的请求即可

完成SKU查看详情业务

书写接口

// sku详情
export const reqSkuById=(skuId)=>request({url:`/dev1-api/admin/product/getSkuById/${skuId}`,method:'get'});

点击info按钮发起请求

 测试没有问题

然后存储到data中

这里需要使用这个抽屉组件 

结构差不多是这样的，然后把它渲染出来数据就可以了

 这里还要用到走马灯的效果

记得样式也带走

最后效果是这样的

深度选择器 

1：scoped属性的作用—————加上scoped的作用是只是对于当前的组件有用（样式）

对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data—v—xxxx自定属性会发现vue是通过属性选择器，给需要添加的元素添加上样式

h3[data-v-7basbd90]

2：子组件的跟标签（拥有父组件当中自定义属性：一样的），如果子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。

>>> 一般用于原生CSS

/deep/ 一般用于less

 ::v-deep 一般用户scss

原生的css可以使用>>>这种方式实现样式穿透

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1399162.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用红黑树封装实现map与set

用红黑树封装实现map与set

红黑树 红黑树 &#xff0c;是一种 二叉搜索树 &#xff0c;但 在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是 Red 或 Black 。 通过对 任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路 径会比其他路径长出俩倍 &#xff…
阅读更多...
新品发布 | 多通道总线记录仪TLog1004，是你期待的吗？

新品发布 | 多通道总线记录仪TLog1004，是你期待的吗？

新品发布 2024年1月12日&#xff0c;同星智能又发布一款多通道 CAN &#xff08;FD&#xff09;总线、LIN 总线接口logger设备&#xff0c;此款产品在TLog1002基础上进行了升级&#xff0c;同时内置 3 路数字输入和 2 路数字输出&#xff0c;便于多种信号测量和系统集成。可以满…
阅读更多...
12- OpenCV：算子(Sobel和Laplance) 和Canny边缘检测 详解

12- OpenCV：算子(Sobel和Laplance) 和Canny边缘检测 详解

目录 一、Sobel算子 1、卷积应用-图像边缘提取 2、Sobel算子&#xff08;索贝尔算子&#xff09; 3、相关的API&#xff08;代码例子&#xff09; 二、Laplance算子 1、理论 2、API使用&#xff08;代码例子&#xff09; 三、Canny边缘检测 1、Canny算法介绍 2、API使…
阅读更多...
Vulnhub-LORD OF THE ROOT: 1.0.1

Vulnhub-LORD OF THE ROOT: 1.0.1

一、信息收集 端口扫描、发现只开了22端口 连接ssh后提示端口碰撞&#xff1a; 端口敲门是一种通过在一组预先指定的关闭端口上产生连接请求&#xff0c;从外部打开防火墙上的端口的方法。一旦收到正确地连接请求序列&#xff0c;防火墙规则就会被动态修改&#xff0c;以允许…
阅读更多...
eNSP学习——配置通过Telnet登陆系统

eNSP学习——配置通过Telnet登陆系统

实验内容&#xff1a; 模拟公司网络场景。R1是机房的设备&#xff0c;办公区与机房不在同一楼层&#xff0c;R2和R3模拟员工主机&#xff0c; 通过交换机S1与R1相连。 为了方便用户的管理&#xff0c;需要在R1上配置Telnet使员工可以在办公区远程管理机房设备。 为…
阅读更多...
探究Java中的链表

探究Java中的链表

引言&#xff1a; 在Java编程中&#xff0c;链表是一种常见的数据结构&#xff0c;具有灵活的内存管理和动态的元素插入与删除能力。本篇博客将深入探讨链表的结构和概念&#xff0c;比较链表与顺序表的区别&#xff0c;介绍Java中LinkedList的常用函数并通过示例说明LinkedLis…
阅读更多...
2023：既是结束也是开始

2023：既是结束也是开始

2023年注定是不平凡的一年&#xff0c;这一年真的经历了很多事&#xff0c;包括学习、生活、工作等等&#xff0c;上半年忙着毕业以及一些其他的事情&#xff0c;很多挖的坑都没来得及填&#xff0c;下半年研一开学以后终于有了足够的时间学习&#xff0c;接下来就用这篇文章来…
阅读更多...
【linux】Debian10.0配置vsftpd

【linux】Debian10.0配置vsftpd

一、基本步骤 在 Debian 10 (Buster) 上要配置 vsftpd (Very Secure FTP Daemon)&#xff0c;请按照以下步骤操作&#xff1a; 1. 安装 vsftpd: sudo apt update sudo apt install vsftpd 2. 在启动配置之前&#xff0c;建议备份原始的配置文件: sudo cp /etc/vsftpd.con…
阅读更多...
python解释器多版本设置

python解释器多版本设置

当你的项目很多&#xff0c;切python版本不一样时&#xff0c;如何为每个项目设置不同的python解释器版本和虚拟环境&#xff1a; 1、安装pyenv brew install pyenv 配置 Pyenv&#xff1a; 将以下内容添加到你的 shell 配置文件&#xff08;如 ~/.bashrc、~/.zshrc 或 ~/.ba…
阅读更多...
【c++】初始c++

【c++】初始c++

1. 什么是C 下图就是我们c的祖师爷 C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; 20世纪80年代&#xff0c; 计算…
阅读更多...
Ubuntu使用docker-compose安装chatGPT

Ubuntu使用docker-compose安装chatGPT

ubuntu环境搭建专栏&#x1f517;点击跳转 Ubuntu系统环境搭建&#xff08;十五&#xff09;——使用docker-compose安装chatGPT Welcome to the AI era! 使用docker compose安装 在/usr/local文件夹下创建chatgpt mkdir chatgpt创建docker-compose.yaml vim docker-compos…
阅读更多...
P2P DMA并不是所有场景都会有性能提升

P2P DMA并不是所有场景都会有性能提升

P2P (Peer-to-Peer) DMA技术理论上可以带来性能提升&#xff0c;特别是在特定的工作负载和场景下。例如&#xff0c;当两个高速设备&#xff08;如GPU与NVMe SSD&#xff09;需要频繁进行大量数据交换时&#xff0c;通过P2P DMA&#xff0c;数据可以直接在设备间传输&#xff0…
阅读更多...
【Linux】常见指令解析下

【Linux】常见指令解析下

目录 前言1. cp指令&#xff08;重要&#xff09;2. mv指令 &#xff08;重要&#xff09;3. cat指令4. more指令5. less指令 &#xff08;重要&#xff09;6. head指令7. tail指令8. 时间相关的指令8.1 data显示8.2 时间戳 9. cal指令10. find指令&#xff08;非常重要&#x…
阅读更多...
[绍棠] docxtemplater实现纯前端导出word

[绍棠] docxtemplater实现纯前端导出word

1.下载需要的依赖 2.util文件夹下创建doc.js文件 doc.js import docxtemplater from docxtemplater import PizZip from pizzip import JSZipUtils from jszip-utils import { saveAs } from file-saver import ImageModule from "docxtemplater-image-module-free"…
阅读更多...
TCP服务器最多支持多少客户端连接

TCP服务器最多支持多少客户端连接

目录 一、理论数值 二、实际部署 参考 一、理论数值 首先知道一个基础概念&#xff0c;对于一个 TCP 连接可以使用四元组&#xff08;src_ip, src_port, dst_ip, dst_port&#xff09;进行唯一标识。因为服务端 IP 和 Port 是固定的&#xff08;如下图中的bind阶段&#xff0…
阅读更多...
利用HTML+CSS+JS打造炫酷时钟网页的完整指南

利用HTML+CSS+JS打造炫酷时钟网页的完整指南

引言 在现代Web开发中&#xff0c;制作一个引人注目的时钟网页是一种常见而令人愉悦的体验。本文将介绍如何使用HTML、CSS和JavaScript来创建一个炫酷的时钟网页&#xff0c;通过这个项目&#xff0c;你将学到如何结合这三种前端技术&#xff0c;制作一个动态且美观的时钟效果…
阅读更多...
SpringMVC数据校验

SpringMVC数据校验

导包 配置springmvc.xml <bean id"validator" class" org.springframework.validation.beanvalidation.LocalValidatorFactoryBean"><property name"providerClass" value"org.hibernate.validator.HibernateValidator ">…
阅读更多...
React16源码: React中的renderRoot的源码实现

React16源码: React中的renderRoot的源码实现

renderRoot 1 &#xff09;概述 renderRoot 是一个非常复杂的方法这个方法里处理很多各种各样的逻辑, 它主要的工作内容是什么&#xff1f;A. 它调用 workLoop 进行循环单元更新 遍历整个 Fiber Tree&#xff0c;把每一个组件或者 dom 节点对应的Fiber 节点拿出来单一的进行更…
阅读更多...
烟火检测AI边缘计算智能分析网关V4如何通过ssh进行服务器远程运维

烟火检测AI边缘计算智能分析网关V4如何通过ssh进行服务器远程运维

智能分析网关V4是一款高性能、低功耗的AI边缘计算硬件设备&#xff0c;它采用了BM1684芯片&#xff0c;集成高性能8核ARM A53&#xff0c;主频高达2.3GHz&#xff0c;并且INT8峰值算力高达17.6Tops&#xff0c;FB32高精度算力达到2.2T&#xff0c;每个摄像头可同时配置3种算法&…
阅读更多...
启动低轨道卫星LEO通讯产业与6G 3GPP NTN标准

启动低轨道卫星LEO通讯产业与6G 3GPP NTN标准

通讯技术10年一个大跃进&#xff0c;从1990年的2G至2000年的3G网路&#xff0c;2010年的4G到近期2020年蓬勃发展的5G&#xff0c;当通讯技术迈入融合网路&#xff0c;当前的 5G 技术不仅可提供高频宽、低延迟&#xff0c;同时可针对企业与特殊需求以 5G 专网的模式提供各式服务…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023