zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature(管理后台): 商品列表

pull/2/head
luowenfeng 2022-09-21 15:57:32 +08:00
parent f122c0c509
commit fdb2d7339f
8 changed files with 535 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/spu/vo/ProductSpuPageReqVO.java
View File

@ -29,4 +29,19 @@ public class ProductSpuPageReqVO extends PageParam {
@ApiModelProperty(value = "上下架状态： 0 上架（开启） 1 下架（禁用）") @ApiModelProperty(value = "上下架状态： 0 上架（开启） 1 下架（禁用）")
private Integer status; private Integer status;
@ApiModelProperty(value = "销量最小值", example = "1")
private Integer salesCountMin;
@ApiModelProperty(value = "销量最大值", example = "1024")
private Integer salesCountMax;
@ApiModelProperty(value = "市场价最小值", example = "1")
private Integer marketPriceMin;
@ApiModelProperty(value = "市场价最大值", example = "1024")
private Integer marketPriceMax;
@ApiModelProperty(value = "tab 状态 null 全部， 0：销售中（上架） 1：仓库中（下架） 2：预警中", example = "1")
private Integer tabStatus;
} }

27
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/dal/mysql/spu/ProductSpuMapper.java
View File

@ -7,6 +7,8 @@ import cn.iocoder.yudao.module.product.controller.admin.spu.vo.ProductSpuPageReq
import cn.iocoder.yudao.module.product.dal.dataobject.spu.ProductSpuDO; import cn.iocoder.yudao.module.product.dal.dataobject.spu.ProductSpuDO;
import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Mapper;
import java.util.List;
/** /**
* 商品spu Mapper * 商品spu Mapper
* *
@ -20,7 +22,32 @@ public interface ProductSpuMapper extends BaseMapperX<ProductSpuDO> {
.likeIfPresent(ProductSpuDO::getName, reqVO.getName()) .likeIfPresent(ProductSpuDO::getName, reqVO.getName())
.eqIfPresent(ProductSpuDO::getCategoryId, reqVO.getCategoryId()) .eqIfPresent(ProductSpuDO::getCategoryId, reqVO.getCategoryId())
.eqIfPresent(ProductSpuDO::getStatus, reqVO.getStatus()) .eqIfPresent(ProductSpuDO::getStatus, reqVO.getStatus())
.leIfPresent(ProductSpuDO::getSalesCount, reqVO.getSalesCountMax())
.geIfPresent(ProductSpuDO::getSalesCount, reqVO.getSalesCountMin())
.leIfPresent(ProductSpuDO::getMarketPrice, reqVO.getMarketPriceMax())
.geIfPresent(ProductSpuDO::getMarketPrice, reqVO.getMarketPriceMin())
.orderByDesc(ProductSpuDO::getSort)); .orderByDesc(ProductSpuDO::getSort));
} }
default PageResult<ProductSpuDO> selectPage(ProductSpuPageReqVO reqVO, List<Long> spuIds) {
LambdaQueryWrapperX<ProductSpuDO> productSpuDOLambdaQueryWrapperX = new LambdaQueryWrapperX<ProductSpuDO>()
.likeIfPresent(ProductSpuDO::getName, reqVO.getName())
.eqIfPresent(ProductSpuDO::getCategoryId, reqVO.getCategoryId())
.eqIfPresent(ProductSpuDO::getStatus, reqVO.getStatus())
.leIfPresent(ProductSpuDO::getSalesCount, reqVO.getSalesCountMax())
.geIfPresent(ProductSpuDO::getSalesCount, reqVO.getSalesCountMin())
.leIfPresent(ProductSpuDO::getMarketPrice, reqVO.getMarketPriceMax())
.geIfPresent(ProductSpuDO::getMarketPrice, reqVO.getMarketPriceMin())
.orderByDesc(ProductSpuDO::getSort);
if(reqVO.getTabStatus()!= null && reqVO.getTabStatus() == 2){
productSpuDOLambdaQueryWrapperX.inIfPresent(ProductSpuDO::getId, spuIds);
}else{
productSpuDOLambdaQueryWrapperX.eqIfPresent(ProductSpuDO::getStatus, reqVO.getTabStatus());
}
return selectPage(reqVO, productSpuDOLambdaQueryWrapperX);
}
} }

7
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuService.java
View File

@ -83,4 +83,11 @@ public interface ProductSkuService {
*/ */
void deleteSkuBySpuId(Long spuId); void deleteSkuBySpuId(Long spuId);
/**
* 获得商品预警中的spu集合
*
* @return 商品spuId集合
*/
List<Long> getRemindSpuIds();
} }

8
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuServiceImpl.java
View File

@ -3,6 +3,7 @@ package cn.iocoder.yudao.module.product.service.sku;
import cn.hutool.core.collection.CollectionUtil; import cn.hutool.core.collection.CollectionUtil;
import cn.hutool.core.util.ObjectUtil; import cn.hutool.core.util.ObjectUtil;
import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils; import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
import cn.iocoder.yudao.framework.mybatis.core.query.LambdaQueryWrapperX;
import cn.iocoder.yudao.module.product.controller.admin.property.vo.property.ProductPropertyRespVO; import cn.iocoder.yudao.module.product.controller.admin.property.vo.property.ProductPropertyRespVO;
import cn.iocoder.yudao.module.product.controller.admin.property.vo.value.ProductPropertyValueRespVO; import cn.iocoder.yudao.module.product.controller.admin.property.vo.value.ProductPropertyValueRespVO;
import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuBaseVO; import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuBaseVO;
@ -14,6 +15,7 @@ import cn.iocoder.yudao.module.product.enums.ErrorCodeConstants;
import cn.iocoder.yudao.module.product.enums.spu.ProductSpuSpecTypeEnum; import cn.iocoder.yudao.module.product.enums.spu.ProductSpuSpecTypeEnum;
import cn.iocoder.yudao.module.product.service.property.ProductPropertyService; import cn.iocoder.yudao.module.product.service.property.ProductPropertyService;
import cn.iocoder.yudao.module.product.service.property.ProductPropertyValueService; import cn.iocoder.yudao.module.product.service.property.ProductPropertyValueService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional; import org.springframework.transaction.annotation.Transactional;
import org.springframework.validation.annotation.Validated; import org.springframework.validation.annotation.Validated;
@ -131,6 +133,12 @@ public class ProductSkuServiceImpl implements ProductSkuService {
productSkuMapper.deleteBySpuId(spuId); productSkuMapper.deleteBySpuId(spuId);
} }
@Override
public List<Long> getRemindSpuIds() {
List<ProductSkuDO> productSkuDOS = productSkuMapper.selectList(new QueryWrapper<ProductSkuDO>().apply("stock <= warn_stock"));
return productSkuDOS.stream().map(ProductSkuDO::getSpuId).distinct().collect(Collectors.toList());
}
@Override @Override
@Transactional @Transactional
public void updateProductSkus(Long spuId, List<ProductSkuCreateOrUpdateReqVO> skus) { public void updateProductSkus(Long spuId, List<ProductSkuCreateOrUpdateReqVO> skus) {

21
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/spu/ProductSpuServiceImpl.java
View File

@ -3,8 +3,8 @@ package cn.iocoder.yudao.module.product.service.spu;
import cn.hutool.core.bean.BeanUtil; import cn.hutool.core.bean.BeanUtil;
import cn.iocoder.yudao.framework.common.pojo.PageResult; import cn.iocoder.yudao.framework.common.pojo.PageResult;
import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils; import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
import cn.iocoder.yudao.module.product.controller.admin.property.vo.property.ProductPropertyRespVO;
import cn.iocoder.yudao.module.product.controller.admin.property.vo.ProductPropertyViewRespVO; import cn.iocoder.yudao.module.product.controller.admin.property.vo.ProductPropertyViewRespVO;
import cn.iocoder.yudao.module.product.controller.admin.property.vo.property.ProductPropertyRespVO;
import cn.iocoder.yudao.module.product.controller.admin.property.vo.value.ProductPropertyValueRespVO; import cn.iocoder.yudao.module.product.controller.admin.property.vo.value.ProductPropertyValueRespVO;
import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuBaseVO; import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuBaseVO;
import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuCreateOrUpdateReqVO; import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuCreateOrUpdateReqVO;
@ -190,16 +190,15 @@ public class ProductSpuServiceImpl implements ProductSpuService {
@Override @Override
public PageResult<ProductSpuRespVO> getSpuPage(ProductSpuPageReqVO pageReqVO) { public PageResult<ProductSpuRespVO> getSpuPage(ProductSpuPageReqVO pageReqVO) {
PageResult<ProductSpuRespVO> spuVOs = ProductSpuConvert.INSTANCE.convertPage(ProductSpuMapper.selectPage(pageReqVO)); List<Long> remindSpuIds= null;
// 查询 sku 的信息 // todo @yunai 预警类型的判断应该可以优化，看下怎么处理
// List<Long> spuIds = spuVOs.getList().stream().map(ProductSpuRespVO::getId).collect(Collectors.toList()); if(pageReqVO.getTabStatus() != null && pageReqVO.getTabStatus() == 2){
// List<ProductSkuRespVO> skus = ProductSkuConvert.INSTANCE.convertList(productSkuService.getSkusBySpuIds(spuIds)); remindSpuIds= productSkuService.getRemindSpuIds();
// TODO @franky：使用 CollUtil 里的方法替代哈 if(remindSpuIds.isEmpty()){
// TODO 芋艿：临时注释 remindSpuIds.add(null);
// Map<Long, List<ProductSkuRespVO>> skuMap = skus.stream().collect(Collectors.groupingBy(ProductSkuRespVO::getSpuId)); }
// // 将 spu 和 sku 进行组装 }
// spuVOs.getList().forEach(p -> p.setSkus(skuMap.get(p.getId()))); return ProductSpuConvert.INSTANCE.convertPage(ProductSpuMapper.selectPage(pageReqVO, remindSpuIds));
return spuVOs;
} }
@Override @Override

64
yudao-ui-admin/src/views/mall/product/property/value.vue
View File

@ -24,7 +24,8 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:dict:create']">新增</el-button> v-hasPermi="['system:dict:create']">新增
</el-button>
</el-col> </el-col>
<!-- <el-col :span="1.5"> <!-- <el-col :span="1.5">
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
@ -33,15 +34,15 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="dataList" > <el-table v-loading="loading" :data="dataList">
<el-table-column label="规格值id" align="center" prop="id" /> <el-table-column label="规格值id" align="center" prop="id"/>
<el-table-column label="规格值" align="center" prop="name" /> <el-table-column label="规格值" align="center" prop="name"/>
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/> <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> <el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
@ -50,9 +51,11 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:dict:update']">修改</el-button> v-hasPermi="['system:dict:update']">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:dict:delete']">删除</el-button> v-hasPermi="['system:dict:delete']">删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -64,10 +67,10 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form ref="form" :model="form" :rules="rules" label-width="90px">
<el-form-item label="规格值编码"> <el-form-item label="规格值编码">
<el-input v-model="form.propertyId" :disabled="true" /> <el-input v-model="form.propertyId" :disabled="true"/>
</el-form-item> </el-form-item>
<el-form-item label="规格值" prop="name"> <el-form-item label="规格值" prop="name">
<el-input v-model="form.name" placeholder="请输入数据标签" /> <el-input v-model="form.name" placeholder="请输入数据标签"/>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
@ -89,8 +92,15 @@
</template> </template>
<script> <script>
import { getPropertyList, getPropertyValuePage, createPropertyValue, updatePropertyValue, getPropertyValue, deletePropertyValue } from '@/api/mall/product/property' import {
import { getProperty } from "@/api/mall/product/property"; createPropertyValue,
deletePropertyValue,
getProperty,
getPropertyList,
getPropertyValue,
getPropertyValuePage,
updatePropertyValue
} from '@/api/mall/product/property'
export default { export default {
name: "PropertyValue", name: "PropertyValue",
@ -127,10 +137,10 @@ export default {
// 表单校验 // 表单校验
rules: { rules: {
name: [ name: [
{ required: true, message: "规格值不能为空", trigger: "blur" } {required: true, message: "规格值不能为空", trigger: "blur"}
], ],
status: [ status: [
{ required: true, message: "状态不能为空", trigger: "blur" } {required: true, message: "状态不能为空", trigger: "blur"}
] ]
}, },
@ -210,7 +220,7 @@ export default {
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm: function() { submitForm: function () {
this.$refs["form"].validate(valid => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
if (this.form.id !== undefined) { if (this.form.id !== undefined) {
@ -232,23 +242,25 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id; const ids = row.id;
this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function() { this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function () {
return deletePropertyValue(ids); return deletePropertyValue(ids);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => {
});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams; const queryParams = this.queryParams;
this.$modal.confirm('是否确认导出所有数据项?').then(() => { this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true; this.exportLoading = true;
return exportData(queryParams); return exportData(queryParams);
}).then(response => { }).then(response => {
this.$download.excel(response, '字典数据.xls'); this.$download.excel(response, '字典数据.xls');
this.exportLoading = false; this.exportLoading = false;
}).catch(() => {}); }).catch(() => {
});
} }
} }
}; };

358
yudao-ui-admin/src/views/mall/product/spu/index.vue
View File

@ -1,30 +1,77 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 搜索工作栏 -->
<!-- TODO @Luowenfeng：参考界面；https://v5.niuteam.cn/shop/goods/lists.html
商品名称、商品编码、商品分类、商品品牌
商品销量、商品价格
-->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="商品名称" prop="name"> <el-form-item label="商品名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/> <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
</el-form-item> </el-form-item>
<el-form-item label="商品编码" prop="code"> <el-form-item label="商品编码" prop="code">
<el-input v-model="queryParams.code" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/> <el-input v-model="queryParams.code" placeholder="请输入商品编码" clearable @keyup.enter.native="handleQuery"/>
</el-form-item> </el-form-item>
<el-form-item label="商品分类" prop="categoryId"> <el-form-item label="商品分类" prop="categoryIds">
<el-cascader v-model="queryParams.categoryIds" placeholder="请输入商品分类" <el-cascader v-model="queryParams.categoryIds" placeholder="请输入商品分类"
:options="categoryList" :props="propName" clearable ref="category" /> :options="categoryList" :props="propName" clearable ref="category"/>
</el-form-item> </el-form-item>
<el-form-item label="商品品牌" prop="brandId"> <el-form-item label="商品品牌" prop="brandId">
<el-select v-model="queryParams.brandId" placeholder="请输入商品品牌" clearable @keyup.enter.native="handleQuery"> <el-select v-model="queryParams.brandId" placeholder="请输入商品品牌" clearable @keyup.enter.native="handleQuery">
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品销量">
<el-col
:span="6"
style="padding-left:0"
>
<el-form-item prop="salesCountMin">
<el-input v-model="queryParams.salesCountMin" placeholder="最小值" clearable
@keyup.enter.native="handleQuery"/>
</el-form-item>
</el-col>
<el-col
:span="1"
>
-
</el-col>
<el-col
:span="6"
style="padding-left:0"
>
<el-form-item prop="salesCountMax">
<el-input v-model="queryParams.salesCountMax" placeholder="最大值" clearable
@keyup.enter.native="handleQuery"/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品价格" prop="code">
<el-col
:span="6"
style="padding-left:0"
>
<el-form-item prop="marketPriceMin">
<el-input v-model="queryParams.marketPriceMin" placeholder="最小值" clearable
@keyup.enter.native="handleQuery"/>
</el-form-item>
</el-col>
<el-col
:span="1"
>
-
</el-col>
<el-col
:span="6"
style="padding-left:0"
>
<el-form-item prop="marketPriceMax">
<el-input v-model="queryParams.marketPriceMax" placeholder="最大值" clearable
@keyup.enter.native="handleQuery"/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@ -35,77 +82,211 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['product:spu:create']">新增</el-button> v-hasPermi="['product:spu:create']">新增
</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" /> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
</el-row> </el-row>
<!-- 列表 --> <el-tabs v-model="activeTabs" type="card" @tab-click="handleClick">
<el-table v-loading="loading" :data="list"> <!-- 全部 -->
<!-- <el-tab-pane label="全部" name="all">
TODO @Luowenfeng：参考界面； <!-- 列表 -->
https://v5.niuteam.cn/shop/goods/lists.html <el-table v-loading="loading" :data="list">
1. 字段：商品信息、价格、库存、销量、排序、创建时间、状态、操作； <el-table-column label="商品信息" align="center" width="260">
2. tab 分成全部、销售中、仓库中、预警中 <template slot-scope="scope">
--> <div class="product-info">
<el-table-column label="商品信息" align="center" width="260"> <img
v-if="scope.row.picUrls"
:src="scope.row.picUrls[0]"
alt="分类图片"
class="img-height"
/>
<div class="message">{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
<el-table-column label="库存" align="center" prop="totalStock"/>
<el-table-column label="销量" align="center" prop="salesCount"/>
<el-table-column label="排序" align="center" prop="sort"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
</template>
</el-table-column>
<template slot-scope="scope" > <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<div class="product-info"> <template slot-scope="scope">
<img <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-if="scope.row.picUrls" v-hasPermi="['product:spu:update']">修改
:src="scope.row.picUrls[0]" </el-button>
alt="分类图片" <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
class="img-height" v-hasPermi="['product:spu:delete']">删除
/> </el-button>
<div class="message">{{scope.row.name}}</div> </template>
</div> </el-table-column>
</template> </el-table>
</el-table-column> </el-tab-pane>
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
<el-table-column label="库存" align="center" prop="totalStock" />
<el-table-column label="销量" align="center" prop="salesCount" />
<el-table-column label="排序" align="center" prop="sort" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <!-- 销售中 -->
<template slot-scope="scope"> <el-tab-pane label="销售中" name="on">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" <!-- 列表 -->
v-hasPermi="['product:spu:update']">修改</el-button> <el-table v-loading="loading" :data="list">
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" <el-table-column label="商品信息" align="center" width="260">
v-hasPermi="['product:spu:delete']">删除</el-button> <template slot-scope="scope">
</template> <div class="product-info">
</el-table-column> <img
</el-table> v-if="scope.row.picUrls"
:src="scope.row.picUrls[0]"
alt="分类图片"
class="img-height"
/>
<div class="message">{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
<el-table-column label="库存" align="center" prop="totalStock"/>
<el-table-column label="销量" align="center" prop="salesCount"/>
<el-table-column label="排序" align="center" prop="sort"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['product:spu:update']">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['product:spu:delete']">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<!-- 仓库中 -->
<el-tab-pane label="仓库中" name="off">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="商品信息" align="center" width="260">
<template slot-scope="scope">
<div class="product-info">
<img
v-if="scope.row.picUrls"
:src="scope.row.picUrls[0]"
alt="分类图片"
class="img-height"
/>
<div class="message">{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
<el-table-column label="库存" align="center" prop="totalStock"/>
<el-table-column label="销量" align="center" prop="salesCount"/>
<el-table-column label="排序" align="center" prop="sort"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['product:spu:update']">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['product:spu:delete']">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<!-- 预警中 -->
<el-tab-pane label="预警中" name="remind">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="商品信息" align="center" width="260">
<template slot-scope="scope">
<div class="product-info">
<img
v-if="scope.row.picUrls"
:src="scope.row.picUrls[0]"
alt="分类图片"
class="img-height"
/>
<div class="message">{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
<el-table-column label="库存" align="center" prop="totalStock"/>
<el-table-column label="销量" align="center" prop="salesCount"/>
<el-table-column label="排序" align="center" prop="sort"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['product:spu:update']">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['product:spu:delete']">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<!-- 分页组件 --> <!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/> @pagination="getList"/>
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false" > <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close
<save @closeDialog="closeDialog" :obj="dialogObj" v-if="open" /> :close-on-click-modal="false">
<save @closeDialog="closeDialog" :obj="dialogObj" v-if="open"/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import {deleteSpu, getSpuPage,} from "@/api/mall/product/spu";
deleteSpu,
getSpuPage,
} from "@/api/mall/product/spu";
import {getProductCategoryList} from "@/api/mall/product/category"; import {getProductCategoryList} from "@/api/mall/product/category";
import {getBrandList} from "@/api/mall/product/brand"; import {getBrandList} from "@/api/mall/product/brand";
import Editor from "@/components/Editor"; import Editor from "@/components/Editor";
import ImageUpload from "@/components/ImageUpload"; import ImageUpload from "@/components/ImageUpload";
import save from "./save"; import save from "./save";
// 1. TODO @Luowenfeng：商品的添加、修改，走一个单独的页面，不走弹窗；https://v5.niuteam.cn/shop/goods/addgoods.html // 1. TODO @Luowenfeng：商品的添加、修改，走一个单独的页面，不走弹窗；https://v5.niuteam.cn/shop/goods/addgoods.html
// 2. TODO // 2. TODO
@ -119,6 +300,7 @@ export default {
}, },
data() { data() {
return { return {
activeTabs: "all",
propName: { propName: {
checkStrictly: true, checkStrictly: true,
label: "name", label: "name",
@ -141,7 +323,7 @@ export default {
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 弹出层参数 // 弹出层参数
dialogObj:{}, dialogObj: {},
dateRangeCreateTime: [], dateRangeCreateTime: [],
// 查询参数 // 查询参数
queryParams: { queryParams: {
@ -153,6 +335,11 @@ export default {
categoryId: null, categoryId: null,
brandId: null, brandId: null,
status: null, status: null,
salesCountMin: null,
salesCountMax: null,
marketPriceMin: null,
marketPriceMax: null,
tabStatus: null,
}, },
tagIndex: 0, tagIndex: 0,
}; };
@ -181,13 +368,15 @@ export default {
getList() { getList() {
this.loading = true; this.loading = true;
// 处理查询参数 // 处理查询参数
let params = { ...this.queryParams }; let params = {...this.queryParams};
params.categoryId = this.queryParams.categoryIds[ this.queryParams.categoryIds.length - 1]; params.marketPriceMin = this.queryParams.marketPriceMin === null ? null : params.marketPriceMin * 100;
params.marketPriceMax = this.queryParams.marketPriceMax === null ? null : params.marketPriceMax * 100;
params.categoryId = this.queryParams.categoryIds[this.queryParams.categoryIds.length - 1];
this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime"); this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
// 执行查询 // 执行查询
getSpuPage(params).then((response) => { getSpuPage(params).then((response) => {
response.data.list.forEach(element => { response.data.list.forEach(element => {
element.price = this.divide(element.minPrice, 100)+"~"+this.divide(element.maxPrice, 100) element.price = this.divide(element.minPrice, 100) + "~" + this.divide(element.maxPrice, 100)
}); });
this.list = response.data.list; this.list = response.data.list;
this.total = response.data.total; this.total = response.data.total;
@ -209,15 +398,14 @@ export default {
resetQuery() { resetQuery() {
this.dateRangeCreateTime = []; this.dateRangeCreateTime = [];
this.$refs.category.$refs.panel.checkedValue = [];//也可以是指定的值，默认返回值是数组，也可以返回单个值 this.$refs.category.$refs.panel.checkedValue = [];//也可以是指定的值，默认返回值是数组，也可以返回单个值
　　this.$refs.category.$refs.panel.activePath = []; this.$refs.category.$refs.panel.activePath = [];
　　this.$refs.category.$refs.panel.syncActivePath(); this.$refs.category.$refs.panel.syncActivePath();
this.queryParams.categoryIds = [];
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.dialogObj={}; this.dialogObj = {};
this.open = true; this.open = true;
this.title = "添加商品spu"; this.title = "添加商品spu";
}, },
@ -227,8 +415,8 @@ export default {
this.open = true; this.open = true;
this.title = "修改商品spu"; this.title = "修改商品spu";
}, },
closeDialog(){ closeDialog() {
this.dialogObj={}; this.dialogObj = {};
this.open = false; this.open = false;
this.getList() this.getList()
}, },
@ -244,10 +432,26 @@ export default {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}) })
.catch(() => {}); .catch(() => {
});
}, },
unitConversion(row, column, cellValue){ unitConversion(row, column, cellValue) {
return this.divide(cellValue, 100); return this.divide(cellValue, 100);
},
// 选中tab
handleClick(val) {
if (val.name === "all") {
this.queryParams.tabStatus = null;
} else if (val.name === "on") {
this.queryParams.tabStatus = 0;
} else if (val.name === "off") {
this.queryParams.tabStatus = 1;
} else if (val.name === "remind") {
this.queryParams.tabStatus = 2;
} else {
this.queryParams.tabStatus = null;
}
this.getList();
} }
}, },
}; };
@ -272,13 +476,15 @@ export default {
vertical-align: bottom; vertical-align: bottom;
} }
.product-info{ .product-info {
display: flex; display: flex;
.img-height { .img-height {
height: 50px; height: 50px;
width: 50px; width: 50px;
} }
.message{
.message {
margin-left: 10px; margin-left: 10px;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;

283
yudao-ui-admin/src/views/mall/product/spu/save.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<el-tabs v-model="activeName" class="tabs" > <el-tabs v-model="activeName" class="tabs">
<!-- 基础设置 --> <!-- 基础设置 -->
<el-tab-pane label="基础设置" name="base"> <el-tab-pane label="基础设置" name="base">
<el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%"> <el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
@ -11,20 +11,20 @@
<el-input type="textarea" v-model="baseForm.sellPoint" placeholder="请输入商品卖点"/> <el-input type="textarea" v-model="baseForm.sellPoint" placeholder="请输入商品卖点"/>
</el-form-item> </el-form-item>
<el-form-item label="商品主图" prop="picUrls"> <el-form-item label="商品主图" prop="picUrls">
<ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10" class="mall-image" /> <ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10" class="mall-image"/>
</el-form-item> </el-form-item>
<el-form-item label="商品视频" prop="videoUrl"> <el-form-item label="商品视频" prop="videoUrl">
<VideoUpload v-model="baseForm.videoUrl" :value="baseForm.videoUrl" /> <VideoUpload v-model="baseForm.videoUrl" :value="baseForm.videoUrl"/>
</el-form-item> </el-form-item>
<el-form-item label="商品品牌" prop="brandId"> <el-form-item label="商品品牌" prop="brandId">
<el-select v-model="baseForm.brandId" placeholder="请选择商品品牌"> <el-select v-model="baseForm.brandId" placeholder="请选择商品品牌">
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品分类" prop="categoryIds"> <el-form-item label="商品分类" prop="categoryIds">
<el-cascader v-model="baseForm.categoryIds" placeholder="商品分类" style="width: 100%" <el-cascader v-model="baseForm.categoryIds" placeholder="商品分类" style="width: 100%"
:options="categoryList" :props="propName" clearable /> :options="categoryList" :props="propName" clearable/>
</el-form-item> </el-form-item>
<el-form-item label="是否上架" prop="status"> <el-form-item label="是否上架" prop="status">
<el-radio-group v-model="baseForm.status"> <el-radio-group v-model="baseForm.status">
@ -46,11 +46,11 @@
<div v-show="ratesForm.spec === 2"> <div v-show="ratesForm.spec === 2">
<div v-for="(specs, index) in dynamicSpec" :key="index" class="dynamic-spec"> <div v-for="(specs, index) in dynamicSpec" :key="index" class="dynamic-spec">
<!-- 删除按钮 --> <!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-delete" circle class="spec-delete" @click="removeSpec(index)" /> <el-button type="danger" icon="el-icon-delete" circle class="spec-delete" @click="removeSpec(index)"/>
<div class="spec-header"> <div class="spec-header">
规格项： 规格项：
<el-select v-model="specs.specId" filterable placeholder="请选择" @change="changeSpec"> <el-select v-model="specs.specId" filterable placeholder="请选择" @change="changeSpec">
<el-option v-for="item in propertyPageList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in propertyPageList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</div> </div>
<div class="spec-values"> <div class="spec-values">
@ -59,7 +59,8 @@
</template> </template>
</div> </div>
</div> </div>
<el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []">添加规格项目</el-button> <el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []">添加规格项目
</el-button>
</div> </div>
<!-- 规格明细 --> <!-- 规格明细 -->
@ -69,53 +70,59 @@
<el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v => v.specName !== undefined)" <el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v => v.specName !== undefined)"
:label="item.specName"> :label="item.specName">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-if="scope.row.spec" v-model="scope.row.spec[index]" disabled /> <el-input v-if="scope.row.spec" v-model="scope.row.spec[index]" disabled/>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90"> <el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90">
<template slot-scope="scope"> <template slot-scope="scope">
<ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false" <ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
style="width: 100px; height: 50px"/> style="width: 100px; height: 50px"/>
</template> </template>
</el-table-column> </el-table-column>
<template v-if="this.activeSwitch"> <template v-if="this.activeSwitch">
<el-table-column label="sku名称" :render-header="addRedStar" key="91"> <el-table-column label="sku名称" :render-header="addRedStar" key="91">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]"> <el-form-item :prop="'rates.'+ scope.$index + '.name'"
<el-input v-model="scope.row.name" /> :rules="[{required: true, trigger: 'change'}]">
<el-input v-model="scope.row.name"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<el-table-column label="市场价(元)" :render-header="addRedStar" key="92"> <el-table-column label="市场价(元)" :render-header="addRedStar" key="92">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'" :rules="[{required: true, trigger: 'change'}]"> <el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'"
:rules="[{required: true, trigger: 'change'}]">
<el-input v-model="scope.row.marketPrice" <el-input v-model="scope.row.marketPrice"
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"/> oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="销售价(元)" :render-header="addRedStar" key="93"> <el-table-column label="销售价(元)" :render-header="addRedStar" key="93">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.price'" :rules="[{required: true, trigger: 'change'}]"> <el-form-item :prop="'rates.'+ scope.$index + '.price'"
<el-input v-model="scope.row.price" oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input> :rules="[{required: true, trigger: 'change'}]">
<el-input v-model="scope.row.price"
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="成本价" :render-header="addRedStar" key="94"> <el-table-column label="成本价" :render-header="addRedStar" key="94">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.costPrice'" :rules="[{required: true, trigger: 'change'}]"> <el-form-item :prop="'rates.'+ scope.$index + '.costPrice'"
<el-input :rules="[{required: true, trigger: 'change'}]">
v-model="scope.row.costPrice" <el-input
oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''" v-model="scope.row.costPrice"
></el-input> oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="库存" :render-header="addRedStar" key="95"> <el-table-column label="库存" :render-header="addRedStar" key="95">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'rates.'+ scope.$index + '.stock'" :rules="[{required: true, trigger: 'change'}]"> <el-form-item :prop="'rates.'+ scope.$index + '.stock'"
:rules="[{required: true, trigger: 'change'}]">
<el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input> <el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
</el-form-item> </el-form-item>
</template> </template>
@ -127,12 +134,12 @@
</el-table-column> </el-table-column>
<el-table-column label="体积" key="97"> <el-table-column label="体积" key="97">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.volume" ></el-input> <el-input v-model="scope.row.volume"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重量" key="98"> <el-table-column label="重量" key="98">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.weight" ></el-input> <el-input v-model="scope.row.weight"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="条码" key="99"> <el-table-column label="条码" key="99">
@ -140,29 +147,34 @@
<el-input v-model="scope.row.barCode"></el-input> <el-input v-model="scope.row.barCode"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<template v-if="this.activeSwitch"> <template v-if="this.activeSwitch">
<el-table-column fixed="right" label="操作" width="50" key="100"> <el-table-column fixed="right" label="操作" width="50" key="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button> <el-button @click="scope.row.status = 1" type="text" size="small"
<el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">启用</el-button> v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用
</el-button>
<el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">
启用
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
</el-table> </el-table>
</el-form-item> </el-form-item>
<el-form-item label="虚拟销量" prop="virtualSalesCount" > <el-form-item label="虚拟销量" prop="virtualSalesCount">
<el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/> <el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量"
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<!-- 商品详情 --> <!-- 商品详情 -->
<el-tab-pane label="商品详情" name="third"> <el-tab-pane label="商品详情" name="third">
<el-form ref="third" :model="baseForm" :rules="rules"> <el-form ref="third" :model="baseForm" :rules="rules">
<el-form-item prop="description"> <el-form-item prop="description">
<editor v-model="baseForm.description" :min-height="380"/> <editor v-model="baseForm.description" :min-height="380"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<!-- 销售设置 --> <!-- 销售设置 -->
@ -171,8 +183,8 @@
<el-form-item label="排序字段"> <el-form-item label="排序字段">
<el-input v-model="baseForm.sort" placeholder="请输入排序字段" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/> <el-input v-model="baseForm.sort" placeholder="请输入排序字段" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
</el-form-item> </el-form-item>
<el-form-item label="是否展示库存" prop="showStock"> <el-form-item label="是否展示库存" prop="showStock">
<el-radio-group v-model="baseForm.showStock"> <el-radio-group v-model="baseForm.showStock">
<el-radio :label="true">是</el-radio> <el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio> <el-radio :label="false">否</el-radio>
</el-radio-group> </el-radio-group>
@ -193,7 +205,7 @@
import {getBrandList} from "@/api/mall/product/brand"; import {getBrandList} from "@/api/mall/product/brand";
import {getProductCategoryList} from "@/api/mall/product/category"; import {getProductCategoryList} from "@/api/mall/product/category";
import {createSpu, updateSpu, getSpuDetail} from "@/api/mall/product/spu"; import {createSpu, getSpuDetail, updateSpu} from "@/api/mall/product/spu";
import {getPropertyListAndValue,} from "@/api/mall/product/property"; import {getPropertyListAndValue,} from "@/api/mall/product/property";
import Editor from "@/components/Editor"; import Editor from "@/components/Editor";
import ImageUpload from "@/components/ImageUpload"; import ImageUpload from "@/components/ImageUpload";
@ -205,7 +217,7 @@ export default {
ImageUpload, ImageUpload,
VideoUpload VideoUpload
}, },
props:{ props: {
obj: Object obj: Object
}, },
data() { data() {
@ -256,7 +268,7 @@ export default {
// 表单校验 // 表单校验
rules: { rules: {
name:[{required: true, message: "商品名称不能为空", trigger: "blur"},], name: [{required: true, message: "商品名称不能为空", trigger: "blur"},],
description: [{required: true, message: "描述不能为空", trigger: "blur"},], description: [{required: true, message: "描述不能为空", trigger: "blur"},],
categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"},], categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"},],
status: [{required: true, message: "商品状态不能为空", trigger: "blur"}], status: [{required: true, message: "商品状态不能为空", trigger: "blur"}],
@ -269,24 +281,24 @@ export default {
this.getListBrand(); this.getListBrand();
this.getListCategory(); this.getListCategory();
this.getPropertyPageList(); this.getPropertyPageList();
if(this.obj.id != null){ if (this.obj.id != null) {
this.updateType(this.obj.id) this.updateType(this.obj.id)
} }
}, },
methods: { methods: {
removeSpec(index){ removeSpec(index) {
this.dynamicSpec.splice(index, 1); this.dynamicSpec.splice(index, 1);
this.changeRadio() this.changeRadio()
}, },
// 必选标识 // 必选标识
addRedStar(h, { column }) { addRedStar(h, {column}) {
return [ return [
h('span', { style: 'color: #F56C6C' }, '*'), h('span', {style: 'color: #F56C6C'}, '*'),
h('span', ' ' + column.label) h('span', ' ' + column.label)
]; ];
}, },
changeRadio() { changeRadio() {
this.activeSwitch ? this.ratesForm.spec = 2: this.ratesForm.spec = 1; this.activeSwitch ? this.ratesForm.spec = 2 : this.ratesForm.spec = 1;
this.$refs.ratesTable.doLayout(); this.$refs.ratesTable.doLayout();
if (this.ratesForm.spec == 1) { if (this.ratesForm.spec == 1) {
this.ratesForm.rates = [{}] this.ratesForm.rates = [{}]
@ -334,7 +346,7 @@ export default {
this.categoryList = this.handleTree(response.data, "id", "parentId"); this.categoryList = this.handleTree(response.data, "id", "parentId");
}); });
}, },
/** 查询品牌列表 */ /** 查询品牌列表 */
getListBrand() { getListBrand() {
// 执行查询 // 执行查询
getBrandList().then((response) => { getBrandList().then((response) => {
@ -345,30 +357,30 @@ export default {
this.$emit("closeDialog"); this.$emit("closeDialog");
}, },
submit() { submit() {
this.$refs[this.activeName].validate((valid) => { this.$refs[this.activeName].validate((valid) => {
if (!valid) { if (!valid) {
return; return;
} }
let rates = this.ratesForm.rates; let rates = this.ratesForm.rates;
// 价格元转分 // 价格元转分
rates.forEach(r=>{
r.marketPrice = r.marketPrice*100;
r.price = r.price*100;
r.costPrice = r.costPrice*100;
})
// 动态规格调整字段
if (this.activeSwitch) {
rates.forEach(r => { rates.forEach(r => {
let properties = [] r.marketPrice = r.marketPrice * 100;
r.price = r.price * 100;
r.costPrice = r.costPrice * 100;
})
// 动态规格调整字段
if (this.activeSwitch) {
rates.forEach(r => {
let properties = []
Array.of(r.spec).forEach(s => { Array.of(r.spec).forEach(s => {
let obj; let obj;
if (s instanceof Array) { if (s instanceof Array) {
obj = s; obj = s;
}else{ } else {
obj = Array.of(s); obj = Array.of(s);
} }
obj.forEach((v, i) => { obj.forEach((v, i) => {
let specValue = this.dynamicSpec[i].specValue.find(o => o.name == v); let specValue = this.dynamicSpec[i].specValue.find(o => o.name == v);
let propertie = {}; let propertie = {};
@ -377,35 +389,35 @@ export default {
properties.push(propertie); properties.push(propertie);
}) })
}) })
r.properties = properties; r.properties = properties;
}) })
}else{ } else {
rates[0].name = this.baseForm.name; rates[0].name = this.baseForm.name;
rates[0].status = this.baseForm.status; rates[0].status = this.baseForm.status;
} }
let form = this.baseForm let form = this.baseForm
if(form.picUrls instanceof Array){ if (form.picUrls instanceof Array) {
form.picUrls = form.picUrls.flatMap(m=>m.split(',')) form.picUrls = form.picUrls.flatMap(m => m.split(','))
}else if(form.picUrls.split(',') instanceof Array){ } else if (form.picUrls.split(',') instanceof Array) {
form.picUrls = form.picUrls.split(',').flatMap(m=>m.split(',')) form.picUrls = form.picUrls.split(',').flatMap(m => m.split(','))
}else{ } else {
form.picUrls = Array.of(form.picUrls) form.picUrls = Array.of(form.picUrls)
} }
form.skus = rates; form.skus = rates;
form.specType = this.ratesForm.spec; form.specType = this.ratesForm.spec;
form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1]; form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
if(form.id == null){ if (form.id == null) {
createSpu(form).then((response) => { createSpu(form).then((response) => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.$emit("closeDialog"); this.$emit("closeDialog");
}) })
}else{ } else {
updateSpu(form).then((response) => { updateSpu(form).then((response) => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.$emit("closeDialog"); this.$emit("closeDialog");
}) })
} }
}); });
}, },
@ -425,46 +437,46 @@ export default {
spec.specValue = obj.values; spec.specValue = obj.values;
this.buildRatesFormRates(); this.buildRatesFormRates();
}, },
updateType(id){ updateType(id) {
getSpuDetail(id).then((response) =>{ getSpuDetail(id).then((response) => {
let data = response.data; let data = response.data;
this.baseForm.id=data.id; this.baseForm.id = data.id;
this.baseForm.name=data.name; this.baseForm.name = data.name;
this.baseForm.sellPoint=data.sellPoint; this.baseForm.sellPoint = data.sellPoint;
this.baseForm.categoryIds=data.categoryIds; this.baseForm.categoryIds = data.categoryIds;
this.baseForm.videoUrl = data.videoUrl; this.baseForm.videoUrl = data.videoUrl;
this.baseForm.sort=data.sort; this.baseForm.sort = data.sort;
this.baseForm.description=data.description; this.baseForm.description = data.description;
this.baseForm.picUrls=data.picUrls; this.baseForm.picUrls = data.picUrls;
this.baseForm.status=data.status; this.baseForm.status = data.status;
this.baseForm.virtualSalesCount=data.virtualSalesCount; this.baseForm.virtualSalesCount = data.virtualSalesCount;
this.baseForm.showStock=data.showStock; this.baseForm.showStock = data.showStock;
this.baseForm.brandId=data.brandId; this.baseForm.brandId = data.brandId;
this.ratesForm.spec=data.specType; this.ratesForm.spec = data.specType;
data.skus.forEach(r=>{ data.skus.forEach(r => {
r.marketPrice = this.divide(r.marketPrice, 100) r.marketPrice = this.divide(r.marketPrice, 100)
r.price = this.divide(r.price, 100) r.price = this.divide(r.price, 100)
r.costPrice = this.divide(r.costPrice, 100) r.costPrice = this.divide(r.costPrice, 100)
})
if(this.ratesForm.spec == 2){
this.activeSwitch = true;
data.productPropertyViews.forEach(p=>{
let obj = {};
obj.specId = p.propertyId;
obj.specName = p.name;
obj.specValue = p.propertyValues;
this.dynamicSpec.push(obj);
})
data.skus.forEach(s=>{
s.spec = [];
s.properties.forEach(sp=>{
let spec = data.productPropertyViews.find(o=>o.propertyId == sp.propertyId).propertyValues.find(v=>v.id == sp.valueId).name;
s.spec.push(spec)
})
})
}
this.ratesForm.rates=data.skus
}) })
if (this.ratesForm.spec == 2) {
this.activeSwitch = true;
data.productPropertyViews.forEach(p => {
let obj = {};
obj.specId = p.propertyId;
obj.specName = p.name;
obj.specValue = p.propertyValues;
this.dynamicSpec.push(obj);
})
data.skus.forEach(s => {
s.spec = [];
s.properties.forEach(sp => {
let spec = data.productPropertyViews.find(o => o.propertyId == sp.propertyId).propertyValues.find(v => v.id == sp.valueId).name;
s.spec.push(spec)
})
})
}
this.ratesForm.rates = data.skus
})
}, },
}, },
@ -557,13 +569,14 @@ export default {
} }
} }
.mall-image{ .mall-image {
.el-upload--picture-card{ .el-upload--picture-card {
width: 80px; width: 80px;
height: 80px; height: 80px;
line-height: 90px; line-height: 90px;
} }
.el-upload-list__item{
.el-upload-list__item {
width: 80px; width: 80px;
height: 80px; height: 80px;
} }