说明: vue中引入element组件中 封装 tabel表格,表格中包含查询,分页,全选
一,组件部分
<template>
<div>
<el-dialog
:title="titleName"
:visible.sync="visible"
@close="$emit('update:show', false)"
:show="show">
<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="年份" v-show="isShowYear">
<el-select v-model="formInline.Year" placeholder="全部">
<el-option
v-for="yearItem in yearList"
:key="yearItem.YearCode"
:label="yearItem.YearName"
:value="yearItem.YearCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="季度" v-show="isShowSeason">
<el-select v-model="formInline.Season" placeholder="全部">
<el-option
v-for="yearItem in seasonList"
:key="yearItem.QuarterCode"
:label="yearItem.QuarterName"
:value="yearItem.QuarterCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="品牌" v-show="isShowBrand">
<el-select v-model="formInline.Brand" placeholder="全部">
<el-option
v-for="yearItem in brandList"
:key="yearItem.PingPCode"
:label="yearItem.PingPName"
:value="yearItem.PingPCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="店铺编号" v-show="isShowStore">
<el-input placeholder="店铺" v-model="formInline.BrandchName"
clearable @clear="clearBranchId">
<template slot="append">
<el-button @click="selectStoreDialog" icon="el-icon-tickets"></el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="客户类型" v-show="isShowCustomerType">
<el-select v-model="formInline.CustomerType" placeholder="请选择活动区域">
<el-option label="全部" value="-1"></el-option>
<el-option label="直营" value="1"></el-option>
<el-option label="加盟" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="月份" v-show="isShowMonth">
<el-select v-model="formInline.Month" placeholder="请选择活动区域">
<el-option
v-for="monthItem in monthList"
:key="monthItem.monthCode"
:label="monthItem.monthName"
:value="monthItem.monthCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="扣款金额" v-show="showAmount">
<el-input v-model="formInline.Amount" placeholder=""></el-input>
</el-form-item>
<el-form-item label="占比" v-show="showPercent">
<el-input v-model="formInline.Percent" placeholder="请输入数值"></el-input>
</el-form-item>
<el-form-item label="预计库存率" v-show="showRate">
<el-input v-model="formInline.StockForcast" placeholder="请输入数值"></el-input>
</el-form-item>
<el-form-item label="商场补给金额" v-show="showSupplyAmount">
<el-input v-model="formInline.Amount" placeholder="请输入数值"></el-input>
</el-form-item>
<el-form-item label="品牌比率" v-show="showBrandRate">
<el-input v-model="formInline.Percent" placeholder="请输入数值"></el-input>
</el-form-item>
<el-form-item label="选择圈子" v-show="showCircleCode">
<select-circle :canClearable="true" @addCircle="addCircle" :propsSelectedOptions="currentCircleCode"></select-circle>
</el-form-item>
<el-form-item label="费用类型" v-show="showCostType">
<el-select v-model="formInline.costType" placeholder="全部">
<el-option
v-for="costType in costTypeList"
:key="costType.Id"
:label="costType.TypeSubName"
:value="costType.TypeId">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="addList">确 定</el-button>
</div>
</el-dialog>
<select-store :isShowCheckbox="true" :tableData="storeList"
:show.sync="showStore" v-if="flag" @outputSelectUser="getSelectStore"></select-store>
</div>
</template>
<script>
import {searchYearList, searchQuarterList, searchPingPList, SearchBranchInfo, searchManageCostType} from '@/api/amoeba'
import SelectCircle from '@/views/circleplus/components/selectCircle/index'
import selectStore from './selectStore'
export default {
data() {
return {
currentCircleCode: [],
costTypeList: [],
flag: false,
monthList: [
{monthCode: 1, monthName: '一月'},
{monthCode: 2, monthName: '二月'},
{monthCode: 3, monthName: '三月'},
{monthCode: 4, monthName: '四月'},
{monthCode: 5, monthName: '五月'},
{monthCode: 6, monthName: '六月'},
{monthCode: 7, monthName: '七月'},
{monthCode: 8, monthName: '八月'},
{monthCode: 9, monthName: '九月'},
{monthCode: 10, monthName: '十月'},
{monthCode: 11, monthName: '十一月'},
{monthCode: 12, monthName: '十二月'}
],
showStore: false,
editCon: {
brandName: '',
seasonName: '',
CustomerTypeName: ''
},
titleName: '',
listLoading: false,
formInline: this.formData,
yearList: [],
seasonList: [],
brandList: [],
storeList: [],
visible: this.show
}
},
components: {
selectStore,
SelectCircle
},
mounted() {
this.getYearData()
this.getSeasonData()
this.getBrandData()
this.getManageCostTypeData()
},
props: {
showCostType: {
type: Boolean,
default: function() {
return false
}
},
showCircleCode: {
type: Boolean,
default: function() {
return false
}
},
isShowYear: {
type: Boolean,
default: function() {
return true
}
},
showBrandRate: {
type: Boolean,
default: function() {
return false
}
},
showSupplyAmount: {
type: Boolean,
default: function() {
return false
}
},
showAmount: {
type: Boolean,
default: function() {
return false
}
},
isShowSeason: {
type: Boolean,
default: function() {
return true
}
},
isShowBrand: {
type: Boolean,
default: function() {
return true
}
},
isShowMonth: false,
isShowStore: false,
isShowCustomerType: true,
showPercent: false,
showRate: {
type: Boolean,
default: function() {
return true
}
},
show: {
type: Boolean,
default: false
},
formData: {
type: Object,
default: function() {
return {
Year: '',
Season: '',
Brand: '',
Percent: '',
CustomerType: '',
StockForcast: '',
Amount: '',
CircleCode: '',
costType: ''
}
}
},
isAddItem: false // true表示添加 false表示修改
},
methods: {
getManageCostTypeData() {
searchManageCostType('', '').then(res => {
this.costTypeList = res.data
})
},
addCircle(circle) {
if (circle && circle.code) {
this.formInline.CircleCode = circle.code
} else {
this.formInline.CircleCode = ''
}
// this.getList()
},
getSelectStore(data) {
console.log(data)
this.formInline.BrandchName = data[0].ShortName
this.formInline.BrandchId = data[0].BranchId
},
selectStoreDialog() {
console.log('选择店铺')
this.showStore = true
SearchBranchInfo('0').then(res => {
this.storeList = res.data
this.flag = true
})
},
clearBranchId() {
console.log('清除')
},
selectStore() {
console.log('选择店铺')
this.showStore = true
},
addList() {
this.visible = false
if (this.isAddItem) {
console.log('添加')
this.titleName = '添加'
this.$emit('sureAddItem', this.formInline)
} else {
this.titleName = '修改'
console.log('修改')
console.log(this.formInline)
for (const i in this.seasonList) {
if (this.seasonList[i].QuarterCode === this.formInline.Season) {
this.editCon.seasonName = this.seasonList[i].QuarterName
}
}
for (const i in this.brandList) {
if (this.brandList[i].PingPCode === this.formInline.Brand) {
this.editCon.brandName = this.brandList[i].PingPName
}
}
if (this.formInline.CustomerType === '1') {
this.editCon.CustomerTypeName = '直营'
}
if (this.formInline.CustomerType === '2') {
this.editCon.CustomerTypeName = '加盟'
}
if (this.formInline.CustomerType === '-1') {
this.editCon.CustomerTypeName = '全部'
}
console.log(this.editCon)
console.log('--------------------')
this.$emit('editItem', this.editCon)
}
},
getYearData() {
if (this.yearList.length === 0) {
this.listLoading = true
searchYearList().then(res => {
this.yearList = res.data
this.listLoading = false
})
}
},
getSeasonData() {
if (this.seasonList.length === 0) {
this.listLoading = true
searchQuarterList().then(res => {
this.seasonList = res.data
this.listLoading = false
})
}
},
getBrandData() {
if (this.brandList.length === 0) {
this.listLoading = true
searchPingPList('0', '1').then(res => {
this.brandList = res.data
this.listLoading = false
})
}
}
},
watch: {
show() {
this.visible = this.show
if (!this.visible) {
this.formInline = {
Year: '',
Season: '',
Brand: '',
Percent: '',
CustomerType: '',
StockForcast: '',
BrandchId: '',
Month: '',
CircleCode: '',
costType: ''
}
}
},
formData(val) {
this.formInline = val
this.currentCircleCode = [this.formInline.CircleCode]
}
}
}
</script>
二,引入表格分页组件
<select-store :isShowCheckbox="true" :tableData="storeList"
:show.sync="showStore" v-if="flag" @outputSelectUser="getSelectStore"></select-store>
storeList 表示请求到的表格数据
// 获取在表格中选中的数据
getSelectStore(data) {
console.log(data)
},