<!-- 期数配置信息 -->
|
<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"
|
/>
|
<EditTableHeight
|
v-if="item.showTable && !isView"
|
:ref="`nperTable${item.name}`"
|
:isView="isView"
|
:rules="rules"
|
:isAutoIndex="false"
|
:isShowPages="false"
|
:tableData="item.tableData"
|
:columns="columns"
|
operateLabel=""
|
@handleCurrentChange="handleEditCurrentChange"
|
@handleSizeChange="handleEditSizeChange"
|
@handleOperateClick="handleOperateClick"
|
/>
|
<ProTable
|
v-if="item.showTable && isView"
|
:isAutoIndex="false"
|
:noHistory="true"
|
:list="item.tableData"
|
:header="tableHeader"
|
:loading="false"
|
/>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import {
|
NPERCONFIGCOLUMNS,
|
NPERCONFIGTABLECOLUMNS,
|
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 EditTableHeight from "../../components/EditTableHeight";
|
import ProTable from "../../components/ProTable.vue";
|
|
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(this.isView)],
|
defValues: { ...PRONPERINFODEFVALUE },
|
formRules: { ...PRONPERINFORULES(!this.isView) },
|
showTable: false
|
}
|
],
|
rules: { ...NPERCONFIGRULES },
|
columns: [...NPERCONFIGCOLUMNS],
|
tableHeader: [...NPERCONFIGTABLECOLUMNS],
|
selFormItems: [],
|
loading: true,
|
isValidate: ""
|
};
|
},
|
created() {
|
this.setOptions();
|
},
|
mounted() {
|
this.edit && this.getPaymentAlltermInfo();
|
},
|
methods: {
|
// 获取下拉选择
|
setOptions() {
|
const selOptions = [
|
{ code: "CreditTermCus", 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: item.allterm + "期",
|
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(this.isView)].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) + 1 }, (v, k) => k);
|
const newTab = {
|
tableData: listArr.map((list, i) => {
|
return {
|
termno: i + "",
|
paymentdaytype: "3",
|
isEidt: true,
|
ratiosum: "",
|
fixedsum: "",
|
isreturnrate: "1",
|
poundagerate: "",
|
poundagefixed: "",
|
guarantyrate: "",
|
guarantyfixed: "",
|
platformrate: "",
|
platformfixed: ""
|
};
|
}),
|
showTable: true
|
};
|
this.$set(this.editableTabs, activedItem, {
|
...editableTabs[activedItem],
|
title: listArr.length -1 + "期",
|
...newTab
|
});
|
},
|
// 表单信息处理
|
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) {
|
return;
|
}
|
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("保存成功");
|
}
|
}
|
},
|
components: {
|
EditTableHeight,
|
CreateForms,
|
ProTable
|
}
|
};
|
</script>
|
|
<style lang="stylus" 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>
|
