jiangpeng
/
ruoyi-server
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改品类信息

Jiang Peng 2024-03-21 16:35:40 +08:00
parent 971296ea2c
commit ac293f64d2
7 changed files with 634 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/product/category.js
View File

@ -16,6 +16,21 @@ export function getCategory(id) {
method: 'get'
})
}
// 查询品类共有元素
export function getTemplateAttribute(id) {
return request({
url: '/product/category/getTemplateAttribute/' + id,
method: 'get'
})
}
// 查询品类信息详细
export function parentCommonElement(id) {
return request({
url: '/product/category/parentCommonElement/' + id,
method: 'get'
})
}
// 新增品类信息
export function addCategory(data) {

9
src/views/product/attribute/index.vue
View File

@ -62,7 +62,7 @@
</el-row>
<el-table v-loading="loading" :data="attributeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="54" align="center" />
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="属性编码" align="center" prop="code" />
<el-table-column label="属性名" align="center" prop="name" />
<el-table-column label="备注" align="center" prop="remark" />
@ -117,18 +117,11 @@
<script>
import { listAttribute, getAttribute, delAttribute, addAttribute, updateAttribute } from "@/api/product/attribute";
import {listAttributeGroup} from "@/api/product/attributeGroup";
export default {
name: "Attribute",
data() {
return {
queryParam: {
pageNum: 1,
pageSize: 10,
name: null,
states: null
},
// 遮罩层
loading: true,
// 选中数组

139
src/views/product/attributeGroup/index.vue
View File

@ -4,7 +4,7 @@
<el-form-item label="组名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入属性组名称"
placeholder="请输入组名称"
clearable
@keyup.enter.native="handleQuery"
/>
@ -141,66 +141,7 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-row>
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性关联关系</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>已选择属性</span>
</div>
<el-row>
<el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
<el-tag
style="margin: 5px 10px"
:key="attribute.name"
closable @close="removeChecked(index)">
{{attribute.name}}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-divider></el-divider>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>未选属性</span>
</div>
<el-row>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryAttribute">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList" >
<el-checkbox
v-model="form.attributeIdList"
:key="attribute.id"
:value="attribute.id"
:label="attribute.id"
@change="checkedAttribute(attribute)"
border>{{attribute.name}}</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="attributeQuery.pageNum"
:limit.sync="attributeQuery.pageSize"
@pagination="queryAttribute"
/>
</el-card>
</el-card>
</el-row>
<CheckAttribute v-model="form.attributeIdList"/>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -212,18 +153,10 @@
<script>
import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
import {listAttribute} from "@/api/product/attribute";
export default {
name: "AttributeGroup",
dicts: ['sys_yes_no'],
watch: {
'form.attributeIdList':{
handler(val) {
console.log(val)
}
}
},
data() {
return {
// 遮罩层
@ -252,8 +185,7 @@ export default {
states: null
},
// 表单参数
form: {
},
form: {},
// 表单校验
rules: {
name: [
@ -262,66 +194,13 @@ export default {
states: [
{ required: true, message: "状态不能为空", trigger: "change" }
],
},
tags: [
{ name: '标签一' },
{ name: '标签二' }
],
checkedAttributeList: [],
attributeQuery: {
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
attributeTotal: 0,
attributeList: []
}
};
},
activated() {
this.getList();
},
created() {
this.getList();
},
methods: {
/**
* 选中值触发方法
*/
checkedAttribute(attribute){
let isCheck = this.form.attributeIdList.indexOf(attribute.id) > -1;
if (isCheck){
this.checkedAttributeList.push(attribute);
}else {
// 删除
console.log(this.checkedAttributeList)
console.log(attribute)
console.log(this.checkedAttributeList.indexOf(attribute))
this.checkedAttributeList.splice(
this.checkedAttributeList.indexOf(attribute), 1
)
}
},
/**
* 删除选中值
* @param index
*/
removeChecked(index){
console.log(this.form.attributeIdList)
this.checkedAttributeList.splice(index, 1);
this.form.attributeIdList.splice(index, 1);
console.log(this.form.attributeIdList)
},
/**
* 查询属性
*/
queryAttribute(){
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.total = response.data.total;
});
},
/** 查询属性组列表 */
getList() {
@ -335,7 +214,6 @@ export default {
// 取消按钮
cancel() {
this.open = false;
this.getList()
this.reset();
},
// 表单重置
@ -371,25 +249,16 @@ export default {
this.reset();
this.open = true;
this.title = "添加属性组";
this.queryAttribute();
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.checkedAttributeList = row.attributeInfoList
const id = row.id || this.ids
getAttributeGroup(id).then(response => {
const att = this.form.attributeIdList
this.form = response.data;
this.open = true;
this.title = "修改属性组";
this.form.attributeIdList = att
row.attributeInfoList.forEach(att => {
this.form.attributeIdList.push(att.id)
})
this.queryAttribute();
});
this.queryAttribute();
},
/** 提交按钮 */
submitForm() {

16
src/views/product/brand/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="app-container">
<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="nam">
<el-input
v-model="queryParams.name"
v-model="queryParams.nam"
placeholder="请输入品牌名称"
clearable
@keyup.enter.native="handleQuery"
@ -74,7 +74,7 @@
<el-table v-loading="loading" :data="brandList" @selection-change="handleSelectionChange">
<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="nam" />
<el-table-column label="LOGO" align="center" prop="logo" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.logo" :width="50" :height="50"/>
@ -118,8 +118,8 @@
<!-- 添加或修改品牌信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<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 label="品牌名称" prop="nam">
<el-input v-model="form.nam" placeholder="请输入品牌名称" />
</el-form-item>
<el-form-item label="LOGO" prop="logo">
<image-upload v-model="form.logo" :limit="1" :is-show-tip="false"/>
@ -178,7 +178,7 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
nam: null,
logo: null,
start: null,
introduction: null,
@ -187,7 +187,7 @@ export default {
form: {},
// 表单校验
rules: {
name: [
nam: [
{ required: true, message: "品牌名称不能为空", trigger: "blur" }
],
logo: [
@ -227,7 +227,7 @@ export default {
reset() {
this.form = {
id: null,
name: null,
nam: null,
logo: null,
start: null,
introduction: null,

37
src/views/product/category/index.vue
View File

@ -106,7 +106,6 @@
<!-- 添加或修改品类信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="父级品类" prop="parentId">
@ -151,13 +150,13 @@
</el-row>
<el-tabs value="attribute" type="card" >
<el-tab-pane label="商品属性" name="attribute">
<CheckAttribute v-model="form.attributeIdList"/>
<CheckAttribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
</el-tab-pane>
<el-tab-pane label="商品属性组" name="attributeGroup">
<CheckAttributeGroup v-model="form.attributeGroupIdList"/>
<CheckAttributeGroup v-model="form.attributeGroupIdList" :checked-list="attributeGroupList"/>
</el-tab-pane>
<el-tab-pane label="商品品牌" name="brand">
<CheckBrand v-model="form.brandIdList"/>
<CheckBrand v-model="form.brandIdList" :checked-list="brandInfoList"/>
</el-tab-pane>
</el-tabs>
@ -171,13 +170,20 @@
</template>
<script>
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/product/category";
import {
listCategory,
getCategory,
delCategory,
addCategory,
updateCategory,
parentCommonElement
} from "@/api/product/category";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Category",
dicts: ["sys_yes_no"],
dicts: ['sys_yes_no'],
components: {
Treeselect
},
@ -229,9 +235,26 @@ export default {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
},
attributeInfoList: [],
attributeGroupList: [],
brandInfoList: [],
};
},
watch: {
'form.parentId': {
handler(val){
if (val !== undefined && val !== 0){
parentCommonElement(val).then(response => {
this.attributeInfoList = response.data.attributeInfoList;
this.attributeGroupList = response.data.attributeGroupList;
this.brandInfoList = response.data.brandInfoList;
})
}
},
immediate: true
}
},
created() {
this.getList();
},

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

@ -143,39 +143,220 @@
<!-- 添加或修改商品信息对话框 -->
<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="商品描述">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="商品图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="商品轮播图" prop="carouselImages">
<image-upload v-model="form.carouselImages"/>
</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="ruleId">
<el-input v-model="form.ruleId" placeholder="请输入规格" />
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input v-model="form.brandId" 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.name"
: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.name}}</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="type">
<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="templateAttributeGroupForm" 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="attributeForm" :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="请选择" @change="changeRule" 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 :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>
</div>
<div v-show="stepNumber === 3">
<el-form-item label="商品描述" prop="introduction">
<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>
@ -185,6 +366,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",
@ -228,19 +413,242 @@ export default {
form: {},
// 表单校验
rules: {
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
name: [
{ required: true, message: "商品名称不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
status: [
{ required: true, message: "商品状态不能为空", trigger: "blur" }
],
brandId: [
{ required: true, message: "商品品牌不能为空", trigger: "blur" }
],
image: [
{ required: true, message: "商品图片不能为空", trigger: "blur" }
],
carouselImages: [
{ required: true, message: "商品轮播图不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "商品品类不能为空", trigger: "blur" }
],
ruleId: [
{ required: true, message: "商品规格不能为空", trigger: "blur" }
],
},
rulesTemplateMap: {
0: ["name", "status", "brandId", "image", "carouselImages"],
1: ["type"],
2: ["ruleId"],
},
stepNumber: 0,
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;
// categoryCommonElement / attributeIdCheckedList / attributeCheckedList
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() {
let isValidate = true;
this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
console.log(valid)
if (valid) {
isValidate = false;
}
});
if (isValidate){
this.stepNumber++
}
},
/** 查询商品信息列表 */
getList() {
this.loading = true;
@ -276,6 +684,8 @@ export default {
updateTime: null
};
this.resetForm("form");
this.initCategoryTree();
this.initRuleList();
},
/** 搜索按钮操作 */
handleQuery() {
@ -348,3 +758,11 @@ export default {
}
};
</script>
<style>
.el-select-dropdown__item{
height: 45px;
}
.box-card {
margin: 10px;
}
</style>

129
src/views/product/rule/index.vue
View File

@ -65,6 +65,18 @@
<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="name" >
<template slot-scope="scope">
<el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.name}}</span></el-row>
</template>
</el-table-column>
<el-table-column label="规格属性值" align="center" prop="name" >
<template slot-scope="scope">
<el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.valueList.toString()}}</span></el-row>
</template>
</el-table-column>
<el-table-column label="规格状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -104,6 +116,45 @@
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-row v-for="(ruleAttr, index) in form.ruleAttrList">
<el-row style="margin: 20px 0">
<el-tag
:key="ruleAttr.name"
@close="removeRule(index)"
closable>
{{ruleAttr.name}}
</el-tag>
</el-row>
<el-row style="margin: 10px 0">
<el-tag
style="float: left; margin-right: 20px"
v-for="(ruleProperty, index) in ruleAttr.valueList"
:key="ruleProperty"
@close="removeRuleProperty(ruleAttr.valueList, index)"
closable>
{{ruleProperty}}
</el-tag>
<el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus" size="mini">添加</el-button>
<el-input v-if="ruleAttr.ruleAttrAddStatus"
v-model="addRulePropertyValue"
@blur="addRuleProperty(ruleAttr, false)"
@keyup.enter.native="addRuleProperty(ruleAttr, true)"
size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>
</el-row>
<el-divider></el-divider>
</el-row>
<el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus">添加规格</el-button>
<el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
<el-form-item label="规格名称">
<el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
</el-form-item>
<el-form-item label="规格属性">
<el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="ruleAddFormFun">添加</el-button>
</el-form-item>
</el-form>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -155,13 +206,84 @@ export default {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
},
ruleAddForm: {
name: null,
valueList: null,
},
ruleAddFormStatus: false,
addRulePropertyValue: null
};
},
created() {
this.getList();
},
methods: {
removeRule(index){
this.form.ruleAttrList.splice(index, 1);
},
removeRuleProperty(valueList,index){
valueList.splice(index, 1);
},
addRuleProperty(ruleAttr, continuousInput){
if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
if (!continuousInput){
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
}
return;
}
if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){
this.$message({
message: `规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
type: 'warning'
});
return;
}
ruleAttr.valueList.push(this.addRulePropertyValue)
this.addRulePropertyValue = null;
if (!continuousInput){
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
}
},
ruleAddFormFun(){
if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
this.$message({
message: '规格名称不可为空',
type: 'warning'
});
return;
}
if (this.ruleAddForm.valueList === null || this.ruleAddForm.valueList.length === 0){
this.$message({
message: '规格属性不可为空',
type: 'warning'
});
return;
}
let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name === this.ruleAddForm.name);
if (ruleAttr === undefined){
this.form.ruleAttrList.push({
"name": this.ruleAddForm.name,
"valueList": [this.ruleAddForm.valueList],
"ruleAttrAddStatus": false
})
}else {
if (ruleAttr.valueList.indexOf(this.ruleAddForm.valueList) > -1){
this.$message({
message: `规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.valueList}]已经存在`,
type: 'warning'
});
return;
}
ruleAttr.valueList.push(this.ruleAddForm.valueList)
}
this.ruleAddForm = {
name: null,
valueList: null,
}
this.ruleAddFormStatus = false;
},
/** 查询商品规格列表 */
getList() {
this.loading = true;
@ -183,10 +305,7 @@ export default {
name: null,
status: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
ruleAttrList:[]
};
this.resetForm("form");
},