<template>
|
<div class="add-image-data-config" v-if="isAdd">
|
<div class="left">
|
<LeftMenus :menuItems="menuItems" @jump="jump" @backList="backList" />
|
</div>
|
<div class="right" @scroll="onScroll" ref="proFreePayment">
|
<div class="scroll_item" v-for="(item, index) in menuItems" :key="index">
|
<ModuleTitle :title="item.label" />
|
<div v-if="!!item.children && item.children.length > 0" style="background: #fff;">
|
<div class="item_set_class" v-for="(child, index) in item.children" :key="index">
|
<MenusTitle :title="child.label" />
|
<!-- <CreateForms
|
:edit="type === 'edit'"
|
v-if="child.type === 'FORMS'"
|
:screenWidth="screenWidth"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
@handleSelOnChange="handleSelOnChange"
|
@handleInputChange="handleInputChange"
|
/>-->
|
<BasicInfo
|
v-if="child.name === 'baseInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<PersonBasicsInfo
|
v-if="child.name === 'personBasicsInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<EnterpriseCusBasicInfo
|
v-if="child.name === 'basicsInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<LegalInfo
|
v-if="child.name === 'legalInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<FirstShareholderInfo
|
v-if="child.name === 'firstShareholderInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<RefereeInfo
|
v-if="child.name === 'refereeInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<FundInfo
|
v-if="child.name === 'fundInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<MarkInfo
|
v-if="child.name === 'markInfo'"
|
:addorupdate="addorupdate"
|
:ref="child.name"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules"
|
:screenWidth="screenWidth"
|
/>
|
|
<OtherShareHolder
|
v-if="child.name === 'otherShareholderInfo'"
|
:tableHeader="child.tableHeader"
|
:addorupdate="addorupdate"
|
:screenWidth="screenWidth"
|
/>
|
<FinanceInfo
|
v-if="child.name === 'financeInfo'"
|
:tableHeader="child.tableHeader"
|
:addorupdate="addorupdate"
|
:screenWidth="screenWidth"
|
/>
|
<HouseInfo
|
v-if="child.name === 'houseInfo'"
|
:tableHeader="child.tableHeader"
|
:addorupdate="addorupdate"
|
:screenWidth="screenWidth"
|
/>
|
<HistoryMaintainInfo
|
v-if="child.name === 'historyMaintainInfo'"
|
:tableHeader="child.tableHeader"
|
:addorupdate="addorupdate"
|
:screenWidth="screenWidth"
|
/>
|
<ContactsInfo
|
v-if="child.name === 'contactsInfo'"
|
:tableHeader="child.tableHeader"
|
:addorupdate="addorupdate"
|
:screenWidth="screenWidth"
|
/>
|
</div>
|
</div>
|
<!-- <ImageDataList
|
v-if="item.name === 'IMAGEDATAFORM'"
|
ref="imgdatalistRef"
|
:edit="type === 'edit'"
|
/>-->
|
</div>
|
<el-row class="right_opreat">
|
<el-button class="back-button" @click="handleBtnBack" :disabled="subLoading">返回</el-button>
|
<el-button type="primary" class="submit_button" @click="submitForm" :loading="subLoading">保存</el-button>
|
</el-row>
|
<el-dialog
|
custom-class="product_submit_dialog"
|
:visible.sync="commitDialogVisible"
|
width="400px"
|
center
|
>
|
<div class="messageCheck">
|
<i class="el-icon-success checkSuccess"></i>
|
<div class="tip">保存成功</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="enterMessages">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { mapState, mapActions } from "vuex";
|
import { clientsConfigMenus } from "./config/menus.config";
|
import LeftMenus from "@/views/components/LeftMenus.vue";
|
import ModuleTitle from "@/views/components/ModuleTitle.vue";
|
import MenusTitle from "@/views/components/MenusTitle.vue";
|
import CreateForms from "@/views/components/CreateForms.vue";
|
|
import BasicInfo from "./tableComponent/BasicInfo.vue";
|
import EnterpriseCusBasicInfo from "./tableComponent/EnterpriseCusBasicInfo.vue";
|
import PersonBasicsInfo from "./tableComponent/PersonBasicsInfo.vue";
|
import OtherShareHolder from "./tableComponent/OtherShareHolder.vue";
|
import FinanceInfo from "./tableComponent/FinanceInfo.vue";
|
import HouseInfo from "./tableComponent/HouseInfo.vue";
|
import HistoryMaintainInfo from "./tableComponent/HistoryMaintainInfo.vue";
|
import ContactsInfo from "./tableComponent/ContactsInfo.vue";
|
import LegalInfo from "./tableComponent/LegalInfo.vue";
|
import FirstShareholderInfo from "./tableComponent/FirstShareholderInfo.vue";
|
import RefereeInfo from "./tableComponent/RefereeInfo.vue";
|
import MarkInfo from "./tableComponent/MarkInfo.vue";
|
import FundInfo from "./tableComponent/FundInfo.vue";
|
|
import {
|
saveDocumentCatalog,
|
qryBusinessImageConfigInfo,
|
selectFlowPhaseInfo,
|
getDictionaryList,
|
qryEntInfoDetail,
|
qryIndInfoDetail,
|
saveIndInfo,
|
saveEntInfo
|
} from "@/http/api";
|
// import ImageDataList from "./components/ImageDataList.vue";
|
export default {
|
data() {
|
return {
|
screenWidth: document.documentElement.clientWidth || 1660, // 屏幕宽度
|
// menuItems: [...clientsConfigMenus(true)],
|
menuItems: [],
|
subLoading: false,
|
rowSerialno: this.$route.query.serialno || "",
|
dirno: this.$route.query.dirno || "",
|
from: this.$route.query.from || "",
|
isAdd: true,
|
optionsData: [],
|
optionsArr: ["IsInUse", "ProductCode", "ImageType", "flowModelList"],
|
addorupdate: this.$route.query.operation,
|
type: this.$route.query.type || "",
|
commitDialogVisible: false,
|
customerTypeCode: ""
|
};
|
},
|
|
components: {
|
LeftMenus,
|
ModuleTitle,
|
MenusTitle,
|
CreateForms,
|
OtherShareHolder,
|
FinanceInfo,
|
HouseInfo,
|
HistoryMaintainInfo,
|
ContactsInfo,
|
BasicInfo,
|
EnterpriseCusBasicInfo,
|
PersonBasicsInfo,
|
LegalInfo,
|
FirstShareholderInfo,
|
RefereeInfo,
|
MarkInfo,
|
FundInfo
|
// ImageDataList
|
},
|
|
async created() {
|
this.init();
|
// this.getOptionsData(this.optionsArr);
|
// this.getUserInfo();
|
},
|
async mounted() {
|
window.addEventListener("scroll", this.onScroll);
|
window.addEventListener("resize", this.getScreenWidth);
|
this.getDetailData();
|
},
|
destroyed() {
|
window.removeEventListener("scroll", this.onScroll);
|
window.removeEventListener("resize", this.getScreenWidth);
|
},
|
deactivated() {
|
this.isAdd = false;
|
},
|
methods: {
|
init() {
|
const { $route } = this;
|
const { query } = $route;
|
const { customerTypeCode, operation } = query;
|
this.customerTypeCode = customerTypeCode;
|
this.query = query;
|
this.menuItems = [
|
...clientsConfigMenus(customerTypeCode, true, operation)
|
];
|
this.findMenuItemsForms();
|
},
|
async getDetailData() {
|
const { query, menuItems } = this;
|
const { customerId, operation, customerTypeCode } = query;
|
let res = null;
|
if (customerTypeCode === "01") {
|
res = await qryIndInfoDetail({ customerId });
|
} else {
|
res = await qryEntInfoDetail({ customerId });
|
}
|
const { result } = res;
|
this.menuItems.forEach(child => {
|
if (child.hasOwnProperty("children")) {
|
if (Array.isArray(child.children)) {
|
if (child.children[0].type === "FORMS") {
|
// child.children[0].formItems.forEach(formValues => {
|
// formValues.placeholder = "";
|
// formValues.readonly = true;
|
// });
|
for (let key in child.children[0].defValues) {
|
for (let keyResult in result) {
|
if (key === keyResult) {
|
child.children[0].defValues[key] = result[keyResult];
|
if (key === 'changeRemark') {
|
child.children[0].defValues[key] = ''
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
});
|
},
|
findMenuItemsForms() {
|
const { menuItems } = this;
|
menuItems.forEach(tempItem => {
|
tempItem.children.forEach(item => {
|
if (item.type === "FORMS") {
|
const { formItems } = item;
|
this.setSelectOptions(formItems, tempItem.name, item.name);
|
}
|
});
|
});
|
},
|
setSelectOptions(formItems, parentName, childName) {
|
formItems.forEach(({ name }) => {
|
if (name === "customerType" || name === "industryType") {
|
this.getDictionaryList(name, parentName, childName);
|
}
|
});
|
},
|
async getDictionaryList(name, parentName, childName) {
|
const codeNo = name.substring(0, 1).toUpperCase() + name.substring(1);
|
const { result } = await getDictionaryList({ codeNo });
|
const list = result.map(item => {
|
return {
|
label: item.itemname,
|
value: item.itemno
|
};
|
});
|
this.updateValue(name, { options: list }, parentName, childName);
|
},
|
updateValue(index, info, parentName, childName) {
|
const { menuItems } = this;
|
const parentNameIndex = menuItems.findIndex(
|
({ name }) => name === parentName
|
);
|
// console.log(parentNameIndex)
|
if (parentNameIndex > -1) {
|
const childNameIndex = menuItems[parentNameIndex].children.findIndex(
|
({ name }) => name === childName
|
);
|
// console.log(childNameIndex)
|
// console.log(menuItems[parentNameIndex].children)
|
if (childNameIndex > -1) {
|
const { formItems } = menuItems[parentNameIndex].children[
|
childNameIndex
|
];
|
const nameIndex = formItems.findIndex(({ name }) => name === index);
|
if (nameIndex > -1) {
|
const preInfo = formItems[nameIndex];
|
menuItems[parentNameIndex].children[childNameIndex].formItems[
|
nameIndex
|
] = {
|
...preInfo,
|
...info
|
};
|
// this.$set(this, "menuItems", itemMenus);
|
this.$set(this, "menuItems", menuItems);
|
// console.log(this.menuItems)
|
// console.log(this.menuItems[parentNameIndex].children[childNameIndex].formItems[nameIndex])
|
}
|
}
|
// console.log(formItems)
|
// const nameIndex = formItems.findIndex(({name}) => index)
|
// console.log(nameIndex)
|
}
|
},
|
// 返回列表
|
backList() {
|
const { customerTypeCode } = this;
|
this.menuItems = [...clientsConfigMenus(customerTypeCode, false)];
|
this.$router.go(-1);
|
},
|
handleSelOnChange(name, value) {
|
if (name === "imagetype") {
|
const newItem = [...this.menuItems].map(child => {
|
const newChild = { ...child };
|
if (newChild.name === "IMAGEDATACONFIGBASEINFO") {
|
const newChildren = [...newChild.children].map(item => {
|
const newItem = { ...item };
|
const newFormItem = [...newItem.formItems].map(form => {
|
const newForm = { ...form };
|
if (newForm.name === "businesstype") {
|
newForm.show = value === "010";
|
}
|
if (
|
newForm.name === "flowno" ||
|
newForm.name === "flowSelect" ||
|
newForm.name === "phaseno"
|
) {
|
newForm.show = value === "020";
|
}
|
return newForm;
|
});
|
newItem.formItems = newFormItem;
|
newItem.defValues = {
|
...newItem.defValues,
|
businesstype: "",
|
flowno: "",
|
flowname: "",
|
phaseno: "",
|
flowSelect: ""
|
};
|
return newItem;
|
});
|
newChild.children = newChildren;
|
}
|
return newChild;
|
});
|
this.menuItems = newItem;
|
}
|
if (name === "flowSelect") {
|
const baseForm = this.$refs.BASEINFO[0];
|
const flownameValue =
|
this.optionsData.flowModelList &&
|
this.optionsData.flowModelList.filter(
|
option => option.value === value
|
)[0].label;
|
baseForm.formValues.flowname = flownameValue;
|
baseForm.formValues.flowno = value;
|
baseForm.update();
|
this.selectFlowPhaseInfo(value);
|
}
|
},
|
handleInputChange(name, value) {
|
if (name === "dirno" && value) {
|
this.dirno = value;
|
const imgdatalistRef = this.$refs.imgdatalistRef[0];
|
imgdatalistRef.getConfigLibrary();
|
}
|
},
|
async selectFlowPhaseInfo(flowno) {
|
if (!flowno) {
|
return false;
|
}
|
const flowPhaseRes = await selectFlowPhaseInfo({ flowno });
|
if (flowPhaseRes && flowPhaseRes.code === "00") {
|
this.optionsData.phaseno = flowPhaseRes.result;
|
const newItem = [...this.menuItems].map(child => {
|
const newChild = { ...child };
|
if (newChild.name === "IMAGEDATACONFIGBASEINFO") {
|
const newChildren = [...newChild.children].map(item => {
|
const newItem = { ...item };
|
const newFormItem = [...newItem.formItems].map(form => {
|
const newForm = { ...form };
|
if (newForm.name === "phaseno") {
|
newForm.options = flowPhaseRes.result;
|
}
|
return newForm;
|
});
|
newItem.formItems = newFormItem;
|
return newItem;
|
});
|
newChild.children = newChildren;
|
}
|
return newChild;
|
});
|
this.menuItems = newItem;
|
}
|
},
|
handleBtnBack() {
|
this.subLoading = true;
|
this.backList();
|
},
|
async saveBase() {
|
const baseForm = this.$refs.BASEINFO[0];
|
const {
|
businesstype,
|
dirname,
|
dirno,
|
flowname,
|
flowno,
|
imagetype,
|
isinuse,
|
phaseno,
|
remark,
|
sortno
|
} = baseForm.formValues;
|
const params = {
|
addorupdate: this.addorupdate,
|
businesstype,
|
dirname,
|
dirno,
|
flowname,
|
flowno,
|
imagetype,
|
isinuse,
|
phaseno,
|
remark,
|
sortno
|
};
|
const baseRes = await saveDocumentCatalog(params);
|
if (!baseRes || baseRes.code !== "00") {
|
return false;
|
}
|
const imgdatalistRef = this.$refs.imgdatalistRef[0];
|
imgdatalistRef.saveImageConfig();
|
this.commitDialogVisible = true;
|
},
|
handleSave() {
|
/**
|
* 获取到对应的表单数据
|
* this.$refs.baseInfo[0].$refs['createForm'].model
|
*/
|
const { menuItems } = this;
|
this.count = 0;
|
menuItems.forEach(child => {
|
if (child.hasOwnProperty("children")) {
|
const { children } = child;
|
children.forEach(item => {
|
if (item.type === "FORMS") {
|
this.count++;
|
// console.log(this.$refs[`${item.name}`][0]);
|
this[`defValue${this.count}`] = this.$refs[
|
`${item.name}`
|
][0].defValues;
|
// this.validateFrom(tempForm);
|
}
|
});
|
}
|
});
|
const { query } = this;
|
const { customerTypeCode } = query;
|
let changeRemark = "";
|
let temp = null;
|
// 个人客户
|
if (customerTypeCode === "01") {
|
temp = {
|
...this.defValue1,
|
...this.defValue2,
|
...this.defValue3,
|
...this.defValue4
|
};
|
changeRemark = this.defValue4.changeRemark;
|
}
|
// 企业客户
|
if (customerTypeCode === "02") {
|
temp = {
|
...this.defValue1,
|
...this.defValue2,
|
...this.defValue3,
|
...this.defValue4,
|
...this.defValue5,
|
...this.defValue6
|
};
|
changeRemark = this.defValue6.changeRemark;
|
}
|
if (!changeRemark) {
|
this.$message.warning("修改备注信息未填写,请检查录入的数据!");
|
this.subLoading = false;
|
return false;
|
} else {
|
this.toSubmit(temp);
|
}
|
// console.log(this.$refs.markInfo[0])
|
// console.log(this.defValue4)
|
// this.toSubmit(temp);
|
// console.log(this.$refs.baseInfo[0]);
|
// const markInfo = this.$refs.markInfo[0];
|
|
// markInfo.$refs["createForm"].validate(async valid => {
|
// if (valid) {
|
// // this.saveBase();
|
// console.log('1111')
|
// } else {
|
// this.$message.warning("请完基本信息必填项！");
|
// return false;
|
// }
|
// });
|
},
|
async toSubmit(params) {
|
const { query } = this;
|
const { customerTypeCode } = query;
|
try {
|
if (customerTypeCode === "01") {
|
await saveIndInfo({
|
...params
|
});
|
} else {
|
await saveEntInfo({
|
...params
|
});
|
}
|
this.$router.go(-1);
|
} catch (error) {
|
console.log(error);
|
}
|
},
|
submitForm() {
|
this.subLoading = true;
|
this.handleSave();
|
},
|
enterMessages() {
|
this.commitDialogVisible = false;
|
this.backList();
|
},
|
|
getScreenWidth() {
|
this.$set(this, "screenWidth", document.body.offsetWidth);
|
},
|
jump(index) {
|
const { menuItems } = this;
|
const items = document.querySelectorAll(".scroll_item");
|
items.forEach((item, i) => {
|
this.$set(this.menuItems, i, {
|
...menuItems[i],
|
isActive: index === i
|
});
|
if (index === i) {
|
items[i].scrollIntoView({
|
block: "start", // 默认跳转到顶部
|
behavior: "smooth" // 滚动的速度
|
});
|
}
|
});
|
},
|
onScroll(e) {
|
const scrollItems = document.querySelectorAll(".scroll_item");
|
const { menuItems } = this;
|
for (let i = scrollItems.length - 1; i >= 0; i--) {
|
// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
|
const judge =
|
e.target.scrollingElement.scrollTop + 50 >=
|
scrollItems[i].offsetTop - scrollItems[0].offsetTop;
|
if (judge) {
|
scrollItems.forEach((item, index) => {
|
this.$set(this.menuItems, index, {
|
...menuItems[index],
|
isActive: index === i
|
});
|
});
|
break;
|
}
|
}
|
const scrollTop =
|
document.documentElement.scrollTop || document.body.scrollTop;
|
// 变量windowHeight是可视区的高度
|
const windowHeight =
|
document.documentElement.clientHeight || document.body.clientHeight;
|
// 变量scrollHeight是滚动条的总高度
|
const scrollHeight =
|
document.documentElement.scrollHeight || document.body.scrollHeight;
|
// 滚动条到底部的条件
|
if (scrollTop + windowHeight === scrollHeight) {
|
const newMenuItems = [...this.menuItems].map((item, i) => {
|
const newItem = { ...item };
|
newItem.isActive = i === this.menuItems.length - 1;
|
return newItem;
|
});
|
this.menuItems = newMenuItems;
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less">
|
.add-image-data-config {
|
.left {
|
width: 160px;
|
height: 100%;
|
position: fixed;
|
outline: 1px solid #eeeeee;
|
border-right: 1px solid #eee;
|
background: #fff;
|
z-index: 999;
|
}
|
.right {
|
position: absolute;
|
width: calc(100% - 220px);
|
padding: 20px 30px;
|
padding-bottom: 60px;
|
background: rgba(249, 249, 249, 1);
|
right: 0;
|
& .el-dialog__wrapper {
|
z-index: 2006;
|
& .product_submit_dialog {
|
& .el-dialog__footer {
|
& .dialog-footer {
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
border-radius: 4px;
|
line-height: 2px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
}
|
}
|
}
|
}
|
& .pricing_dialog {
|
width: 1000px;
|
& .el-dialog__footer {
|
& .dialog-footer {
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
& span {
|
margin-left: -9px;
|
}
|
}
|
& .el-button--primary {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
background: #0081f0;
|
border-color: #0081f0;
|
border-radius: 4px;
|
margin-left: 40px;
|
}
|
}
|
}
|
}
|
& .back_dialog {
|
width: 450px;
|
& .el-dialog__body {
|
text-align: center;
|
}
|
}
|
}
|
.scroll_item {
|
min-height: 200px;
|
background: rgba(249, 249, 249, 1);
|
padding-bottom: 30px;
|
}
|
.item_set_class {
|
padding-left: 14px;
|
}
|
.right_opreat {
|
position: fixed;
|
width: 100%;
|
text-align: center;
|
line-height: 80px;
|
background: #fff;
|
z-index: 6;
|
bottom: 0;
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
margin-left: -80px;
|
line-height: 7px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
& .el-button--primary {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
background: #0081f0;
|
border-color: #0081f0;
|
border-radius: 4px;
|
margin-left: 40px;
|
}
|
// & .back-button {
|
// margin-right: 120px;
|
// }
|
}
|
.messageCheck {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
.checkSuccess {
|
font-size: 80px;
|
color: rgb(82, 196, 26);
|
}
|
.tip {
|
margin-top: 10px;
|
font-size: 20px;
|
}
|
}
|
</style>
|
