添加商品步骤条界面
This commit is contained in:
parent
158d9be603
commit
e72245a58b
@ -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
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -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>
|
||||
|
||||
|
||||
|
15
src/views/pms/product/components/addProductAttr.vue
Normal file
15
src/views/pms/product/components/addProductAttr.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div style="margin-top: 50px">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "addProductAttr"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
130
src/views/pms/product/components/addProductInfo.vue
Normal file
130
src/views/pms/product/components/addProductInfo.vue
Normal 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>
|
13
src/views/pms/product/components/addProductRelation.vue
Normal file
13
src/views/pms/product/components/addProductRelation.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>选择商品关联</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "addProductRelation"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
97
src/views/pms/product/components/addProductSale.vue
Normal file
97
src/views/pms/product/components/addProductSale.vue
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user