<template>
<show-portlet title="补贴/扣款">
<j-form :model="model" ref="form">
<div class="row">
<div class="col-xs-9">
<span style="color: #be0000;
background: #f5faff;
display: inline-block;
line-height: 40px;
padding: 0px 10px;
margin-bottom: 20px">
<!--金额正数代表补贴,负数代表扣款。一条补贴/扣款同时有项目与金额时才生效-->
正数代表补贴,负数代表扣款
</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<table class="table show-table table-align-middle">
<tbody>
<tr v-for="(item, index) of showFeeDetail">
<td width="1%"></td>
<td width="3%">项目: </td>
<td width="22%"> {{item.costName|filterDataBaseDictionary}}</td>
<td width="3%">金额:</td>
<td width="23%">{{item.money}}</td>
<td width="3%">备注: </td>
<td width="22%">{{item.memo}}</td>
<td width="25%">添加人: {{item.foundName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row" v-for="(item, index) in model.accountCostBeanList">
<div class="col-xs-3">
<j-form-item :prop="'accountCostBeanList.'+ index +'.costNoMap'"
:rules="costNoRules"
:class="{'must-fill-in': item.xiangMu}"
>
<j-select v-model="item.costNoMap"
:options="costNoArr"
:forbiddenInputUndefined="true"
@choose="checkSelect(item)"
>
<span slot="left" class="input-group-addon">项目:</span>
<span slot="right" class="input-group-addon"><span class="font-red"></span></span>
</j-select>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item
:prop="'accountCostBeanList.' + index + '.money'"
:rules="moneyRules"
:class="{'must-fill-in': item.jinE}"
>
<j-input-group v-model="item.money"
:forbiddenInputUndefined="true"
@input="changeInput(item)"
>
<span slot="left" class="input-group-addon">金额:</span>
<span slot="right" class="input-group-addon"><span class="font-red"></span></span>
</j-input-group>
</j-form-item>
</div>
<div class="col-xs-3">
<j-form-item :prop="'accountCostBeanList.'+ index +'.memo'" :rules="memoRules">
<j-input-group v-model="item.memo" :forbiddenInputUndefined="true">
<span slot="left" class="input-group-addon">备注:</span>
<span slot="right" class="input-group-addon"><span class="font-red"></span></span>
</j-input-group>
</j-form-item>
</div>
<div class="col-xs-3">
<div type="button" class="btn btn-circle blue" @click="resetInput(model.accountCostBeanList, index)" v-if="index===0 && model.accountCostBeanList.length < 2">重置</div>
<div type="button" class="btn btn-circle blue" @click="del(model.accountCostBeanList, index)" v-if="model.accountCostBeanList.length > 1">删除</div>
<div type="button" class="btn btn-circle blue" @click="add" v-if="(model.accountCostBeanList.length-1) == index">添加</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-4">
<button type="button" class="btn btn-primary btn-block btn-circle ladda-button" data-style="zoom-out"
@click.prevent="submit($event)" :disabled="isTrue">保 存
</button>
</div>
</div>
</j-form>
</show-portlet>
</template>
<script>
import showPortlet from 'components/base/showPortlet'
import upload from 'components/base/upload'
import jForm from 'components/base/form/jForm'
import jFormItem from 'components/base/form/jFormItem'
import jSelect from 'components/base/form/jSelect'
import jInputGroup from 'components/base/form/jInputGroup'
import {isFormatNumber} from 'assets/scripts/base/validator'
import {getRewardCoastType} from 'assets/scripts/business/store'
import {copy, mapGetValue, alert, swal, dotData} from 'assets/scripts/base/functions'
import {httpSuccessPost} from 'assets/scripts/base/util'
import {filterDataBaseDictionary} from 'assets/scripts/base/filters'
import {mapActions} from 'vuex'
export default {
name: 'accountAdjust',
components: {
upload,
showPortlet,
jForm,
jFormItem,
jSelect,
jInputGroup
},
props: {
id: {
type: String,
required: true
},
costsDetail: {
type: Array,
reqiured: true
}
},
filters: {
filterDataBaseDictionary
},
data () {
return {
uploadExcelLoading: false,
changeFee: 0,
payFee: 0,
feeDetail: [],
showFeeDetail: [], // state为-1的,只显示,不能回填
formDetail: [],
model: {
accountCostBeanList: [
{
costNoMap: {},
money: '',
memo: '',
xiangMu: false,
jinE: false
}
]
},
costNoArr: [],
moneyRules: [
{validator: isFormatNumber, int: 9, decimal: 2, message: ' 金额最大位数为9位(小数位2位)!', trigger: 'blur'}
],
costNoRules: [
// {validator: selectRequired, message: '请选择项目!', trigger: 'change'}
],
memoRules: [
{max: 100, message: '输入字数在100以内!', trigger: 'blur'}
]
}
},
created () {
getRewardCoastType().then(arr => {
this.costNoArr = arr
})
// this.getAddAccountCost()
},
watch: {
// 1、监听详情传进来的 扣款数组,拆分成两组:只用于显示的状态为-1的数组,可修改要回填要提交的数组(非-1状态)
costsDetail (val, oldVal) {
if (val === oldVal) {
return
}
if (Array.isArray(val)) {
this.showFeeDetail = val.filter(v => { return !(v.state !== '-1') }) // state为-1的,只显示,不能回填
this.formDetail = val.filter(v => { return !(v.state === '-1') }) // state不是-1的,要用于回填
if (this.formDetail.length) {
this.getFormData()
}
}
}
},
computed: {
fileId () {
console.log('当前是-------环境', process.env.NODE_ENV)
// 如果是测试环境
if (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'development') {
return '5be8d25ffe7ee20001189ca6'
}
return '5be8d3307f6db800017828ff'
},
isTrue () {
let _true = true
for (let i = 0; i < this.model.accountCostBeanList.length; i++) {
if (this.model.accountCostBeanList[i].costNoMap.value || this.model.accountCostBeanList[i].money || (this.model.accountCostBeanList[i].money === 0)) {
_true = false
return _true
}
}
return _true
}
},
methods: {
test () {
this.setRefreshRoute({path: '/end/adjuster/show/' + this.id + '/0'})
},
// 导入成功后的回调:后端回填数据,前端刷新当前页面即可
setExcelFile (file) {
// console.log(file, 'setExcelFile')
this.uploadExcelLoading = true
file.submit().then(response => {
this.uploadExcelLoading = false
console.log(this.id, 'response.success', response.success)
if (dotData(response, 'success')) {
this.setRefreshRoute({path: '/end/adjuster/show/' + this.id + '/0'})
} else { // 失败:后端的提示
alert(dotData(response, 'error_message'))
}
})
},
getFormData () {
let tempArr = []
this.formDetail.forEach(item => {
let obj = {
costNoMap: {value: item.costNo, text: item.costName},
money: item.money,
memo: item.memo,
id: item.id // 可修改可回填的数据 要多传一个id给后端
}
tempArr.push(obj)
})
this.model.accountCostBeanList = tempArr
},
submit ($event) {
this.$refs.form.validate().then(result => {
if (!result) {
return
}
let data = mapGetValue(copy(this.model, true))
data.accountId = this.id // 账单id
for (let i = 0; i < data.accountCostBeanList.length; i++) {
if (data.accountCostBeanList[i].xiangMu || data.accountCostBeanList[i].jinE) {
return alert('补贴/扣款填写错误!', '提示:')
}
}
const loading = window.Ladda.create($event.currentTarget || $event.target)
loading.start()
// 合并: 不可修改-1的数据showFeeDetail + model的数据(包含了可修改已回填+ 用户新添加的)
let tempShowCost = []
if (Array.isArray(this.showFeeDetail) && this.showFeeDetail.length) {
this.showFeeDetail.forEach(item => {
tempShowCost.push({costNo: item.costNo, money: item.money, memo: item.memo, id: item.id})
})
console.log('提交之前的tempShowCost', tempShowCost)
data.accountCostBeanList = data.accountCostBeanList.concat(tempShowCost)
console.log('提交之前的tempShowCost + model', data.accountCostBeanList)
}
httpSuccessPost('/ms-settlement-branch/accountCost/addAccountCost', data).then(response => {
loading.stop()
const success = dotData(response, 'success')
if (success) {
swal({
title: '保存成功',
type: 'success',
customClass: 'visible',
confirmButtonText: '确定'
}, result => {
// this.getAddAccountCost()
this.$emit('refresh', true)
})
}
})
})
},
resetInput (data, index) {
this.model.accountCostBeanList = [
{
costNoMap: {},
money: '',
memo: '',
xiangMu: false,
jinE: false
}
]
},
changeInput (data) {
console.log('data', data)
if (data.money || data.money === 0) {
data.jinE = false // 金额输入框
if (!data.costNoMap.value) { // 没有选择项目
data.xiangMu = true
} else {
data.xiangMu = false
}
} else {
if (data.costNoMap.value) { // 如果项目存在,并且清空金额
data.jinE = true
}
data.xiangMu = false
}
},
blurFun () {
this.changeFee = 0
this.payFee = 0
this.model.accountCostBeanList.forEach(item => {
this.changeFee += item.money ? parseFloat(item.money) : 0
})
this.payFee = (this.detail.money ? this.detail.money : 0) + this.changeFee
},
checkSelect (data) {
this.$nextTick(_ => {
if (data.costNoMap.value) {
data.xiangMu = false // 下拉框输入框
if (!data.money && !data.money !== 0) { // 没填写费用
data.jinE = true
} else {
data.jinE = false
}
} else {
data.jinE = false
}
})
},
add () {
this.model.accountCostBeanList.push({
costNoMap: {},
money: '',
memo: '',
xiangMu: false,
jinE: false
})
},
del (arr, index) {
if (arr.length <= 1) {
return
}
arr.splice(index, 1)
},
...mapActions([
'setRefreshRoute'
])
}
}
</script>
<style scoped>
.must-fill-in>.j-input-group,.must-fill-in>.j-select-group{
border-color: #e73d4a;
}
</style>
说明:jForm、jFormItem、jSelect、jInputGroup是封装的表单通用组件