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.
305 lines
9.8 KiB
305 lines
9.8 KiB
<template> |
|
<div class="app-container"> |
|
<!--工具栏--> |
|
<div class="head-container"> |
|
<!-- 搜索 --> |
|
<el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> |
|
<el-select v-model="query.type" clearable placeholder="搜索类型" class="filter-item" style="width: 130px"> |
|
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
|
</el-select> |
|
<el-select v-model="cateId" clearable placeholder="商品分类" class="filter-item" filterable :filter-method="dataFilter" style="width: 130px"> |
|
<el-option v-for="item in optionsMetaShow" |
|
:value="item.value" |
|
:key="item.id" |
|
:label="item.label"></el-option> |
|
</el-select> |
|
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> |
|
<!-- 新增 --> |
|
<div style="display: inline-block;margin: 0px 2px;"> |
|
<el-button |
|
class="filter-item" |
|
size="mini" |
|
type="primary" |
|
icon="el-icon-plus" |
|
@click="toAddURL" |
|
> |
|
新增 |
|
</el-button> |
|
<el-button |
|
type="danger" |
|
class="filter-item" |
|
size="mini" |
|
icon="el-icon-refresh" |
|
@click="toQuery" |
|
>刷新</el-button> |
|
</div> |
|
</div> |
|
<!--表单组件--> |
|
<!--表格渲染--> |
|
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;"> |
|
<el-table-column prop="id" label="商品id" /> |
|
<el-table-column ref="table" prop="image" label="商品图片"> |
|
<template slot-scope="scope"> |
|
<a :href="scope.row.image" style="color: #42b983" target="_blank"><img :src="scope.row.image" alt="点击打开" class="el-avatar"></a> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="storeName" label="商品名称" /> |
|
<el-table-column prop="storeCategory.cateName" label="分类名称" /> |
|
<el-table-column prop="storeBrand.brandName" label="品牌名称" /> |
|
<el-table-column prop="price" label="商品价格" /> |
|
<el-table-column prop="sales" label="销量" /> |
|
<el-table-column prop="stock" label="库存" /> |
|
<el-table-column label="商品类型" align="center"> |
|
<template slot-scope="scope"> |
|
<el-tag v-if="scope.row.isIntegral === 1" style="cursor: pointer" :type="'warning'">积分商品</el-tag> |
|
<el-tag v-else style="cursor: pointer" :type=" 'info' ">普通商品</el-tag> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="状态" align="center"> |
|
<template slot-scope="scope"> |
|
<div @click="onSale(scope.row.id,scope.row.isShow)"> |
|
<el-tag v-if="scope.row.isShow === 1" style="cursor: pointer" :type="''">已上架</el-tag> |
|
<el-tag v-else style="cursor: pointer" :type=" 'info' ">已下架</el-tag> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="新增" width="265px" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button |
|
size="mini" |
|
type="primary" |
|
icon="el-icon-edit" |
|
@click="toUpdateURL(scope.row.id)" |
|
> |
|
编辑 |
|
</el-button> |
|
<el-popover |
|
:ref="scope.row.id" |
|
placement="top" |
|
width="180" |
|
> |
|
<p>确定删除本条数据吗？</p> |
|
<div style="text-align: right; margin: 0"> |
|
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button> |
|
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button> |
|
</div> |
|
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button> |
|
</el-popover> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!--分页组件--> |
|
<el-pagination |
|
:total="total" |
|
:current-page="page + 1" |
|
style="margin-top: 8px;" |
|
layout="total, prev, pager, next, sizes" |
|
@size-change="sizeChange" |
|
@current-change="pageChange" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import checkPermission from '@/utils/permission' |
|
import initData from '@/mixins/crud' |
|
import { del, onsale } from '@/api/bxg/yxStoreProduct' |
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|
import Treeselect from '@riophae/vue-treeselect' |
|
export default { |
|
components: { Treeselect }, |
|
mixins: [initData], |
|
data() { |
|
return { |
|
dropDownValue: '', |
|
optionsMetaShow: [], |
|
delLoading: false, |
|
visible: false, |
|
queryTypeOptions: [ |
|
{ key: 'storeName', display_name: '商品名称' } |
|
], |
|
isAttr: false, |
|
cateId: null, |
|
} |
|
}, |
|
created() { |
|
this.$nextTick(() => { |
|
this.init().then(() =>{ |
|
this.optionsMetaShow = this.cateList |
|
}) |
|
}) |
|
}, |
|
methods: { |
|
toAddURL(){ |
|
this.$router.push({ path: '/bxg/shop/goodsAdd' }) |
|
}, |
|
toUpdateURL(id){ |
|
this.$router.push({ path: '/bxg/shop/goodsEdit/'+id }) |
|
}, |
|
dataFilter(val){ |
|
this.value=val |
|
if(val){ |
|
this.optionsMetaShow=this.cateList.filter((item=>{ |
|
if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) { |
|
return true |
|
} |
|
})) |
|
}else{ |
|
this.optionsMetaShow=this.cateList |
|
} |
|
}, |
|
checkPermission, |
|
beforeInit() { |
|
this.url = 'bxg/api/yxStoreProduct' |
|
const sort = 'id,desc' |
|
this.params = { page: this.page, size: this.size, sort: sort, isShow: 1, isDel: 0,cateId: this.cateId } |
|
const query = this.query |
|
const type = query.type |
|
const value = query.value |
|
if (type && value) { this.params[type] = value } |
|
return true |
|
}, |
|
subDelete(id) { |
|
this.delLoading = true |
|
del(id).then(res => { |
|
this.delLoading = false |
|
this.$refs[id].doClose() |
|
this.dleChangePage() |
|
this.init() |
|
this.$notify({ |
|
title: '删除成功', |
|
type: 'success', |
|
duration: 2500 |
|
}) |
|
}).catch(err => { |
|
this.delLoading = false |
|
this.$refs[id].doClose() |
|
console.log(err.response.data.message) |
|
}) |
|
}, |
|
onSale(id, status) { |
|
this.$confirm(`确定进行[${status ? '下架' : '上架'}]操作?`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
onsale(id, { status: status }).then(({ data }) => { |
|
this.$message({ |
|
message: '操作成功', |
|
type: 'success', |
|
duration: 1000, |
|
onClose: () => { |
|
this.init() |
|
} |
|
}) |
|
}) |
|
}) |
|
.catch(() => { }) |
|
}, |
|
add() { |
|
this.isAdd = true |
|
this.$refs.form.dialog = true |
|
this.$refs.form.getCates() |
|
}, |
|
edit(data) { |
|
this.isAdd = false |
|
const _this = this.$refs.form |
|
_this.getCates() |
|
_this.form = { |
|
id: data.id, |
|
merId: data.merId, |
|
image: data.image, |
|
sliderImage: data.sliderImage, |
|
imageArr: data.image.split(','), |
|
sliderImageArr: data.sliderImage.split(','), |
|
storeName: data.storeName, |
|
storeInfo: data.storeInfo, |
|
parameter:data.parameter, |
|
keyword: data.keyword, |
|
barCode: data.barCode, |
|
storeCategory: data.storeCategory || {id:null}, |
|
storeBrand:data.brandName || {id:null}, |
|
price: data.price, |
|
vipPrice: data.vipPrice, |
|
otPrice: data.otPrice, |
|
postage: data.postage, |
|
unitName: data.unitName, |
|
sort: data.sort, |
|
sales: data.sales, |
|
stock: data.stock, |
|
isShow: data.isShow, |
|
isHot: data.isHot, |
|
isBenefit: data.isBenefit, |
|
isBest: data.isBest, |
|
isNew: data.isNew, |
|
description: data.description, |
|
addTime: data.addTime, |
|
isPostage: data.isPostage, |
|
isDel: data.isDel, |
|
merUse: data.merUse, |
|
giveIntegral: data.giveIntegral, |
|
cost: data.cost, |
|
isSeckill: data.isSeckill, |
|
isBargain: data.isBargain, |
|
isGood: data.isGood, |
|
ficti: data.ficti, |
|
browse: data.browse, |
|
codePath: data.codePath, |
|
soureLink: data.soureLink |
|
} |
|
_this.dialog = true |
|
}, |
|
attr(data) { |
|
console.log(3333) |
|
this.isAttr = false |
|
const _this = this.$refs.form2 |
|
_this.form = { |
|
id: data.id, |
|
merId: data.merId, |
|
image: data.image, |
|
sliderImage: data.sliderImage, |
|
storeName: data.storeName, |
|
storeInfo: data.storeInfo, |
|
parameter:data.parameter, |
|
keyword: data.keyword, |
|
barCode: data.barCode, |
|
storeCategory: data.storeCategory, |
|
price: data.price, |
|
vipPrice: data.vipPrice, |
|
otPrice: data.otPrice, |
|
postage: data.postage, |
|
unitName: data.unitName, |
|
sort: data.sort, |
|
sales: data.sales, |
|
stock: data.stock, |
|
isShow: data.isShow, |
|
isHot: data.isHot, |
|
isBenefit: data.isBenefit, |
|
isBest: data.isBest, |
|
isNew: data.isNew, |
|
description: data.description, |
|
addTime: data.addTime, |
|
isPostage: data.isPostage, |
|
isDel: data.isDel, |
|
merUse: data.merUse, |
|
giveIntegral: data.giveIntegral, |
|
cost: data.cost, |
|
isSeckill: data.isSeckill, |
|
isBargain: data.isBargain, |
|
isGood: data.isGood, |
|
ficti: data.ficti, |
|
browse: data.browse, |
|
codePath: data.codePath, |
|
soureLink: data.soureLink |
|
} |
|
_this.dialog = true |
|
this.$refs.form2.getAttrs(data.id) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|