226 lines
8.3 KiB
Vue
226 lines
8.3 KiB
Vue
<template>
|
||
<div class="conent">
|
||
<el-card :body-style="{ padding: '20px 20px 0 20px' }">
|
||
<el-form ref="form" :inline="true" :model="form">
|
||
<el-form-item label="店铺:">
|
||
<el-select v-model="form.shop_id" placeholder="店铺">
|
||
<el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="商品名称:">
|
||
<el-input v-model="form.goods_name" placeholder="商品名称">
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="商品编码:">
|
||
<el-input v-model="form.external_sku_id" placeholder="商品编码">
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleChoose()">筛选</el-button>
|
||
<el-button plain @click="handleReChoose()">重置筛选</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card style="margin-top: 10px">
|
||
<el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
|
||
<el-table-column label="店铺名称">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.shop.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="category_name" label="分类名称"></el-table-column>
|
||
<el-table-column prop="goods_name" label="商品名称"></el-table-column>
|
||
<el-table-column prop="external_sku_id" label="编码"></el-table-column>
|
||
<el-table-column prop="created_at" label="下载时间"></el-table-column>
|
||
<el-table-column label="同步">
|
||
<template slot-scope="scope">
|
||
<el-switch v-model="scope.row.is_sync" active-color="#13ce66" inactive-color="#ff4949"
|
||
:active-value="1" :inactive-value="0" active-text="是" inactive-text="否"
|
||
@change="syncChange(scope.row)">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button v-show="scope.row.is_sync && scope.row.external_sku_id" @click="syncStock(scope.row)" type="primary">
|
||
同步库存</el-button>
|
||
<el-button @click="deleteGoods(scope.row)" type="danger">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页功能 -->
|
||
<div class="block">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
|
||
</el-pagination>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { platGoodsList, updateSyncStatus, deletePlatGoods, syncStock } from "../../api/plat";
|
||
import { storeList } from "../../api/shop";
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
external_sku_id: "",
|
||
goods_name: "",
|
||
shop_id: "",
|
||
},
|
||
loading: true,
|
||
tableData: [],
|
||
Paginationdata: {}, //分页相关数据
|
||
current_page: 1, //当前页
|
||
per_page: 15, //每页显示数量
|
||
shops: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
// 展示店铺列表
|
||
this.getPlatGoodsList();
|
||
this.getShopsList();
|
||
},
|
||
methods: {
|
||
// 店铺列表
|
||
getPlatGoodsList(params = {}) {
|
||
params.page = this.current_page;
|
||
params.per_page = this.per_page;
|
||
|
||
platGoodsList(params).then((res) => {
|
||
this.tableData = res.data.data;
|
||
this.Paginationdata = res.data.meta;
|
||
});
|
||
},
|
||
getShopsList() {
|
||
let page = {
|
||
page: 0,
|
||
per_page: 999,
|
||
};
|
||
storeList(page).then((res) => {
|
||
this.shops = res.data.data;
|
||
});
|
||
this.loading = false;
|
||
},
|
||
//分页功能
|
||
handleSizeChange(val) {
|
||
//当前条数
|
||
this.current_page = 1;
|
||
this.per_page = val;
|
||
this.getPlatGoodsList();
|
||
},
|
||
handleCurrentChange(val) {
|
||
//当前页
|
||
this.current_page = val;
|
||
this.getPlatGoodsList();
|
||
},
|
||
// 筛选
|
||
handleChoose() {
|
||
this.form = {
|
||
...this.form,
|
||
page: 1,
|
||
per_page: this.per_page,
|
||
};
|
||
|
||
// 对象值为空清除
|
||
const newObj = filterParams(this.form);
|
||
function filterParams(obj) {
|
||
const _newPar = {};
|
||
for (const key in obj) {
|
||
// 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
|
||
if (
|
||
(obj[key] === 0 || obj[key]) &&
|
||
obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
|
||
) {
|
||
// 记录属性
|
||
_newPar[key] = obj[key];
|
||
}
|
||
}
|
||
// 返回对象
|
||
return _newPar;
|
||
}
|
||
this.getPlatGoodsList(newObj);
|
||
},
|
||
|
||
// 重置筛选
|
||
handleReChoose() {
|
||
this.form = {
|
||
external_sku_id: "",
|
||
goods_name: "",
|
||
shop_id: "",
|
||
};
|
||
this.getPlatGoodsList();
|
||
},
|
||
|
||
// 同步状态更新
|
||
syncChange(rowData) {
|
||
updateSyncStatus(rowData.id, { is_sync: rowData.is_sync }).then((res) => {
|
||
if (200 === res.status) {
|
||
this.$message({
|
||
message: res.data.message,
|
||
type: "success",
|
||
});
|
||
} else {
|
||
this.$message.error(res.data.errorMessage);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 删除平台商品
|
||
deleteGoods(rowData) {
|
||
this.$alert(rowData.shop.name + ' 店铺下载的 ' + rowData.goods_name, '确认从系统删除?', {
|
||
showCancelButton: true,
|
||
cancelButtonText: '取消',
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
if ('confirm' === action) {
|
||
deletePlatGoods(rowData.id).then((res) => {
|
||
if (200 === res.status) {
|
||
this.getPlatGoodsList();
|
||
this.$message({
|
||
message: res.data.message,
|
||
type: "success",
|
||
});
|
||
} else {
|
||
this.$message.error(res.data.errorMessage);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 同步库存
|
||
syncStock(rowData) {
|
||
this.$alert(rowData.shop.name + ' 店铺下的 ' + rowData.goods_name, '确认同步库存?', {
|
||
showCancelButton: true,
|
||
cancelButtonText: '取消',
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
if ('confirm' === action) {
|
||
syncStock(rowData.id).then((res) => {
|
||
this.$message({
|
||
message: 200 === res.status ? res.data.message : res.data.errorMessage,
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.block {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|