<template>
|
<div>
|
<list-condition-template ref="table" :isExistBtn="true" :form="listQuery" :dataKey="'spuId'"
|
:formLabel="formLabel" :multipleSelected="true" :tableData="tableData"
|
:total="total" @page-info-change="handlePageInfoChange"
|
@selected="handSelected" @sort-change="sortChange"
|
@handle-Label-Value="handleLabelValue">
|
<template slot="topForm">
|
<el-col class="formLayout" :xs='24' :sm='24' :md='24' :lg='24' :xl='24' :offset="0"
|
style="display: flex;">
|
<el-form-item label="商品分类:" prop="catId" label-width="90px">
|
<el-cascader ref="cascaderAddr" :append-to-body="false" :options="categoryArray"
|
style="width:96%;" filterable v-model="categorys" :props="categoryProp"
|
@change="handleChange" clearable>
|
<div slot-scope="scope" @click="clickCategory('cascaderAddr',$event)">
|
{{scope.data.catName}}</div>
|
</el-cascader>
|
</el-form-item>
|
<el-form-item label="展示分类:" prop="catIdSale" label-width="90px">
|
<el-cascader :append-to-body="false" :options="displayCategoryArray" filterable
|
v-model="displayCategorys" :props="categoryProp" style="width:98%;"
|
@change="(val) => handleChange(val, 'display')" clearable>
|
<div slot-scope="scope" @click="clickCategory('catIdSale',$event)">
|
{{scope.data.catName}}</div>
|
</el-cascader>
|
</el-form-item>
|
<el-form-item label="商品名称:" prop="spuName" label-width="90px">
|
<el-input placeholder="请输入商品名称" v-model="listQuery.spuName" style="width:96%;"
|
clearable></el-input>
|
</el-form-item>
|
<el-form-item label="商品主编码:" prop="spuNum" label-width="90px">
|
<el-input placeholder="请输入商品主编码" v-model="listQuery.spuNum" style="width:96%;" clearable
|
oninput="value=value.replace(/[^\w]/g,'')"></el-input>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :xs='12' :sm='12' :md='12' :lg='12' :xl='12' :offset="0" style="display: flex;">
|
<el-form-item label="上架状态:" prop="spuStatus">
|
<el-select :popper-append-to-body="false" v-model="listQuery.spuStatus" clearable style="width: 100%;">
|
<el-option label="全部" value="3" key="3"></el-option>
|
<el-option label="已上架" value="1" key="1"></el-option>
|
<el-option label="已下架" value="2" key="2"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col> -->
|
</template>
|
<template slot="otherElement">
|
<el-col :span="24" :offset="0" class="buttonPosition">
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
<el-button size="mini" type="primary" @click="batchUpdateState(1)">上架</el-button>
|
<el-button size="mini" type="primary" @click="batchUpdateState(2)">下架</el-button>
|
<el-button size="mini" type="danger" @click="removeItem">删除</el-button>
|
<!-- <el-button size="mini" type="danger">上传佐证</el-button> -->
|
</template>
|
<template slot="columns">
|
<!-- <el-table-column type="selection" label="全选" :reserve-selection="true" align="center" width="50" :selectable="selecetInit"></el-table-column> -->
|
<el-table-column label="商品图片" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imageUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品主编码" prop="spuNum" width="150px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品分类" prop="catName" width="140px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="展示分类" prop="saleCatName" width="140px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.saleCatName || '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" min-width="140px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="是否单品" width="80px" align="center">
|
<template slot-scope="scope">
|
{{!scope.row.defaultSku ? '是' : '否'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="组套商品" width="80px" align="center">
|
<template slot-scope="scope">
|
<span v-if="scope.row.spuType">
|
<!-- 1原子商品 3虚拟组套 -->
|
{{scope.row.spuType === '3' ? '是' : '否'}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="剩余库存" sortable='custom' width="120px" align="center">
|
<template slot-scope="scope">
|
{{scope.row.spuStorage}}
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="展示顺序" prop="spuName" :formatter="formatter">
|
</el-table-column> -->
|
<el-table-column label="商品价格" prop="saleMaxPrice" width="150px" align="center"
|
show-overflow-tooltip>
|
<template slot-scope="scope">
|
￥
|
{{scope.row.saleMaxPrice === scope.row.saleMinPrice ? scope.row.saleMaxPrice.toFixed(2) : scope.row.saleMinPrice.toFixed(2) +' ~ ' + scope.row.saleMaxPrice.toFixed(2) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" width="90px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span class="statusTag"
|
:style="{ background: scope.row.state === '1' ? '#52c41a' :'#f5222d'}"></span>
|
<span>{{scope.row.state === '1' ? '已上架' : '已下架'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="积分商城上架状态" align="center" prop="groundingState" width="150px"
|
show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.groundingState === '1' ? '积分商城已上架' : scope.row.groundingState === '2' ? '积分商城已下架':'-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" :width="`${3 * $store.getters.colSize + 40}px`">
|
<template slot-scope="scope">
|
<wly-btn @click="detailItem(scope.row,scope.$index)">详情</wly-btn>
|
<wly-btn :type="'primary'" v-if="scope.row.state === '2'"
|
@click="editItem(scope.row,scope.$index)">编辑</wly-btn>
|
<wly-btn :type="scope.row.state === '1' ? 'warning' :'success'"
|
@click="updateState(scope.row,scope.$index)">
|
{{scope.row.state === '1' ? '下架' : '上架'}}</wly-btn>
|
<wly-btn @click="previewItem(scope.row,scope.$index)">预览</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<el-dialog :visible.sync="dialogVisible" class="productInfo" title="商品详情" v-if="dialogVisible"
|
width="433px">
|
<preview-info :form="form"></preview-info>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
<!-- <drop-upload-file fileTip="支持上传压缩包.docx,.jpg,.png,.jpeg,格式，且不超过10M"></drop-upload-file> -->
|
</div>
|
</template>
|
<script>
|
import productListApi from '@/api/productmanagement/productList'
|
import previewInfo from '@/views/product/components/previewInfo.vue'
|
import productCategoryApi from '@/api/productmanagement/productCategory'
|
import { mapState } from 'vuex'
|
import productImg from '@/views/product/components/productImg.vue'
|
import productExhibitionApi from '@/api/productmanagement/productExhibition'
|
|
export default {
|
components: { previewInfo, productImg },
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data() {
|
return {
|
total: 0,
|
categoryArray: [], // 品类数组
|
categorys: [],
|
displayCategorys: [],
|
form: {},
|
tableData: [],
|
listQuery: {
|
spuName: null,
|
catId: null,
|
bizId: 'B02',
|
spuNum: null,
|
spuStatus: null,
|
catIdSale: null,
|
spuType: null,
|
},
|
dialogVisible: false,
|
categoryProp: {
|
value: 'catId',
|
label: 'catName',
|
children: 'childrens',
|
checkStrictly: true
|
},
|
rows: [],
|
displayCategoryArray: [],
|
formLabel: [
|
{
|
model: 'spuStatus',
|
label: '上架状态',
|
type: 'select',
|
labelWidth: '90px',
|
opts: [
|
{
|
id: '3',
|
name: '全部'
|
},
|
{
|
id: '1',
|
name: '已上架'
|
},
|
{
|
id: '2',
|
name: '已下架'
|
}
|
]
|
},
|
{
|
model: 'spuType',
|
label: '组套商品',
|
type: 'select',
|
labelWidth: '84px',
|
opts: [
|
{
|
id: '3', // 虚拟组套
|
name: '是'
|
},
|
{
|
id: '1', // 原子商品
|
name: '否'
|
}
|
]
|
},
|
{
|
model: 'spuStorageStart',
|
label: '商品库存',
|
customLabel: '库存范围',
|
type: 'numberRange',
|
labelWidth: '135px',
|
labelType: 'select',
|
sm: 12,
|
rule: /^[0-9]*$/g,
|
customValue: ['spuStorageStart', 'spuStorageEnd'],
|
data: [
|
{
|
model: 'spuStorageStart',
|
label: '商品库存',
|
customValue: ['spuStorageStart', 'spuStorageEnd'],
|
},
|
{
|
model: 'suitStorageStart',
|
label: '组套商品库存',
|
customValue: ['suitStorageStart', 'suitStorageEnd'],
|
}
|
]
|
}
|
]
|
}
|
},
|
async mounted() {
|
const p = await this.findShopByMerchantId()
|
await this.saveUserShopRelation(p)
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.getCategory()
|
this.getDisplayCategory()
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
/**
|
* 当表单label值改变
|
*/
|
handleLabelValue(data) {
|
const { e, curItem } = data;
|
if (curItem && curItem.data.length) {
|
const _pObj = this.formLabel.find((v) => v.model === e);
|
const _childObj = curItem.data.find((v) => v.model === e);
|
this.$set(_pObj, 'label', _childObj.label)
|
this.$set(_pObj, 'customValue', _childObj.customValue)
|
}
|
if (e === 'spuStorageStart') {
|
this.listQuery.suitStorageStart = undefined
|
this.listQuery.suitStorageEnd = undefined
|
} else if (e === 'suitStorageStart') {
|
this.listQuery.spuStorageStart = undefined
|
this.listQuery.spuStorageEnd = undefined
|
}
|
},
|
// 表格库存排序
|
sortChange({ order }) {
|
this.listQuery.orderByStorageDesc = order
|
this.queryList()
|
},
|
/**
|
* 获取展示品类
|
*/
|
getDisplayCategory() {
|
productExhibitionApi.getList({ bizId: 'B02' }).then(res => {
|
if (res.data) {
|
this.displayCategoryArray = res.data
|
}
|
})
|
},
|
/**
|
* 初始化表格
|
*/
|
initTable() {
|
this.queryList(this.$refs.table.getPageInfo())
|
this.$refs.table.clearTableSelected() // 清空表格勾选项
|
this.rows = []
|
},
|
/**
|
* 商品批量上架下架
|
*/
|
async batchUpdateState(val) {
|
if (!this.rows.length) {
|
this.$message({
|
message: `请选择需要${val === 1 ? '上架的商品' : '下架的商品'}`,
|
type: 'info'
|
})
|
return
|
}
|
for (const i of this.rows) {
|
if (val === 1 && i.state === '1') {
|
this.$message({
|
message: '选中的商品中包含已上架商品,请重新选择',
|
type: 'warning'
|
})
|
return
|
} else if (val === 2 && i.state === '2') {
|
this.$message({
|
message: '选中的商品中包含已下架商品,请重新选择',
|
type: 'warning'
|
})
|
return
|
}
|
}
|
const arr = this.rows.map(item => {
|
return {
|
shopSpuId: item.shopSpuId,
|
spuNum: item.spuNum,
|
spuName: item.spuName
|
}
|
})
|
if (val === 1) {
|
this.puton(arr)
|
} else {
|
this.pullOff(arr)
|
}
|
},
|
// 点击分类时获取值（点击即改变）
|
clickCategory(name, event) {
|
event.target.parentElement.parentElement.firstChild.click()
|
// // 点击文字 关闭选择框
|
// if (this.$refs[name].toggleDropDownVisible) {
|
// this.$refs[name].toggleDropDownVisible(false)
|
// } else {
|
// this.$refs[name][0].toggleDropDownVisible(false)
|
// }
|
},
|
// 展示顺序
|
formatter(row, column, cellValue, index) {
|
if (row.hotProduct && row.hotProduct !== '0') {
|
switch (row.hotProduct) {
|
case '1':
|
return 3
|
case '2':
|
return 2
|
case '3':
|
return 1
|
default:
|
break
|
}
|
} else {
|
return ''
|
}
|
},
|
/**
|
*查询用户所在店铺
|
*/
|
findShopByMerchantId() {
|
return new Promise(resolve => {
|
// 传入固定值：WLY
|
productListApi.findShopByMerchantId('WLY').then(res => {
|
if (res.data) {
|
resolve(res.data[0])
|
}
|
})
|
})
|
},
|
/**
|
* 进入用户所在店铺
|
*/
|
saveUserShopRelation(row) {
|
productListApi.saveUserShopRelation(row).then(res => {
|
if (res.data) { }
|
})
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.categorys = []
|
this.displayCategorys = []
|
this.listQuery.spuStorageEnd = undefined
|
this.listQuery.suitStorageEnd = undefined
|
this.listQuery.orderByStorageDesc = undefined
|
this.$refs.table.reloadCurrent()
|
this.$refs.table.$refs.table.clearSort()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 初始化复选框
|
*/
|
selecetInit(row, index) {
|
if (row.state === '1') {
|
return false // 不可勾选
|
} else {
|
return true // 可勾选
|
}
|
},
|
/**
|
*
|
*获取勾选的表格数据
|
*/
|
handSelected(val) {
|
this.rows = val
|
},
|
/**
|
* 删除
|
*/
|
removeItem() {
|
if (!this.rows.length) {
|
this.$message({
|
message: '请选择需要删除的数据',
|
type: 'info'
|
})
|
return
|
}
|
for (const i of this.rows) {
|
if (i.state === '1') {
|
this.$message({
|
message: '选中的商品中包含已上架商品,请重新选择',
|
type: 'warning'
|
})
|
return
|
}
|
}
|
this.$confirm('确认删除数据吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async() => {
|
try {
|
const arr = this.rows.map(item => {
|
return {
|
shopId: item.shopId,
|
spuId: item.spuId
|
}
|
})
|
const res = await productListApi.isIntegralProdUp(arr)
|
if (res.code === '0') {
|
this.deleteProd()
|
}
|
} catch (error) {
|
}
|
}).catch(() => { })
|
},
|
/**
|
*删除商品
|
*/
|
deleteProd() {
|
productListApi.deleteItem(this.rows).then(res => {
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
this.$refs.table.changeCondition() // 查询列表
|
this.$refs.table.clearTableSelected() // 清空表格勾选项
|
this.rows = []
|
})
|
},
|
/**
|
* 修改商品状态
|
*/
|
updateState(row, index) {
|
const param = [{
|
shopSpuId: row.shopSpuId,
|
spuNum: row.spuNum,
|
spuName: row.spuName
|
}]
|
if (row.state === '1') {
|
this.pullOff(param)
|
} else {
|
this.puton(param)
|
}
|
},
|
/**
|
* 商品下架
|
*/
|
pullOff(param) {
|
productListApi.pullOff(param).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '下架成功',
|
type: 'success'
|
})
|
this.initTable()
|
}
|
})
|
},
|
/**
|
* 上架
|
*/
|
puton(param) {
|
productListApi.puton(param).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '上架成功',
|
type: 'success'
|
})
|
this.initTable()
|
}
|
})
|
},
|
/**
|
* 获取分类树
|
*/
|
getCategory() {
|
productCategoryApi.getList({ bizId: 'B02' }).then(res => {
|
this.categoryArray = res.data
|
})
|
},
|
/**
|
* 获取默认信息
|
*/
|
getDefault(row) {
|
return new Promise(resolve => {
|
productListApi.detailsInfo({ spuId: row.spuId }).then(res => {
|
const spuPropList = JSON.parse(res.data.spuInfo.spuPropList)
|
res.data.salePrice = null
|
res.data.listPrice = null
|
res.data.array = []
|
res.data.spuPropList = []
|
const normalMetas = res.data.spuProps.normalMetas || []
|
const skuMetas = res.data.spuProps.skuMetas || []
|
res.data.array = normalMetas.concat(skuMetas)
|
var mp4s = []
|
var imgs = []
|
res.data.images.forEach(item => {
|
if (item.imgUrl.substring(item.imgUrl.lastIndexOf('.') + 1) === 'mp4') {
|
mp4s.push(item)
|
} else {
|
imgs.push(item)
|
}
|
})
|
res.data.images = mp4s.concat(imgs)
|
this.form = res.data
|
if (this.form.spuInfo.spuType === '3') {
|
this.form.salePrice = res.data.suiteQuerySpu.fixedPrice.salePrice || null
|
this.form.listPrice = res.data.suiteQuerySpu.fixedPrice.listPrice || null
|
} else {
|
this.form.salePrice = res.data.defaultSkuInfo ? res.data.defaultSkuInfo.fixedPrice.salePrice : null
|
this.form.listPrice = res.data.defaultSkuInfo ? res.data.defaultSkuInfo.fixedPrice.listPrice : null
|
}
|
spuPropList.spuProps.forEach(j => {
|
this.form.array.forEach(i => {
|
if (i.productProp.propId === j.propId) {
|
j.propUnit = i.productProp.propUnit
|
}
|
})
|
this.form.spuPropList.push(j)
|
})
|
this.form.details[0].spuContent = this.form.details[0].spuContent.replace(/oembed url/g, 'video autoplay controls muted src')
|
this.form.details[0].spuContent = this.form.details[0].spuContent.replace(/oembed/g, 'video')
|
resolve(this.form)
|
})
|
})
|
},
|
/**
|
* 预览
|
*/
|
async previewItem(row, index) {
|
const p = await this.getDefault(row)
|
if (p.spuProps.skuMetas?.length) {
|
await this.getSkuMaintenance(row, p)
|
} else {
|
this.dialogVisible = true
|
}
|
},
|
/**
|
* 获取单品详情
|
*/
|
getSkuMaintenance(row, form) {
|
productListApi.getSkuMaintenance({ spuId: row.spuId }).then(res => {
|
form.salePrice = res.data.shopSpus[0].prodSkus[0].fixedPrice.salePrice
|
form.listPrice = res.data.shopSpus[0].prodSkus[0].fixedPrice.listPrice
|
this.dialogVisible = true
|
})
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
const param = JSON.parse(JSON.stringify(this.listQuery))
|
param.spuStatus = this.listQuery.spuStatus === '3' ? null : this.listQuery.spuStatus
|
if (this.listQuery.orderByStorageDesc) {
|
param.orderByStorageDesc = this.listQuery.orderByStorageDesc !== 'ascending'
|
}
|
productListApi.getList({ ...param, ...pageInfo }).then(res => {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
})
|
},
|
// 查看详情
|
detailItem(row) {
|
this.$router.push({
|
name: 'productEdit',
|
query: {
|
spuId: row.spuId,
|
pageTag: 'detail'
|
}
|
})
|
},
|
/**
|
* 跳转到编辑页面
|
*/
|
editItem(row, index) {
|
this.$router.push({
|
name: 'productEdit',
|
query: {
|
spuId: row.spuId,
|
pageTag: 'edit'
|
}
|
})
|
},
|
/**
|
* 跳转到新增页面
|
*/
|
addItem() {
|
this.$router.push({ name: 'productAdd', query: { pageTag: 'add' } })
|
},
|
/**
|
* 选择分类
|
*/
|
handleChange(val, isDisPlay) {
|
let id = null
|
if (val.length > 0) {
|
id = val[val.length - 1]
|
} else {
|
id = null
|
}
|
if (isDisPlay) {
|
this.listQuery.catIdSale = id
|
} else {
|
this.listQuery.catId = id
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.formLayout {
|
.el-form-item {
|
flex-grow: 1;
|
.el-form-item__content > div {
|
width: calc(100% - 90px);
|
}
|
}
|
}
|
.el-table__body {
|
img,
|
video {
|
width: 50px;
|
}
|
}
|
.productInfo {
|
.el-dialog__body {
|
padding: 15px 20px;
|
height: 600px;
|
position: relative;
|
overflow: hidden;
|
.productContentBox {
|
position: absolute;
|
top: 0;
|
right: -17px;
|
bottom: 0;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
padding: 0 10px;
|
}
|
}
|
}
|
</style>
|
