<template>
|
<a-modal
|
:title='title'
|
:width='1200'
|
:visible='visible'
|
:confirmLoading='confirmLoading'
|
@ok='handleOk'
|
@cancel='handleCancel'>
|
<template slot='footer'>
|
<a-popconfirm title='确定放弃编辑？' @confirm='handleCancel' okText='确定' cancelText='取消'>
|
<a-button style='margin-right: .8rem'>取消</a-button>
|
</a-popconfirm>
|
<a-button type='primary' :loading='confirmLoading' @click='handleOk()'>
|
保存
|
</a-button>
|
</template>
|
|
|
<a-spin :spinning='confirmLoading'>
|
<a-form-model ref='form' :label-col='labelCol' :wrapper-col='wrapperCol' :model='model'
|
:rules='validatorRules'>
|
<!-- 主表单区域 -->
|
<a-row class='form-row' :gutter='16'>
|
<a-col :lg='8'>
|
<a-form-model-item label='发放进度' prop='ffjd'>
|
<j-dict-select-tag disabled v-model='model.ffjd' placeholder='发放进度' dictCode='bonus_ffjd_kh' />
|
</a-form-model-item>
|
</a-col>
|
|
|
<a-col :lg='8'>
|
<a-form-model-item label='销售额' prop='xse'>
|
<a-input disabled v-model='model.xse' />
|
</a-form-model-item>
|
</a-col>
|
<a-col :lg='8'>
|
<a-form-model-item label='核算奖金' prop='sfje'>
|
<a-input disabled v-model='model.sfje' />
|
</a-form-model-item>
|
</a-col>
|
|
|
<a-col :lg='8'>
|
<a-form-model-item label='状态' prop='paymentStatu'>
|
<j-dict-select-tag v-model='model.paymentStatu' placeholder='请选择发放状态' dictCode='bonus_payment_statu' />
|
</a-form-model-item>
|
</a-col>
|
<a-col :lg='8'>
|
<a-form-model-item label='分配金额'>
|
<a-input disabled v-model='distbonus' />
|
</a-form-model-item>
|
</a-col>
|
<a-col :lg='8'>
|
<a-form-model-item label='分配占比'>
|
<a-input disabled v-model='distratio' />
|
</a-form-model-item>
|
</a-col>
|
|
</a-row>
|
|
|
<!-- 子表单区域 -->
|
<a-tabs defaultActiveKey='1'>
|
<a-tab-pane tab='分配明细' key='1'>
|
<div>
|
<a-row type='flex' style='margin-bottom:10px' :gutter='16'>
|
<a-col :span='6'>成员</a-col>
|
<a-col :span='6'>分配金额</a-col>
|
<a-col :span='6'>分配比例(%)</a-col>
|
|
<a-col :span='2'>操作</a-col>
|
</a-row>
|
|
<a-row type='flex' style='margin-bottom:10px' :gutter='16'
|
v-for='(item, index) in model.allocationList' :key='index'>
|
<a-col :span='6' style='display: none'>
|
<a-form-model-item>
|
<a-input placeholder='id' v-model='item.id' />
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='6'>
|
<a-form-model-item :prop="'allocationList.' + index + '.fpcy'"
|
:rules="[{required: true,message: '请选择成员',trigger: 'blur'}]">
|
<j-search-select-tag
|
disabled
|
placeholder='请选择成员'
|
v-model='item.fpcy'
|
dict='sys_user,realname,username'
|
:pageSize='5'
|
:async='true'>
|
</j-search-select-tag>
|
</a-form-model-item>
|
|
</a-col>
|
|
|
<a-col :span='6'>
|
<a-form-model-item :prop="'allocationList.' + index + '.fpje'"
|
:rules="[{required: true,message: '请输入金额',trigger: 'blur'},{ pattern: /^\d+$|^\d*\.\d+$/g, message: '请输入数字!' }]">
|
<a-input :allowClear='true' ref='fpje' :id="'allocationList.' + index + '.fpje'"
|
@change='changeBonus(index)'
|
v-model='item.fpje' style='width: 140px' placeholder='请输入金额' />
|
</a-form-model-item>
|
</a-col>
|
|
<a-col :span='6'>
|
<a-form-model-item :prop="'allocationList.' + index + '.fpbl'"
|
:rules="[{required: true,message: '请选输入分配比例',trigger: 'blur'},{ pattern: /^\d+$|^\d*\.\d+$/g, message: '请输入数字!' }]">
|
<a-input allowClear :max='100' style='width: 140px' placeholder='比例(%)' v-model='item.fpbl'
|
@change='changeRatio(index)' />
|
</a-form-model-item>
|
</a-col>
|
|
|
<a-col :span='2'>
|
<a-form-model-item>
|
<a-icon type='minus-circle' @click='delRowCustom(index)' style='fontSize :20px' />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-button type='dashed' style='width: 98%;margin-top: 10px' @click='addRowCustom'>
|
<a-icon type='plus' />
|
添加成员
|
</a-button>
|
</div>
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
</a-form-model>
|
|
<select-user-modal ref='selectUserModal' @selectOk='selectOK'></select-user-modal>
|
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import { httpAction, getAction, postAction } from '@/api/manage'
|
import JDate from '@/components/jeecg/JDate'
|
import { formatDecimal } from '@/utils/util'
|
import SelectUserListModal from '@views/system/modules/SelectUserListModal'
|
import SelectUserModal from '@views/system/modules/SelectUserModal'
|
|
export default {
|
name: 'FpKhModal',
|
components: {
|
SelectUserModal,
|
SelectUserListModal,
|
JDate
|
},
|
data() {
|
return {
|
title: '操作',
|
visible: false,
|
model: {
|
allocationList: [{}]
|
},
|
disableSubmit:false,
|
distbonus: 0,
|
distratio: 100,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
confirmLoading: false,
|
validatorRules: {
|
ffjd: [
|
{ required: true, message: '发放进度不能为空!', trigger: 'blur' }
|
],
|
sfje: [
|
{ required: true, message: '核算奖金不能为空!', trigger: 'blur' }
|
],
|
xse: [
|
{ required: true, message: '销售额不能为空!', trigger: 'blur' }
|
],
|
quotaName: [
|
{ required: true, message: '方案名称不能为空!', trigger: 'blur' }
|
],
|
paymentStatu: [
|
{ required: true, message: '请选择发放状态!', trigger: 'blur' }
|
]
|
},
|
url: {
|
add: '/bon/alloca/add',
|
edit: '/bon/alloca/edit',
|
list: '/bon/alloca/list'
|
|
}
|
}
|
},
|
created() {
|
},
|
|
methods: {
|
add() {
|
this.edit({})
|
},
|
edit(record) {
|
this.model = Object.assign({
|
allocationList: [{}]
|
|
}, record)
|
//--------------------------------------------------------
|
//初始化明细表数据
|
if (this.model.id) {
|
let params = { pid: this.model.id }
|
getAction(this.url.list, params).then((res) => {
|
if (res.success) {
|
|
this.model.allocationList = res.result.records
|
if (this.model.allocationList) {
|
this.distbonus = 0
|
this.distratio = 0
|
this.model.allocationList.forEach((item) => {
|
this.distbonus += item.fpje
|
this.distratio += item.fpbl
|
})
|
this.distbonus = this.distbonus.toFixed(2)
|
this.distratio = this.distratio.toFixed(2)
|
}
|
|
//如果分配总额和分配占比为空时，说明第一次分配（第一次分配带出项目成员）
|
const xmcy = this.model.yfcy
|
console.info(this.model)
|
if (xmcy) {
|
let cyList = xmcy.split(',')
|
if (cyList && cyList.length > 0) {
|
let cyData = []
|
for (let i = 0; i < cyList.length; i++) {
|
let cy = cyList[i]
|
let d = { username: cy }
|
cyData.push(d)
|
}
|
this.selectOK(cyData)
|
}
|
}
|
|
this.$forceUpdate()
|
/*this.$nextTick(function () {
|
|
})*/
|
}
|
})
|
|
}
|
this.visible = true
|
},
|
|
|
changeProject(project) {
|
console.info(project)
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
|
handleOk() {
|
|
if(this.disableSubmit){
|
this.close();
|
return
|
}
|
//
|
if (!this.checkBonus()) {
|
this.$message.warning('分配错误,分配总额或分配占比不合法')
|
return false
|
}
|
|
const that = this
|
console.info(this.model.allocationList)
|
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = true
|
//
|
this.model.fpze = this.distbonus
|
this.model.fpzb = this.distratio
|
|
//更新分配的用户
|
var yfcy = []
|
if (this.model.allocationList && this.model.allocationList.length > 0) {
|
for (var i = 0; i < this.model.allocationList.length; i++) {
|
yfcy.push(this.model.allocationList[i].fpcy)
|
}
|
}
|
this.model.yfcy = yfcy.join()
|
|
let httpurl = ''
|
let method = ''
|
if (!this.model.id) {
|
return false
|
} else {
|
httpurl += this.url.add
|
method = 'post'
|
}
|
httpAction(httpurl, this.model, method).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok')
|
that.close()
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
//that.close()
|
})
|
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
addRowCustom() {
|
this.$refs.selectUserModal.add()
|
},
|
selectOK(data) {
|
console.info(data)
|
//先取出已存在所有用户ID
|
var userNames = []
|
if (this.model.allocationList && this.model.allocationList.length > 0) {
|
for (var i = 0; i < this.model.allocationList.length; i++) {
|
userNames.push(this.model.allocationList[i].fpcy)
|
}
|
}
|
|
for (var a = 0; a < data.length; a++) {
|
if (userNames && userNames.length > 0) {
|
if (userNames.indexOf(data[a].username) != -1) {
|
console.info(data[a].username + '存在')
|
} else {
|
console.info(data[a].username + '不存在')
|
this.model.allocationList.push({ fpcy: data[a].username, pro: this.model.pro, ffjd: this.model.ffjd })
|
}
|
} else {
|
this.model.allocationList.push({ fpcy: data[a].username, pro: this.model.pro, ffjd: this.model.ffjd })
|
console.info(data[a].username + '不存在2')
|
}
|
}
|
|
},
|
//检查已分配奖金和百分比是否100%
|
checkBonus() {
|
console.info(this.distratio)
|
console.info(this.distbonus)
|
console.info(this.model.sfje)
|
|
if (Number(this.distratio) > 100 || Number(this.distbonus) > Number(this.model.sfje)) {
|
return false
|
}
|
return true
|
},
|
//计算已分配金额总和 和 已分配金额百分比总和
|
calcPerce() {
|
this.distbonus = 0
|
this.distratio = 0
|
this.model.allocationList.forEach((item) => {
|
let fpje = Number(item.fpje)
|
let fpbl = Number(item.fpbl)
|
|
console.info(typeof fpje)
|
|
if (typeof fpje == 'number' && !isNaN(fpje)) {
|
this.distbonus += fpje
|
console.info(this.distbonus)
|
}
|
if (typeof fpbl == 'number' && !isNaN(fpbl)) {
|
this.distratio += fpbl
|
}
|
})
|
this.distbonus = this.distbonus.toFixed(2)
|
this.distratio = this.distratio.toFixed(2)
|
}
|
,
|
changeBonus(index) {
|
console.info(index)
|
//拿到编辑列个人金额
|
let fpje = this.model.allocationList[index].fpje
|
//计算个人金额占总金额百分比
|
let fpbl = fpje / this.model.sfje * 100
|
this.model.allocationList[index].fpbl = formatDecimal(fpbl, 3)
|
|
this.calcPerce()
|
|
this.$forceUpdate()
|
},
|
changeRatio(index) {
|
//拿到编辑列个人金额比例
|
let fpbl = this.model.allocationList[index].fpbl
|
//计算个人金额
|
let fpje = this.model.sfje * fpbl / 100
|
console.info(fpje.toFixed(2))
|
this.model.allocationList[index].fpje = formatDecimal(fpje, 3)
|
|
this.calcPerce()
|
this.$forceUpdate()
|
},
|
|
|
delRowCustom(index) {
|
console.log(index)
|
console.info(this.model.allocationList)
|
let all = this.model
|
this.model.allocationList.splice(index, 1)
|
this.calcPerce()
|
this.$forceUpdate()
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.ant-btn {
|
padding: 0 10px;
|
margin-left: 3px;
|
}
|
|
.ant-form-item-control {
|
line-height: 0px;
|
}
|
|
/** 主表单行间距 */
|
.ant-form .ant-form-item {
|
margin-bottom: 10px;
|
}
|
|
/** Tab页面行间距 */
|
.ant-tabs-content .ant-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
