cuishiyu
/
2108a-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品信息功能

dev
csy 2024-03-08 20:10:34 +08:00
parent 70302279c8
commit bedd5ec17f
1 changed files with 452 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

527
src/views/product/info/index.vue
View File

@ -9,22 +9,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品价格" prop="price">
<el-input
v-model="queryParams.price"
placeholder="请输入商品价格"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品数量" prop="num">
<el-input
v-model="queryParams.num"
placeholder="请输入商品数量"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable>
<el-option
@ -35,14 +19,6 @@
/>
</el-select>
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input
v-model="queryParams.brandId"
placeholder="请输入品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="规格" prop="ruleId">
<el-input
v-model="queryParams.ruleId"
@ -51,6 +27,14 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input
v-model="queryParams.brandId"
placeholder="请输入品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -107,24 +91,27 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="商品名称" align="center" prop="name" />
<el-table-column label="商品描述" align="center" prop="introduction" />
<el-table-column label="主类型" align="center" prop="mianType" />
<el-table-column label="父类型" align="center" prop="parentType" />
<el-table-column label="商品类型" align="center" prop="type" />
<el-table-column label="商品图片" align="center" prop="image" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="主类型" align="center" prop="mianType" />
<el-table-column label="父类型" align="center" prop="parentType" />
<el-table-column label="商品类型" align="center" prop="type" />
<el-table-column label="商品价格" align="center" prop="price" />
<el-table-column label="商品数量" align="center" prop="num" />
<el-table-column label="商品介绍" align="center" prop="introduction" />
<el-table-column label="商品轮播图" align="center" prop="carouselImages" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="商品状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="品牌" align="center" prop="brandId" />
<el-table-column label="规格" align="center" prop="ruleId" />
<el-table-column label="品牌" align="center" prop="brandId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -155,43 +142,223 @@
/>
<!-- 添加或修改商品信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-steps :active="stepNumber" finish-status="success">
<el-step title="基本信息"></el-step>
<el-step title="品类属性"></el-step>
<el-step title="商品规格"></el-step>
<el-step title="商品描述"></el-step>
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="商品图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="商品价格" prop="price">
<el-input v-model="form.price" placeholder="请输入商品价格" />
</el-form-item>
<el-form-item label="商品数量" prop="num">
<el-input v-model="form.num" placeholder="请输入商品数量" />
</el-form-item>
<el-form-item label="商品介绍">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="商品状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input v-model="form.brandId" placeholder="请输入品牌" />
</el-form-item>
<el-form-item label="规格" prop="ruleId">
<el-input v-model="form.ruleId" placeholder="请输入规格" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<div v-show="stepNumber === 0">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="商品状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="品牌" prop="brandId">
<el-select
v-model="form.brandId"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteSearchBrandList"
:loading="loading">
<el-option
v-for="brand in brandList"
:key="brand.id"
:label="brand.nam"
:value="brand.id">
<el-row>
<image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
<div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
</el-row>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="商品图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="商品轮播图" prop="carouselImages">
<image-upload v-model="form.carouselImages"/>
</el-form-item>
</el-row>
</div>
<div v-show="stepNumber === 1">
<el-form-item label="品类" prop="ruleId">
<el-cascader
style="width: 100%"
v-model="categoryOptionValue"
clearable
:props="{'value': 'id', 'label': 'name'}"
:options="categoryOptions"></el-cascader>
</el-form-item>
<el-empty v-show="categoryOptionValue.length === 0" description="请选择品类，在进行操作"></el-empty>
<el-tabs v-show="categoryOptionValue.length > 0" v-model="activeName" type="border-card">
<el-tab-pane label="商品属性组" name="attributeGroup">
<el-row style="overflow-x: auto; height: 300px;">
<el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>属性组【{{templateAttributeGroup.groupName}}】</span>
</div>
<div style="height: 200px; width: 100%;">
<el-form ref="form" label-width="80px">
<el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
<el-input v-model="attribute.value"></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="商品属性" name="attribute">
<el-row style="overflow-x: auto; height: 300px;">
<el-form ref="form" :model="form" label-width="80px">
<el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
<el-form-item :label="templateAttribute.name" >
<el-input v-model="templateAttribute.value"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</el-tab-pane>
<el-tab-pane label="自有属性" name="third">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>添加商品属性</span>
</div>
<el-row>
<el-button v-show="!customAttributeFormStatus" @click="customAttributeFormStatus = true">添加自有属性</el-button>
<el-form v-show="customAttributeFormStatus" :inline="true" :model="customAttributeForm" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item label="属性值">
<el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveCustomAttribute">确定</el-button>
</el-form-item>
</el-form>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性</span>
</div>
<el-row style="height: 80px; overflow-y: auto">
<el-checkbox-group v-model="attributeIdCheckedList" @change="attributeCheckedFun">
<el-col :span="4" v-for="attribute in categoryCommonElement.attributeList" style="margin: 5px 0">
<el-checkbox :label="attribute.id" :value="attribute.id" :key="attribute.id" border>{{attribute.name}}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>属性值填写</span>
</div>
<el-row style="overflow-x: auto; height: 300px;">
<el-form ref="form" :model="form" label-width="80px">
<el-col :span="6" v-for="attribute in attributeCheckedList">
<el-form-item :label="attribute.name">
<el-input v-model="attribute.value"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
<div v-show="stepNumber === 2">
<el-form-item label="规格" prop="ruleId">
<el-select v-model="form.ruleId" placeholder="请选择" style="width: 100%;">
<el-option
v-for="rule in ruleList"
:key="rule.id"
:label="rule.name"
:value="rule.id">
<span>{{rule.name}} - {{rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString()}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
<el-form-item label="图片">
<image-upload
:limit="1"
:is-show-tip="false"
v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
</el-form-item>
<el-form-item label="库存">
<el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="oneSetting">一键设置</el-button>
</el-form-item>
</el-form>
<el-table
:data="skuList"
border
style="width: 100%">
<el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
<template slot-scope="scope">
<span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
<el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
<image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
:limit="1"
:is-show-tip="false">
</image-upload>
</template>
</el-table-column>
</el-table>
</el-form-item>
</div>
<div v-show="stepNumber === 3">
<el-form-item label="商品描述">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
<el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
@ -201,6 +368,10 @@
<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
import {listBrand} from "@/api/product/brand";
import {getTemplateAttribute, listCategory} from "@/api/product/category";
import {listRule} from "@/api/product/rule";
import {addAttribute} from "@/api/product/attribute";
export default {
name: "Info",
@ -230,16 +401,15 @@ export default {
pageNum: 1,
pageSize: 10,
name: null,
image: null,
introduction: null,
mianType: null,
parentType: null,
type: null,
price: null,
num: null,
introduction: null,
image: null,
carouselImages: null,
status: null,
brandId: null,
ruleId: null,
brandId: null,
},
// 表单参数
form: {},
@ -251,13 +421,211 @@ export default {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
},
stepNumber: 1,
brandList: [],
categoryOptions: [],
categoryOptionValue: [],
ruleList: [],
activeName: "attributeGroup",
customAttributeForm: {
},
customAttributeFormStatus: false,
attributeIdCheckedList: [],
attributeCheckedList: [],
categoryCommonElement: {
templateAttributeGroupList: [],
templateAttributeList: [],
attributeList: []
},
templateTitleList:[
{
"label":"规格照片",
"prop":"image"
},
{
"label":"商品库存",
"prop":"stock"
},
{
"label":"商品价格",
"prop":"price"
}
],
titleList:[],
skuList:[],
oneSettingForm:{
"image":null,
"stock":null,
"price":null
}
};
},
watch: {
categoryOptionValue: {
handler(value){
if (value !== null && value !== undefined && value.length > 0){
this.form.mianType = value[0];
this.form.parentType = value[1];
this.form.type = value[2];
}else {
this.form.mianType = null;
this.form.parentType = null;
this.form.type = null;
}
}
},
"form.type": {
handler(value) {
console.log(value)
if (value != null){
getTemplateAttribute(value).then(response => {
const {data} = response;
const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
this.categoryCommonElement.templateAttributeList = templateAttributeList;
this.categoryCommonElement.attributeList = attributeList;
})
}
}
}
},
created() {
this.getList();
},
methods: {
oneSetting(){
this.skuList.forEach(skuInfo => {
skuInfo.image=this.oneSettingForm.image;
skuInfo.stock=this.oneSettingForm.stock;
skuInfo.price=this.oneSettingForm.price;
})
},
changeRule(ruleId){
this.titleList=[]
let ruleInfo=this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
const {ruleAttrList}=ruleInfo;
let skuTotal=1;
for (let ruleAttrListKey in ruleAttrList) {
let ruleAttrInfo=ruleAttrList[ruleAttrListKey];
this.titleList.push({
"label":ruleAttrInfo.name,
"prop":"prop"+ruleAttrListKey
})
skuTotal=skuTotal*ruleAttrInfo.valueList.length;
}
this.titleList.push(...this.templateTitleList);
console.log(this.titleList);
this.skuList=[];
for(let i=0;i<skuTotal;i++){
this.skuList.push(
{
"image":null,
"price":85.62,
"stock":236
}
);
}
//currentIndex 当前下标
for(let currentIndex in ruleAttrList){
let ruleAttrInfo=ruleAttrList[currentIndex];
//连续出现次数 循环出现次数
let continuousSize=1,forSize=1;
for(let continuousIndex=parseInt(currentIndex)+1;continuousIndex<ruleAttrList.length;continuousIndex++){
continuousSize=continuousSize * ruleAttrList[continuousIndex].valueList.length;
}
for(let forIndex=parseInt(currentIndex)-1;forIndex >= 0;forIndex--){
forSize=forSize*ruleAttrList[forIndex].valueList.length
}
console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize} 循环出现次数：${forSize}`)
let counter=0;
for(let forIndex=0;forIndex<forSize;forIndex++){
const {valueList} =ruleAttrInfo;
valueList.forEach(value => {
for(let continuousIndex=0;continuousIndex<continuousSize;continuousIndex++){
this.skuList[counter++]["prop"+currentIndex]=value;
}
})
}
}
},
saveCustomAttribute(){
addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
if (response.code === 200){
// 添加逻辑
let attributeId = response.data,
code = this.customAttributeForm.code,
name = this.customAttributeForm.name,
value = this.customAttributeForm.value;
this.categoryCommonElement.attributeList.push({
"id":attributeId,
"name":name,
"code":code
});
this.attributeIdCheckedList.push(attributeId);
this.attributeCheckedList.push(
{
"id":attributeId,
"name":name,
"value":value
}
);
this.customAttributeForm={}
this.customAttributeFormStatus=false;
}
})
},
attributeCheckedFun() {
// attributeIdCheckedList -> attributeCheckedList 不在
// 1 -> ID 1 : attributeCheckedList[] -> 1
// 2 -> ID 3 : attributeCheckedList[1] -> 3
let attributeId =this.attributeIdCheckedList
.find(attributeId =>
this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1
)
if (attributeId !== undefined){
let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
this.attributeCheckedList.push(attributeInfo);
}else {
// attributeIdCheckedList [3] : attributeCheckedList [] -> [3]
// attributeIdCheckedList [3,5] : attributeCheckedList [3] -> [3,5]
// attributeIdCheckedList [3,5,9] : attributeCheckedList [3,5] -> [3,5,9]
// attributeIdCheckedList [3,9] : attributeCheckedList [3,5,9] -> [3,9]
// attributeCheckedList 集合 不在 attributeIdCheckedList 集合的元素，然后删除
let attributeChecked = this.attributeCheckedList.find(attributeChecked => this.attributeIdCheckedList.indexOf(attributeChecked.id) === -1);
this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked), 1);
}
},
initRuleList(){
listRule({"params[isPage]": false}).then(response => {
this.ruleList = response.data;
});
},
initCategoryTree(){
listCategory().then(response => {
this.categoryOptions = [];
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
console.log(this.categoryOptions)
});
},
remoteSearchBrandList(queryValue){
listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
this.brandList = response.data;
});
},
last() {
this.stepNumber--
},
next() {
this.stepNumber++
},
/** 查询商品信息列表 */
getList() {
this.loading = true;
@ -277,16 +645,15 @@ export default {
this.form = {
id: null,
name: null,
image: null,
introduction: null,
mianType: null,
parentType: null,
type: null,
price: null,
num: null,
introduction: null,
image: null,
carouselImages: null,
status: null,
brandId: null,
ruleId: null,
brandId: null,
remark: null,
createBy: null,
createTime: null,
@ -294,6 +661,8 @@ export default {
updateTime: null
};
this.resetForm("form");
this.initCategoryTree();
this.initRuleList();
},
/** 搜索按钮操作 */
handleQuery() {
@ -366,3 +735,11 @@ export default {
}
};
</script>
<style>
.el-select-dropdown__item{
height: 45px;
}
.box-card {
margin: 10px;
}
</style>