You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
637 lines
19 KiB
637 lines
19 KiB
<template>
|
|
<div class="about">
|
|
<a-tabs @change="changeTab">
|
|
<a-tab-pane key="0" :tab="'待比价（'+stateList.filter(c=>c==0).length+'）'"> </a-tab-pane>
|
|
<a-tab-pane key="1" :tab="'已比价（'+stateList.filter(c=>c==1).length+'）'"> </a-tab-pane>
|
|
<a-tab-pane key="2" :tab="'待修改（'+stateList.filter(c=>c==2).length+'）'"> </a-tab-pane>
|
|
<a-tab-pane key="3" :tab="'已完结（'+stateList.filter(c=>c==3).length+'）'"> </a-tab-pane>
|
|
</a-tabs>
|
|
|
|
<div class="border">
|
|
<a-row>
|
|
<a-col :span="4">
|
|
<div class="headCol headColFirst">商品信息</div>
|
|
</a-col>
|
|
<a-col :span="2">
|
|
<div class="headCol">供应商来源方式</div>
|
|
</a-col>
|
|
<a-col :span="1">
|
|
<div class="headCol">平台</div>
|
|
</a-col>
|
|
<a-col :span="2">
|
|
<div class="headCol">采购链接</div>
|
|
</a-col>
|
|
<a-col :span="3">
|
|
<div class="headCol">SKU名称</div>
|
|
</a-col>
|
|
<a-col :span="2">
|
|
<div class="headCol">采购价</div>
|
|
</a-col>
|
|
<a-col :span="2">
|
|
<div class="headCol">快递费</div>
|
|
</a-col>
|
|
<a-col :span="2">
|
|
<div class="headCol">平台扣点</div>
|
|
</a-col>
|
|
<a-col :span="1">
|
|
<div class="headCol">利润</div>
|
|
</a-col>
|
|
<a-col :span="1">
|
|
<div class="headCol">利润率</div>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<div class="headCol">对标商品信息</div>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!--内容页面-->
|
|
<a-row
|
|
justify="center"
|
|
style="text-align: center"
|
|
v-for="item in datas"
|
|
:key="item.Id"
|
|
>
|
|
<a-col :span="4">
|
|
<div class="borderRight">
|
|
<div
|
|
style="
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
width: 200px;
|
|
margin: 0px auto;
|
|
height: 215px;
|
|
"
|
|
>
|
|
<a target="_black" :href="item.GoodsUrl">
|
|
<img :src="getImgPath( item.ItemImg)" width="200" height="165"
|
|
/></a>
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: left"
|
|
>¥{{ item.Price }}</a-col
|
|
>
|
|
<a-col :span="12" style="text-align: right">{{
|
|
item.Sales
|
|
}}</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<!--供应商来源方式-->
|
|
<a-col :span="2" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<a-select
|
|
v-if="item.isEdit"
|
|
v-model="ext.SupplierFrom"
|
|
:show-search="true"
|
|
:not-found-content="null"
|
|
:show-arrow="false"
|
|
:filter-option="true"
|
|
style="width: 100%"
|
|
:autoClearSearchValue="false"
|
|
@search="handleSearch($event, ext)"
|
|
@blur="handleBlur($event, ext, item)"
|
|
@change="handleChange($event, ext, item)"
|
|
>
|
|
<a-select-option v-for="item in extFormList" :key="item">
|
|
{{ item }}</a-select-option
|
|
>
|
|
</a-select>
|
|
<span class="spanValue" v-else>{{ ext.SupplierFrom }}</span>
|
|
</div>
|
|
</a-col>
|
|
<!--平台-->
|
|
<a-col :span="1" style="margin-top: 5px">
|
|
<div
|
|
style="height: 40px"
|
|
v-for="(ext, index) in item.Extensions"
|
|
:key="index"
|
|
>
|
|
|
|
|
|
<a-select
|
|
v-if="item.isEdit"
|
|
v-model="ext.Platform"
|
|
:show-search="true"
|
|
:not-found-content="null"
|
|
:show-arrow="false"
|
|
:filter-option="true"
|
|
style="width: 100%"
|
|
:autoClearSearchValue="false"
|
|
>
|
|
<a-select-option v-for="item in platformList" :key="item.id">
|
|
{{ item.name }}</a-select-option
|
|
>
|
|
</a-select>
|
|
<span class="spanValue" v-else>
|
|
<span v-if="ext.Platform == 0">淘宝</span>
|
|
<span v-if="ext.Platform == 1">京东</span>
|
|
<span v-if="ext.Platform == 2">阿里巴巴</span>
|
|
</span>
|
|
</div>
|
|
</a-col>
|
|
<!--采购链接-->
|
|
<a-col :span="2" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<a-input v-if="item.isEdit" v-model="ext.BuyUrl"></a-input>
|
|
<span class="spanValue" v-else>{{ ext.BuyUrl }}</span>
|
|
</div>
|
|
</a-col>
|
|
<!--SKU名称-->
|
|
<a-col :span="3" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<a-input v-if="item.isEdit" v-model="ext.SkuName"></a-input>
|
|
<span class="spanValue" v-else>{{ ext.SkuName }}</span>
|
|
</div>
|
|
</a-col>
|
|
<!--采购价-->
|
|
<a-col :span="2" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<div v-if="ext.BuyPrice || item.isEdit">
|
|
<a-input v-if="item.isEdit" v-model="ext.BuyPrice"></a-input>
|
|
<span class="spanValue" v-else>{{ ext.BuyPrice }}</span>
|
|
</div>
|
|
<span v-else>-</span>
|
|
</div>
|
|
</a-col>
|
|
<!--快递费-->
|
|
<a-col :span="2" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<div v-if="ext.BuyPrice || item.isEdit">
|
|
<a-input v-if="item.isEdit" v-model="ext.KDPrice"></a-input>
|
|
<span class="spanValue" v-else>{{ ext.KDPrice }}</span>
|
|
</div>
|
|
<span v-else>-</span>
|
|
</div>
|
|
</a-col>
|
|
<!--平台扣点-->
|
|
<a-col :span="2" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<!-- <a-input v-if="item.isEdit" v-model="ext.PlatformPoint"></a-input>-->
|
|
<span class="spanValue">{{ ext.PlatformPoint }}</span>
|
|
</div>
|
|
</a-col>
|
|
<!--利润-->
|
|
<a-col :span="1" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<span v-if="ext.BuyPrice" class="spanValue">{{ ext.Profit }}</span>
|
|
<span v-else>-</span>
|
|
</div>
|
|
</a-col>
|
|
<!--利润率-->
|
|
<a-col :span="1" style="margin-top: 5px">
|
|
<div
|
|
v-for="(ext, index) in item.Extensions"
|
|
style="height: 40px"
|
|
:key="index"
|
|
>
|
|
<!-- <a-input v-if="item.isEdit" v-model="ext.Profits"></a-input>-->
|
|
<span v-if="ext.BuyPrice" class="spanValue"
|
|
>{{ ext.Profits }}%</span
|
|
>
|
|
<span v-else>-</span>
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<div
|
|
style="padding-top: 10px; padding-bottom: 10px; height: 215px"
|
|
class="borderLeft"
|
|
>
|
|
<div style="margin: 0px auto; width: 200px">
|
|
<div v-if="item.isEdit">
|
|
<a-input
|
|
style="margin-top: 10px"
|
|
v-model="item.RivalTitle"
|
|
placeholder="请输入竞品标题"
|
|
>
|
|
</a-input>
|
|
|
|
<a-input
|
|
style="margin-top: 10px"
|
|
v-model="item.RivalPrice"
|
|
placeholder="请输入竞品价格"
|
|
>
|
|
</a-input>
|
|
|
|
<a-input
|
|
style="margin-top: 10px"
|
|
v-model="item.RivalPLCount"
|
|
placeholder="请输入竞品评论数"
|
|
>
|
|
</a-input>
|
|
|
|
<a-input
|
|
style="margin-top: 10px"
|
|
v-model="item.RivalGoodsId"
|
|
placeholder="请输入竞品链接"
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div v-else>
|
|
<div
|
|
style="
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
width: 200px;
|
|
margin: 5px auto;
|
|
"
|
|
>
|
|
<a target="_black" :href="item.RivalGoodsId">
|
|
<img src="/jp.png" width="200" height="165"
|
|
/></a>
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: left"
|
|
>¥{{ item.RivalPrice }}</a-col
|
|
>
|
|
<a-col :span="12" style="text-align: right"
|
|
>{{ item.RivalPLCount }}人评论</a-col
|
|
>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<!--操作-->
|
|
<a-col :span="24" class="borderT">
|
|
<a-row justify="center" type="flex" :align="'middle'">
|
|
<a-col :span="4">
|
|
<a class="borderNoTop itemtitle" :title="item.Title">{{
|
|
item.Title
|
|
}}</a>
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: left">
|
|
<span v-if="item.PriceTaskState == 0">
|
|
|
|
<a-dropdown
|
|
style="margin-left: 10px">
|
|
<a-menu slot="overlay" >
|
|
<a-menu-item key="1" @click="getImgBase64(getImgPath( item.ItemImg),1)">
|
|
阿里巴巴
|
|
</a-menu-item>
|
|
<a-menu-item key="2" @click="getImgBase64(getImgPath( item.ItemImg),2)">
|
|
京东
|
|
</a-menu-item>
|
|
</a-menu>
|
|
<a-button
|
|
type="primary">
|
|
搜图 <a-icon type="down" />
|
|
</a-button>
|
|
</a-dropdown>
|
|
|
|
</span>
|
|
|
|
<a-button
|
|
v-if="item.PriceTaskState == 0"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
@click="setState(item.PriceTaskId, 1)"
|
|
>完成比价
|
|
</a-button>
|
|
|
|
<a-button
|
|
v-if="item.PriceTaskState == 1"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
>等待验收
|
|
</a-button>
|
|
|
|
<a-button
|
|
v-if="item.PriceTaskState == 2"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
@click="setState(item.PriceTaskId, 1)"
|
|
>修改完成
|
|
</a-button>
|
|
</a-col>
|
|
|
|
<a-col
|
|
:span="12"
|
|
style="text-align: right"
|
|
v-if="item.PriceTaskState != 3"
|
|
>
|
|
<a-button
|
|
style="margin-right: 10px"
|
|
type="primary"
|
|
v-if="item.isEdit === false"
|
|
@click="editData(item)"
|
|
>编辑</a-button
|
|
>
|
|
<a-button
|
|
style="margin-right: 10px"
|
|
type="primary"
|
|
v-if="item.isEdit === true"
|
|
@click="canelEdit(item)"
|
|
>取消</a-button
|
|
>
|
|
<a-button
|
|
style="margin-right: 10px"
|
|
type="primary"
|
|
v-if="item.isEdit === true"
|
|
@click="setData(item)"
|
|
>保存</a-button
|
|
>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<a class="borderNoTop itemtitle" :title="item.RivalTitle">{{
|
|
item.RivalTitle
|
|
}}</a>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<div style="float:right;margin-top:30px">
|
|
<a-pagination
|
|
v-model="pagination.current"
|
|
:default-current="1"
|
|
:total="pagination.total"
|
|
:page-size="pagination.pageSize"
|
|
@change="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
pagination: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showTotal: (total, range) =>
|
|
`总数:${total} 当前:${range[0]}-${range[1]}`,
|
|
},
|
|
filters: {},
|
|
sorter: { field: "Id", order: "asc" },
|
|
loading: false,
|
|
queryParam: { condition: "State", keyword: 0 },
|
|
selectedRowKeys: [],
|
|
currentTab: '0',
|
|
lastEditData: undefined,
|
|
extFormList: ["以图搜款"],
|
|
stateList:[],
|
|
platformList:[{id:0,name:'淘宝'},{id:1,name:'京东'},{id:2,name:'1688'}]
|
|
};
|
|
},
|
|
mounted() {
|
|
window.getDatas = this.getDatas;
|
|
this.getDatas(0)
|
|
this.getTabCount()
|
|
},
|
|
activated() {
|
|
//this.getDatas(0)
|
|
},
|
|
methods: {
|
|
getTabCount()
|
|
{
|
|
this.http.get('/HuiYan/pricetasklog/GetTaskCount').then(res=>{
|
|
this.stateList= res.Data
|
|
console.log(this.stateList)
|
|
})
|
|
},
|
|
getImgPath(img){
|
|
if(img.indexOf("http")>=0)
|
|
{
|
|
return img;
|
|
}else
|
|
{
|
|
return 'http:'+img;
|
|
}
|
|
},
|
|
// 实现select选择框可下拉单选，也可输入赋值
|
|
handleSearch(value, ext, item) {
|
|
this.handleChange(value, ext, item);
|
|
},
|
|
handleChange(value, ext, item) {
|
|
ext.SupplierFrom = value != null && value != "" ? value : [];
|
|
|
|
if (
|
|
item.Extensions.filter((c) => c.SupplierFrom == "以图搜款").length > 2
|
|
) {
|
|
this.$message.error("以图搜款最多可选择2个！");
|
|
ext.SupplierFrom = "";
|
|
}
|
|
},
|
|
handleBlur(value, ext) {
|
|
ext.SupplierFrom = value;
|
|
if (value && this.extFormList.indexOf(value) == -1) {
|
|
this.extFormList.push(value);
|
|
}
|
|
},
|
|
|
|
changeTab(e) {
|
|
this.getDatas(e);
|
|
this.currentTab = e;
|
|
this.pagination.current=1;
|
|
},
|
|
changePage(page, pageSize)
|
|
{
|
|
this.pagination.current=page;
|
|
this.getDatas(this.currentTab);
|
|
},
|
|
getDatas(type) {
|
|
var that=this
|
|
this.http
|
|
.post("/HuiYan/pricetasklog/GetItems", {
|
|
PageIndex: this.pagination.current,
|
|
PageRows: this.pagination.pageSize,
|
|
SortField: this.sorter.field || "Id",
|
|
SortType: this.sorter.order,
|
|
Search: { condition: "State", keyword: type },
|
|
...this.filters,
|
|
})
|
|
.then((res) => {
|
|
that.pagination.total=res.Total
|
|
res.Data.forEach((item) => {
|
|
item.isEdit = false;
|
|
item.Extensions.forEach((ext) => {
|
|
ext.PlatformPoint = parseFloat(item.RivalPrice * 0.05).toFixed(2);
|
|
ext.Profit =
|
|
item.RivalPrice -
|
|
ext.BuyPrice -
|
|
ext.KDPrice -
|
|
ext.PlatformPoint;
|
|
if (ext.BuyPrice == 0) {
|
|
ext.Profits = 0;
|
|
} else {
|
|
ext.Profits = parseFloat(
|
|
(ext.Profit / ext.BuyPrice) * 100
|
|
).toFixed(2);
|
|
}
|
|
});
|
|
});
|
|
this.datas = res.Data;
|
|
});
|
|
},
|
|
editData(data) {
|
|
data.isEdit = true;
|
|
this.lastEditData = JSON.parse(JSON.stringify(data));
|
|
},
|
|
canelEdit(data) {
|
|
this.lastEditData.isEdit = false;
|
|
Object.assign(data, this.lastEditData);
|
|
},
|
|
setData(data) {
|
|
data.Extensions.forEach((ext) => {
|
|
ext.PlatformPoint = parseFloat(data.RivalPrice * 0.05).toFixed(2);
|
|
ext.Profit =
|
|
data.RivalPrice - ext.BuyPrice - ext.KDPrice - ext.PlatformPoint;
|
|
|
|
if (ext.BuyPrice == 0) {
|
|
ext.Profits = 0;
|
|
} else {
|
|
ext.Profits = parseFloat((ext.Profit / ext.BuyPrice) * 100).toFixed(
|
|
2
|
|
);
|
|
}
|
|
});
|
|
this.http.post("/HuiYan/teamitems/SetItem", data).then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
|
|
data.isEdit = false;
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
},
|
|
setState(id, type) {
|
|
///发布比价
|
|
if (type == 5) {
|
|
this.sendPriceTask(id);
|
|
} else if (type == 0) {
|
|
this.canelPriceTask(id);
|
|
} else {
|
|
this.http
|
|
.post(`/HuiYan/pricetasklog/SetState?id=${id}&state=${type}`)
|
|
.then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
this.getDatas(this.currentTab);
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
sendPriceTask(id) {
|
|
this.http.post(`/HuiYan/pricetasklog/AddTask?id=${id}`).then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
this.getDatas(this.currentTab);
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
},
|
|
canelPriceTask(id) {
|
|
this.http.post(`/HuiYan/pricetasklog/CanelTask?id=${id}`).then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
this.getDatas(this.currentTab);
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
},
|
|
getImgBase64(src,type) {
|
|
hyCoreModel.getImgBase64(src,type).then((res) => {
|
|
console.log(res);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.headCol {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-left: 0px;
|
|
text-align: center;
|
|
background-color: rgba(243, 242, 247, 1);
|
|
}
|
|
|
|
.headColFirst {
|
|
border-left: 1px solid rgba(215, 215, 215, 1);
|
|
}
|
|
|
|
.borderNoTop {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-top: 0px;
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
.borderT {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
width: 1450px;
|
|
}
|
|
|
|
.borderLeft {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
.borderRight {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
.itemtitle {
|
|
height: 50px;
|
|
max-height: 50px;
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
|
|
.spanValue {
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
</style>
|