<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:visible.sync="visible"
|
@confirm="confirm"
|
>
|
<TableLayout>
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" style="display: block;" >
|
<el-form-item label="" prop="name" label-width="5px" style="display: inline-block;margin-right: 30px;">
|
<el-input v-model="searchForm.name" style="width: 150px;" placeholder="商品名称" clearable @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="" prop="categoryId" label-width="5px" style="display: inline-block;margin-right: 30px;" >
|
<el-select v-model="searchForm.categoryId" placeholder="所属分类" clearable style="width: 150px;" >
|
<el-option v-for="item in labels" :key="item.id" :value="item.id" :label="item.name" ></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="" prop="brandId" label-width="5px" style="display: inline-block">
|
<el-select v-model="searchForm.brandId" placeholder="所属品牌" style="width: 150px;" >
|
<el-option v-for="item in brands" :key="item.id" :value="item.id" :label="item.name" clearable ></el-option>
|
</el-select>
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="search">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<div :style="'display: flex;height:'+tabelHeight+'px;'">
|
<div style="flex: 6;">
|
<ul class="toolbar">
|
<li><el-button type="primary" icon="el-icon-plus" @click="addAll()" :disabled="!(tableData.selectedRows && tableData.selectedRows.length)">批量添加</el-button></li>
|
</ul>
|
<el-table
|
ref="singleTable"
|
:height="tabelHeight-80"
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
border
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" :selectable="checkSelectable" width="55"></el-table-column>
|
<el-table-column prop="imgurl" label="列表图" min-width="70px">
|
<template slot-scope="{row}">
|
<el-image style="width: 50px;height: 50px;" v-if="row.imgurl && row.imgurl!=''" :src="row.resourcePath+row.imgurl" :preview-src-list="[row.resourcePath+row.imgurl]"></el-image>
|
</template>
|
</el-table-column>
|
<el-table-column prop="id" label="商品ID" ></el-table-column>
|
<el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="categoryName" label="所属分类" ></el-table-column>
|
<el-table-column prop="brandName" label="所属品牌" ></el-table-column>
|
<el-table-column prop="price" label="展示价格" ></el-table-column>
|
<el-table-column prop="skuPrice" label="零售价(元)" ></el-table-column>
|
<el-table-column label="操作" align="center" min-width="80px" fixed="right" >
|
<template slot-scope="{ row }">
|
<el-button style="color: red" v-if="row.tabStatus === 2" type="text" icon="el-icon-delete" @click="delItem(row)">移除</el-button>
|
<el-button v-else type="text" icon="el-icon-plus" @click="add(row)">添加</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
>
|
</pagination>
|
</div>
|
<div style="flex: 2;margin-left: 20px;border: 1px solid #f2f2f2;padding: 10px;font-size: 12px;">
|
<div style="display: flex;">
|
<div style="flex: 6"> <span>已选择<i class="blue" style="margin: 0 10px">{{selectGoods.length||0}}</i>件商品</span></div>
|
<div style="flex: 1;text-align: right"> <el-button size="mini" type="danger" class="blue" @click="cleanAll">清空</el-button></div>
|
</div>
|
<div :style="`display: flex;flex-direction: column;max-height: ${tabelHeight-80}px;overflow: auto`">
|
<div v-for="(item,index) in selectGoods" style="display: flex;margin: 10px 0;" :key="'selGoods'+item.id">
|
<div style="flex: 6">{{item.name}}<br><span class="red">￥{{item.skuPrice || 0}}</span></div>
|
<div style="flex: 1;text-align: right;">
|
<el-button class="blue" style="border: none;color: red" icon="el-icon-delete" @click="del(item,index)"></el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</TableLayout>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import Pagination from '@/components/common/Pagination'
|
import { findAll as labelList } from '@/api/business/labels'
|
export default {
|
name: 'OperaCouponGoodsWindow',
|
extends: BaseTable,
|
components: { GlobalWindow, TableLayout, Pagination },
|
data () {
|
return {
|
title: '',
|
visible: false,
|
// 搜索
|
searchForm: {
|
id: '',
|
bindShopId: ''
|
},
|
shops: []
|
}
|
},
|
created () {
|
this.config({
|
module: '商品信息表',
|
api: '/business/goods',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
labelList({
|
type: 0 // 商品分类
|
}).then(res => {
|
this.labels = res
|
})
|
labelList({
|
type: 1 // 商品品牌
|
})
|
.then(res => {
|
this.brands = res
|
})
|
this.handleResize()
|
},
|
methods: {
|
handleResize(){
|
this.tabelHeight = window.innerHeight - 300
|
},
|
checkSelectable (row) {
|
return row.tabStatus !== 2
|
},
|
addAll () {
|
if (this.tableData.selectedRows && this.tableData.selectedRows.length) {
|
this.tableData.selectedRows.forEach(item => {
|
this.add(item)
|
})
|
this.$nextTick(() => {
|
if (this.$refs.singleTable) {
|
this.$refs.singleTable.clearSelection()
|
}
|
})
|
}
|
},
|
cleanAll () {
|
this.selectGoods = []
|
this.tableData.list.forEach(item => {
|
item.tabStatus = 1
|
})
|
this.$nextTick(() => {
|
if (this.$refs.singleTable) {
|
this.$refs.singleTable.clearSelection()
|
}
|
})
|
},
|
add (row) {
|
var add = true
|
row.tabStatus = 2
|
console.log(this.tableData.list)
|
this.selectGoods.forEach(item => {
|
if (item.id === row.id) {
|
add = false
|
}
|
})
|
if (add) {
|
this.selectGoods.push(row)
|
}
|
},
|
del (row, index) {
|
this.selectGoods.splice(index, 1)
|
this.tableData.list.forEach(item => {
|
if (item.id === row.id) {
|
item.tabStatus = 1
|
}
|
})
|
},
|
delItem (delItem) {
|
this.selectGoods.forEach((item, index) => {
|
if (item.id === delItem.id) {
|
this.del(item, index)
|
}
|
})
|
},
|
confirm () {
|
this.$emit('success', this.selectGoods)
|
this.visible = false
|
},
|
open (title, goods) {
|
this.title = title
|
this.visible = true
|
this.cleanAll()
|
if (goods && goods.length) {
|
goods.forEach(item => {
|
this.selectGoods.push(item)
|
})
|
}
|
this.search()
|
},
|
handlePageChange (pageIndex) {
|
this.__checkApi()
|
this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
|
this.isWorking.search = true
|
this.api.fetchList({
|
page: this.tableData.pagination.pageIndex,
|
capacity: this.tableData.pagination.pageSize,
|
model: this.searchForm,
|
sorts: this.tableData.sorts
|
})
|
.then(data => {
|
this.tableData.list = data.records || []
|
this.tableData.pagination.total = data.total
|
this.tableData.list.forEach(item => {
|
item.tabStatus = 1
|
this.selectGoods.forEach(row => {
|
if (item.id === row.id) {
|
item.tabStatus = 2
|
}
|
})
|
})
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
goPriceSet (row) {
|
|
},
|
handleClick (val) {
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.table-pagination{
|
position: fixed !important;
|
bottom: 50px;
|
}
|
</style>
|
