|
|
|
<template>
|
|
|
|
<Table ref="sellerGoods" class="table-good-size" :row-class-name="rowClassName" :show-header="false" :data="table.data" :columns="table.columns" stripe border></Table>
|
|
|
|
<Table ref="sellerGoods"
|
|
|
|
class="table-good-size"
|
|
|
|
:data="table.data"
|
|
|
|
:columns="table.columns"
|
|
|
|
stripe
|
|
|
|
border></Table>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'table-good-size',
|
|
|
|
props: {
|
|
...
|
...
|
@@ -21,11 +24,7 @@ export default { |
|
|
|
columns: [
|
|
|
|
{
|
|
|
|
title: '色系名称',
|
|
|
|
key: 'goodsName',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>色系名称</span>;
|
|
|
|
}
|
|
|
|
if (this.isExist(params.index)) {
|
|
|
|
return h('div', {}, [
|
|
|
|
h('p', {}, this.table.data[params.index].goodsName.name),
|
|
...
|
...
|
@@ -42,15 +41,14 @@ export default { |
|
|
|
]);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>色系名称</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '颜色展示名称',
|
|
|
|
key: 'factoryGoodsName',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>颜色展示名称</span>;
|
|
|
|
}
|
|
|
|
if (this.isExist(params.index)) {
|
|
|
|
return h('Input', {
|
|
|
|
props: {
|
|
...
|
...
|
@@ -69,44 +67,45 @@ export default { |
|
|
|
});
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>颜色展示名称</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商品封面图片',
|
|
|
|
key: 'goodsColorImage',
|
|
|
|
width: 200,
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<span class="table-header-req">{params.column.title}<example-pop></example-pop></span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
let row = params.row;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div class={{'table-upload-item': true}}>
|
|
|
|
<drag-file-upload
|
|
|
|
id={{index: params.index}}
|
|
|
|
default-file={params.row.goodsColorImage.value}
|
|
|
|
default-file={row.goodsColorImage.value}
|
|
|
|
skn={row.productSkn}
|
|
|
|
onSuccess={this.uploadSuccess}
|
|
|
|
onError={this.uploadError}></drag-file-upload>
|
|
|
|
{(params.row.goodsColorImage.showValidate && params.row.goodsColorImage.validate) ? (
|
|
|
|
{(row.goodsColorImage.showValidate && row.goodsColorImage.validate) ? (
|
|
|
|
<div class={{'table-upload-item-tip': true}}>
|
|
|
|
必须上传图片
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
renderHeader(h, params) { //eslint-disable-line
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<span class="table-header-req">{params.column.title}<example-pop></example-pop></span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '款型编码',
|
|
|
|
key: 'factoryCode',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>款型编码</span>;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.isExist(params.index)) {
|
|
|
|
return (
|
|
|
|
<i-input
|
|
...
|
...
|
@@ -117,15 +116,15 @@ export default { |
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>款型编码</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '尺码',
|
|
|
|
key: 'sizeId',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>尺码</span>;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div class={{'size-id': true}}>
|
|
|
|
{params.row.sizeId.map(size => {
|
|
...
|
...
|
@@ -133,15 +132,15 @@ export default { |
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>尺码</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商品条码',
|
|
|
|
key: 'sizeCode',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span class="table-header-req">{params.column.title}</span>;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div class={{'size-code': true}}>
|
|
|
|
{params.row.sizeCode.map((size, i) => {
|
|
...
|
...
|
@@ -168,15 +167,15 @@ export default { |
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
renderHeader(h, params) { //eslint-disable-line
|
|
|
|
return <span class="table-header-req">{params.column.title}</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'SKU',
|
|
|
|
key: 'productSku',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>SKU</span>;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div class={{'prod-sku': true}}>
|
|
|
|
{params.row.sizeId.map(size => {
|
|
...
|
...
|
@@ -188,14 +187,14 @@ export default { |
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>SKU</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '库存',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>库存</span>;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div class={{'prod-sku': true}}>
|
|
|
|
{params.row.sizeId.map(size => {
|
|
...
|
...
|
@@ -207,16 +206,15 @@ export default { |
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>库存</span>;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '操作',
|
|
|
|
key: 'operator',
|
|
|
|
render: (h, params) => {
|
|
|
|
if (!params.index) {
|
|
|
|
return <span>操作</span>;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.isExist(params.index) && this.table.data[params.index]) {
|
|
|
|
return (
|
|
|
|
<div class={{'size-operator': true}}>
|
|
...
|
...
|
@@ -241,19 +239,17 @@ export default { |
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
renderHeader(h) { //eslint-disable-line
|
|
|
|
return <span>操作</span>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
data: _.concat({}, this.value)
|
|
|
|
data: this.value
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
rowClassName(row, index) {
|
|
|
|
if (index === 0) {
|
|
|
|
return 'table-header';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
clickDefault(index) {
|
|
|
|
this.refreshTable();
|
|
|
|
let color = this.table.data[index];
|
|
...
|
...
|
@@ -266,14 +262,14 @@ export default { |
|
|
|
});
|
|
|
|
},
|
|
|
|
changeFactoryGoodsName(row, index) {
|
|
|
|
this.$emit('on-factory-name', index - 1, row.factoryGoodsName);
|
|
|
|
this.$emit('on-factory-name', index, row.factoryGoodsName);
|
|
|
|
},
|
|
|
|
uploadSuccess(attach, file) {
|
|
|
|
this.refreshTable();
|
|
|
|
|
|
|
|
this.table.data[attach.index].goodsColorImage.value = file.url;
|
|
|
|
this.onUploadGoodImage({
|
|
|
|
index: attach.index - 1
|
|
|
|
index: attach.index
|
|
|
|
}, file.url);
|
|
|
|
|
|
|
|
this.table.data[attach.index].goodsColorImage.validate = true;
|
|
...
|
...
|
@@ -313,12 +309,12 @@ export default { |
|
|
|
return false;
|
|
|
|
},
|
|
|
|
syncData() {
|
|
|
|
this.$emit('input', _.drop(this.$refs.sellerGoods.rebuildData, 1));
|
|
|
|
this.$emit('input', this.$refs.sellerGoods.rebuildData);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value(newVal) {
|
|
|
|
this.table.data = _.concat({}, newVal);
|
|
|
|
this.table.data = newVal;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
...
|
...
|
@@ -399,14 +395,4 @@ export default { |
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-good-size {
|
|
|
|
td {
|
|
|
|
background-color: #f5f7f9;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
|
|
|
|
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
|
|
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
