<template>
|
<el-dialog
|
title="添加商品"
|
:visible="value"
|
width="60%"
|
:modal="false"
|
:show-close="false"
|
:before-close="onCancel"
|
>
|
<div class="custom-box">
|
<div class="serachContent">
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item>
|
<el-input v-model="ShopkeyWord" style="width:350px" size="small" placeholder="请输入话题、发布人、发布内容等关键词进行查看"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch()">查询</el-button>
|
<el-button size="small" @click="Reset()">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="tableBox">
|
<my-eltable
|
id="printTable"
|
ref="mt"
|
:paginationDataSource="tableData"
|
:tabheight="tabheight"
|
:tableHeader="tableHeader"
|
:loading="loading"
|
:checkbox="checkboxTable"
|
:isIndex="isIndex"
|
@onPageSizeChange="onPageSizeChange"
|
@onPaginationChange="onPaginationChange"
|
@onSelectionChange="onSelectionChange"
|
>
|
<template v-slot:icon="{scope}">
|
<span><img :src="scope.image" class="shop-image"></span>
|
</template>
|
</my-eltable>
|
</div>
|
</div>
|
<!-- 底部按钮 -->
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="onCancel">取 消</el-button>
|
<el-button type="primary" @click="onOk()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
<script>
|
// import MyEltable from '@/components/table/table';
|
// import * as interactionServer from '@/services/onlineInteractionService';
|
export default {
|
name: 'Index',
|
components: { MyEltable },
|
props: {
|
value: { type: Boolean }
|
},
|
data() {
|
return {
|
tableData: {},
|
loading: false,
|
checkboxTable: true,
|
isIndex: true,
|
shopId: [],
|
tabheight: '100%',
|
tableHeader: [
|
{ label: '所属商家', prop: 'merchantId' },
|
{ label: '商品名称', prop: 'merchantName' },
|
{ label: '商品图片', slot: 'icon' },
|
{ label: '商品价格', prop: ' price' }
|
],
|
ShopkeyWord: '',
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 5,
|
total: 0
|
}
|
};
|
},
|
|
mounted() {
|
this.init();
|
},
|
methods: {
|
onCancel () {
|
this.$emit('change', false);
|
},
|
async onOk() {
|
if (this.shopId.length > 1) {
|
return this.$message({
|
message: '只能添加一个商品',
|
type: 'warning'
|
});
|
}
|
const params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
keyword: this.ShopkeyWord,
|
productId: this.shopId[0].id
|
}
|
await interactionServer.getShop(params);
|
this.$message('添加成功')
|
this.$emit('success', this.shopId);
|
},
|
onSelectionChange(val) {
|
this.shopId = val;
|
console.log(this.shopId)
|
},
|
/** pageSize 改变时会触发 */
|
onPageSizeChange (pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
/** 分页 */
|
onPaginationChange (page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
|
onSearch() {
|
this.init();
|
},
|
Reset() {
|
this.ShopkeyWord = '';
|
this.init();
|
},
|
|
async init() {
|
const params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
keyword: this.ShopkeyWord
|
}
|
const res = await interactionServer.getShop(params)
|
this.tableData = res;
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
// @import '../../../../styles/table.less';
|
.shop-image {
|
width: 60px;
|
height: 60px;
|
display: inline-block;
|
}
|
</style>
|
