<!-- 搜索 -->
<el-col :xs="8" :sm="6" :md="6" :lg="6">
<el-input v-model.trim="query.keywords" placeholder="请输入产品名称搜索" clearable @clear="search()" @keyup.enter.native="search()">
<el-button slot="append" icon="el-icon-search" @click="search()" />
</el-input>
</el-col>
<el-col :xs="8" :sm="16" :md="16" :lg="16">
<el-form :inline="true" :model="formInline">
<el-form-item label="分类">
<el-select v-model="query.category" placeholder="选择分类" clearable filterable>
<el-option v-for="(item,index) in formInline.categoryOption" :key="index" :label="item.data_name" :value="item.data_id" />
</el-select>
</el-form-item>
<el-form-item label="品牌">
<el-select v-model="query.brand" placeholder="选择品牌" clearable filterable>
<el-option v-for="(item,index) in formInline.brandOption" :key="index" :label="item.data_name" :value="item.data_id" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search()">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!-- 分页 -->
<el-row type="flex" justify="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
background
:total="table.total"
:current-page.sync="pagination.current"
:page-size="pagination.limit"
@size-change="pageSizeChange"
/>
</el-row>
data() {
return {
pagination: {
limit: 10,
current: 1
},
table: {
row: [],
total: 0
},
query: {
keywords: '',
category: '',
brand: '',
},
}
},
watch: {
'pagination.current'(val) {
this.search(val)
},
'pagination.limit'(val) {
this.search(this.pagination.current)
}
},
methods: {
async _fetchData(params) {
this.loading = true
try {
const {data: res, message, code} = await allProduct({ ...this.query, ...params })
this.table.row = res.list
this.table.total = res.totalnum
} finally {
this.loading = false
}
},
search(current) {
if (current) {
const params = {
pagesize: this.pagination.limit,
pagenum: this.pagination.current,
}
this._fetchData(params)
return
}
if (this.pagination.current == 1) {
this.search(1)
return
}
this.pagination.current = 1
},
pageSizeChange(val) {
this.pagination.limit = val
}
}