fe / yoho-shop-manage · Commits

Go to a project

Authored by 陈峰
Commit 00a4181c2c5d5788b220a04224899b0a9d8a98f7 2 parents c3e27b32 fb9ae26a

Merge branch 'release/1.0' of http://git.yoho.cn/fe/yoho-shop-manage into release/1.0

Inline Side-by-side
Showing 20 changed files with 842 additions and 545 deletions
... ... @@ -13,7 +13,7 @@
</template>
</div>
<FileUpload v-show="!uploadList[0]"
<Upload v-show="!uploadList[0]"
ref="upload"
:show-upload-list="false"
:data="{bucket: 'goodsimg'}"
... ... @@ -29,7 +29,7 @@
<div style="width: 120px;height:120px;line-height: 140px;">
<Icon type="plus-round" size="50"></Icon>
</div>
</FileUpload>
</Upload>
<Modal title="查看图片" v-model="visible">
<img :src="imgUrl" v-if="visible" style="width: 100%">
... ... @@ -41,6 +41,7 @@
const _ = require('lodash');
export default {
name: 'DragFileUpload',
props: ['id'],
data() {
return {
... ...
import UserInfo from './user-info';
import Editor from './editor';
import FileUpload from './file-upload';
import DragFileUpload from './drag-file-upload.vue';
export default {
UserInfo,
Editor,
FileUpload
FileUpload,
DragFileUpload
};
... ...
... ... @@ -31,7 +31,7 @@ export default {
max-width: 100px;
}
.item-col {
input, select, .ivu-select {
input, select, .ivu-select, .ivu-cascader {
max-width: 300px;
}
}
... ...
<template>
<div>
<Cascader :data="categoryList" change-on-select @on-change="selectChange"></Cascader>
<Cascader :value="value" :data="categoryList" change-on-select @on-change="selectChange"></Cascader>
<slot></slot>
</div>
</template>
... ... @@ -12,18 +12,18 @@
export default {
name: 'SelcetCategory',
props: {
value: {
type: Array
}
},
data() {
return {
categoryList: []
}
},
computed: {
},
created() {
this.getSortInfo(1);
},
methods: {
getSortInfo(level, sortId) {
const params = {
... ... @@ -47,11 +47,11 @@
};
});
},
selectChange(val) {
selectChange(val, data) {
const len = val.length;
const max = val[0];
const mid = val[1];
const max = val[0] || '';
const mid = val[1] || '';
const min = val[2] || '';
switch(len) {
case 1:
... ... @@ -106,8 +106,13 @@
break;
}
},
this.$emit('select-change', {
max,
mid,
min
});
},
getChildren(level, sortId) {
const params = {
level,
... ... @@ -129,13 +134,10 @@
return children;
});
},
}
}
}
</script>
<style lang="scss" scoped>
.field-label {
line-height: 32px;
}
</style>
\ No newline at end of file
... ...
<template>
结算页
</template>
<script>
import service from 'balance-service';
const _ = require('lodash');
export default {
created() {
},
data() {
return {
};
},
methods: {
}
};
</script>
<style lang="scss" scoped>
</style>
... ...
const page = r => require.ensure([], () => r(require('./balance')), 'finance.balance');
export default {
path: '/balance.html',
name: 'balance',
component: page,
meta: {
pageName: '结算单'
}
};
... ...
import info from './balance';
let routers = [info];
routers.forEach(router => {
router.path = `/balance${router.path}`;
router.name = `balance.${router.name}`;
});
export default routers;
\ No newline at end of file
... ...
... ... @@ -17,19 +17,21 @@
</Row>
<Row>
<Col span="8">
<Form-item label="品牌">
<div class="ivu-form-item ivu-form-item-required">
<label class="ivu-form-item-label" style="width: 70px;">品牌</label>
<div style="float: left; line-height: 1; padding: 10px 12px 10px 0; box-sizing: border-box;">
<span>{{product.brandName}}</span>
</Form-item>
</Col>
</div>
</div>
</Row>
<Row>
<Col span="8">
<Form-item label="类目">
<div class="ivu-form-item ivu-form-item-required">
<label class="ivu-form-item-label" style="width: 70px;">类目</label>
<span style="float: left; line-height: 1; padding: 10px 12px 10px 0; box-sizing: border-box;">
<span>{{sortName}}</span>
</Form-item>
</Col>
</span>
</div>
</Row>
<Row>
... ... @@ -103,30 +105,38 @@
</Row>
<Row>
<Form-item label="颜色">
<span class='squre'
v-for="color in colors"
@click="clickColor(color)"
:class="{
'squre-selected': color.selected,
'squre-disabled': color.disabled
}">
<span class="squre-color"
:style="{ 'background-color': '#' + color.colorCode}">
<div class="ivu-form-item ivu-form-item-required">
<label class="ivu-form-item-label" style="width: 70px;"> 颜色</label>
<div :class="{'product-table-error' : table.showValidateColor}" style="margin-left: 70px;">
<span class='squre'
v-for="color in colors"
@click="clickColor(color)"
:class="{
'squre-selected': color.selected,
'squre-disabled': color.disabled
}">
<span class="squre-color"
:style="{ 'background-color': '#' + color.colorCode}">
</span>
<span class="squre-name">{{color.colorName}}</span>
</span>
<span class="squre-name">{{color.colorName}}</span>
</span>
</Form-item>
</div>
<div class="product-table-tip" v-if="table.showValidateColor">颜色必须选择</div>
</div>
</Row>
<Row>
<Form-item label="尺寸">
<Checkbox-group v-model='table.selectedSizes'>
<Checkbox v-for="size in sizes" :key="size" :label="size.id" >
<span>{{size.sizeName}}</span>
</Checkbox>
</Checkbox-group>
</Form-item>
<div class="ivu-form-item ivu-form-item-required">
<label class="ivu-form-item-label" style="width: 70px;">尺寸</label>
<div :class="{'product-table-error': table.showValidateSize}" style="margin-left: 70px;">
<Checkbox-group v-model='table.selectedSizes'>
<Checkbox v-for="size in sizes" :key="size" :label="size.id" >
<span>{{size.sizeName}}</span>
</Checkbox>
</Checkbox-group>
</div>
<div class="product-table-tip" v-if="table.showValidateSize">尺码必须选择</div>
</div>
</Row>
<Row>
... ... @@ -194,6 +204,8 @@ const makeColor = () => {
};
};
export default {
props: ['step', 'product'],
data() {
... ... @@ -237,7 +249,7 @@ export default {
return {
self: this,
colors: [],
selectedColors: [],
sizes: [],
table: {
columns: [
... ... @@ -259,8 +271,7 @@ export default {
return `<div v-if="isExist(${index})">
<i-input
v-model="row.factoryGoodsName"
placeholder="请输入..."
style="width: 100px">
:placeholder="row.goodsName.name">
</i-input>
</div>`;
}
... ... @@ -268,12 +279,26 @@ export default {
{
title: '色卡图片*',
key: 'goodsColorImage',
width: 170,
render(row, col, index) {
return `<img v-if="row.goodsColorImage"
:src="row.goodsColorImage" alt="" width="120px" height="120px">
<file-upload :id="{index: ${index}}"
@on-success="uploadSuccess"
@on-error="uploadError"></file-upload>`;
return `<div
:class="{'upload-item': true ,
'upload-item-error': row.goodsColorImage.showValidate && row.goodsColorImage.validate}"
>
<div class="upload-item-img">
<img v-if="row.goodsColorImage.value"
:src="row.goodsColorImage.value" alt="" width="120px" height="122px">
</div>
<div>
<file-upload :id="{index: ${index}}"
@on-success="uploadSuccess"
@on-error="uploadError"></file-upload>
</div>
<div v-if="row.goodsColorImage.showValidate && row.goodsColorImage.validate"
class="upload-item-tip">
必须上传图片
</div>
</div>`;
}
},
{
... ... @@ -283,15 +308,15 @@ export default {
return `<div v-if="isExist(${index})">
<i-input
v-model="row.factoryCode"
placeholder="请输入..."
style="width: 100px">
placeholder="请输入..." >
</i-input>
</div>`;
}
},
{
title: '尺码*',
title: '尺码',
key: 'sizeId',
width: 80,
render(row, col, index) {
return `<div class="size-id">
<div v-for="size in row.sizeId" class="row-span">
... ... @@ -306,11 +331,18 @@ export default {
render(row, col, index) {
return `<div class='size-code'>
<div v-for="size,i in row.sizeCode" class="row-span">
<i-input
v-model="size.name"
:disabled="!row.operator[i].value"
placeholder="请输入..."
style="width: 100px"/>
<div style="position: relative">
<div :class="{'size-code-error': size.validate && !size.name}">
<i-input
v-model="size.name"
:disabled="!row.operator[i].value"
placeholder="请输入..."
/>
</div>
<div class="size-code-tip" v-if="size.validate && !size.name">
不能为空
</div>
</div>
</div>
</div>`;
}
... ... @@ -318,6 +350,7 @@ export default {
{
title: '操作',
key: 'operator',
width: 100,
render(row, col, index) {
return `<template v-if="isExist(${index})">
<div class="size-operator">
... ... @@ -335,9 +368,12 @@ export default {
],
data: [],
selectedSizes: [],
selectedColors: []
selectedColors: [],
showValidateColor: false,
showValidateSize: false,
showValidateOtherProp: false,
showValidateTable: false,
},
ageLevel: [],
ruleValidate: {
productName: [
{ required: true, message: '商品名不能为空', trigger: 'blur'}
... ... @@ -376,19 +412,49 @@ export default {
};
},
mounted: function() {
this.getColor();
this.getSize();
this.getColorAsync();
this.getSizeAsync();
},
methods: {
validate: function() {
return new Promise((resolve, reject) => {
this.$refs['product'].validate((valid) => {
if (valid) {
resolve();
} else {
reject();
beforeSubmit: function() {
const handleColor = (color) => {
let newColor = makeColor();
newColor.goodsName = color.goodsName.name;
newColor.isDefault = color.goodsName.isDefault ? 'Y' : 'N';
newColor.factoryGoodsName = color.factoryGoodsName || color.goodsName.name;
newColor.factoryCode = color.factoryCode;
newColor.goodsColorImage = color.goodsColorImage.value;
newColor.colorId = color.colorId;
let goodsSizeList = [];
color.operator.forEach((op, i) => {
if (!op.value) {
return;
}
})
let goodsSize = {};
goodsSize.sizeId = color.sizeId[i].id;
goodsSize.factoryCode = color.sizeCode[i].name;
goodsSizeList.push(goodsSize);
});
newColor.goodsSizeList = goodsSizeList;
return newColor;
};
this.refreshTable();
this.product.sellerGoodsInfoStr = JSON.stringify(this.table.data.map(handleColor));
},
submit: function() {
return this.validate().then(() => {
this.beforeSubmit();
return api.saveBaseProductInfo(this.product);
});
},
nextStep: function() {
... ... @@ -424,14 +490,14 @@ export default {
this.step.value = 0;
this.$router.push({name: 'product.create.step1'});
},
getColor: function() {
getColorAsync: function() {
return api.getColor().then((result) => {
if (result.code === 200) {
this.colors = result.data;
}
});
},
getSize: function() {
getSizeAsync: function() {
return api.getSize(this.product.smallSortId).then((result) => {
if (result.code === 200) {
this.sizes = result.data;
... ... @@ -441,21 +507,6 @@ export default {
clickColor: function(color) {
this.addColor(color);
},
changeFactoryGoodsName: function(row, index) {
this.table.data[index].factoryGoodsName = row.factoryGoodsName;
},
changeFactoryCode: function(row, index) {
this.table.data[index].factoryCode = row.factoryCode;
},
changeUploadFileSuccess: function(row, index) {
this.table.data[index].goodsColorImage = row.goodsColorImage;
},
changeUploadFileFail: function(row, index) {
},
changeSizeCode: function(row, rowIndex, sizeIndex) {
this.table.data[rowIndex].sizeCode[sizeIndex].name = row.sizeCode[sizeIndex].name;
},
clickDefault: function(index) {
this.refreshTable();
let color = this.table.data[index];
... ... @@ -471,6 +522,15 @@ export default {
clickOperator: function(row, itemIndex) {
this.refreshTable();
row.operator[itemIndex].value = row.operator[itemIndex].value ? false : true;
if (row.operator[itemIndex].value) {
row.sizeCode[itemIndex].name = '';
row.sizeCode[itemIndex].validate = true;
} else {
row.sizeCode[itemIndex].name = '';
row.sizeCode[itemIndex].validate = false;
}
},
clickGoodsYear: function(value) {
this.product.goodsYears = value;
... ... @@ -493,6 +553,22 @@ export default {
_.first(this.table.data).goodsName.isDefault = true;
},
changeFactoryGoodsName: function(row, index) {
this.table.data[index].factoryGoodsName = row.factoryGoodsName;
},
changeFactoryCode: function(row, index) {
this.table.data[index].factoryCode = row.factoryCode;
},
changeSizeCode: function(row, rowIndex, sizeIndex) {
this.table.data[rowIndex].sizeCode[sizeIndex].name = row.sizeCode[sizeIndex].name;
this.table.data[rowIndex].sizeCode[sizeIndex].validate = true;
if (this.table.data[rowIndex].sizeCode[sizeIndex].name) {
this.table.data[rowIndex].sizeCode[sizeIndex].showValidate = false;
} else {
this.table.data[rowIndex].sizeCode[sizeIndex].showValidate = true;
}
},
addColor: function(color) {
this.refreshTable();
let findColorIndex = this.table.selectedColors.findIndex((c) => {
... ... @@ -511,39 +587,6 @@ export default {
this.initDefault();
},
addSize: function(color, sizeId) {
this.refreshTable();
let findSize = this.findSize(sizeId);
if (!findSize) {
return;
}
color.sizeId.push({
id: findSize.id,
name: findSize.sizeName
});
color.sizeCode.push({
name: ''
});
color.operator.push({
value: false
});
},
removeSize: function(color, sizeId) {
this.refreshTable();
let index = color.sizeId.findIndex((s) => {
return s.id === sizeId;
});
if (index !== -1) {
color.sizeId.splice(index, 1);
color.sizeCode.splice(index, 1);
color.operator.splice(index, 1);
}
},
addColorData: function(color) {
let newColor = {
goodsName: {
... ... @@ -551,7 +594,11 @@ export default {
isDefault: false,
},
factoryGoodsName: '',
goodsColorImage: '',
goodsColorImage: {
value: '',
showValidate: false,
validate: false
},
factoryCode: '',
colorId: color.id,
sizeId: [],
... ... @@ -574,6 +621,41 @@ export default {
this.table.data.splice(index, 1);
},
removeSize: function(color, sizeId) {
this.refreshTable();
let index = color.sizeId.findIndex((s) => {
return s.id === sizeId;
});
if (index !== -1) {
color.sizeId.splice(index, 1);
color.sizeCode.splice(index, 1);
color.operator.splice(index, 1);
}
},
addSize: function(color, sizeId) {
this.refreshTable();
let findSize = this.findSize(sizeId);
if (!findSize) {
return;
}
color.sizeId.push({
id: findSize.id,
name: findSize.sizeName
});
color.sizeCode.push({
name: '',
validate: false,
showValidate: false
});
color.operator.push({
value: true
});
},
findSize: function(sizeId) {
let index = this.sizes.findIndex((sizeObj) => {
return sizeObj.id === sizeId;
... ... @@ -594,55 +676,119 @@ export default {
return false;
},
submit: function() {
return this.validate().then(() => {
this.beforeSubmit();
return api.saveBaseProductInfo(this.product);
});
},
beforeSubmit: function() {
const handleColor = (color) => {
let newColor = makeColor();
newColor.goodsName = color.goodsName.name;
newColor.isDefault = color.goodsName.isDefault ? 'Y' : 'N';
newColor.factoryGoodsName = color.factoryGoodsName;
newColor.factoryCode = color.factoryCode;
newColor.goodsColorImage = color.goodsColorImage;
newColor.colorId = color.colorId;
uploadSuccess: function(attach, files) {
this.refreshTable();
this.table.data[attach.index].goodsColorImage.value = files[0];
let goodsSizeList = [];
this.table.data[attach.index].goodsColorImage.validate = true;
if (this.table.data[attach.index].goodsColorImage.value) {
this.table.data[attach.index].goodsColorImage.showValidate = false;
} else {
this.table.data[attach.index].goodsColorImage.showValidate = true;
}
},
refreshTable() {
this.table.data = this.$refs.sellerGoods.rebuildData;
},
uploadError: function(attach, err) {
},
validateOtherProps: function() {
return new Promise((resolve, reject) => {
this.$refs['product'].validate((valid) => {
if (valid) {
this.table.showValidateOtherProps = false;
resolve();
} else {
this.table.showValidateOtherProps = true;
reject();
}
})
}).catch(() => {});
},
validateTable: function() {
let _this = this;
return new Promise(function(resolve, reject) {
let errors = [];
_this.table.data.forEach((color, i) => {
let operators = color.operator;
let sizeCodes = color.sizeCode;
operators.forEach((o, j) => {
if (o.value) {
if (!sizeCodes[j].name) {
sizeCodes[j].showValidate = true;
sizeCodes[j].validate = true;
errors.push({row: i, index: j, message: '不能为空'});
} else {
sizeCodes[j].showValidate = false;
}
}
});
color.operator.forEach((op, i) => {
if (!op.value) {
return;
if (!color.goodsColorImage.value) {
color.goodsColorImage.showValidate = true;
color.goodsColorImage.validate = true;
errors.push({row: i, message: '商品封面不能为空', field: 'goodsColorImage.name'});
} else {
color.goodsColorImage.showValidate = false;
}
});
let goodsSize = {};
if (errors.length !== 0) {
_this.table.showValidateTable = false;
return resolve();
} else {
_this.table.showValidateTable = true;
return reject(errors);
}
goodsSize.sizeId = color.sizeId[i].id;
goodsSize.factoryCode = color.sizeCode[i].name;
goodsSizeList.push(goodsSize);
});
}).catch((err) => {
});
},
validateColor: function() {
let _this = this;
newColor.goodsSizeList = goodsSizeList;
return new Promise((resolve, reject) => {
if (_this.table.selectedColors.length === 0) {
this.table.showValidateColor = true;
return reject({message: '颜色不能为空'})
}
return newColor;
};
this.table.showValidateColor = false;
return resolve();
}).catch((err) => {
});
this.refreshTable();
this.product.sellerGoodsInfoStr = JSON.stringify(this.table.data.map(handleColor));
},
uploadSuccess: function(attach, files) {
this.refreshTable();
this.table.data[attach.index].goodsColorImage = files[0];
},
refreshTable() {
// this.table.data = this.$refs.sellerGoods.rebuildData;
validateSize: function() {
return new Promise((resolve, reject) => {
if (this.table.selectedSizes.length === 0) {
this.table.showValidateSize = true;
return reject({message: '尺码不能为空'});
}
this.table.showValidateSize = false;
return resolve();
}).catch(() => {
});
},
uploadError: function(attach, err) {
validate: function() {
return this.validateOtherProps()
.then(this.validateColor)
.then(this.validateSize)
.then(this.validateTable)
.then(() => {
if (!this.showValidateColor
&& !this.showValidateSize
&& !this.showValidateOtherProp
&& !this.showValidateTable) {
return Promise.resolve();
} else {
return Promise.reject();
}
});
}
},
computed: {
... ... @@ -670,7 +816,20 @@ export default {
this.removeSize(color, removeSize[0]);
}
});
if (newVal.length === 0) {
this.table.showValidateSize = true;
} else {
this.table.showValidateSize = false;
}
},
'table.selectedColors': function(newVal) {
if (newVal.length === 0) {
this.table.showValidateColor = true;
} else {
this.table.showValidateColor = false;
}
}
},
components: {
'product-age': Age,
... ... @@ -735,6 +894,17 @@ export default {
.size-code {
@include row-span;
&-error {
border: 1px solid #f30;
}
&-tip {
position: absolute;
line-height: 1;
padding-top: 6px;
color: #f30;
}
}
.size-id {
... ... @@ -747,4 +917,45 @@ export default {
text-align: center;
}
.product-table-error {
border: 1px solid #f30;
}
.product-table-tip {
position: absolute;
line-height: 1;
padding-top: 6px;
color: #f30;
left: 70px;
}
.upload-item {
display: inline-block;
height: 200px;
width: 130px;
text-align: center;
margin: 30px 0;
}
.upload-item-error {
border: 1px solid #f30;
position: relative;
}
.upload-item-tip {
position: absolute;
line-height: 1;
padding-top: 6px;
color: #f30;
top: 100%;
}
.upload-item-img {
display: inline-block;
height: 126px;
width: 124px;
border: 2px solid #e8e8e8;
box-sizing: border-box;
}
</style>
... ...
... ... @@ -41,11 +41,11 @@
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 1}"
@on-success="uploadSuccess"
@on-remove="uploadRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -58,11 +58,11 @@
<Col span="4">
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 2}"
@on-success="uploadSuccess"
@on-remove="uploadRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -75,11 +75,11 @@
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 3}"
@on-success="uploadSuccess"
@on-remove="uploadRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -92,11 +92,11 @@
<Col span="4">
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 4}"
@on-success="uploadSuccess"
@on-remove="uploadRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -212,7 +212,7 @@
<script>
import ProductUpload from './create-upload';
import ProductUpload from '../../../../components/global/common/drag-file-upload';
import api from '../api';
import service from '../service';
... ... @@ -343,9 +343,6 @@ export default {
this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = '';
}
},
components: {
'product-upload': ProductUpload
}
};
</script>
... ...
<template>
<div>
<div class="upload-image-item" v-if="uploadList[0]">
<template v-if="uploadList[0].status === 'finished'">
<img :src="uploadList[0].url">
<div class="upload-image-item-cover">
<Icon type="ios-eye-outline" size="30" @click.native="handleView(uploadList[0].url)"></Icon>
<Icon type="ios-trash-outline" size="30" @click.native="handleRemove(uploadList[0])"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="uploadList[0].showProgress" :percent="uploadList[0].percentage" hide-info></Progress>
</template>
</div>
<FileUpload v-show="!uploadList[0]"
ref="upload"
:show-upload-list="false"
:data="{bucket: 'goodsimg'}"
:on-success="handleSuccess"
:default-file-list="defaultList"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
type="drag"
action="/upload/image"
style="display: inline-block;width:120px;">
<div style="width: 120px;height:120px;line-height: 150px;">
<Icon type="plus-round" size="50"></Icon>
</div>
</FileUpload>
<Modal title="查看图片" v-model="visible">
<img :src="imgUrl" v-if="visible" style="width: 100%">
</Modal>
</div>
</template>
<script>
const _ = require('lodash');
export default {
props: ['id'],
data() {
return {
imgUrl: '',
visible: false,
uploadList: [],
defaultList: []
};
},
methods: {
handleView(url) {
this.imgUrl = url;
this.visible = true;
},
handleRemove(file) {
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
this.$emit('on-remove', this.id);
},
handleSuccess(response, file) {
if (_.get(response, 'data.imagesList.length', 0)) {
file.url = response.data.imagesList[0];
}
this.$emit('on-success', this.id, file);
},
handleFormatError(file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
});
},
handleMaxSize(file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
});
}
},
mounted() {
this.uploadList = this.$refs.upload.fileList;
}
};
</script>
<style>
.upload-image-item{
display: inline-block;
width: 120px;
height: 120px;
text-align: center;
line-height: 120px;
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.upload-image-item img{
width: 120px;
height: 120px;
}
.upload-image-item-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.upload-image-item:hover .upload-image-item-cover{
display: block;
}
.upload-image-item-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>
<template>
<div>
<Row>
<Form v-if='product' :model="product" :label-width="70">
<Form v-if='product' ref="product" :model="product" :label-width="70" :rules="ruleValidate">
<Row>
<div class="create-group">
... ... @@ -19,7 +19,7 @@
<Row>
<Col span="8">
<Form-item label="品牌*">
<Form-item label="品牌">
<span>{{product.brandName}}</span>
</Form-item>
</Col>
... ... @@ -27,7 +27,7 @@
<Row>
<Col span="8">
<Form-item label="类目*">
<Form-item label="类目">
<span>{{product.smallSortName}}</span>
</Form-item>
</Col>
... ... @@ -35,7 +35,7 @@
<Row>
<Col span="8">
<Form-item label="商品名称*">
<Form-item label="商品名称" prop="productName">
<Input v-model="product.productName" placeholder="请输入..." style="width: 350px;"/>
</Form-item>
</Col>
... ... @@ -43,7 +43,7 @@
<Row>
<Col span="8">
<Form-item label="商品卖点*">
<Form-item label="商品卖点" prop="phrase">
<Input v-model="product.phrase" type="textarea" :rows="4" placeholder="请输入..." style="width: 350px;"/>
</Form-item>
</Col>
... ... @@ -51,7 +51,7 @@
<Row>
<Col span="8">
<Form-item label="商品编码*">
<Form-item label="商品编码" prop="factoryCode">
<Input v-model="product.factoryCode" placeholder="请输入..." style="width: 350px;"/>
</Form-item>
</Col>
... ... @@ -59,7 +59,7 @@
<Row>
<Col span="8">
<Form-item label="货品年*">
<Form-item label="货品年">
<Date-picker :value="product.goodsYears" type="year" placeholder="选择年" disabled style="width: 350px;" >
</Date-picker>
</Form-item>
... ... @@ -68,7 +68,7 @@
<Row>
<Col span="8">
<Form-item label="货品季*">
<Form-item label="货品季">
<product-goods-season v-model="product.goodsSeason"></product-goods-season>
</Form-item>
</Col>
... ... @@ -76,22 +76,22 @@
<Row>
<Col span="8">
<Form-item label="上市日期*">
<Form-item label="上市日期">
<Date-picker :value="product.expectSaleTimeStr" disabled type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
</Form-item>
</Col>
</Row>
<Form-item label="性别*">
<Form-item label="性别">
<product-gender v-model="product.gender"></product-gender>
</Form-item>
<Form-item label="适销季*">
<Form-item label="适销季">
<product-season v-model="product.seasons"></product-season>
</Form-item>
<Form-item label="年龄层*">
<Form-item label="年龄层">
<product-age v-model="product.ageLevel"></product-age>
</Form-item>
... ... @@ -104,7 +104,7 @@
</Row>
<Row>
<Form-item label="颜色*">
<Form-item label="颜色">
<span class='squre'
v-for="color in colors"
@click="clickColor(color)"
... ... @@ -123,7 +123,7 @@
</Row>
<Row>
<Form-item label="尺寸*">
<Form-item label="尺寸">
<Checkbox-group v-model='table.selectedSizes'>
<Checkbox v-for="size in sizes" :key="size" :label="size.id" :disabled="size.disabled">
<span>{{size.sizeName}}</span>
... ... @@ -134,7 +134,7 @@
<Row>
<Form-item >
<Table :context="self" :data="table.data" :columns="table.columns" stripe border></Table>
<Table ref="sellerGoods" :context="self" :data="table.data" :columns="table.columns" stripe border></Table>
</Form-item>
</Row>
... ... @@ -146,7 +146,7 @@
<Row>
<Col span="8">
<Form-item label="吊牌价*">
<Form-item label="吊牌价">
<Input v-model="product.retailPrice" disabled placeholder="请输入..."/>
</Form-item>
</Col>
... ... @@ -155,7 +155,7 @@
<Row>
<Col span="8">
<Form-item label="销售价*">
<Form-item label="销售价">
<Input v-model="product.salesPrice" disabled placeholder="请输入..."/>
</Form-item>
</Col>
... ... @@ -205,11 +205,11 @@
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 1}"
@on-success="uploadImageSuccess"
@on-remove="uploadImageRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -222,11 +222,11 @@
<Col span="4">
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 2}"
@on-success="uploadImageSuccess"
@on-remove="uploadImageRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -239,11 +239,11 @@
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 3}"
@on-success="uploadImageSuccess"
@on-remove="uploadImageRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -256,11 +256,11 @@
<Col span="4">
<div class="upload-item">
<div class="upload-item-img">
<product-upload
<drag-file-upload
:id="{goodIndex, imageIndex: 4}"
@on-success="uploadImageSuccess"
@on-remove="uploadImageRemove">
</product-upload>
</drag-file-upload>
</div>
<div class="upload-item-title">
... ... @@ -326,7 +326,7 @@
<Row>
<Col span="6" offset="12" class="text-center">
<Button type="primary" @click="save">保存</Button>
<Button type="primary" @click="submit" size="large">保存</Button>
</Col>
</Row>
<Spin size="large" fix v-if="show"></Spin>
... ... @@ -334,7 +334,6 @@
</template>
<script>
import ProductUpload from './create-upload';
import ShopMaterial from './views/material';
import MuliSelect from './views/muli-select';
import Age from './views/age';
... ... @@ -393,7 +392,7 @@ export default {
}
},
{
title: '颜色展示名称*',
title: '颜色展示名称',
key: 'factoryGoodsName',
render(row, col, index) {
return `<div v-if="isExist(${index})">
... ... @@ -412,8 +411,8 @@ export default {
render(row, col, index) {
return `<div class="upload-item">
<div class="upload-item-img">
<img v-if="row.goodsColorImage"
:src="row.goodsColorImage" alt="" width="120px" height="122px">
<img v-if="row.goodsColorImage.value"
:src="row.goodsColorImage.value" alt="" width="120px" height="122px">
</div>
<div>
<file-upload :id="{index: ${index}}"
... ... @@ -475,9 +474,9 @@ export default {
<div v-for="op,i in table.data[${index}].operator" class="row-span">
<i-button v-if="table.data[${index}].operator[i].value"
type="warning"
@click="clickOperator(${index}, i)">禁用</i-button>
@click="clickOperator(row, i)">禁用</i-button>
<i-button v-else type="primary"
@click="clickOperator(${index}, i)">启用</i-button>
@click="clickOperator(row, i)">启用</i-button>
</div>
</div>
</template>`;
... ... @@ -497,6 +496,17 @@ export default {
attributeProValuesOne: [],
attributeProValuesTwo: [],
productMaterial: {}
},
ruleValidate: {
productName: [
{ required: true, message: '商品名不能为空', trigger: 'blur'}
],
phrase: [
{ required: true, message: '商品卖点不能为空', trigger: 'blur'}
],
factoryCode: [
{ required: true, message: '商品编码不能为空', trigger: 'blur'}
],
}
};
},
... ... @@ -511,7 +521,6 @@ export default {
result.materialList = [];
}
this.ageLevel = result.ageLevel.split('|');
this.product = result;
}).then(() => {
return Promise.all([
... ... @@ -524,10 +533,17 @@ export default {
});
},
methods: {
clickOperator: function(rowIndex, itemIndex) {
let rowColor = this.table.data[rowIndex];
clickOperator: function(row, itemIndex) {
this.refreshTable();
row.operator[itemIndex].value = row.operator[itemIndex].value ? false : true;
rowColor.operator[itemIndex].value = rowColor.operator[itemIndex].value ? false : true;
if (row.operator[itemIndex].value) {
row.sizeCode[itemIndex].name = '';
row.sizeCode[itemIndex].validate = true;
} else {
row.sizeCode[itemIndex].name = '';
row.sizeCode[itemIndex].validate = false;
}
},
clickColor: function(color) {
this.addColor(color);
... ... @@ -620,14 +636,20 @@ export default {
});
});
},
initEvent: function() {
this.$on('on-color-factory-code', this.onChangeFactoryCode);
this.$on('on-color-upload', this.onUploadGoodImage);
this.$on('on-add-color-item', this.onAddColor);
this.$on('on-remove-color-item', this.onRemoveColor);
},
init() {
this.getDefaultSelectedColor();
this.getDefaultSelectedSize();
this.initDefaultSelectedColor();
this.initDefaultSelectedSize();
this.initTableData();
this.initImage();
this.initAttr();
},
getDefaultSelectedColor: function() {
initDefaultSelectedColor: function() {
this.product.sellerGoodList.forEach((g) => {
let defaultColor = _.find(this.colors, (c) => c.id === g.colorId);
... ... @@ -638,7 +660,7 @@ export default {
}
});
},
getDefaultSelectedSize: function() {
initDefaultSelectedSize: function() {
let goodsSizeList = Fn.props('goodsSizeList');
let uniqSize = Fn.uniqBy((s) => s.sizeId);
let allHandleItem = _.flow(Fn.map(goodsSizeList), _.flattenDeep, uniqSize)(this.product.sellerGoodList);
... ... @@ -675,7 +697,11 @@ export default {
newGoods.productSkc = goods.productSkc;
newGoods.colorId = goods.colorId;
newGoods.factoryGoodsName = goods.factoryGoodsName;
newGoods.goodsColorImage = service.getAbsoluteUrl(goodsImage.goodsColorImage);
newGoods.goodsColorImage = {
value: service.getAbsoluteUrl(goodsImage.goodsColorImage),
showValidate: false,
validate: false
};
newGoods.factoryCode = goods.factoryCode;
newGoods.id = goods.id;
newGoods.sizeId = [];
... ... @@ -700,7 +726,7 @@ export default {
});
newGoods.operator.push({
value: false
value: true
});
});
... ... @@ -752,7 +778,7 @@ export default {
let newProduct = this.beforeSave();
this.$Loading.start();
api.updateProductAllInfo(newProduct).then((result) => {
return api.updateProductAllInfo(newProduct).then((result) => {
this.$Loading.finish();
if (result.code === 200) {
... ... @@ -771,6 +797,9 @@ export default {
}
});
},
submit: function() {
this.validate().then(this.save).catch( () => this.$Loading.error());
},
isExist: function(index) {
let row = this.table.data[index];
... ... @@ -780,89 +809,6 @@ export default {
return false;
},
handleColor: function() {
return this.table.data.map(this._handleColor);
},
_handleColor: function(tableColor) {
let newColor = {
factoryCode: '',
factoryGoodsName: '',
isDefault: '',
goodsColorImage: '',
productSkc: '',
id: '',
goodsName: '',
colorId: '',
goodsSizeList: []
};
newColor.factoryCode = tableColor.factoryCode;
newColor.factoryGoodsName = tableColor.factoryGoodsName || tableColor.goodsName.name;
newColor.isDefault = tableColor.goodsName.isDefault ? 'Y' : 'N';
newColor.goodsColorImage = tableColor.goodsColorImage;
newColor.productSkc = tableColor.productSkc;
newColor.id = tableColor.id;
newColor.goodsName = tableColor.goodsName.name;
newColor.colorId = tableColor.colorId;
newColor.goodsSizeList = this.handleSize(tableColor);
return newColor;
},
handleSize: function(color) {
return color.sizeId.map((s, i) => {
let sizeId = s.id;
let productSku = s.productSku;
let factoryCode = color.sizeCode[i].name;
return {sizeId, factoryCode, productSku};
});
},
handleImage: function() {
return service.handleEditColorImage(this.product);
},
handleRelation: function() {
return this.render.productStandardRelationStr.reduce((total, r) => {
if (r.model) {
total.push({
standardId: r.attributeId,
standardVal: r.attributeName,
parameterMakeId: r.model.join(',')
});
}
return total;
}, []);
},
handleOne: function() {
return this.render.attributeProValuesOne.reduce((total, r) => {
let str = _.isArray(r.model) ? r.model.join(',') : r.model;
if (str) {
total.push({
attributeId: r.attributeId,
productSkn: this.product.productSkn,
attributeValueId: str
});
}
return total;
}, []);
},
handleTwo: function() {
return this.render.attributeProValuesTwo.reduce((total, r) => {
let str = _.isArray(r.model) ? r.model.join(',') : r.model;
if (str) {
total.push({
attributeId: r.attributeId,
productSkn: this.product.productSkn,
attributeValueId: str
});
}
return total;
}, []);
},
addColor: function(color) {
if (color.disabled) {
return;
... ... @@ -889,7 +835,11 @@ export default {
isDefault: false,
},
factoryGoodsName: '',
goodsColorImage: '',
goodsColorImage: {
value: '',
showValidate: false,
validate: false
},
factoryCode: '',
colorId: color.id,
sizeId: [],
... ... @@ -928,11 +878,13 @@ export default {
});
color.sizeCode.push({
name: ''
name: '',
showValidate: false,
validate: false
});
color.operator.push({
value: false
value: true
});
},
findSize: function(sizeId) {
... ... @@ -964,12 +916,6 @@ export default {
return _.includes(id, s);
},
initEvent: function() {
this.$on('on-color-factory-code', this.onChangeFactoryCode);
this.$on('on-color-upload', this.onUploadGoodImage);
this.$on('on-add-color-item', this.onAddColor);
this.$on('on-remove-color-item', this.onRemoveColor);
},
onAddColor: function(newGoods) {
this.product.goods.push(service.handleGoods(newGoods));
},
... ... @@ -987,12 +933,111 @@ export default {
// 注意这里vue 没有办法监听到，手动添加监听
this.$set(this.product, `goods[${index}].factoryGoodsName`, code);
this.product.goods[index].factoryGoodsName = code;
}
},
computed: {
},
validate: function() {
return this.validateProduct();
},
validateProduct: function() {
return new Promise((resolve, reject) => {
this.$refs['product'].validate((valid) => {
if (valid){
resolve();
} else {
reject();
}
})
});
},
validateTable: function() {
},
refreshTable() {
this.table.data = this.$refs.sellerGoods.rebuildData;
},
handleColor: function() {
return this.table.data.map(this._handleColor);
},
_handleColor: function(tableColor) {
let newColor = {
factoryCode: '',
factoryGoodsName: '',
isDefault: '',
goodsColorImage: '',
productSkc: '',
id: '',
goodsName: '',
colorId: '',
goodsSizeList: []
};
newColor.factoryCode = tableColor.factoryCode;
newColor.factoryGoodsName = tableColor.factoryGoodsName || tableColor.goodsName.name;
newColor.isDefault = tableColor.goodsName.isDefault ? 'Y' : 'N';
newColor.goodsColorImage = tableColor.goodsColorImage.value;
newColor.productSkc = tableColor.productSkc;
newColor.id = tableColor.id;
newColor.goodsName = tableColor.goodsName.name;
newColor.colorId = tableColor.colorId;
newColor.goodsSizeList = this.handleSize(tableColor);
return newColor;
},
handleSize: function(color) {
return color.sizeId.map((s, i) => {
let sizeId = s.id;
let productSku = s.productSku;
let factoryCode = color.sizeCode[i].name;
return {sizeId, factoryCode, productSku};
});
},
handleImage: function() {
return service.handleEditColorImage(this.product);
},
handleRelation: function() {
return this.render.productStandardRelationStr.reduce((total, r) => {
if (r.model) {
total.push({
standardId: r.attributeId,
standardVal: r.attributeName,
parameterMakeId: r.model.join(',')
});
}
return total;
}, []);
},
handleOne: function() {
return this.render.attributeProValuesOne.reduce((total, r) => {
let str = _.isArray(r.model) ? r.model.join(',') : r.model;
if (str) {
total.push({
attributeId: r.attributeId,
productSkn: this.product.productSkn,
attributeValueId: str
});
}
return total;
}, []);
},
handleTwo: function() {
return this.render.attributeProValuesTwo.reduce((total, r) => {
let str = _.isArray(r.model) ? r.model.join(',') : r.model;
if (str) {
total.push({
attributeId: r.attributeId,
productSkn: this.product.productSkn,
attributeValueId: str
});
}
return total;
}, []);
},
},
components: {
'product-upload': ProductUpload,
'shop-material': ShopMaterial,
'multi-select': MuliSelect,
'product-age': Age,
... ...
... ... @@ -2,23 +2,23 @@
<LayoutBody>
<LayoutFilter>
<FilterItem :label="filters.sknCode.label">
<Input v-model.trim.trim="filters.sknCode.model"
<Input v-model.trim="filters.sknCode.model"
:placeholder="filters.sknCode.holder"></Input>
</FilterItem>
<FilterItem :label="filters.prodCode.label">
<Input v-model.trim.trim="filters.prodCode.model"
<Input v-model.trim="filters.prodCode.model"
:placeholder="filters.prodCode.holder"></Input>
</FilterItem>
<FilterItem :label="filters.prodName.label">
<Input v-model.trim.trim="filters.prodName.model"
<Input v-model.trim="filters.prodName.model"
:placeholder="filters.prodName.holder"></Input>
</FilterItem>
<FilterItem :label="filters.prodBarCode.label">
<Input v-model.trim.trim="filters.prodBarCode.model"
<Input v-model.trim="filters.prodBarCode.model"
:placeholder="filters.prodBarCode.holder"></Input>
</FilterItem>
<FilterItem :label="filters.prodBarCode.label">
<Input v-model.trim.trim="filters.prodBarCode.model"
<Input v-model.trim="filters.prodBarCode.model"
:placeholder="filters.prodBarCode.holder"></Input>
</FilterItem>
<FilterItem label="选择品牌">
... ... @@ -52,7 +52,7 @@
</Select>
</FilterItem>
<FilterItem label="选择类目">
<SelectCategory :field-sort="filters.sort" @on-change="sortChange"></SelectCategory>
<SelectCategory :value="categoryValue" @select-change="sortChange"></SelectCategory>
</FilterItem>
<FilterItem>
<Button type="primary" @click="filterSearch">筛选</Button>
... ... @@ -91,16 +91,16 @@
tableCols,
tableData,
pageData,
filters: filterFields,
initialFilters: '',
filters: '',
batchOnSale: [],
useFilterSign: false,
showSizeEdit: false
showSizeEdit: false,
categoryValue: []
}
},
created() {
this.productList();
this.initialFilters = JSON.stringify(filterFields);
this.filters = JSON.parse(initialFields);
},
methods: {
editSize(skn) {
... ... @@ -132,10 +132,11 @@
this.pageData.current = 1;
},
clearFilter() {
this.filters = JSON.parse(this.initialFilters);
this.filters = JSON.parse(initialFields);
this.productList();
this.useFilterSign = false;
this.pageData.current = 1;
this.categoryValue = [];
},
productList(params) {
... ... @@ -183,9 +184,9 @@
this.pageData.total = data.total;
},
sortChange(sort) {
this.filters.sort.first.model = sort.first;
this.filters.sort.second.model = sort.second;
this.filters.sort.third.model = sort.third;
this.filters.sort.first.model = sort.max;
this.filters.sort.second.model = sort.mid;
this.filters.sort.third.model = sort.min;
},
brandChange(val) {
_.set(this.filters, 'brand.model', val);
... ... @@ -287,24 +288,7 @@
</script>
<style lang="scss">
.row-space {
margin-bottom: 20px;
}
.btn-row-space {
margin-top: 10px;
}
.field-label {
line-height: 32px;
}
.hr {
border-top: 1px solid #eee;
}
.list-page {
float: right;
}
</style>
... ...
... ... @@ -137,7 +137,7 @@ let filterFields = {
}
};
let initialFields = JSON.parse(JSON.stringify(filterFields));
let initialFields = JSON.stringify(filterFields);
let tableCols = [
{
... ...
... ... @@ -45,7 +45,7 @@
</Select>
</FilterItem>
<FilterItem label="选择类目">
<SelectCategory :field-sort="filters.sort" @on-change="sortChange"></SelectCategory>
<SelectCategory :value="categoryValue" @select-change="sortChange"></SelectCategory>
</FilterItem>
<FilterItem>
<Button type="primary" @click="filterSearch">筛选</Button>
... ... @@ -84,15 +84,15 @@
tableCols,
tableData,
pageData,
filters: filterFields,
initialFilters: '',
filters: '',
batchOffSale: [],
useFilterSign: false
useFilterSign: false,
categoryValue: []
}
},
created() {
this.productList();
this.initialFilters = JSON.stringify(filterFields);
this.filters = JSON.parse(initialFields);
},
methods: {
editSize(skn) {
... ... @@ -121,12 +121,14 @@
this.useFilterSign = true;
this.productList(params);
this.pageData.current = 1;
},
clearFilter() {
this.filters = JSON.parse(this.initialFilters);
this.filters = JSON.parse(initialFields);
this.productList();
this.useFilterSign = false;
this.pageData.current = 1;
this.categoryValue = [];
},
productList(params) {
... ... @@ -174,9 +176,9 @@
this.pageData.total = data.total;
},
sortChange(sort) {
this.filters.sort.first.model = sort.first;
this.filters.sort.second.model = sort.second;
this.filters.sort.third.model = sort.third;
this.filters.sort.first.model = sort.max;
this.filters.sort.second.model = sort.mid;
this.filters.sort.third.model = sort.min;
},
brandChange(val) {
_.set(this.filters, 'brand.model', val);
... ... @@ -277,7 +279,7 @@
</script>
<style lang="scss">
.list-page {
float: right;
.btn-row-space {
margin-top: 10px;
}
</style>
... ...
... ... @@ -18,7 +18,6 @@ let filterFields = {
holder: '',
fieldSpan: 18
},
prodCode: {
label: '商家编码',
labelSpan: 6,
... ... @@ -26,7 +25,6 @@ let filterFields = {
holder: '',
fieldSpan: 18
},
prodName: {
label: '商品名称',
labelSpan: 6,
... ... @@ -41,7 +39,6 @@ let filterFields = {
holder: '',
fieldSpan: 18
},
sort: {
first: {
label: '选择类目',
... ... @@ -65,14 +62,12 @@ let filterFields = {
model: ''
}
},
brand: {
label: '选择品牌',
labelSpan: 6,
fieldSpan: 18,
model: -1
},
verifyStatus: {
label: '审核状态',
labelSpan: 6,
... ... @@ -93,7 +88,6 @@ let filterFields = {
}
]
},
stockStatus: {
label: '库存情况',
labelSpan: 6,
... ... @@ -116,7 +110,7 @@ let filterFields = {
}
};
let initialFields = JSON.parse(JSON.stringify(filterFields));
let initialFields = JSON.stringify(filterFields);
let tableCols = [
{
... ...
<template>
<div class="batch-page">
<Row class-name="row-space">
<h3>导出</h3>
</Row>
<Row :gutter="24" class-name="row-space">
<Col :span="6">
<Row>
<Col span="6">
<span class="field-label">文件类型：</span>
</Col>
<Col span="18">
<Select v-model="fileType.model">
<Option v-for="item in fileType.list" :value="item.id" :key="item">{{ item.label }}</Option>
</Select>
</Col>
</Row>
</Col>
</Row>
<Row class-name="row-space">
<SelectCategory :field-sort="sort" @on-change="sortChange">
<LayoutBody>
<LayoutFilter :no-line="true" :col="1">
<FilterItem label="文件类型">
<Select v-model="fileType.model">
<Option v-for="item in fileType.list" :value="item.id" :key="item">{{ item.label }}</Option>
</Select>
</FilterItem>
<FilterItem label="选择类目">
<SelectCategory @select-change="sortChange">
</SelectCategory>
</FilterItem>
<FilterItem>
<Button type="primary" @click="exportFile">导出</Button>
</SelectCategory>
</Row>
</div>
</FilterItem>
</LayoutFilter>
</LayoutBody>
</template>
<script>
... ... @@ -69,22 +61,20 @@
},
methods: {
exportFile() {
const params = {
maxSortId: this.sort.first.model,
middleSortId: this.sort.second.model,
smallSortId: this.sort.third.model
};
const max = this.sort.first.model;
const mid = this.sort.second.model;
const min = this.sort.third.model;
service.exportProductFile(params)
.then(res => {
// todo 接口开发中
});
const href = "/Api/platform/exportSellerProductList?"
+ `maxSortId=${max}&middleSortId=${mid}&smallSortId=${min}`;
window.open(href, '_blank');
},
sortChange(val) {
this.sort.first.model = val.first;
this.sort.second.model = val.second;
this.sort.third.model = val.third;
console.log(val)
this.sort.first.model = val.max;
this.sort.second.model = val.mid;
this.sort.third.model = val.min;
}
},
components: {
... ... @@ -94,11 +84,4 @@
</script>
<style lang="scss">
.field-label {
line-height: 32px;
}
.row-space {
margin-bottom: 20px;
}
</style>
... ...
<template>
<LayoutBody>
店铺基本信息
</LayoutBody>
<Form :label-width="100">
<Form-item label="店铺名称：">
<span>{{}}</span>
</Form-item>
<Form-item label="店铺类型：">
<span>{{}}</span>
</Form-item>
<Form-item label="店铺域名：">
<span>{{}}</span>
</Form-item>
<Form-item label="店铺LOGO：">
<div class="upload-item">
<div class="upload-item-img">
<drag-file-upload
:id="{goodIndex:1, imageIndex: 1}"
@on-success="uploadImageSuccess"
@on-remove="uploadImageRemove">
</drag-file-upload>
</div>
</div>
<em class="upload-img-tip">尺寸要求150px＊150px&nbsp;&nbsp;不大于500KB</em>
</Form-item>
<Form-item label="店铺简介：">
<editor :content="content" @change="updateData"></editor>
</Form-item>
<Form-item label="品牌－供应商：">
<Table :columns="columns1" :data="data1"></Table>
</Form-item>
<Form-item>
<Button type="primary" @click="submit">提交</Button>
</Form-item>
</Form>
</template>
<script>
import service from 'shop-service';
const _ = require('lodash');
const makeSubmitShop = () => {
return {
};
};
export default {
created() {
},
data() {
return {
//店铺简介
content: '',
//供应商
columns1: [
{
title: '品牌',
key: 'coupon'
},
{
title: '供应商',
key: 'supplier'
}
],
data1: [
{
coupon: 'hahahah',
supplier: 'hhhhhhhh'
}
]
};
},
methods: {
updateData(c) {
this.content = c;
},
//上传图片
uploadImageSuccess: function(attach, file) {
let colorIndex = attach.goodIndex;
let imageIndex = attach.imageIndex;
this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = file.url;
},
uploadImageRemove: function(attach) {
let colorIndex = attach.goodIndex;
let imageIndex = attach.imageIndex;
this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = '';
},
//提交
beforeSubmit: function() {
let newShop = makeSubmitShop();
// newShop.expectSaleTimeStr = this.product.expectSaleTimeStr;
//
// newShop.sellerGoodsInfoStr = JSON.stringify(this.handleColor());
return newShop;
},
submit: function() {
let newShop = this.beforeSubmit();
this.$Loading.start();
service.saveBaseShopInfo(newShop).then((result) => {
this.$Loading.finish();
if (result.code === 200) {
this.$Notice.success({
title: '修改成功',
desc: '该店铺保存成功！'
});
this.$router.push({name: 'shop'});
} else {
this.$Notice.error({
title: '保存错误',
desc: result.message
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.upload-item {
float: left;
}
.upload-img-tip {
float: left;
margin-top: 112px;
padding-left: 20px;
color: #c90;
line-height: 1;
font-size: 12px;
font-style: normal;
font-weight: 500;
}
.upload-item-img {
display: inline-block;
height: 126px;
width: 124px;
border: 2px solid #e8e8e8;
box-sizing: border-box;
}
</style>
... ...
// import _ from 'lodash';
// import axios from 'axios';
const balanceService = {
};
export default balanceService;
... ...
const userService = {
};
export default userService;
import _ from 'lodash';
import axios from 'axios';
const apiUrl = {
shop: 'shop/info/detail',
};
const shopService = {
/**
* 保存店铺基本信息
* @param shop
*/
saveBaseShopInfo(shop) {
return axios.post(apiUrl.shop, shop)
.then(result => result.data);
}
};
export default shopService;
... ...