333 lines
11 KiB
333 lines
11 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-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 |
|
v-permission="['ADMIN','YXSTOREPRODUCT_ALL','YXSTOREPRODUCT_CREATE']" |
|
class="filter-item" |
|
size="mini" |
|
type="primary" |
|
icon="el-icon-plus" |
|
@click="add">新增</el-button> |
|
</div> |
|
</div> |
|
<!--表单组件--> |
|
<eForm ref="form" :is-add="isAdd"/> |
|
<eAttr ref="form2" :is-attr="isAttr"/> |
|
<comForm ref="form3" :is-add="isAdd"/> |
|
<killForm ref="form4" :is-add="isAdd"/> |
|
<!--表格渲染--> |
|
<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="cateName" 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"> |
|
<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 style="cursor: pointer" v-else :type=" 'info' ">已下架</el-tag> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="checkPermission(['ADMIN','YXSTOREPRODUCT_ALL','YXSTOREPRODUCT_EDIT','YXSTOREPRODUCT_DELETE'])" label="操作" width="205px" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button slot="reference" type="danger" size="mini" @click="attr(scope.row)">规格属性</el-button> |
|
<el-dropdown size="mini" split-button type="primary" trigger="click"> |
|
操作 |
|
<el-dropdown-menu slot="dropdown"> |
|
<el-dropdown-item> |
|
<el-button v-permission="['ADMIN','YXSTOREPRODUCT_ALL','YXSTOREPRODUCT_EDIT']" size="mini" |
|
type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item> |
|
<el-popover |
|
v-permission="['ADMIN','YXSTOREPRODUCT_ALL','YXSTOREPRODUCT_DELETE']" |
|
: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> |
|
</el-dropdown-item> |
|
<el-dropdown-item> |
|
<el-button v-permission="['ADMIN','YXSTOREPRODUCT_ALL','YXSTOREPRODUCT_EDIT']" size="mini" |
|
type="primary" @click="editC(scope.row)">开启拼团</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item> |
|
<el-button v-permission="['ADMIN','YXSTOREPRODUCT_ALL','YXSTOREPRODUCT_EDIT']" size="mini" |
|
type="primary" @click="editD(scope.row)">开启秒杀</el-button> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</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/initData' |
|
import { del, onsale } from '@/api/yxStoreProduct' |
|
import eForm from './form' |
|
import eAttr from './attr' |
|
import comForm from '@/views/activity/combination/form' |
|
import killForm from '@/views/activity/seckill/form' |
|
export default { |
|
components: { eForm, eAttr, comForm, killForm }, |
|
mixins: [initData], |
|
data() { |
|
return { |
|
delLoading: false, |
|
visible: false, |
|
queryTypeOptions: [ |
|
{ key: 'storeName', display_name: '商品名称' } |
|
], |
|
isAttr: false |
|
} |
|
}, |
|
created() { |
|
this.$nextTick(() => { |
|
this.init() |
|
}) |
|
}, |
|
methods: { |
|
checkPermission, |
|
beforeInit() { |
|
this.url = 'api/yxStoreProduct' |
|
const sort = 'id,desc' |
|
this.params = { page: this.page, size: this.size, sort: sort, isShow: 1, isDel: 0 } |
|
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, |
|
storeName: data.storeName, |
|
storeInfo: data.storeInfo, |
|
keyword: data.keyword, |
|
barCode: data.barCode, |
|
cateId: data.cateId, |
|
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 |
|
}, |
|
editC(data) { |
|
this.isAdd = false |
|
const _this = this.$refs.form3 |
|
_this.form = { |
|
productId: data.id, |
|
merId: data.merId, |
|
image: data.image, |
|
images: data.sliderImage, |
|
title: data.storeName, |
|
info: data.storeInfo, |
|
postage: data.postage, |
|
unitName: data.unitName, |
|
sort: data.sort, |
|
sales: data.sales, |
|
stock: data.stock, |
|
isShow: data.isShow, |
|
isHost: data.isHot, |
|
description: data.description, |
|
isPostage: data.isPostage, |
|
people: 0, |
|
price: 0, |
|
effectiveTime: 24, |
|
combination: 1, |
|
cost: data.cost, |
|
isDel: 0, |
|
browse: 0 |
|
} |
|
_this.dialog = true |
|
}, |
|
editD(data) { |
|
this.isAdd = false |
|
const _this = this.$refs.form4 |
|
_this.form = { |
|
productId: data.id, |
|
merId: data.merId, |
|
image: data.image, |
|
images: data.sliderImage, |
|
title: data.storeName, |
|
info: data.storeInfo, |
|
postage: data.postage, |
|
unitName: data.unitName, |
|
sort: data.sort, |
|
sales: data.sales, |
|
stock: data.stock, |
|
isShow: data.isShow, |
|
status: 1, |
|
isHot: data.isHot, |
|
description: data.description, |
|
isPostage: data.isPostage, |
|
people: 0, |
|
price: 0.01, |
|
effectiveTime: 24, |
|
otPrice: data.otPrice, |
|
cost: data.cost, |
|
num: 1, |
|
giveIntegral: 0, |
|
isDel: 0, |
|
browse: 0 |
|
} |
|
_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, |
|
keyword: data.keyword, |
|
barCode: data.barCode, |
|
cateId: data.cateId, |
|
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>
|
|
|