<template>
|
<div class="apply-info">
|
<SectionTitle title="扣款信息"></SectionTitle>
|
<p class="reminder">温馨提示：修改扣款信息成功之后，务必要求客户通过公众号做协议签约验证</p>
|
<CommTable
|
:isAutoIndex="true"
|
:list="list"
|
:header="tableHeader"
|
:pageInfo="pageInfo"
|
:total="total"
|
@doAction="doAction"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
@updateValue="updateValue"
|
ref="deductionTable"
|
></CommTable>
|
<Dialog
|
v-model="isShowSucc"
|
icon="succ"
|
iconText="保存成功"
|
:close="false"
|
:buttons="[{text: '确定', type: 'primary'}]"
|
@handleClick="sureSucc"
|
></Dialog>
|
|
</div>
|
</template>
|
<script>
|
// 客户还款管理-扣款信息列表查询
|
import { mapActions } from 'vuex'
|
import CommTable from '@/components/CommTable'
|
import SectionTitle from '@/components/SectionTitle'
|
import Dialog from '@/components/Dialog'
|
import queryCustomerAccountInfoList from '@/controller/queryCustomerAccountInfoList'
|
// import addZhBankMessage from '@/controller/addZhBankMessage'
|
import customerAccountInfoModify from '@/controller/customerAccountInfoModify'
|
// import modifyZhBankMessage from '@/controller/modifyZhBankMessage'
|
// import delZhBankMessage from '@/controller/delZhBankMessage'
|
|
const normalButtons = [
|
{ text: '修改', prop: 'updateButton' },
|
]
|
|
const editButtons = [
|
{ text: '保存', prop: 'submitButton' },
|
{ text: '取消', prop: 'cancleButton' }
|
]
|
|
export default {
|
components: {
|
CommTable,
|
SectionTitle,
|
Dialog
|
},
|
props: {
|
conf: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
tableHeader: [],
|
model: null,
|
modifyModel: null,
|
updateModel: null,
|
delModel: null,
|
currentIndex: 0,
|
isShowSucc: false,
|
isDoingAdd: false,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
total: 0,
|
list: [],
|
tempList: []
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { isEdit } = this
|
const { query } = this.$route
|
this.query = query
|
const model = queryCustomerAccountInfoList()
|
const tabList = model.getTableList()
|
this.tableHeader = isEdit
|
? tabList
|
: tabList.filter(({ type }) => type !== 'buttons')
|
this.model = model
|
this.modifyModel = customerAccountInfoModify()
|
this.getList()
|
},
|
async getList() {
|
const { model, query, pageInfo } = this
|
const { customerId = '' } = query
|
const { list = [], total } = await model.request({
|
...pageInfo,
|
customerId
|
})
|
|
this.list = list.map(item => ({
|
...item,
|
action: {
|
buttons: normalButtons
|
}
|
}))
|
this.tempList = []
|
this.total = parseInt(total)
|
},
|
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val
|
this.getList()
|
},
|
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val
|
this.getList()
|
},
|
|
sureSucc() {
|
this.isShowSucc = false
|
this.isDoingAdd = false
|
this.resetList()
|
},
|
|
resetList() {
|
this.pageInfo.currentPage = 1
|
this.getList()
|
},
|
|
// 表格按钮事件处理
|
doAction(item, record, index) {
|
const { prop } = item
|
this.currentIndex = index
|
if (prop === 'updateButton') {
|
this.updateRecord()
|
}
|
|
if (prop === 'cancleButton') {
|
this.cancle()
|
}
|
|
if (prop === 'submitButton') {
|
this.toSubmit()
|
}
|
},
|
|
// 取消
|
cancle() {
|
const { currentIndex, tempList, list } = this
|
const temp = list[currentIndex] || {}
|
if (temp.baSerialNo) {
|
const tempIndex = tempList.findIndex(
|
({ baSerialNo }) => baSerialNo === temp.baSerialNo
|
)
|
this.$set(list, currentIndex, tempList[tempIndex])
|
this.tempList = tempList.filter((item, i) => i !== tempIndex)
|
} else {
|
this.list = list.filter((item, index) => index > 0)
|
this.tempList = tempList.filter((item, index) => index > 0)
|
this.isDoingAdd = false
|
}
|
},
|
|
async toSubmit(isAdd = false) {
|
const {
|
list,
|
currentIndex,
|
query,
|
modifyModel,
|
} = this
|
const { customerId } = query
|
const curr = list[currentIndex]
|
const [err, values] = this.$refs.deductionTable.validate(curr)
|
const tempModel = modifyModel
|
const currItem = { ...curr, ...values }
|
// const { serialNo = '', corebalance = 0 } = currItem
|
if (err) {
|
this.$message.warning(err)
|
} else {
|
await tempModel.request({
|
customerId,
|
...currItem
|
})
|
this.updatePaymentInfo()
|
this.isShowSucc = true
|
}
|
},
|
|
// 修改
|
updateRecord() {
|
const { list, currentIndex } = this
|
const item = list[currentIndex] // 当前行的信息
|
this.setTempList({ ...item })
|
// console.log()
|
this.$set(list, currentIndex, this.getEditRecord(list[currentIndex]))
|
},
|
|
// 新增
|
addRecord() {
|
const { isDoingAdd, list } = this
|
if (isDoingAdd) {
|
return false
|
}
|
const editRecord = this.getEditRecord()
|
this.list = [editRecord, ...list]
|
this.currentIndex = 0
|
|
this.setTempList()
|
this.isDoingAdd = true
|
},
|
|
setTempList(item = {}) {
|
const { tempList } = this
|
this.tempList = [item, ...tempList]
|
},
|
|
updateValue(val, inputItem, parentName, recordIndex = 0) {
|
const { list } = this
|
const { name } = inputItem
|
const listItem = list[recordIndex]
|
const key = Object.keys(listItem).find(k => k === name)
|
this.$set(list, recordIndex, {
|
...listItem,
|
[key]: { ...listItem[key], value: val }
|
})
|
},
|
|
updatePaymentInfo() {
|
const { query } = this
|
const { serialNo, customerId } = query
|
this.paymentZhTermInitData({
|
customerId,
|
loanSerialNo: serialNo
|
})
|
},
|
|
/**
|
* info 初始值
|
*/
|
getEditRecord(info = {}) {
|
const { tableHeader, modifyModel } = this
|
const formList = modifyModel.getFormList(info)
|
return tableHeader.reduce(
|
(pre, { prop, isMoney = false }) => {
|
if (prop === 'action') {
|
pre[prop] = {
|
// buttons: Object.keys(info).length > 0 ? editButtons : addButtons
|
buttons: editButtons
|
}
|
} else {
|
const inputItem = formList.find(({ name }) => name === prop)
|
if (inputItem) {
|
pre[prop] = inputItem
|
}
|
}
|
return pre
|
},
|
{ ...info }
|
)
|
},
|
...mapActions(['paymentZhTermInitData'])
|
},
|
computed: {
|
isEdit() {
|
const { conf } = this
|
return conf.edit === 'Y'
|
}
|
},
|
watch: {
|
$route() {
|
const { serialNo } = this.$route.query
|
if (serialNo) {
|
this.init()
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.middle-button {
|
margin-bottom: 20px;
|
}
|
.del-id {
|
text-align: center;
|
margin: 0 0 20px 0;
|
padding: 0;
|
}
|
.reminder {
|
font-size: 14px;
|
color: red;
|
}
|
</style>
|
