<!-- 期数配置信息 -->
|
<template>
|
<div class="nper-config-main">
|
<el-row v-if="!isView"
|
class="add-button">
|
<el-col :span="24">
|
<el-button type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="handleAddCus"
|
class="add_btn">
|
新增
|
</el-button>
|
</el-col>
|
</el-row>
|
<el-tabs v-model="editableTabsValue"
|
type="card"
|
:closable="!isView"
|
@tab-remove="removeTab">
|
<el-tab-pane v-for="(item) in editableTabs"
|
:key="item.name"
|
:label="item.title"
|
:name="item.name"
|
style="min-height:100px">
|
<CreateForms :screenWidth="screenWidth"
|
:formItems="item.formItems"
|
:isView="isView"
|
:isShowBorder="isShowBorder"
|
:defValues="item.defValues"
|
:formRules="item.formRules"
|
:ref="`nperTab${item.name}`"
|
@handleSelOnChange="handleSelOnChange" />
|
<EditTable v-if="item.showTable"
|
:ref="`nperTable${item.name}`"
|
:isView="isView"
|
:rules="rules"
|
:isAutoIndex="false"
|
:isShowPages="false"
|
:tableData="item.tableData"
|
:columns="columns"
|
operateLabel=""
|
@handleCurrentChange="handleEditCurrentChange"
|
@handleSizeChange="handleEditSizeChange"
|
@handleOperateClick="handleOperateClick" />
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import { NPERCONFIGCOLUMNS, NPERCONFIGRULES } from '../../utils/customersColumnsConfig.js'
|
import { PRONPERINFOFORM } from '../../utils/formsConfig'
|
import { PRONPERINFODEFVALUE } from '../../utils/defValueConfig'
|
import { PRONPERINFORULES } from '../../utils/formRulesConfig'
|
import {
|
qryCondition,
|
addOrUpdatePaymentAllterm,
|
qryPaymentAlltermInfo,
|
} from '../../api/productManage.api.js'
|
import CreateForms from '../../components/CreateForms'
|
import EditTable from '../../components/EditTable'
|
export default {
|
props: {
|
edit: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
isView: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
isShowBorder: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
}
|
},
|
watch: {
|
edit: {
|
handler (val) {
|
if (val) {
|
this.getPaymentAlltermInfo()
|
}
|
},
|
deep: true
|
}
|
},
|
data () {
|
return {
|
editableTabsValue: '1',
|
screenWidth: document.body.offsetWidth,
|
tabIndex: 1,
|
editableTabs: [{
|
title: '期数',
|
name: '1',
|
tableData: [],
|
formItems: [...PRONPERINFOFORM],
|
defValues: { ...PRONPERINFODEFVALUE },
|
formRules: { ...PRONPERINFORULES(!this.isView) },
|
showTable: false,
|
}],
|
rules: { ...NPERCONFIGRULES },
|
columns: [...NPERCONFIGCOLUMNS],
|
selFormItems: [],
|
loading: true,
|
isValidate: '',
|
}
|
},
|
created () {
|
this.setOptions()
|
},
|
mounted () {
|
this.edit && this.getPaymentAlltermInfo()
|
},
|
methods: {
|
// 获取下拉选择
|
setOptions () {
|
const selOptions = [{ code: 'CreditTerm', name: 'allterm' }, { code: 'CustomDayType', name: 'paymentdaytype' }, { code: 'YesNo', name: 'isreturnrate' }]
|
selOptions.forEach(option => {
|
this.getCondition(option.code, option.name)
|
})
|
},
|
// 获取总期数
|
async getPaymentAlltermInfo () {
|
const { rowSerialno } = this.$parent._data
|
if (!rowSerialno) {
|
return false
|
}
|
const params = { serialno: rowSerialno }
|
const allNperRes = await qryPaymentAlltermInfo(params)
|
if (!allNperRes || allNperRes.code !== '00') {
|
return false
|
}
|
const nperData = allNperRes.result.paymentAlltermInfos
|
this.tabIndex = nperData && nperData.length
|
if (nperData && nperData.length > 0) {
|
const newEditableTabs = nperData.map((item, index) => {
|
return {
|
title: '期数',
|
name: index + 1 + '',
|
tableData: item.paymentTerminfoResps && item.paymentTerminfoResps.map(item => { return { ...item, isEidt: true } }),
|
formItems: [...this.selFormItems],
|
defValues: { ...PRONPERINFODEFVALUE, allterm: item.allterm, remark: item.remark },
|
formRules: { ...PRONPERINFORULES(true) },
|
showTable: item.paymentTerminfoResps && item.paymentTerminfoResps.length > 0,
|
}
|
})
|
this.$set(this, 'editableTabs', newEditableTabs)
|
}
|
},
|
/**
|
* 获取下拉选择项
|
*/
|
async getCondition (conditionName, name) {
|
const params = { conditionName }
|
const res = await qryCondition(params)
|
if (res.code !== '00') {
|
return false
|
}
|
if (name === 'paymentdaytype' || name === 'isreturnrate') {
|
const { columns } = this
|
const newColumns = [...columns]
|
newColumns.forEach(item => {
|
if (item.name === name) {
|
item.options = res.result
|
}
|
})
|
this.$set(this, 'columns', newColumns)
|
} else {
|
const newFormItems = [...PRONPERINFOFORM].map(form => {
|
const newForm = { ...form }
|
if (newForm.name === 'allterm') {
|
newForm.options = res.result
|
}
|
return newForm
|
})
|
this.selFormItems = newFormItems
|
this.$set(this.editableTabs, 0, { ...this.editableTabs[0], formItems: newFormItems })
|
}
|
},
|
// 新增
|
handleAddCus () {
|
let newTabName = ++this.tabIndex + ''
|
this.editableTabs.push({
|
title: '期数',
|
name: newTabName,
|
formItems: [...this.selFormItems],
|
defValues: { ...PRONPERINFODEFVALUE },
|
formRules: { ...PRONPERINFORULES(true) },
|
showTable: false,
|
})
|
this.editableTabsValue = newTabName
|
},
|
removeTab (targetName) {
|
let tabs = this.editableTabs
|
let activeName = this.editableTabsValue
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
let nextTab = tabs[index + 1] || tabs[index - 1]
|
if (nextTab) {
|
activeName = nextTab.name
|
}
|
}
|
})
|
}
|
|
this.editableTabsValue = activeName
|
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
|
},
|
// 表格翻页条数
|
handleEditSizeChange (val) {
|
this.pageInfo.pageSize = val
|
// this.getCustomerBaseList('edit')
|
},
|
|
// 表格翻页数
|
handleEditCurrentChange (val) {
|
this.pageInfo.currentPage = val
|
// this.getCustomerBaseList('edit')
|
},
|
handleOperateClick () { },
|
handleSelOnChange (name, value) {
|
if (!value) {
|
return false
|
}
|
const { editableTabsValue, editableTabs } = this
|
const tabData = editableTabs.map(({ defValues, name }) => {
|
return {
|
tabName: name,
|
...defValues
|
}
|
})
|
if (tabData && tabData.length > 1) {
|
console.log('tabData----', tabData)
|
if (tabData.some(item => item.allterm === value && item.tabName !== editableTabsValue)) {
|
const nperTabForm = this.$refs[`nperTab${editableTabsValue}`][0]
|
nperTabForm.formValues.allterm = ''
|
nperTabForm.update()
|
this.$message.warning('已存在相同期数，请重新选择')
|
return false
|
}
|
}
|
const activedItem = editableTabs.findIndex(({ name }) => {
|
return name === editableTabsValue
|
})
|
const listArr = Array.from({ length: parseInt(value) }, (v, k) => k)
|
const newTab = {
|
tableData: listArr.map((list, i) => {
|
return {
|
termno: i + 1,
|
paymentdaytype: '3',
|
isEidt: true,
|
ratiosum: '',
|
fixedsum: '',
|
isreturnrate: '',
|
poundagerate: '',
|
poundagefixed: '',
|
guarantyrate: '',
|
guarantyfixed: '',
|
platformrate: '',
|
platformfixed: '',
|
}
|
}),
|
showTable: true
|
}
|
this.$set(this.editableTabs, activedItem, { ...editableTabs[activedItem], ...newTab })
|
console.log('aaaaaaa', name, value)
|
},
|
// 表单信息处理
|
handleFormInfo (fnName) {
|
const { editableTabs } = this
|
this.isValidate = ''
|
const validateForms = editableTabs.map(({ name }) => name)
|
validateForms && validateForms.length > 0 && validateForms.forEach(vali => {
|
const nperTabForm = this.$refs[`nperTab${vali}`][0]
|
const nperTableForm = this.$refs[`nperTable${vali}`] && this.$refs[`nperTable${vali}`][0]
|
if (fnName === 'validate') {
|
nperTabForm.$refs['createForm'].validate((valid) => {
|
if (!valid) {
|
this.isValidate = 'PASS'
|
this.editableTabsValue = vali
|
setTimeout(() => {
|
this.$message.warning(`请完善期数${vali}信息`)
|
}, 5)
|
}
|
})
|
nperTableForm && nperTableForm.$refs['form'].validate((valid) => {
|
if (!valid) {
|
this.isValidate = 'PASS'
|
this.editableTabsValue = vali
|
setTimeout(() => {
|
this.$message.warning(`请完善期数${vali}配置信息`)
|
}, 5)
|
}
|
})
|
}
|
// 清除校验
|
if (fnName === 'clearValidate') {
|
nperTableForm && nperTableForm.$refs['form'].clearValidate()
|
}
|
})
|
},
|
async handleSave () {
|
const { serialno } = this.$parent._data
|
if (!serialno) {
|
console.log('this.$parent', this.$parent)
|
return
|
}
|
console.log('this.isValidate', this.isValidate)
|
await this.handleFormInfo('validate')
|
if (this.isValidate !== 'PASS') {
|
const { editableTabs } = this
|
const paymentAlltermAddInfos = editableTabs.map(({ defValues, tableData }) => {
|
return {
|
addPaymentTerminfos: tableData,
|
...defValues
|
}
|
})
|
const params = {
|
objectno: serialno,
|
paymentAlltermAddInfos
|
}
|
const nperRes = await addOrUpdatePaymentAllterm(params)
|
if (!nperRes || nperRes.code !== '00') {
|
return false
|
}
|
this.$message.success('保存成功')
|
console.log('editableTabs---', paymentAlltermAddInfos)
|
}
|
},
|
},
|
components: {
|
EditTable,
|
CreateForms
|
}
|
}
|
</script>
|
|
<style lang="postcss" scoped>
|
.nper-config-main {
|
background: #fff;
|
padding: 10px 20px 20px 20px;
|
& .add-button {
|
padding: 20px 0 30px 0;
|
}
|
&.add_btn {
|
height: 34px;
|
}
|
& >>> .edit_table_main {
|
padding: 30px 0;
|
}
|
}
|
</style>
|
