hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-10-31 10:18:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
luowenfeng
2022-09-21 15:57:32 +08:00
parent f122c0c509
commit fdb2d7339f
8 changed files with 535 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,8 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<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 :span="1.5">
<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>
</el-row>
<el-table v-loading="loading" :data="dataList" >
<el-table-column label="规格值id" align="center" prop="id" />
<el-table-column label="规格值" align="center" prop="name" />
<el-table v-loading="loading" :data="dataList">
<el-table-column label="规格值id" align="center" prop="id"/>
<el-table-column label="规格值" align="center" prop="name"/>
<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" 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">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
@@ -50,9 +51,11 @@
<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="['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)"
v-hasPermi="['system:dict:delete']">删除</el-button>
v-hasPermi="['system:dict:delete']">删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -64,10 +67,10 @@
<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-item label="规格值编码">
<el-input v-model="form.propertyId" :disabled="true" />
<el-input v-model="form.propertyId" :disabled="true"/>
</el-form-item>
<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 label="状态" prop="status">
<el-radio-group v-model="form.status">
@@ -89,8 +92,15 @@
</template>
<script>
import { getPropertyList, getPropertyValuePage, createPropertyValue, updatePropertyValue, getPropertyValue, deletePropertyValue } from '@/api/mall/product/property'
import { getProperty } from "@/api/mall/product/property";
import {
createPropertyValue,
deletePropertyValue,
getProperty,
getPropertyList,
getPropertyValue,
getPropertyValuePage,
updatePropertyValue
} from '@/api/mall/product/property'
export default {
name: "PropertyValue",
@@ -127,10 +137,10 @@ export default {
// 表单校验
rules: {
name: [
{ required: true, message: "规格值不能为空", trigger: "blur" }
{required: true, message: "规格值不能为空", trigger: "blur"}
],
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 => {
if (valid) {
if (this.form.id !== undefined) {
@@ -232,23 +242,25 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id;
this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function() {
return deletePropertyValue(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function () {
return deletePropertyValue(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return exportData(queryParams);
}).then(response => {
this.$download.excel(response, '字典数据.xls');
this.exportLoading = false;
}).catch(() => {});
this.exportLoading = true;
return exportData(queryParams);
}).then(response => {
this.$download.excel(response, '字典数据.xls');
this.exportLoading = false;
}).catch(() => {
});
}
}
};

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

@@ -1,30 +1,77 @@
<template>
<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-item label="商品名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<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 label="商品分类" prop="categoryId">
<el-form-item label="商品分类" prop="categoryIds">
<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 label="商品品牌" prop="brandId">
<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-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-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@@ -35,77 +82,211 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
</el-row>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<!--
TODO @Luowenfeng：参考界面；
https://v5.niuteam.cn/shop/goods/lists.html
1. 字段：商品信息、价格、库存、销量、排序、创建时间、状态、操作；
2. tab 分成全部、销售中、仓库中、预警中
-->
<el-table-column label="商品信息" align="center" width="260">
<el-tabs v-model="activeTabs" type="card" @tab-click="handleClick">
<!-- 全部 -->
<el-tab-pane label="全部" name="all">
<!-- 列表 -->
<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>
<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-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 label="销售中" name="on">
<!-- 列表 -->
<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="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="getList"/>
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false" >
<save @closeDialog="closeDialog" :obj="dialogObj" v-if="open" />
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close
:close-on-click-modal="false">
<save @closeDialog="closeDialog" :obj="dialogObj" v-if="open"/>
</el-dialog>
</div>
</template>
<script>
import {
deleteSpu,
getSpuPage,
} from "@/api/mall/product/spu";
import {deleteSpu, getSpuPage,} from "@/api/mall/product/spu";
import {getProductCategoryList} from "@/api/mall/product/category";
import {getBrandList} from "@/api/mall/product/brand";
import Editor from "@/components/Editor";
import ImageUpload from "@/components/ImageUpload";
import save from "./save";
import save from "./save";
// 1. TODO @Luowenfeng：商品的添加、修改，走一个单独的页面，不走弹窗；https://v5.niuteam.cn/shop/goods/addgoods.html
// 2. TODO
@@ -119,6 +300,7 @@ export default {
},
data() {
return {
activeTabs: "all",
propName: {
checkStrictly: true,
label: "name",
@@ -141,7 +323,7 @@ export default {
// 是否显示弹出层
open: false,
// 弹出层参数
dialogObj:{},
dialogObj: {},
dateRangeCreateTime: [],
// 查询参数
queryParams: {
@@ -153,6 +335,11 @@ export default {
categoryId: null,
brandId: null,
status: null,
salesCountMin: null,
salesCountMax: null,
marketPriceMin: null,
marketPriceMax: null,
tabStatus: null,
},
tagIndex: 0,
};
@@ -181,13 +368,15 @@ export default {
getList() {
this.loading = true;
// 处理查询参数
let params = { ...this.queryParams };
params.categoryId = this.queryParams.categoryIds[ this.queryParams.categoryIds.length - 1];
let params = {...this.queryParams};
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");
// 执行查询
getSpuPage(params).then((response) => {
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.total = response.data.total;
@@ -209,15 +398,14 @@ export default {
resetQuery() {
this.dateRangeCreateTime = [];
this.$refs.category.$refs.panel.checkedValue = [];//也可以是指定的值，默认返回值是数组，也可以返回单个值
　　this.$refs.category.$refs.panel.activePath = [];
　　this.$refs.category.$refs.panel.syncActivePath();
this.queryParams.categoryIds = [];
this.$refs.category.$refs.panel.activePath = [];
this.$refs.category.$refs.panel.syncActivePath();
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.dialogObj={};
this.dialogObj = {};
this.open = true;
this.title = "添加商品spu";
},
@@ -227,8 +415,8 @@ export default {
this.open = true;
this.title = "修改商品spu";
},
closeDialog(){
this.dialogObj={};
closeDialog() {
this.dialogObj = {};
this.open = false;
this.getList()
},
@@ -244,10 +432,26 @@ export default {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
.catch(() => {
});
},
unitConversion(row, column, cellValue){
unitConversion(row, column, cellValue) {
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;
}
.product-info{
.product-info {
display: flex;
.img-height {
height: 50px;
width: 50px;
}
.message{
.message {
margin-left: 10px;
text-overflow: ellipsis;
display: -webkit-box;

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

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