<template>
|
<div>
|
<div class="contentTop">
|
<el-button v-if="showBtn" type="success" size="mini" @click="showChangeProp">
|
{{formData.buttonText}}</el-button>
|
</div>
|
<el-table :data="formData.tag ===1 ? tableData.slice((listQuery.pageNum-1)*listQuery.pageSize,listQuery.pageNum*listQuery.pageSize) : tableData "
|
border ref="table">
|
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
|
<slot name="columns"></slot>
|
</el-table>
|
<div class="pageStyle">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="listQuery.pageNum" :page-sizes="[10, 20, 30, 50]"
|
:page-size="listQuery.pageSize"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
</div>
|
<brand-management-selectd :show.sync='show' :title="formData.buttonText" :catId="catId"
|
@hand-selected-row-data="handSelectedRowData">
|
</brand-management-selectd>
|
<product-prop-selectd :show.sync='showProp' :title="formData.buttonText" :catId="catId"
|
@hand-selected-row-data="handSelectedRowData"></product-prop-selectd>
|
|
</div>
|
</template>
|
<script>
|
import brandManagementSelectd from '@/views/brandManagement/components/brandManagementSelectd.vue'
|
import productPropSelectd from '@/views/productPropMeta/components/productPropSelectd.vue'
|
import productCategoryApi from '@/api/productmanagement/productCategory'
|
|
export default {
|
props: ['formData', 'catId', 'tableData', 'total', 'showBtn'],
|
components: { brandManagementSelectd, productPropSelectd },
|
data () {
|
return {
|
show: false,
|
showProp: false,
|
listQuery: {
|
pageNum: 1,
|
pageSize: 10
|
}
|
}
|
},
|
methods: {
|
/**
|
* 重置分页数据
|
*/
|
resetTable () {
|
this.listQuery.pageNum = 1
|
this.listQuery.pageSize = 10
|
},
|
/**
|
* 外部条件变化时处理
|
*/
|
handleConditionChange () {
|
this.resetTable()
|
this.$emit('hand-refresh-list', this.listQuery, this.formData.tag)
|
},
|
/**
|
* 获取选中的那一行数据
|
*/
|
handSelectedRowData (row) {
|
let url = null
|
const param = {
|
catId: this.catId
|
}
|
if (row instanceof Array) {
|
if (row[0].brandId) {
|
param.brandIds = row.map(item => { return item.brandId })
|
url = productCategoryApi.batchAddBrand(param) // 批量添加品牌接口
|
} else {
|
var arr = row.map(item => {
|
return {
|
catId: this.catId,
|
propId: item.propId,
|
propName: item.propName
|
}
|
})
|
url = productCategoryApi.batchAddProp(arr) // 批量添加属性接口
|
}
|
} else {
|
if (row.brandId) {
|
param.brandId = row.brandId
|
url = productCategoryApi.addItemBrand(param) // 关联品牌接口
|
} else {
|
param.propId = row.propId
|
param.propName = row.propName
|
url = productCategoryApi.addItemProp(param) // 关联属性接口
|
}
|
}
|
url.then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$emit('hand-refresh-list', this.listQuery, this.formData.tag)
|
}
|
})
|
},
|
/**
|
* 打开选择属性/品牌的弹窗
|
*/
|
showChangeProp () {
|
if (!this.catId) {
|
this.$message({
|
message: '请选择分类',
|
type: 'info'
|
})
|
return
|
}
|
if (this.formData.tag === 1) {
|
this.show = true
|
} else {
|
this.showProp = true
|
}
|
},
|
handleSizeChange (val) {
|
this.listQuery.pageSize = val
|
if (this.formData.tag === 2) {
|
this.$emit('hand-refresh-list', this.listQuery, this.formData.tag)
|
}
|
},
|
handleCurrentChange (val) {
|
this.listQuery.pageNum = val
|
if (this.formData.tag === 2) {
|
this.$emit('hand-refresh-list', this.listQuery, this.formData.tag)
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
.pageStyle {
|
text-align: right;
|
margin-top: 30px;
|
}
|
</style>
|
