<template>
|
<GlobalWindow
|
:title="title"
|
width="80%"
|
: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;">
|
<el-input v-model="searchForm.name" placeholder="请输入名称" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="" prop="code" style="display: inline-block;margin-right: 30px;">
|
<el-input v-model="searchForm.code" placeholder="请输入门店ID" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="" prop="saleType" style="display: inline-block;margin-right: 30px;">
|
<!-- 0正常 1禁用 -->
|
<el-select v-model="searchForm.saleType" placeholder="销售模式" @change="search" >
|
<el-option :key="0" :value="0" label="平台铺货" ></el-option>
|
<el-option :key="1" :value="1" label="自主采购" ></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" placeholder="请选择状态" @change="search" >
|
<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>
|
<div :style="'display: flex;height:'+tabelHeight+'px;'">
|
<el-table
|
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="name" label="名称" fixed align="center" min-width="100px"> </el-table-column>
|
<el-table-column prop="code" label="门店ID" align="center" min-width="100px"></el-table-column>
|
<el-table-column prop="bigAreaName" label="所属区域" align="center" min-width="100px"></el-table-column>
|
<el-table-column prop="areaFullName" label="省市区" align="center" min-width="150px" show-overflow-tooltip>
|
<template slot-scope="{row}">
|
<span v-if="row.areas!=null">{{(row.areas.provinceName||'') + (row.areas.cityName||'') + (row.areas.name||'')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="saleType" label="销售模式" align="center" min-width="150px">
|
<template slot-scope="{row}">
|
{{ row.saleType == 1?'自主采购':'平台铺货'}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="状态" align="center" min-width="100px" fixed="right">
|
<template slot-scope="{row}">
|
{{ row.status == 1?'禁用':'正常'}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="price" label="销售价" align="center" min-width="100px" fixed="right">
|
{{ price}}
|
</el-table-column>
|
<el-table-column prop="goodsPrice" label="供货价" align="center" min-width="100px" fixed="right">
|
<template slot-scope="scope">
|
<el-input v-if="scope.row.isPriceSelected" v-model="scope.row.goodsPrice"
|
@focus="focusEvent(scope.row,scope.$index,scope.column)"
|
@blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
|
<p style="cursor: pointer" class="blue" title="点击编辑" @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.goodsPrice || '未设置' }}</p>
|
</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'
|
export default {
|
name: 'OperaShopGoodsWindow',
|
extends: BaseTable,
|
components: { GlobalWindow, TableLayout, Pagination },
|
data () {
|
return {
|
activeName: 'first',
|
title: '',
|
price : null,
|
visible: false,
|
tabelHeight: null,
|
// 搜索
|
searchForm: {
|
name: '',
|
goodsId: null,
|
username: '',
|
status: '',
|
saleType: '',
|
isrec: ''
|
}
|
}
|
},
|
mounted () {
|
window.addEventListener('resize', this.handleResize)
|
},
|
beforeDestroy () {
|
window.removeEventListener('resize', this.handleResize)
|
},
|
created () {
|
this.config({
|
module: '商品信息表',
|
api: '/business/shop',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
this.handleResize()
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector('input').focus()
|
}
|
}
|
},
|
methods: {
|
handleResize () {
|
this.tabelHeight = window.innerHeight - 300
|
},
|
open (title, goods) {
|
this.title = title
|
this.visible = true
|
this.price = goods.skuPrice
|
this.searchForm.goodsId = goods.id
|
this.search()
|
},
|
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.oldGoodsPrice = row.goodsPrice
|
},
|
blurEvent (row, curIndex, column) {
|
if(this.price <= row.goodsPrice) {
|
this.$tip.error('供货价不能低于销售价')
|
row.isPriceSelected = !row.isPriceSelected
|
row.goodsPrice = row.oldGoodsPrice// 价格还原
|
return
|
}
|
if( row.goodsPrice == row.oldGoodsPrice){
|
row.isPriceSelected = !row.isPriceSelected
|
return;
|
}
|
this.api.setGoodsPrice({
|
id: row.id,
|
goodsId: this.searchForm.goodsId,
|
goodsPrice: row.goodsPrice
|
}).then(res => {
|
row.oldGoodsPrice = row.goodsPrice
|
this.$tip.success('修改成功')
|
this.$emit('success')
|
}).catch(e => {
|
row.goodsPrice = row.oldGoodsPrice// 价格还原
|
}).finally(() => {
|
row.isPriceSelected = !row.isPriceSelected
|
})
|
},
|
handleClick (val) {
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.table-pagination{
|
position: fixed !important;
|
bottom: 50px;
|
}
|
</style>
|
