<template>
|
<filter-dialog ref="table" :show.sync="showDialog" :title="title" :tableData="tableData"
|
:total="total" :form="listQuery" :formLabel="formLabel"
|
@page-info-change="handPageInfoChange" @selected="handSelected"
|
@close="handleDialogClose" :loading="loading" :isSelectable="isSelectable"
|
:dataKey="'spuId'" :multipleSelected="multipleSelected" :selectable="selectable"
|
class="productSelected" :dialogWidth="'1100px'">
|
<template slot="condition">
|
<el-button type="primary" size="mini" @click="handleFilter">查询</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="商品主编码" prop="spuNum" show-overflow-tooltip width="170px">
|
</el-table-column>
|
<el-table-column v-if="!productSelectedParams" label="商品图片" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imageUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="商品类型" prop="isGift" v-if="isShowGoodsType">
|
<template slot-scope="scope">
|
{{ scope.row.isGift === '1' ? '赠品/物料' : '销售商品'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品主编码" prop="spuId" v-if="isShowSpuId"></el-table-column>
|
<el-table-column label="剩余库存" :prop="spuStorageFieldName" show-overflow-tooltip
|
v-if="isShowSpuStorage">
|
</el-table-column>
|
<el-table-column label="商品规格*数量" prop="brandName" width="250px" v-if="!productSelectedParams">
|
<template slot-scope="scope">
|
<div class="prodSkuInfos" v-for="skuItem in scope.row.skuInfos" :key="skuItem.shopSkuId">
|
<div v-if="multipleSKuId">
|
<el-checkbox @change="changeSkuId(scope.row, skuItem.skuId)"
|
:disabled="skuItem.disabled" v-model="skuItem.checked">
|
{{ skuItem.skuProps.length ? getProdSpecs(skuItem) : '-' }}
|
</el-checkbox>
|
</div>
|
<span class="skuinfoText" v-else>
|
<el-tooltip class="item" effect="dark"
|
:content="skuItem.skuProps.length ? getProdSpecs(skuItem) : '-'"
|
placement="left-start">
|
<span class="prodSpecs">
|
{{ skuItem.skuProps.length ? getProdSpecs(skuItem) : '-' }}
|
</span>
|
</el-tooltip>
|
<wly-btn v-show="singleSkuid" @click="addSingleSkuId(scope.row,skuItem.skuId)"
|
:type="'success'">添加</wly-btn>
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<slot></slot>
|
</template>
|
</filter-dialog>
|
</template>
|
<script>
|
import filterDialog from '@/components/filterDialog/filterDialog.vue'
|
import productListApi from '@/api/productmanagement/productList'
|
import productImg from '@/views/product/components/productImg.vue'
|
|
export default {
|
name: 'productSelected',
|
components: { filterDialog, productImg },
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: null
|
},
|
multipleSelected: {
|
type: Boolean,
|
default: true
|
},
|
isSelectable: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* 一个商品是否选择多个规格
|
*/
|
multipleSKuId: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 选中的数据单品数据（方便回显）
|
*/
|
selectedTable: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
/**
|
* 选择单个skuid
|
*/
|
singleSkuid: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 是否默认展示上架商品
|
*/
|
producStatus: {
|
type: Boolean,
|
default: true
|
},
|
productSelectedParams: {
|
type: Object,
|
default: null
|
},
|
// 是否展示剩余库存列
|
isShowSpuStorage: {
|
type: Boolean,
|
default: false
|
},
|
// 是否展示商品编码列
|
isShowSpuId: {
|
type: Boolean,
|
default: true
|
},
|
// 是否展示商品类型列以及筛选条件
|
isShowGoodsType: {
|
type: Boolean,
|
default: false
|
},
|
//剩余库存字段名称
|
spuStorageFieldName: {
|
type: String,
|
default: 'spuStorage'
|
},
|
//针对某个模块传参
|
restParams: {
|
type: Object,
|
default: null
|
}
|
},
|
data() {
|
return {
|
showDialog: false,
|
listQuery: {
|
spuName: null,
|
spuStatus: null,
|
spuNum: null,
|
isGift: 2
|
},
|
tableData: [],
|
total: 0,
|
loading: false,
|
formLabel: [
|
{
|
model: 'spuName',
|
label: '商品名称',
|
type: 'input',
|
},
|
{
|
model: 'spuNum',
|
label: '商品主编码',
|
type: 'input',
|
labelWidth: '100px',
|
rule: /[^\w]/g, // 可输入数字字母
|
}
|
],
|
selectedRows: null
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.showDialog = this.show
|
if (this.multipleSKuId) {
|
this.selectedRows = []
|
}
|
this.selectedRows = JSON.parse(JSON.stringify(this.selectedTable))
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
showDialog: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
if (!newDialogShow) {
|
this.$nextTick(() => {
|
this.initForm() // 初始化表单
|
})
|
}
|
}
|
},
|
mounted() {
|
if (this.isShowGoodsType) {
|
this.formLabel.push({
|
model: 'isGift',
|
label: '商品类型',
|
type: 'select',
|
clearable: false,
|
opts: [
|
{
|
id: 1,
|
name: '赠品/物料'
|
},
|
{
|
id: 2,
|
name: '销售商品'
|
},
|
]
|
})
|
}
|
},
|
methods: {
|
/**
|
* 获取商品规格
|
*/
|
getProdSpecs(item) {
|
const str = item.skuProps.map(item => item.propValueName).join('/')
|
item.prodSpecs = `【${str}】 * ${Number(item.skuReduceStorage)}`
|
return item.prodSpecs
|
},
|
/**
|
* 当选择单个skuid时
|
*/
|
addSingleSkuId(row, skuId) {
|
this.selectedRows = row
|
this.selectedRows.skuId = skuId
|
this.handleDialogClose()
|
},
|
/**
|
* 当选中某个规格时
|
*/
|
changeSkuId(row, skuId) {
|
row.skuInfos.forEach((item, index) => {
|
if (item.checked) {
|
const obj = {
|
shopSkuId: item.shopSkuId,
|
salePrice: item.skuPrice.fixedPrice.salePrice,
|
skuId: item.skuId,
|
prodSpecs: item.prodSpecs
|
}
|
const index = this.selectedRows.find(i => i.skuId === item.skuId)
|
if (!index) {
|
this.selectedRows = this.selectedRows.concat({
|
...row, ...obj
|
})
|
}
|
} else {
|
const index = this.selectedRows.findIndex(v => v.skuId === item.skuId)
|
if (index > -1) {
|
this.selectedRows.splice(index, 1)
|
}
|
}
|
})
|
},
|
selectable(row, index) {
|
if (this.isSelectable) {
|
if (!row.spuNum) {
|
return false // 不可勾选
|
} else {
|
return true // 可勾选
|
}
|
} else {
|
return true // 可勾选
|
}
|
},
|
/**
|
* '获取选中的数据
|
*/
|
handSelected(rows) {
|
this.selectedRows = rows
|
},
|
/**
|
* 弹出框关闭事件处理
|
*/
|
handleDialogClose() {
|
if (this.selectedRows) {
|
this.$emit('hand-selected-row-data', this.selectedRows)
|
}
|
},
|
/**
|
* 搜索条件变更处理
|
*/
|
handleFilter() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 初始化表单
|
*/
|
initForm() {
|
this.listQuery.spuName = null
|
this.listQuery.spuNum = null
|
},
|
/**
|
* 分页信息改变时,列表查询
|
*/
|
handPageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 当选中单个规格时回显数据时选中对应的规格
|
*/
|
setCheckedSkuId() {
|
this.tableData.forEach(item => {
|
item.skuInfos.forEach(itemSku => {
|
this.selectedRows.forEach(itemChecked => {
|
if (itemSku.skuId === itemChecked.skuId) {
|
this.$set(itemSku, 'checked', true)
|
if (itemChecked.disabled) {
|
this.$set(itemSku, 'disabled', true)
|
}
|
}
|
})
|
})
|
})
|
},
|
/**
|
* 查询列表
|
*/
|
async queryList(pageInfo) {
|
this.loading = true
|
let res = null
|
if (this.productSelectedParams) {
|
res = await this.productSelectedParams.resApi.queryShopSpuChoosePage({ ...this.productSelectedParams, ...this.listQuery, ...pageInfo })
|
} else {
|
this.listQuery.bizId = 'B02'
|
this.listQuery.spuStatus = this.producStatus ? '1' : null
|
let params = {};
|
if (this.isShowGoodsType) {
|
params = { ...this.listQuery, ...this.restParams }
|
//isGift，1：赠品，不传或空字符串为普通商品
|
if (params.isGift === 2) delete params.isGift;
|
} else {
|
params = { ...this.listQuery, ...this.restParams, ...{ spuType: 1 } }
|
delete params.isGift;
|
}
|
res = await productListApi.getList({ ...params, ...pageInfo }, false)
|
}
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
this.loading = false
|
if (this.productSelectedParams) return
|
this.setCheckedSkuId()
|
} else {
|
false
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.productSelected {
|
.prodSkuInfos {
|
margin-bottom: 10px;
|
|
.skuinfoText {
|
.prodSpecs {
|
display: inline-block;
|
max-width: 170px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
}
|
|
.el-button {
|
float: right;
|
}
|
}
|
}
|
}
|
</style>
|
