|
|
|
<template>
|
|
|
|
<div class="onsale-list">
|
|
|
|
<Row :gutter="24" class-name="filter-row">
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.sknCode.labelSpan">
|
|
|
|
<label class="field-label">{{filters.sknCode.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.sknCode.fieldSpan">
|
|
|
|
<Input v-model="filters.sknCode.model" :placeholder="filters.sknCode.holder"></Input>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.prodCode.labelSpan">
|
|
|
|
<label class="field-label">{{filters.prodCode.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.prodCode.fieldSpan">
|
|
|
|
<Input v-model="filters.prodCode.model" :placeholder="filters.prodCode.holder"></Input>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.prodName.labelSpan">
|
|
|
|
<label class="field-label">{{filters.prodName.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.prodName.fieldSpan">
|
|
|
|
<Input v-model="filters.prodName.model" :placeholder="filters.prodName.holder"></Input>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.prodBarCode.labelSpan">
|
|
|
|
<label class="field-label">{{filters.prodBarCode.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.prodBarCode.fieldSpan">
|
|
|
|
<Input v-model="filters.prodBarCode.model" :placeholder="filters.prodBarCode.holder"></Input>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Row :gutter="24" class-name="filter-row">
|
|
|
|
<Col span="6">
|
|
|
|
<SelectBrand @on-change="brandChange"
|
|
|
|
:field-label="filters.brand.label"
|
|
|
|
:field-model="filters.brand.model"
|
|
|
|
:label-span="filters.brand.labelSpan"
|
|
|
|
:field-span="filters.brand.fieldSpan"
|
|
|
|
:option-list="filters.brand.options">
|
|
|
|
</SelectBrand>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.verifyStatus.labelSpan">
|
|
|
|
<label class="field-label">{{filters.verifyStatus.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.verifyStatus.fieldSpan">
|
|
|
|
<Select v-model="filters.verifyStatus.model" clearable>
|
|
|
|
<Option v-for="option in filters.verifyStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.stockStatus.labelSpan">
|
|
|
|
<label class="field-label">{{filters.stockStatus.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.stockStatus.fieldSpan">
|
|
|
|
<Select v-model="filters.stockStatus.model" clearable>
|
|
|
|
<Option v-for="option in filters.stockStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="filters.publishStatus.labelSpan">
|
|
|
|
<label class="field-label">{{filters.publishStatus.label}}：</label>
|
|
|
|
</Col>
|
|
|
|
<Col :span="filters.publishStatus.fieldSpan">
|
|
|
|
<Select v-model="filters.publishStatus.model" clearable>
|
|
|
|
<Option v-for="option in filters.publishStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<div class="filter-row">
|
|
|
|
<SelectCategory :field-sort="filters.sort" @on-change="sortChange"></SelectCategory>
|
|
|
|
</div>
|
|
|
|
<Row class-name="filter-row">
|
|
|
|
<Button type="primary" @click="filterSearch">筛选</Button>
|
|
|
|
<Button @click="clearFilter">清空条件</Button>
|
|
|
|
</Row>
|
|
|
|
<div class="hr"></div>
|
|
|
|
<div class="batch-row">
|
|
|
|
<Button type="primary" @click="batchSetOnSale">启用</Button>
|
|
|
|
<Button type="error" @click="batchSetOnSale">禁用</Button>
|
|
|
|
</div>
|
|
|
|
<Table border :context="self" :columns="tableCols" :data="tableData" @on-selection-change="selectChange"></Table>
|
|
|
|
<div class="list-page">
|
|
|
|
<Page :total="pageData.total" :current="pageData.current" @on-change="pageChange" :page-size="20" show-total></Page>
|
|
|
|
</div>
|
|
|
|
<SizeEdit></SizeEdit>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import service from 'product-service';
|
|
|
|
import {SizeEdit} from 'components/modal';
|
|
|
|
import {SelectBrand, SelectCategory} from 'components/select';
|
|
|
|
import {filterFields, initialFields, tableCols, tableData, pageData} from './store';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
self: this,
|
|
|
|
tableCols,
|
|
|
|
tableData,
|
|
|
|
pageData,
|
|
|
|
filters: filterFields,
|
|
|
|
initialFilters: '',
|
|
|
|
batchOffSale: [],
|
|
|
|
useFilterSign: false
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.productList();
|
|
|
|
this.initialFilters = JSON.stringify(filterFields);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
filterParams() {
|
|
|
|
const fts = this.filters;
|
|
|
|
const data = {
|
|
|
|
productSkn: fts.sknCode.model,
|
|
|
|
factoryCode: fts.prodCode.model,
|
|
|
|
skuFactoryCode: fts.prodBarCode.model,
|
|
|
|
maxSortId: fts.sort.first.model,
|
|
|
|
middleSortId: fts.sort.second.model,
|
|
|
|
smallSortId: fts.sort.third.model,
|
|
|
|
isPublished: fts.publishStatus.model,
|
|
|
|
brandId: fts.brand.model != -1 ? fts.brand.model : null,
|
|
|
|
auditStatus: fts.verifyStatus.model != -1 ? fts.verifyStatus.model : null,
|
|
|
|
stock: fts.stockStatus.model != -1 ? this.filters.stockStatus.model : null
|
|
|
|
};
|
|
|
|
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
filterSearch() {
|
|
|
|
const params = this.filterParams();
|
|
|
|
|
|
|
|
this.useFilterSign = true;
|
|
|
|
this.productList(params);
|
|
|
|
},
|
|
|
|
clearFilter() {
|
|
|
|
this.filters = JSON.parse(this.initialFilters);
|
|
|
|
this.productList();
|
|
|
|
this.useFilterSign = false;
|
|
|
|
},
|
|
|
|
productList(params) {
|
|
|
|
service.productList(
|
|
|
|
_.merge(params || {}, {
|
|
|
|
shelfStatus: 0,
|
|
|
|
size: 20
|
|
|
|
}))
|
|
|
|
.then(res => {
|
|
|
|
let code = _.get(res, 'data.code');
|
|
|
|
|
|
|
|
if (code === 200) {
|
|
|
|
this.updateStore(res.data.data);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
updateStore(data) {
|
|
|
|
_.each(data.list, (item) => {
|
|
|
|
item.changePrice = false;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.tableData = data.list;
|
|
|
|
this.pageData.total = data.total;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
sortChange(sort) {
|
|
|
|
this.filters.sort.first.model = sort.first;
|
|
|
|
this.filters.sort.second.model = sort.second;
|
|
|
|
this.filters.sort.third.model = sort.third;
|
|
|
|
},
|
|
|
|
brandChange(val) {
|
|
|
|
_.set(this.filters, 'brand.model', val);
|
|
|
|
},
|
|
|
|
pageChange(page) {
|
|
|
|
let params = {};
|
|
|
|
|
|
|
|
if (this.useFilterSign) {
|
|
|
|
params = this.filterParams();
|
|
|
|
}
|
|
|
|
|
|
|
|
_.merge(params, {
|
|
|
|
page,
|
|
|
|
size: 20,
|
|
|
|
productStatusStr: 1
|
|
|
|
});
|
|
|
|
|
|
|
|
this.productList(params);
|
|
|
|
},
|
|
|
|
setOnSale(skns) {
|
|
|
|
const params = {
|
|
|
|
targetStatus: 1
|
|
|
|
};
|
|
|
|
|
|
|
|
if (_.isArray(skns)) {
|
|
|
|
params.productSkns = `[${skns.join(',')}]`;
|
|
|
|
} else {
|
|
|
|
params.productSkns = `[${skns}]`;
|
|
|
|
}
|
|
|
|
|
|
|
|
service.setOnSale(params)
|
|
|
|
.then(res => {
|
|
|
|
this.$Message.success(res.data.message);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
batchSetOnSale() {
|
|
|
|
if (!this.batchOffSale.length) {
|
|
|
|
return this.$Message.error('请选择要上架的商品');
|
|
|
|
}
|
|
|
|
|
|
|
|
let skns = [];
|
|
|
|
|
|
|
|
_.each(this.batchOffSale, (item) => {
|
|
|
|
skns.push(item.productSkn);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setOnSale(skns);
|
|
|
|
},
|
|
|
|
changePrice(row) {
|
|
|
|
row.changePrice = true;
|
|
|
|
},
|
|
|
|
updatePrice(row) {
|
|
|
|
const index = row.lineIndex;
|
|
|
|
const salesPrice = row.salesPrice;
|
|
|
|
const productSkn = row.productSkn;
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
salesPrice,
|
|
|
|
productSkn
|
|
|
|
};
|
|
|
|
|
|
|
|
service.updateSalesPrice(params)
|
|
|
|
.then(res => {
|
|
|
|
this.tableData[index].salesPrice = salesPrice;
|
|
|
|
row.changePrice = false;
|
|
|
|
this.$Message.success(res.data.message);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
editProduct(skn) {
|
|
|
|
this.$router.push({
|
|
|
|
name: 'product.create.step1',
|
|
|
|
query: {
|
|
|
|
skn
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
selectChange(selection) {
|
|
|
|
this.batchOffSale = selection;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
SelectBrand,
|
|
|
|
SelectCategory,
|
|
|
|
SizeEdit
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.filter-row {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
.field-label {
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.hr {
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.batch-row {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list-page {
|
|
|
|
float: right;
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.prd-img {
|
|
|
|
max-height: 200px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-btn-row {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
