添加商品步骤条界面

This commit is contained in:
zhh 2018-05-28 17:26:58 +08:00
parent 158d9be603
commit e72245a58b
6 changed files with 411 additions and 18 deletions

View File

@ -43,7 +43,7 @@ export const constantRouterMap = [
name: 'product',
component: () => import('@/views/pms/product/index'),
meta: {title: '商品列表', icon: 'product-list'}
},
},
{
path: 'addProduct',
name: 'addProduct',
@ -55,14 +55,14 @@ export const constantRouterMap = [
name: 'productRecycle',
component: () => import('@/views/pms/product/index'),
meta: {title: '商品回收站', icon: 'product-recycle'},
hidden:true
hidden: true
},
{
path: 'productComment',
name: 'productComment',
component: () => import('@/views/pms/product/index'),
meta: {title: '商品评价', icon: 'product-comment'},
hidden:true
hidden: true
},
{
path: 'productCate',
@ -75,14 +75,14 @@ export const constantRouterMap = [
name: 'addProductCate',
component: () => import('@/views/pms/productCate/add'),
meta: {title: '添加商品分类'},
hidden:true
hidden: true
},
{
path: 'updateProductCate',
name: 'updateProductCate',
component: () => import('@/views/pms/productCate/update'),
meta: {title: '修改商品分类'},
hidden:true
hidden: true
},
{
path: 'productAttr',
@ -95,21 +95,21 @@ export const constantRouterMap = [
name: 'productAttrList',
component: () => import('@/views/pms/productAttr/productAttrList'),
meta: {title: '商品属性列表'},
hidden:true
hidden: true
},
{
path: 'addProductAttr',
name: 'addProductAttr',
component: () => import('@/views/pms/productAttr/addProductAttr'),
meta: {title: '添加商品属性'},
hidden:true
hidden: true
},
{
path: 'updateProductAttr',
name: 'updateProductAttr',
component: () => import('@/views/pms/productAttr/updateProductAttr'),
meta: {title: '修改商品属性'},
hidden:true
hidden: true
},
{
path: 'brand',
@ -122,14 +122,14 @@ export const constantRouterMap = [
name: 'addBrand',
component: () => import('@/views/pms/brand/add'),
meta: {title: '添加品牌'},
hidden:true
hidden: true
},
{
path: 'updateBrand',
name: 'updateBrand',
component: () => import('@/views/pms/brand/update'),
meta: {title: '编辑品牌'},
hidden:true
hidden: true
}
]
},

View File

@ -1,21 +1,159 @@
<template> 
<el-card class="form-container" shadow="never">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="first" name="first">first</el-tab-pane>
<el-tab-pane label="second" name="second">second</el-tab-pane>
<el-tab-pane label="third" name="third">third</el-tab-pane>
<el-tab-pane label="fourth" name="fourth">fourth</el-tab-pane>
</el-tabs>
<el-steps :active="active" finish-status="success" align-center>
<el-step title="填写商品信息"></el-step>
<el-step title="填写商品促销"></el-step>
<el-step title="填写商品属性"></el-step>
<el-step title="选择商品关联"></el-step>
</el-steps>
<add-product-info v-show="showStatus[0]" v-model="productParam"></add-product-info>
<add-product-sale v-show="showStatus[1]" v-model="productParam"></add-product-sale>
<add-product-attr v-show="showStatus[2]"></add-product-attr>
<add-product-relation v-show="showStatus[3]"></add-product-relation>
<el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
</el-card>
</template>
<script>
import AddProductInfo from './components/addProductInfo';
import AddProductSale from './components/addProductSale';
import AddProductAttr from './components/addProductAttr';
import AddProductRelation from './components/addProductRelation';
const defaultProductParam = {
albumPics: '',
brandId: null,
brandName: '',
deleteStatus: 0,
description: '',
detailDesc: '',
detailHtml: '',
detailMobileHtml: '',
detailTitle: '',
feightTemplateId: 0,
flashPromotionCount: 0,
flashPromotionId: 0,
flashPromotionPrice: 0,
flashPromotionSort: 0,
giftPoint: 0,
keywords: '',
lowStock: 0,
name: '',
newStatus: 0,
note: '',
originalPrice: 0,
pic: '',
//
memberPriceList: [
{
memberLevelId: 0,
memberPrice: 0,
}
],
productFullReductionList: [
{
fullPrice: 0,
reducePrice: 0
}
],
productLadderList: [
{
count: 0,
discount: 0,
price: 0
}
],
previewStatus: 0,
price: 0,
productAttributeCategoryId: 0,
//
productAttributeValueList: [
{
productAttributeId: 0,
value: ''
}
],
skuStockList: [
{
lowStock: 0,
pic: '',
price: 0,
sale: 0,
skuCode: '',
sp1: '',
sp2: '',
sp3: '',
stock: 0
}
],
//
subjectProductRelationList: [
{
subjectId: 0
}
],
prefrenceAreaProductRelationList: [
{
prefrenceAreaId: 0,
}
],
productCategoryId: null,
productCategoryName: '',
productSn: '',
promotionEndTime: '',
promotionPerLimit: 0,
promotionPrice: 0,
promotionStartTime: '',
promotionType: 0,
publishStatus: 0,
recommandStatus: 0,
sale: 0,
serviceIds: '',
sort: 0,
stock: 0,
subTitle: '',
unit: '',
usePointLimit: 0,
verifyStatus: 0,
weight: 0
};
export default {
name: 'addProduct',
components: {AddProductInfo, AddProductSale, AddProductAttr, AddProductRelation},
data() {
return {activeName: 'first'}
return {
active: 0,
productParam: Object.assign({}, defaultProductParam),
showStatus: [true, false, false, false]
}
},
methods: {
hideAll() {
for (let i = 0; i < this.showStatus.length; i++) {
this.showStatus[i] = false;
}
},
prev() {
if (this.active > 0 && this.active < this.showStatus.length) {
this.active--;
this.hideAll();
this.showStatus[this.active] = true;
}
},
next() {
if (this.active < this.showStatus.length - 1) {
this.active++;
this.hideAll();
this.showStatus[this.active] = true;
}
}
}
}
</script>
<style></style>
<style>
.form-container {
width: 800px;
}
</style>

View File

@ -0,0 +1,15 @@
<template>
<div style="margin-top: 50px">
</div>
</template>
<script>
export default {
name: "addProductAttr"
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,130 @@
<template>
<div style="margin-top: 50px">
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="150px" style="width: 520px" size="small">
<el-form-item label="商品分类:" prop="productCategoryId">
<el-cascader
v-model="selectProductCateValue"
:options="productCateOptions">
</el-cascader>
</el-form-item>
<el-form-item label="商品名称:" prop="name">
<el-input v-model="value.name"></el-input>
</el-form-item>
<el-form-item label="副标题:" prop="subTitle">
<el-input v-model="value.subTitle"></el-input>
</el-form-item>
<el-form-item label="商品品牌:" prop="brandId">
<el-select v-model="value.brandId" placeholder="请选择品牌">
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品介绍:" prop="description">
<el-input
:autoSize="true"
v-model="value.description"
type="textarea"
placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="商品货号:" prop="requiredProp">
<el-input v-model="value.productSn"></el-input>
</el-form-item>
<el-form-item label="商品售价:" prop="requiredProp">
<el-input v-model="value.price"></el-input>
</el-form-item>
<el-form-item label="市场价:">
<el-input v-model="value.originalPrice"></el-input>
</el-form-item>
<el-form-item label="商品库存:" prop="requiredProp">
<el-input v-model="value.stock"></el-input>
</el-form-item>
<el-form-item label="计量单位:">
<el-input v-model="value.unit"></el-input>
</el-form-item>
<el-form-item label="商品重量:">
<el-input v-model="value.weight" style="width: 300px"></el-input>
<span style="margin-left: 20px"></span>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchListWithChildren} from '@/api/productCate'
import {fetchList as fetchBrandList} from '@/api/brand'
export default {
name: "addProductInfo",
props: {
value: Object
},
data() {
return {
selectProductCateValue: null,
productCateOptions: [],
brandOptions: [],
rules: {
name: [
{required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
],
subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
}
};
},
created() {
this.getProductCateList();
this.getBrandList();
},
watch: {
selectProductCateValue: function (newValue) {
if (newValue != null && newValue.length == 2) {
this.value.productCategoryId = newValue[1];
} else {
this.value.productCategoryId = null;
}
}
},
methods: {
getProductCateList() {
fetchListWithChildren().then(response => {
let list = response.data;
this.productCateOptions = [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
});
},
getBrandList() {
fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
this.brandOptions = [];
let brandList = response.data.list;
for (let i = 0; i < brandList.length; i++) {
this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
}
});
},
}
}
</script>
<style scoped>
.smallInput {
width: 150px;
}
</style>

View File

@ -0,0 +1,13 @@
<template>
<div>选择商品关联</div>
</template>
<script>
export default {
name: "addProductRelation"
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,97 @@
<template>
<div style="margin-top: 50px">
<el-form :model="value" ref="productSaleForm" label-width="150px" style="width: 520px" size="small">
<el-form-item label="赠送积分:">
<el-input v-model="value.giftPoint"></el-input>
</el-form-item>
<el-form-item label="赠送成长值:">
<el-input></el-input>
</el-form-item>
<el-form-item label="积分购买限制:">
<el-input v-model="value.usePointLimit"></el-input>
</el-form-item>
<el-form-item label="预告商品:">
<el-switch
v-model="value.previewStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="商品上架:">
<el-switch
v-model="value.publishStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="商品推荐:">
<span style="margin-right: 10px">新品</span>
<el-switch
v-model="value.newStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
<span style="margin-left: 10px;margin-right: 10px">推荐</span>
<el-switch
v-model="value.recommendStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="服务保证:">
<el-checkbox-group v-model="selectServiceList">
<el-checkbox :label="1">无忧退货</el-checkbox>
<el-checkbox :label="2">快速退款</el-checkbox>
<el-checkbox :label="3">免费包邮</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="详细页标题:">
<el-input v-model="value.detailTitle"></el-input>
</el-form-item>
<el-form-item label="详细页描述:">
<el-input v-model="value.detailDesc"></el-input>
</el-form-item>
<el-form-item label="商品关键字:">
<el-input v-model="value.keywords"></el-input>
</el-form-item>
<el-form-item label="商品备注:">
<el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "addProductSale",
props: {
value: Object
},
watch: {
selectServiceList: function (newValue) {
let serviceIds='';
if (newValue != null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) {
serviceIds += newValue[i] + ',';
}
if (serviceIds.endsWith(',')) {
serviceIds = serviceIds.substr(0,serviceIds.length - 1)
}
this.value.serviceIds=serviceIds;
} else {
this.value.serviceIds = null;
}
}
},
data() {
return {
selectServiceList: []
}
}
}
</script>
<style scoped>
</style>