<template>
|
<GlobalWindow
|
title="从企业商品库选择"
|
width="70%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm">
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
<el-form-item label="商品名称">
|
<el-input v-model="searchForm.name" placeholder="请输入商品名称" clearable @keyup.enter.native="search" />
|
</el-form-item>
|
<el-form-item label="类别">
|
<el-select v-model="searchForm.categoryId" clearable placeholder="全部">
|
<el-option
|
v-for="item in categoryList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="品牌">
|
<el-select v-model="searchForm.brandId" clearable placeholder="全部">
|
<el-option
|
v-for="item in brandList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
v-loading="isWorking"
|
:data="tableData"
|
stripe
|
border
|
highlight-current-row
|
@current-change="handleCurrentChange">
|
<el-table-column label="" width="55">
|
<template slot-scope="{ row }">
|
<el-radio v-model="selectedId" :label="row.id"> </el-radio>
|
</template>
|
</el-table-column>
|
<el-table-column prop="id" label="商品ID" min-width="90" />
|
<el-table-column prop="name" label="商品名称/型号" min-width="220" show-overflow-tooltip>
|
<template slot-scope="{ row }">
|
<div class="goods-cell">
|
<el-image
|
v-if="row.imgurl"
|
class="goods-thumb"
|
:src="row.prefixUrl + row.imgurl"
|
fit="cover" />
|
<span>{{ row.name }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="brandName" label="品牌" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="categoryName" label="类别" min-width="100" show-overflow-tooltip />
|
<el-table-column label="指导价（元）" min-width="110">
|
<template slot-scope="{ row }">
|
{{ row.type === 0 ? row.zdPrice : row.baseZdPrice }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
class="pager"
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { fetchList } from '@/api/business/goods'
|
import { brand, category } from '@/api/system/common.js'
|
|
export default {
|
name: 'FeaturedGoodsPicker',
|
components: { GlobalWindow },
|
data () {
|
return {
|
visible: false,
|
isWorking: false,
|
searchForm: {
|
name: '',
|
categoryId: '',
|
brandId: '',
|
status: 0
|
},
|
categoryList: [],
|
brandList: [],
|
tableData: [],
|
page: 1,
|
pageSize: 10,
|
total: 0,
|
selectedId: '',
|
selectedRow: null
|
}
|
},
|
methods: {
|
open () {
|
this.visible = true
|
this.selectedId = ''
|
this.selectedRow = null
|
this.page = 1
|
this.searchForm.name = ''
|
this.searchForm.categoryId = ''
|
this.searchForm.brandId = ''
|
this.loadOptions()
|
this.getList()
|
},
|
loadOptions () {
|
if (!this.categoryList.length) {
|
category().then(res => { this.categoryList = res || [] })
|
}
|
if (!this.brandList.length) {
|
brand().then(res => { this.brandList = res || [] })
|
}
|
},
|
search () {
|
this.page = 1
|
this.getList()
|
},
|
getList () {
|
this.isWorking = true
|
fetchList({
|
page: this.page,
|
capacity: this.pageSize,
|
model: { ...this.searchForm }
|
}).then(res => {
|
this.tableData = res.records || []
|
this.total = res.total || 0
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
}).finally(() => {
|
this.isWorking = false
|
})
|
},
|
handleSizeChange (size) {
|
this.pageSize = size
|
this.page = 1
|
this.getList()
|
},
|
handlePageChange (page) {
|
this.page = page
|
this.getList()
|
},
|
handleCurrentChange (row) {
|
if (!row) return
|
this.selectedId = row.id
|
this.selectedRow = row
|
},
|
confirm () {
|
if (!this.selectedRow) {
|
this.$message.warning('请选择商品')
|
return
|
}
|
this.$emit('select', { ...this.selectedRow })
|
this.visible = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.search-form {
|
margin-bottom: 12px;
|
}
|
.goods-cell {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
.goods-thumb {
|
width: 56px;
|
height: 56px;
|
flex-shrink: 0;
|
}
|
.pager {
|
margin-top: 12px;
|
text-align: right;
|
}
|
</style>
|
