实现效果图如下：
<template>
<div class="containt animated slideInLeft">
<Row class="mb8" >
<ButtonGroup shape="circle">
<Button type="info" icon='md-arrow-round-back' :loading="model_load" @click="handleOk()" v-if="!row.id|| editflag">保存</Button>
<Button icon='md-arrow-round-forward' @click="reBack()">返回</Button>
</ButtonGroup>
</Row>
<Card style='margin: 30px 0;'>
<p slot="title">
<Icon type="ios-settings" />
输入目标额
</p>
店铺选择：<Input placeholder="请选择商店" v-model="mb.khmc" :readonly="true"
style="width: 200px;" @on-focus="sdmodel=true" :disabled="disabled">
<Icon type="ios-search" slot="suffix" @click="sdmodel=true" />
</Input>
年度：
<Input placeholder="请输入年度" v-model="mb.year" style="width: 200px;margin: 20px 0;" :disabled="disabled" />
年度目标额：<Input placeholder="请输入年度目标额" v-model="mb.mbje" style="width: 200px;margin: 20px 0;" :disabled="disabled" />
<Button type='primary' @click="aroundBtn()">平均分配</Button>
<div>
请输入月权重：
<vxe-grid ref="xGrid" v-bind="gridOptions" >
<template #operate="{ row }">
<template v-if="$refs.xGrid.isActiveByRow(row)">
<vxe-button icon="iconfont icon-wancheng" status="primary" title="保存" circle @click="saveRowEvent(row)">
</vxe-button>
</template>
<template v-else>
<vxe-button :disabled="disabled" icon="iconfont icon-xiugai1" title="编辑" circle @click="editRowEvent(row)" ></vxe-button>
</template>
</Tooltip>
</template>
<template #mbje1_edit="{ row }">
<vxe-input v-model="row.mbje1"></vxe-input>
</template>
<template #mbje2_edit="{ row }">
<vxe-input v-model="row.mbje2"></vxe-input>
</template>
<template #mbje3_edit="{ row }">
<vxe-input v-model="row.mbje3"></vxe-input>
</template>
<template #mbje4_edit="{ row }">
<vxe-input v-model="row.mbje4"></vxe-input>
</template>
<template #mbje5_edit="{ row }">
<vxe-input v-model="row.mbje5"></vxe-input>
</template>
<template #mbje6_edit="{ row }">
<vxe-input v-model="row.mbje6"></vxe-input>
</template>
<template #mbje7_edit="{ row }">
<vxe-input v-model="row.mbje7"></vxe-input>
</template>
<template #mbje8_edit="{ row }">
<vxe-input v-model="row.mbje8"></vxe-input>
</template>
<template #mbje9_edit="{ row }">
<vxe-input v-model="row.mbje9"></vxe-input>
</template>
<template #mbje10_edit="{ row }">
<vxe-input v-model="row.mbje10"></vxe-input>
</template>
<template #mbje11_edit="{ row }">
<vxe-input v-model="row.mbje11"></vxe-input>
</template>
<template #mbje12_edit="{ row }">
<vxe-input v-model="row.mbje12"></vxe-input>
</template>
</vxe-grid>
</div>
</Card>
<Modal title="商店列表" v-model="sdmodel" width="600" @on-ok="modelSub_sd" :mask-closable="false" id="minfo">
<khlist v-if='sdmodel' ref="sddome" :selected="selected_sd"></khlist>
</Modal>
</div>
</template>
<script>
import { mapActions} from "vuex";
import khlist from '../modal/khlist.vue'
import VXETable from 'vxe-table'
export default{
components: {
khlist
},
props: {
row: {
type: Object,
default: {},
},
editflag: {
type: Boolean | '',
default: ''
},
},
data (){
return {
disabled:false,
model_load:false,
sdmodel:false,
selected_sd:[],
mb:{
mbje:'',
year:'',
khmc:'',
khdm:''
},
gridOptions: {
keepSource: true,
border: true,
showOverflow: true,
height: 400,
align: 'left',
showHeader: true,
editConfig: {
// 设置触发编辑为手动模式
trigger: 'manual',
// 设置为整行编辑模式
mode: 'row',
// 显示修改状态和新增状态
showStatus: true,
// 自定义可编辑列头的图标
icon: 'fa fa-file-text-o'
},
columns: [
{field: 'mbje',title: '月份'},
{field: 'mbje1',title: '1月',editRender: {},slots: {edit: 'mbje1_edit'}},
{field: 'mbje2',title: '2月',editRender: {},slots: {edit: 'mbje2_edit'}},
{field: 'mbje3',title: '3月',editRender: {},slots: {edit: 'mbje3_edit'}},
{field: 'mbje4',title: '4月',editRender: {},slots: {edit: 'mbje4_edit'}},
{field: 'mbje5',title: '5月',editRender: {},slots: {edit: 'mbje5_edit'}},
{field: 'mbje6',title: '6月',editRender: {},slots: {edit: 'mbje6_edit'}},
{field: 'mbje7',title: '7月',editRender: {},slots: {edit: 'mbje7_edit'}},
{field: 'mbje8',title: '8月',editRender: {},slots: {edit: 'mbje8_edit'}},
{field: 'mbje9',title: '9月',editRender: {},slots: {edit: 'mbje9_edit'}},
{field: 'mbje10',title: '10月',editRender: {},slots: {edit: 'mbje10_edit'}},
{field: 'mbje11',title: '11月',editRender: {},slots: {edit: 'mbje11_edit'}},
{field: 'mbje12',title: '12月',editRender: {},slots: {edit: 'mbje12_edit'}},
{title: '操作',width: 100,slots: {default: 'operate'}}
],
data: [],
}
}
},
mounted() {
this.disabled=this.row.id&&!this.editflag
this.mb=this.row
const $grid = this.$refs.xGrid
let data = [{mbje: '权重'},{mbje: '金额'}]
if(this.row.id){
for(var i=1;i<=12;i++){
let mbjeindex='mbje'+i
let qzindex='qz'+i
data[1][mbjeindex]=this.mb[mbjeindex]
data[0][mbjeindex]=this.row[qzindex]
}
}else{
data=[
{mbje: '权重', mbje1: '1',mbje2:'1', mbje3: '1',mbje4:'1', mbje5: '1',mbje6:'1',mbje7:'1',mbje8:'1',mbje9:'1',mbje10:'1' ,mbje11:'1',mbje12:'1'},
{mbje: '金额', mbje1: '0',mbje2:'0', mbje3: '0',mbje4:'0', mbje5: '0',mbje6:'0',mbje7:'0',mbje8:'0',mbje9:'0',mbje10:'0' ,mbje11:'0',mbje12:'0'}
]
}
$grid.loadData(data)
},
computed:{
},
methods:{
...mapActions(["ajax_post", "ajax_get"]),
activeCellMethod () {
return true
},
reBack() {
this.$parent.pageChange("");
},
handleOk(){
const $grid = this.$refs.xGrid
for(var i=1;i<=12;i++){
this.mb['mbje'+i] =$grid.getTableData().tableData[1]['mbje'+i]
this.mb['qz'+i] =$grid.getTableData().tableData[0]['mbje'+i]
}
this.ajax_post({
url: this.$local + "",
params: this.mb
}).then((res) => {
if (res.code == 0) {
this.$Message.success(res.msg);
this.$parent.pageChange("");
}else{
this.$Message.error(res.msg);
}
})
},
modelSub_sd() {
let sd = this.$refs.sddome.getSelect()
this.mb.khmc = sd[0].khmc
this.mb.khdm = sd[0].khdm
},
Clear(type){
if(type='sd'){
this.mb.khmc=''
this.mb.khdm=''
}else{
this.mb.year=''
}
},
aroundBtn(){
const $grid = this.$refs.xGrid
let data = [{mbje: '权重'},{mbje: '金额'}]
for(var i=1;i<=12;i++){
let mbjeindex='mbje'+i
data[0][mbjeindex]=1
data[1][mbjeindex]=Math.round(this.mb.mbje/12)
}
$grid.loadData(data)
},
editRowEvent(row) {
const $grid = this.$refs.xGrid
$grid.setActiveRow(row)
},
saveRowEvent(row) {
const $grid = this.$refs.xGrid
$grid.clearActived().then(() => {
this.gridOptions.loading = true
setTimeout(() => {
this.gridOptions.loading = false
let zje =0,zqz=0,jebl='',qzbl='',je=0;
for(var i=1;i<=12;i++){
qzbl=Number(parseInt($grid.getTableData().tableData[0]['mbje'+i]))
jebl=Number(parseInt($grid.getTableData().tableData[1]['mbje'+i]))
if(!qzbl){
$grid.getTableData().tableData[0]['mbje'+i]=0
qzbl=0
}
if(!jebl){
$grid.getTableData().tableData[1]['mbje'+i]=0
jebl=0
}
zqz+=qzbl
zje+=jebl
}
if(row.mbje=='权重'){
for(var i=1;i<=12;i++){
qzbl=Number(parseInt($grid.getTableData().tableData[0]['mbje'+i]))
jebl=Number(parseInt($grid.getTableData().tableData[1]['mbje'+i]))
if(!qzbl){
$grid.getTableData().tableData[0]['mbje'+i]=0
qzbl=0
}
$grid.getTableData().tableData[1]['mbje'+i]=Math.round(this.mb.mbje/zqz*qzbl)
}
}else{
this.mb.mbje=zje
for(var i=1;i<=12;i++){
qzbl=Number(parseInt($grid.getTableData().tableData[0]['mbje'+i]))
jebl=Number(parseInt($grid.getTableData().tableData[1]['mbje'+i]))
if(!jebl){
$grid.getTableData().tableData[1]['mbje'+i]=0
jebl=0
}
$grid.getTableData().tableData[0]['mbje'+i]=Math.round((jebl/this.mb.mbje)*100)
}
}
VXETable.modal.message({
content: '保存成功！',
status: 'success'
})
}, 300)
})
},
selectoption(e){
this.mb.year=e.value
},
}
}
</script>
<style scoped>
</style>
提供CDN加速