<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:visible.sync="visible"
|
>
|
<TableLayout >
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="10px" style="display: block;" >
|
<el-form-item label="" prop="name" style="display: inline-block;margin-right: 30px;width: 180px">
|
<el-input v-model="searchForm.name" placeholder="商品名称" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="" prop="id" style="display: inline-block;margin-right: 30px;;width: 180px">
|
<el-input v-model="searchForm.id" placeholder="商品ID" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="" prop="categoryId" style="display: inline-block;margin-right: 30px;">
|
<!-- 0正常 1禁用 -->
|
<el-select
|
v-model="searchForm.categoryId"
|
style="width: 120px"
|
placeholder="所属分类"
|
clearable
|
@change="search"
|
>
|
<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" style="display: inline-block;margin-right: 30px;">
|
<!-- 0正常 1禁用 -->
|
<el-select
|
v-model="searchForm.brandId"
|
style="width: 120px"
|
placeholder="所属品牌"
|
clearable
|
@change="search"
|
>
|
<el-option
|
v-for="item in brands"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="" prop="status" style="display: inline-block;margin-right: 30px;">
|
<!-- 0正常 1禁用 -->
|
<el-select
|
v-model="searchForm.status"
|
style="width: 120px"
|
@change="search"
|
clearable
|
placeholder="上下架状态"
|
>
|
<el-option :key="0" :value="0" label="上架"></el-option>
|
<el-option :key="1" :value="1" label="下架"></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>
|
<!-- <ul class="toolbar" >
|
<li><el-button type="primary" icon="el-icon-plus" @click="setPriceBatch" >批量定价</el-button></li>
|
</ul>-->
|
<div :style="'display: flex;height:'+tabelHeight+'px;'">
|
<el-table
|
:height="tabelHeight"
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
border
|
@selection-change="handleSelectionChange"
|
>
|
<!--
|
<el-table-column type="selection" width="55"></el-table-column>
|
-->
|
<el-table-column prop="imgurl" label="商品信息" min-width="80px">
|
<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" min-width="120px" ></el-table-column>
|
<el-table-column prop="name" label="商品名称" min-width="180px" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="categoryName" label="所属分类" min-width="120px"></el-table-column>
|
<el-table-column prop="brandName" label="所属品牌" min-width="120px"></el-table-column>
|
<el-table-column prop="stockNum" label="剩余库存量" min-width="100px"></el-table-column>
|
<el-table-column prop="status" label="上下架状态" min-width="100px" align="center">
|
<template slot-scope="{row}">
|
<span v-if="row.status ==1" class="red">已下架</span>
|
<span v-else class="green">已上架</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="price" label="展示价格" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="skuPrice" label="销售价(元)" fixed="right" min-width="100px" align="center">
|
<template slot-scope="{row}">
|
<span class="orange">{{ row.skuPrice }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="shopPrice" label="供货价(元)" align="center" min-width="100px" fixed="right">
|
<template slot-scope="scope">
|
<el-input v-if="scope.row.isPriceSelected" v-model="scope.row.shopPrice"
|
@focus="focusEvent(scope.row,scope.$index,scope.column)"
|
@blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
|
<p :style="'cursor: pointer;'+((scope.row.skuPrice||0) <= (scope.row.shopPrice||0)?'color: red':'')+';'" class="blue" title="点击编辑" @click="cellClick(scope.row, scope.column)" v-else>
|
{{scope.row.shopPrice || '未设置' }}
|
<i v-if="(scope.row.skuPrice||0) <= (scope.row.shopPrice||0)" class="el-icon-warning" style="color: red"></i>
|
</p>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column
|
label="操作"
|
min-width="160"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<el-button type="text" v-permissions="['business:goods:update']" @click="setPrice(row)">设置价格</el-button>
|
</template>
|
</el-table-column>-->
|
</el-table>
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
>
|
</pagination>
|
</div>
|
</template>
|
</TableLayout>
|
<template v-slot:footer>
|
<el-button @click="visible=false">返回</el-button>
|
</template>
|
</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'
|
import { setGoodsPrice } from '@/api/business/shop'
|
export default {
|
name: 'OperaShopGoodsWindow',
|
extends: BaseTable,
|
components: { GlobalWindow, TableLayout, Pagination },
|
data () {
|
return {
|
title: '',
|
price: null,
|
visible: false,
|
tabelHeight: null,
|
// 搜索
|
searchForm: {
|
id: '',
|
name: '',
|
shopId: null,
|
categoryId: '',
|
brandId: '',
|
// 类型 0平台商城 1咖豆商城 2咖啡计划商品
|
type: '0', // 平台商品
|
status: 0,
|
labels: ''
|
},
|
labels: [],
|
brands: []
|
}
|
},
|
mounted () {
|
window.addEventListener('resize', this.handleResize)
|
},
|
beforeDestroy () {
|
window.removeEventListener('resize', this.handleResize)
|
},
|
created: function () {
|
this.config({
|
module: '商品信息表',
|
api: '/business/goods',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
this.handleResize()
|
labelList({
|
type: 0 // 商品分类
|
}).then(res => {
|
this.labels = res
|
})
|
labelList({
|
type: 1 // 商品品牌
|
})
|
.then(res => {
|
this.brands = res
|
})
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector('input').focus()
|
}
|
}
|
},
|
methods: {
|
setPrice (row) {
|
if (row.skuPrice == null) {
|
this.$tip.warning('请先设置商品销售价！')
|
return
|
}
|
console.log(row)
|
},
|
setPriceBatch () {
|
},
|
handleResize () {
|
this.tabelHeight = window.innerHeight - 400
|
},
|
open (title, info) {
|
this.title = title
|
this.visible = true
|
this.searchForm.shopId = info.id
|
this.search()
|
this.handleResize()
|
},
|
handlePageChange: function (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 => {
|
(data.records || []).forEach((item) => {
|
item.isPriceSelected = false
|
})
|
this.tableData.list = data.records || []
|
this.tableData.pagination.total = data.total
|
console.log(this.tableData.list)
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
cellClick (row, column) {
|
row.isPriceSelected = !row.isPriceSelected
|
},
|
focusEvent (row, index, column) {
|
row.oldShopsPrice = row.shopPrice
|
},
|
blurEvent (row, curIndex, column) {
|
if ( !row.skuPrice) {
|
this.$tip.error('商品销售价未设置！')
|
row.isPriceSelected = !row.isPriceSelected
|
row.shopPrice = row.oldShopsPrice// 价格还原
|
return
|
}
|
if ( row.skuPrice <= row.shopPrice) {
|
this.$tip.error('供货价不能大于销售价')
|
row.isPriceSelected = !row.isPriceSelected
|
row.shopPrice = row.oldShopsPrice// 价格还原
|
return
|
}
|
if (row.shopPrice == row.oldShopsPrice) {
|
row.isPriceSelected = !row.isPriceSelected
|
return
|
}
|
setGoodsPrice({
|
id: this.searchForm.shopId,
|
goodsId: row.id,
|
goodsPrice: row.shopPrice
|
}).then(res => {
|
row.oldShopsPrice = row.shopPrice
|
this.$tip.success('修改成功')
|
this.$emit('success')
|
}).catch(e => {
|
row.shopPrice = row.oldShopsPrice// 价格还原
|
}).finally(() => {
|
row.isPriceSelected = !row.isPriceSelected
|
})
|
},
|
handleClick (val) {
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.table-pagination{
|
position: fixed !important;
|
bottom: 50px;
|
}
|
</style>
|
