<template>
|
<div>
|
<div class="left">
|
<LeftMenus :menuItems="menuItems"
|
@jump="jump"
|
@backList="backProInfo"
|
title="返回产品定义" />
|
</div>
|
<div class="right"
|
@scroll="onScroll">
|
<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 v-for="(child, index) in item.children"
|
:key="index">
|
<div class="item_set_class"
|
v-show="child.isShow">
|
<MenusTitle :title="child.label" />
|
<CreateForms v-if="child.type === 'FORMS'"
|
:screenWidth="screenWidth"
|
:ref="child.name"
|
@handleSelFocus="handleSelFocus"
|
@handleSelOnChange="handleSelOnChange"
|
@handleGetValue="handleGetValue"
|
@remoteMethod="remoteMethod"
|
:formItems="child.formItems"
|
:defValues="child.defValues"
|
:formRules="child.formRules" />
|
<ProcessControlSetting v-if="child.name === 'PROCESSCONTROLSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
<PrepaymentSetting v-if="child.name === 'PREPAYMENTSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
<RollPlanSetting v-if="child.name === 'ROLLPLANSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
<DiscountPlanSetting v-if="child.name === 'DISCOUNTPLANSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
<CreditQuerySetting v-if="child.name === 'CREDITQUERYSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
<ScreenageDocSetting v-if="child.name === 'SCREENAGEDOCSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
</div>
|
</div>
|
</div>
|
<DimensionPricingSetting v-if="item.name === 'DIMENSIONPRICINGSETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
<DimensionIncentiveSetting v-if="item.name === 'DIMENSIONINCENTIVESETTING'"
|
:options="optionsMap"
|
:edit="OPRETYPE === 'edit'" />
|
</div>
|
<el-row class="right_opreat">
|
<el-button class="save_button"
|
@click="handleSave"
|
:disabled="subLoading">保存草稿</el-button>
|
<el-button type="primary"
|
class="submit_button"
|
@click="submitForm"
|
:loading="subLoading">提交</el-button>
|
</el-row>
|
<el-dialog custom-class="dimension_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>
|
<el-dialog title="维度定义变更保存确认"
|
:visible.sync="dialogBackVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
width="450"
|
center
|
custom-class="pricing_dialog back_dialog">
|
<div>维度定义信息已发生变更，请确认是否需要保存草稿</div>
|
<span slot="footer"
|
class="dialog-footer">
|
<el-button @click="handleBackNonclick">不保存直接返回</el-button>
|
<el-button type="primary"
|
@click="handleBackclick">保存并返回</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog title=""
|
:show-close="false"
|
:visible.sync="bankDialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
center
|
custom-class="pricing_dialog bank_dialog">
|
<Bankselector v-if="bankDialogVisible"
|
:defBankList="defBankList"
|
:branchName="branchName"
|
:bankCode="bankCode"
|
@handleSelectorCancel="handleSelectorCancel"
|
@handleSelectorSubmit="handleSelectorSubmit" />
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { PRODIMENSIONMENUS } from '../../../utils/menusConfig.js'
|
import {
|
initProductDimensions,
|
qryDropDownOptionBatch,
|
qryDimensionsCustomerNoList,
|
saveProductDimensionsInfo,
|
qryCityCodeList,
|
selectSubBranch,
|
qryCondition,
|
qryAreaCodeList,
|
selectPartnersConfiguration,
|
qryProductDimensionsInfo,
|
qryDimensionInfoShowConfig,
|
qryVirtualAccount
|
} from '../../../api/productManage.api'
|
import {
|
DIMENSIONOPTIONS,
|
DIMENSIONENUM
|
} from '../../../utils/optionsQueryConfig.js'
|
import {
|
DIMENSIONBASEINFODEF,
|
MATCHEDELEMENTDEFVALUE,
|
AMOUNTSETTINGDEFVALUE,
|
DIMENSIONPOSTLOANDEFVALUE,
|
OPERATINGSETTINGDEFVALUE,
|
PARTNERSINFOSETTINGDEFVALUE
|
} from '../../../utils/defValueConfig'
|
import LeftMenus from '../../../components/LeftMenus.vue'
|
import ModuleTitle from '../../../components/ModuleTitle.vue'
|
import MenusTitle from '../../../components/MenusTitle.vue'
|
import CreateForms from '../../../components/CreateForms.vue'
|
import ProcessControlSetting from './components/ProcessControlSetting.vue'
|
import PrepaymentSetting from './components/PrepaymentSetting.vue'
|
import RollPlanSetting from './components/RollPlanSetting.vue'
|
import DiscountPlanSetting from './components/DiscountPlanSetting.vue'
|
import CreditQuerySetting from './components/CreditQuerySetting.vue'
|
import DimensionIncentiveSetting from './components/DimensionIncentiveSetting.vue'
|
import DimensionPricingSetting from './components/DimensionPricingSetting.vue'
|
import ScreenageDocSetting from './components/ScreenageDocSetting.vue'
|
import Bankselector from './components/Bankselector.vue'
|
|
export default {
|
data () {
|
return {
|
screenWidth: document.documentElement.clientWidth || 1280, // 屏幕宽度
|
menuItems: [...PRODIMENSIONMENUS(true)],
|
dimensionno: '', // 维度编号
|
serialno: '', // 维度流水号
|
isBaseForm: false,
|
isSave: false,
|
subLoading: false,
|
commitDialogVisible: false,
|
dialogBackVisible: false,
|
bankDialogVisible: false,
|
productid: this.$route.query.typeno,
|
objectno: this.$route.query.objectno,
|
objecttype: this.$route.query.objecttype,
|
type: '',
|
selProNo: '',
|
partnersbankValue: '',
|
paymentbankValue: '',
|
optionsMap: {},
|
cities: [],
|
areaCodes: [],
|
detailData: {},
|
showData: {},
|
showForms: {},
|
defBankList: [],
|
partnersbankList: [],
|
paymentbankList: [],
|
branchName: '',
|
partnersbranchValue: '',
|
paymentbranchValue: '',
|
bankCode: '',
|
bankFiled: ''
|
}
|
},
|
computed: {
|
DIMENSIONNO () {
|
return this.$route.query.dimensionno
|
},
|
OBJECTNO () {
|
return this.$route.query.objectno
|
},
|
PRODUCTID () {
|
return this.$route.query.productid
|
},
|
OPRETYPE () {
|
return this.$route.query.type
|
}
|
},
|
components: {
|
LeftMenus,
|
ModuleTitle,
|
MenusTitle,
|
CreateForms,
|
ProcessControlSetting,
|
DimensionPricingSetting,
|
PrepaymentSetting,
|
RollPlanSetting,
|
DiscountPlanSetting,
|
DimensionIncentiveSetting,
|
CreditQuerySetting,
|
ScreenageDocSetting,
|
Bankselector
|
},
|
async created () {
|
if (this.OPRETYPE === 'edit') {
|
this.dimensionno = this.DIMENSIONNO
|
this.productid = this.PRODUCTID
|
this.objectno = this.OBJECTNO
|
this.type = this.OPRETYPE
|
await this.getProductDimensionsInfo()
|
}
|
},
|
async mounted () {
|
window.addEventListener('scroll', this.onScroll)
|
window.addEventListener('resize', this.getScreenWidth)
|
this.$router.afterEach((to, from, next) => {
|
window.scrollTo(0, 0)
|
})
|
this.OPRETYPE !== 'edit' && (await this.initDimensions())
|
await this.getDimensionInfoShowConfig()
|
await this.getCondition('cities')
|
await this.getAreaCodeList('')
|
await this.getOptions()
|
await this.getDimensionsCustomerNoList()
|
},
|
destroyed () {
|
window.removeEventListener('scroll', this.onScroll)
|
window.removeEventListener('resize', this.getScreenWidth)
|
},
|
methods: {
|
// 返回列表
|
backProInfo () {
|
this.detailData = {}
|
this.showData = {}
|
this.showForms = {}
|
if (this.isSave) {
|
this.$router.go(-1)
|
} else {
|
this.dialogBackVisible = true
|
}
|
},
|
handleBackNonclick () {
|
this.$router.go(-1)
|
},
|
handleBackclick () {
|
this.handleSave()
|
this.$router.go(-1)
|
},
|
// 查询维度可见配置项
|
async getDimensionInfoShowConfig () {
|
const { dimensionno, objectno, productid } = this
|
const params = {
|
dimensionno,
|
objectno,
|
productid
|
}
|
const res = await qryDimensionInfoShowConfig(params)
|
if (res && res.code === '00') {
|
this.showData = res.result
|
}
|
},
|
// 查询产品维度信息
|
async getProductDimensionsInfo () {
|
const { dimensionno, objectno, productid } = this
|
const params = {
|
dimensionno,
|
objectno,
|
productid,
|
showoldvalue: false
|
}
|
const loading = this.$loading({
|
lock: true,
|
text: '加载中',
|
background: 'hsla(0,0%,100%,.9)'
|
})
|
const detailsRes = await qryProductDimensionsInfo(params)
|
setTimeout(() => {
|
loading.close()
|
}, 2000)
|
let detailData = {}
|
let showForms = {}
|
Object.getOwnPropertyNames(detailsRes.result).forEach(key => {
|
detailData[key] = detailsRes.result[key].value || ''
|
if (key === 'partnersbranch') {
|
detailData['partnersbranchName'] =
|
detailsRes.result[key].valueDesc || ''
|
}
|
if (key === 'paymentbranch') {
|
detailData['paymentbranchName'] =
|
detailsRes.result[key].valueDesc || ''
|
}
|
showForms[key] = detailsRes.result[key].visible
|
})
|
this.partnersbranchValue = detailsRes.result['partnersbranch'].value
|
this.paymentbranchValue = detailsRes.result['paymentbranch'].value
|
this.detailData = detailData
|
this.showForms = showForms
|
const {
|
isprepayment,
|
isrollover,
|
havecooperation,
|
discounttype
|
} = detailData
|
this.handleShowTable(
|
'PROBUSINESSINFO',
|
'PREPAYMENTSETTING',
|
isprepayment === '1'
|
)
|
this.handleShowTable(
|
'PROBUSINESSINFO',
|
'ROLLPLANSETTING',
|
isrollover === '1'
|
)
|
this.handleShowTable(
|
'PROCUSTOMERSLIST',
|
'DISCOUNTPLANSETTING',
|
havecooperation === '1' &&
|
(discounttype === '2' || discounttype === '3')
|
)
|
},
|
// 初始化产品维度信息
|
async initDimensions () {
|
const { productid, objectno } = this
|
const params = {
|
typeno: productid,
|
objectno
|
}
|
const res = await initProductDimensions(params)
|
if (res.code !== '00') {
|
return false
|
}
|
this.dimensionno = res.result.dimensionno
|
this.serialno = res.result.serialno
|
const baseForm = this.$refs.BASEINFO[0]
|
baseForm.formValues.dimensionCode = res.result.dimensionno
|
baseForm.formValues.dimensioneffectdate = res.result.dimensioneffectdate
|
baseForm.formValues.dimensionfailuredate =
|
res.result.dimensionfailuredate
|
baseForm.update()
|
},
|
// 合作协议贴息方案
|
async getPartnersConfiguration (doctype, projectno) {
|
const { objectno } = this
|
const params = {
|
doctype,
|
objectno,
|
projectno
|
}
|
const res = await selectPartnersConfiguration(params)
|
if (res.code !== '00') {
|
return false
|
}
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
const partnerFormItems = [...partnerForm.formItems]
|
const fieldName =
|
doctype === '170' ? 'cooperationagreement' : 'discountagreement'
|
partnerFormItems.forEach(item => {
|
if (item.name === fieldName) {
|
item.options = res.result
|
}
|
})
|
this.updateForms(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
partnerFormItems
|
)
|
},
|
async getDimensionsCustomerNoList () {
|
const { objectno } = this
|
const res = await qryDimensionsCustomerNoList({ objectno })
|
if (!res && res.code !== '00') {
|
return false
|
}
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
const matchFormItems =
|
matchForm && matchForm.formItems.filter(Boolean).concat()
|
matchFormItems &&
|
matchFormItems.forEach(forms => {
|
if (forms.name === 'customersNo') {
|
forms.options = res.result
|
}
|
})
|
this.updateForms('DIMENSIONBASEINFO', 'MATCHEDELEMENT', matchFormItems)
|
},
|
async getOptions () {
|
const params = [...DIMENSIONOPTIONS]
|
const res = await qryDropDownOptionBatch(params)
|
if (res.code !== '00') {
|
return false
|
}
|
this.optionsMap = res.result
|
const baseForm = this.$refs.BASEINFO[0]
|
const matchForm =
|
this.$refs.MATCHEDELEMENT && this.$refs.MATCHEDELEMENT[0]
|
const amountForm = this.$refs.AMOUNTSETTING[0]
|
const busniessForm = this.$refs.PROBUSINESSBSASE[0]
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
const operatingForm = this.$refs.OPERATINGSETTING[0]
|
const baseFormItems = baseForm && [...baseForm.formItems]
|
const matchFormItems = matchForm && [...matchForm.formItems]
|
const amountFormItems = amountForm && [...amountForm.formItems]
|
const busniessFormItems = busniessForm && [...busniessForm.formItems]
|
const partnerFormItems = partnerForm && [...partnerForm.formItems]
|
const operatingFormItems = operatingForm && [...operatingForm.formItems]
|
const upArray = [
|
{
|
parentName: 'DIMENSIONBASEINFO',
|
name: 'BASEINFO',
|
defValue: this.detailData,
|
value: this.getOptionItems(baseFormItems)
|
},
|
{
|
parentName: 'DIMENSIONBASEINFO',
|
name: 'MATCHEDELEMENT',
|
defValue: this.detailData,
|
value: this.getOptionItems(matchFormItems.filter(Boolean))
|
},
|
{
|
parentName: 'DIMENSIONBASEINFO',
|
name: 'AMOUNTSETTING',
|
defValue: this.detailData,
|
value: this.getOptionItems(amountFormItems)
|
},
|
{
|
parentName: 'PROBUSINESSINFO',
|
name: 'PROBUSINESSBSASE',
|
defValue: this.detailData,
|
value: this.getOptionItems(busniessFormItems)
|
},
|
{
|
parentName: 'PROCUSTOMERSLIST',
|
name: 'PARTNERSINFOSETTING',
|
defValue: this.detailData,
|
value: this.getOptionItems(partnerFormItems, 'PARTNERSINFOSETTING')
|
},
|
{
|
parentName: 'DIMENSIONOPERATING',
|
name: 'OPERATINGSETTING',
|
defValue: this.detailData,
|
value: this.getOptionItems(operatingFormItems)
|
}
|
]
|
this.OPRETYPE !== 'edit' &&
|
upArray.forEach(menus => {
|
this.updateForms(menus.parentName, menus.name, menus.value)
|
})
|
if (this.OPRETYPE === 'edit') {
|
upArray.forEach(menus => {
|
const newForms = [...menus.value].map(form => {
|
const newForm = { ...form }
|
newForm.show = this.showForms[newForm.name] || newForm.show
|
if (newForm.name === 'partnersbranchName') {
|
newForm.show = this.showForms['partnersbranch']
|
}
|
return newForm
|
})
|
this.handleShowContrl(
|
menus.parentName,
|
menus.name,
|
'formItems',
|
newForms
|
)
|
this.handleShowContrl(
|
menus.parentName,
|
menus.name,
|
'defValues',
|
menus.defValue
|
)
|
})
|
setTimeout(() => {
|
this.handleChildSelect('projectNo', this.detailData.projectNo)
|
if (this.detailData.havecooperation === '1') {
|
const filedsArray = [
|
{
|
key: 'partnersprovince',
|
value: this.detailData.partnersprovince
|
},
|
{
|
key: 'paymentprovince',
|
value: this.detailData.paymentprovince
|
},
|
{
|
key: 'contactpersonprovince',
|
value: this.detailData.contactpersonprovince
|
},
|
{ key: 'partnersbank', value: this.detailData.partnersbank },
|
{ key: 'paymentbank', value: this.detailData.paymentbank }
|
]
|
filedsArray.forEach(item => {
|
if (item.value) {
|
this.handleChildSelect(item.key, item.value)
|
}
|
})
|
}
|
this.partnersbranchValue &&
|
this.getSelectSubBranch(
|
this.detailData.partnersbank,
|
this.partnersbranchValue,
|
'partnersbranch'
|
)
|
this.paymentbranchValue &&
|
this.getSelectSubBranch(
|
this.detailData.paymentbank,
|
this.paymentbranchValue,
|
'paymentbranch'
|
)
|
}, 10)
|
}
|
},
|
// 处理联动的显示或隐藏
|
handleShowContrl (parentName, updateName, childName, value) {
|
const updateFormItems = [...this.menuItems].map(menus => {
|
const newMenu = { ...menus }
|
if (newMenu.name === parentName) {
|
const newChildren = [...newMenu.children].map(childs => {
|
const newChilds = { ...childs }
|
if (newChilds.name === updateName) {
|
newChilds[childName] = value
|
}
|
return newChilds
|
})
|
newMenu.children = newChildren
|
}
|
return newMenu
|
})
|
this.$set(this, 'menuItems', updateFormItems)
|
},
|
// 更新Form
|
updateForms (parentName, name, value, isUpdateTab) {
|
const { menuItems, showData } = this
|
const { attribute2, elementname } = showData
|
const newMenus = menuItems.map(item => {
|
const newItem = { ...item }
|
if (newItem.name === parentName) {
|
const newChildren = newItem.children.map(child => {
|
let newChild = { ...child }
|
if (newChild.name === name) {
|
let newValue = [...value]
|
if (name === 'PARTNERSINFOSETTING') {
|
newValue = newValue.map(form => {
|
const newForm = { ...form }
|
const hasPro =
|
elementname &&
|
elementname.length > 0 &&
|
elementname.includes('projectNo')
|
if (
|
newForm.name === 'cooperationagreement' ||
|
newForm.name === 'discountagreement'
|
) {
|
newForm.show = hasPro && newForm.show
|
}
|
return newForm
|
})
|
}
|
newChild.formItems = newValue
|
}
|
if (newChild.name === 'MATCHEDELEMENT') {
|
const newElementname =
|
elementname && elementname.filter(el => el !== null)
|
const newElementLength = newElementname && newElementname.length
|
newChild.isShow = newElementLength > 0
|
if (newElementLength > 0) {
|
const filterArray = newChild.formItems.filter(Boolean)
|
newChild.formItems = elementname.map(el => {
|
const elObj =
|
filterArray && filterArray.filter(form => form.name === el)
|
return elObj[0]
|
})
|
}
|
}
|
if (newChild.name === 'PROCESSCONTROLSETTING') {
|
newChild.isShow = attribute2
|
}
|
return newChild
|
})
|
newItem.children = newChildren
|
}
|
return newItem
|
})
|
this.$set(this, 'menuItems', newMenus)
|
},
|
getOptionItems (items, name) {
|
const { optionsMap, detailData } = this
|
const newItems = [...items]
|
const { havecooperation, isissuepartners, discounttype } = detailData
|
newItems.forEach(forms => {
|
if (forms.options) {
|
forms.options = optionsMap[DIMENSIONENUM[forms.name]]
|
}
|
if (forms.name === 'cityCode') {
|
forms.options = this.cities
|
}
|
if (forms.name === 'areaCode') {
|
forms.options = this.areaCodes
|
}
|
if (name === 'PARTNERSINFOSETTING') {
|
forms.show = havecooperation === '1'
|
if (forms.name === 'havecooperation') {
|
forms.show = true
|
}
|
if (havecooperation !== '1') {
|
return false
|
}
|
const hideFields = [
|
'partnersaccountname',
|
'partnersaccount',
|
'partnersprovince',
|
'partnerscity',
|
'partnersbank',
|
'partnersbranch',
|
'partnersbranchName'
|
]
|
if (hideFields.includes(forms.name)) {
|
forms.show = isissuepartners === '1'
|
}
|
if (discounttype !== '2' && discounttype !== '3') {
|
const showFields = [
|
'havecooperation',
|
'enterprisename',
|
'socialcreditcode',
|
'isissuepartners',
|
'partnersaccountname',
|
'partnersaccount',
|
'partnersprovince',
|
'partnerscity',
|
'partnersbank',
|
'partnersbranch',
|
'partnersbranchName',
|
'cooperationagreement',
|
'discounttype'
|
]
|
if (!showFields.includes(forms.name)) {
|
forms.show = false
|
}
|
}
|
}
|
})
|
return newItems
|
},
|
// 校验维度基本信息
|
validateBase () {
|
const baseForm = this.$refs.BASEINFO[0]
|
baseForm.$refs['createForm'].validate(async valid => {
|
if (valid) {
|
this.isBaseForm = true
|
} else {
|
this.isBaseForm = false
|
this.$message.warning('请完维度基本信息！')
|
return false
|
}
|
})
|
},
|
// 校验维度匹配元素
|
validateMatch () {
|
const { elementname } = this.showData
|
if (elementname.length < 1) {
|
return true
|
} else {
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
matchForm.$refs['createForm'].validate(async valid => {
|
if (valid) {
|
this.isMatchForm = true
|
} else {
|
this.isMatchForm = false
|
this.$message.warning('请完善匹配元素！')
|
return false
|
}
|
})
|
}
|
},
|
// 校验额度信息
|
validateAmount () {
|
const amountForm = this.$refs.AMOUNTSETTING[0]
|
amountForm.$refs['createForm'].validate(async valid => {
|
if (valid) {
|
this.isAmountForm = true
|
} else {
|
this.isAmountForm = false
|
this.$message.warning('请完善额度配置！')
|
return false
|
}
|
})
|
},
|
// 校验维度贷后配置
|
validateBusniess () {
|
const busniessForm = this.$refs.PROBUSINESSBSASE[0]
|
busniessForm.$refs['createForm'].validate(async valid => {
|
if (valid) {
|
this.isBusniessForm = true
|
} else {
|
this.isBusniessForm = false
|
this.$message.warning('请完维度贷后配置！')
|
return false
|
}
|
})
|
},
|
// 校验表单信息
|
validateForms () {
|
let formsInfo = [
|
{
|
formName: 'BASEINFO', // 维度基本信息
|
tipContent: '请完维度基本信息！', // 提示信息
|
key: 'isBaseForm'
|
},
|
{
|
formName: 'MATCHEDELEMENT', // 匹配元素
|
tipContent: '请完善匹配元素！', // 提示信息
|
key: 'isMatchForm'
|
},
|
{
|
formName: 'AMOUNTSETTING', // 额度配置
|
tipContent: '请完善额度配置！', // 提示信息
|
key: 'isAmountForm'
|
},
|
{
|
formName: 'PROBUSINESSBSASE', // 维度贷后配置
|
tipContent: '请完善维度贷后配置', // 提示信息
|
key: 'isBusniessForm'
|
},
|
{
|
formName: 'PARTNERSINFOSETTING', // 合作商信息配置
|
tipContent: '请完善合作商信息配置', // 提示信息
|
key: 'isPartnerForm'
|
},
|
{
|
formName: 'OPERATINGSETTING', // 维度运营配置
|
tipContent: '请完善维度运营配置基本信息', // 提示信息
|
key: 'isOperatingForm'
|
}
|
]
|
const { elementname } = this.showData
|
if (elementname.length < 1) {
|
this.isMatchForm = true
|
formsInfo = formsInfo.filter(
|
item => item.formName !== 'MATCHEDELEMENT'
|
)
|
}
|
formsInfo.forEach(item => {
|
const ITEMFORMS = this.$refs[item.formName][0]
|
ITEMFORMS.$refs['createForm'].validate(async valid => {
|
if (valid) {
|
this[item.key] = true
|
} else {
|
this[item.key] = false
|
setTimeout(() => {
|
this.$message.error(item.tipContent)
|
}, 0)
|
}
|
})
|
})
|
},
|
enterMessages () {
|
const { productid, objectno, objecttype } = this
|
this.commitDialogVisible = false
|
if (this.OPRETYPE === 'edit') {
|
this.$router.go(-1)
|
} else {
|
this.$router.push({
|
name: 'productDetail',
|
query: {
|
serialno: objectno,
|
productid,
|
objecttype
|
}
|
})
|
}
|
},
|
handleSave () {
|
const { dimensionno } = this
|
if (!dimensionno) {
|
this.$message({
|
message: '产品维度编号不存在！',
|
type: 'error'
|
})
|
return false
|
}
|
this.saveDimensionsInfo(false)
|
},
|
async saveDimensionsInfo (checkflag) {
|
this.subLoading = true
|
const params = this.getFormsValue(checkflag)
|
const res = await saveProductDimensionsInfo(params)
|
this.subLoading = false
|
if (!res || res.code !== '00') {
|
return false
|
}
|
this.isSave = true
|
if (!checkflag) {
|
this.$message({
|
message: '草稿已保存',
|
type: 'success'
|
})
|
} else {
|
this.commitDialogVisible = true
|
}
|
},
|
// 获取焦点时判断是否有可选项
|
handleSelFocus (formName, options) {
|
console.log('formName===', formName)
|
if (formName === 'partnersbranchName') {
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
if (this.partnersbankValue) {
|
this.bankFiled = 'partnersbranch'
|
const partnersbranchName = partnerForm.formValues.partnersbranchName
|
this.defBankList = this.partnersbankList
|
this.branchName =
|
partnersbranchName ||
|
(this.partnersbankList &&
|
this.partnersbankList[0] &&
|
this.partnersbankList[0].label)
|
this.bankCode = this.partnersbankValue
|
this.bankDialogVisible = true
|
} else {
|
this.validateSels('partnersbank', '请先选择商家收款银行')
|
}
|
}
|
if (formName === 'paymentbranchName') {
|
console.log('this.paymentbankValue', this.paymentbankValue)
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
if (this.paymentbankValue) {
|
const paymentbranchName = partnerForm.formValues.paymentbranchName
|
this.bankFiled = 'paymentbranch'
|
this.defBankList = this.paymentbankList
|
this.branchName =
|
paymentbranchName ||
|
(this.paymentbankList &&
|
this.paymentbankList[0] &&
|
this.paymentbankList[0].label)
|
this.bankCode = this.paymentbankValue
|
this.bankDialogVisible = true
|
} else {
|
this.validateSels('paymentbank', '请先选择商家贴息付款银行')
|
}
|
}
|
if (!options || options.length < 1) {
|
if (formName === 'partnerscity') {
|
this.validateSels('partnerscity', '请先选择商家收款银行所在省份！')
|
}
|
if (formName === 'paymentcity') {
|
this.validateSels(
|
'paymentprovince',
|
'请先选择商家贴息付款账户所在省份'
|
)
|
}
|
if (formName === 'contactpersoncity') {
|
this.validateSels(
|
'contactpersonprovince',
|
'请先选择发票接收人地址（省）'
|
)
|
}
|
if (
|
formName === 'cooperationagreement' ||
|
formName === 'discountagreement'
|
) {
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
matchForm.$refs['createForm'].validateField(
|
'projectNo',
|
errorMessage => {
|
if (errorMessage) {
|
this.$message.warning('请先选择项目')
|
return false
|
}
|
}
|
)
|
}
|
if (formName === 'areaCode') {
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
if (this.areaCodes.length === 0) {
|
matchForm.$refs['createForm'].validateField(
|
'cityCode',
|
errorMessage => {
|
if (errorMessage) {
|
this.$message.warning('请先选择维度城市')
|
return false
|
}
|
}
|
)
|
}
|
}
|
}
|
},
|
// 校验form
|
validateSels (field, tipMessage) {
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
partnerForm.$refs['createForm'].validateField(field, errorMessage => {
|
if (errorMessage) {
|
this.$message.warning(tipMessage)
|
return false
|
}
|
})
|
},
|
// 处理联动表格的显示或隐藏
|
handleShowTable (parentName, updateName, isShow) {
|
const updateFormItems = [...this.menuItems].map(menus => {
|
const newMenu = { ...menus }
|
if (newMenu.name === parentName) {
|
const newChildren = [...newMenu.children].map(childs => {
|
const newChilds = { ...childs }
|
if (newChilds.name === updateName) {
|
newChilds.isShow = isShow
|
}
|
return newChilds
|
})
|
newMenu.children = newChildren
|
}
|
return newMenu
|
})
|
this.$set(this, 'menuItems', updateFormItems)
|
},
|
// 处理分支行远程搜索
|
async remoteMethod (query, name, type) {
|
console.log('query', query, name)
|
const { partnersbankValue, paymentbankValue } = this
|
if (name === 'partnersbranch' || name === 'paymentbranch') {
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
let partnerFormItems = [...partnerForm.formItems]
|
const params = {
|
bankcode:
|
name === 'partnersbranch' ? partnersbankValue : paymentbankValue,
|
bankname: type === 'edit' ? '' : query,
|
subBranchCode: type === 'edit' ? query : '',
|
currentPage: 1,
|
pageSize: 1000
|
}
|
const branchOp = await this.getSelectSubBranch(params)
|
partnerFormItems.forEach(item => {
|
if (item.name === 'partnersbranch' && name === 'partnersbranch') {
|
item.options = branchOp
|
}
|
if (item.name === 'paymentbranch' && name === 'paymentbranch') {
|
item.options = branchOp
|
}
|
})
|
this.updateForms(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
partnerFormItems
|
)
|
}
|
},
|
// 处理级联下拉获取数据
|
async handleSelOnChange (formName, value) {
|
if (formName === 'areaCode') {
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
matchForm.formValues.areaCode = value
|
}
|
if (formName === 'cityCode') {
|
await this.getAreaCodeList(value)
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
const matchFormItems = [...matchForm.formItems]
|
matchForm.formValues.areaCode = ''
|
matchFormItems.forEach(item => {
|
if (item.name === 'areaCode') {
|
item.options = this.areaCodes
|
}
|
})
|
this.handleShowContrl(
|
'DIMENSIONBASEINFO',
|
'MATCHEDELEMENT',
|
'formItems',
|
matchFormItems
|
)
|
return false
|
}
|
// if (formName === 'penaltyinterest') {
|
// const businessForm = this.$refs.PROBUSINESSBSASE[0]
|
// const businessFormItems = [...businessForm.formItems]
|
// businessFormItems.forEach(item => {
|
// if (item.name === 'feerate') {
|
// item.show = value === '2'
|
// }
|
// })
|
// this.handleShowContrl(
|
// 'PROBUSINESSINFO',
|
// 'PROBUSINESSBSASE',
|
// 'formItems',
|
// businessFormItems
|
// )
|
// }
|
|
if (formName === 'isprepayment') {
|
this.handleShowTable(
|
'PROBUSINESSINFO',
|
'PREPAYMENTSETTING',
|
value === '1'
|
)
|
return false
|
}
|
if (formName === 'isrollover') {
|
this.handleShowTable(
|
'PROBUSINESSINFO',
|
'ROLLPLANSETTING',
|
value === '1'
|
)
|
return false
|
}
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
let partnerFormItems = [...partnerForm.formItems]
|
if (formName === 'havecooperation') {
|
partnerFormItems.forEach(item => {
|
item.show = value === '1'
|
if (item.name === 'havecooperation') {
|
item.show = true
|
}
|
const hideFields = [
|
'partnersaccountname',
|
'partnersaccount',
|
'partnersprovince',
|
'partnerscity',
|
'partnersbank',
|
'partnersbranch',
|
'partnersbranchName'
|
]
|
if (hideFields.includes(item.name)) {
|
item.show = partnerForm.formValues.isissuepartners === '1'
|
}
|
const hasProjectNo =
|
this.showData &&
|
this.showData.elementname &&
|
this.showData.elementname.includes('projectNo')
|
if (
|
item.name === 'cooperationagreement' ||
|
item.name === 'discountagreement'
|
) {
|
item.show = item.show && hasProjectNo
|
}
|
partnerForm.formValues = {
|
...PARTNERSINFOSETTINGDEFVALUE,
|
havecooperation: value
|
}
|
})
|
const { discounttype } = partnerForm.formValues
|
this.handleShowTable(
|
'PROCUSTOMERSLIST',
|
'DISCOUNTPLANSETTING',
|
value === '1' && (discounttype === '2' || discounttype === '3')
|
)
|
return false
|
}
|
if (formName === 'isissuepartners') {
|
partnerFormItems.forEach(item => {
|
const hideFields = [
|
'partnersaccountname',
|
'partnersaccount',
|
'partnersprovince',
|
'partnerscity',
|
'partnersbank',
|
'partnersbranchName'
|
]
|
if (hideFields.includes(item.name)) {
|
item.show = value === '1'
|
}
|
})
|
const {
|
partnersaccountname,
|
partnersaccount,
|
partnersprovince,
|
partnerscity,
|
partnersbank,
|
partnersbranch,
|
partnersbranchName
|
} = PARTNERSINFOSETTINGDEFVALUE
|
partnerForm.formValues = {
|
...partnerForm.formValues,
|
partnersaccountname,
|
partnersaccount,
|
partnersprovince,
|
partnerscity,
|
partnersbank,
|
partnersbranch,
|
partnersbranchName,
|
isissuepartners: value
|
}
|
return false
|
}
|
if (formName === 'discounttype') {
|
this.selDiscounttype = value
|
partnerFormItems.forEach(item => {
|
const showFields = [
|
'havecooperation',
|
'enterprisename',
|
'socialcreditcode',
|
'isissuepartners',
|
'partnersaccountname',
|
'partnersaccount',
|
'partnersprovince',
|
'partnerscity',
|
'partnersbank',
|
'partnersbranch',
|
'partnersbranchName',
|
'cooperationagreement',
|
'discounttype'
|
]
|
if (!showFields.some(field => field === item.name)) {
|
item.show = value === '2' || value === '3'
|
if (item.name === 'discountagreement') {
|
const hasProjectNo = this.showData.elementname.includes(
|
'projectNo'
|
)
|
item.show =
|
item.show &&
|
hasProjectNo &&
|
this.selProNo !== '2018062500999999'
|
}
|
}
|
})
|
const {
|
havecooperation,
|
enterprisename,
|
socialcreditcode,
|
isissuepartners,
|
partnersaccountname,
|
partnersaccount,
|
partnersprovince,
|
partnerscity,
|
partnersbank,
|
partnersbranch,
|
cooperationagreement
|
} = partnerForm.formValues
|
partnerForm.formValues = {
|
...PARTNERSINFOSETTINGDEFVALUE,
|
havecooperation,
|
enterprisename,
|
socialcreditcode,
|
isissuepartners,
|
partnersaccountname,
|
partnersaccount,
|
partnersprovince,
|
partnerscity,
|
partnersbank,
|
partnersbranch,
|
cooperationagreement,
|
discounttype: value
|
}
|
partnerForm.update()
|
this.handleShowTable(
|
'PROCUSTOMERSLIST',
|
'DISCOUNTPLANSETTING',
|
havecooperation === '1' && (value === '2' || value === '3')
|
)
|
return false
|
}
|
if (formName === 'projectNo') {
|
this.selProNo = value
|
partnerFormItems.forEach(item => {
|
if (item.name === 'discountagreement') {
|
item.show =
|
value !== '2018062500999999' &&
|
(this.selDiscounttype === '2' || this.selDiscounttype === '3')
|
}
|
})
|
if (value !== '2018062500999999') {
|
const discountOp = await this.getPartnersConfiguration('160', value)
|
const cooperationOp = await this.getPartnersConfiguration(
|
'170',
|
value
|
)
|
partnerFormItems.forEach(item => {
|
if (item.name === 'cooperationagreement') {
|
item.options = cooperationOp
|
}
|
if (item.name === 'discountagreement') {
|
item.options = discountOp
|
}
|
})
|
return false
|
}
|
}
|
const filedsNames = [
|
'partnersprovince',
|
'paymentprovince',
|
'contactpersonprovince',
|
'partnersbank',
|
'paymentbank',
|
'settlementaccount'
|
]
|
if (filedsNames.includes(formName)) {
|
this.handleChildSelect(formName, value, true)
|
return false
|
}
|
this.updateForms(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
partnerFormItems
|
)
|
partnerForm.$refs['createForm'].clearValidate()
|
},
|
// 处理子级联动
|
async handleChildSelect (formName, value, isChange = false) {
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
let partnerFormItems = [...partnerForm.formItems]
|
if (!value || value === ' ') {
|
return false
|
}
|
if (formName === 'projectNo') {
|
!isChange && (await this.getPartnersConfiguration('160', value))
|
!isChange && (await this.getPartnersConfiguration('170', value))
|
}
|
if (formName === 'partnersprovince') {
|
const partnerscityOp = await this.getCityCodeList(value)
|
partnerFormItems.forEach(item => {
|
if (item.name === 'partnerscity') {
|
item.options = partnerscityOp
|
}
|
})
|
if (isChange) {
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'defValues',
|
{
|
...partnerForm.formValues,
|
partnersprovince: value,
|
partnerscity: ' '
|
}
|
)
|
}
|
}
|
if (formName === 'settlementaccount') {
|
if (isChange) {
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'defValues',
|
{ ...partnerForm.formValues, settlementbankname: value }
|
)
|
}
|
}
|
if (formName === 'paymentprovince') {
|
const paymentcityOp = await this.getCityCodeList(value)
|
partnerFormItems.forEach(item => {
|
if (item.name === 'paymentcity') {
|
item.options = paymentcityOp
|
}
|
})
|
if (isChange) {
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'defValues',
|
{
|
...partnerForm.formValues,
|
paymentprovince: value,
|
paymentcity: ' '
|
}
|
)
|
}
|
}
|
if (formName === 'contactpersonprovince') {
|
const contactpersoncityOp = await this.getCityCodeList(value)
|
partnerFormItems.forEach(item => {
|
if (item.name === 'contactpersoncity') {
|
item.options = contactpersoncityOp
|
}
|
})
|
if (isChange) {
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'defValues',
|
{
|
...partnerForm.formValues,
|
contactpersonprovince: value,
|
contactpersoncity: ' '
|
}
|
)
|
}
|
}
|
if (formName === 'partnersbank') {
|
this.partnersbankValue = value
|
partnerForm.formValues.partnersbranch = ''
|
partnerForm.formValues.partnersbranchName = ''
|
if (isChange) {
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'defValues',
|
{
|
...partnerForm.formValues,
|
partnersbank: value,
|
partnersbranch: '',
|
partnersbranchName: ''
|
}
|
)
|
}
|
}
|
if (formName === 'paymentbank') {
|
this.paymentbankValue = value
|
partnerForm.formValues.paymentbranch = ''
|
partnerForm.formValues.paymentbranchName = ''
|
if (isChange) {
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'defValues',
|
{
|
...partnerForm.formValues,
|
paymentbank: value,
|
paymentbranch: '',
|
paymentbranchName: ''
|
}
|
)
|
}
|
}
|
this.handleShowContrl(
|
'PROCUSTOMERSLIST',
|
'PARTNERSINFOSETTING',
|
'formItems',
|
partnerFormItems
|
)
|
},
|
// 获取城市options
|
async getCityCodeList (itemno) {
|
if (!itemno || itemno === ' ') {
|
return
|
}
|
const cityRes = await qryCityCodeList({ itemno })
|
if (!cityRes || cityRes.code !== '00') {
|
return ''
|
}
|
if (itemno === 'cities') {
|
this.cities = cityRes.result
|
}
|
return cityRes.result
|
},
|
// 下拉
|
async getCondition (conditionName) {
|
const selRes = await qryCondition({ conditionName })
|
if (!selRes || selRes.code !== '00') {
|
return ''
|
}
|
this.cities = selRes.result
|
},
|
// 下拉区
|
async getAreaCodeList (itemno) {
|
const selRes = await qryAreaCodeList({ itemno })
|
if (!selRes || selRes.code !== '00') {
|
return ''
|
}
|
this.areaCodes = selRes.result
|
},
|
// 获取支行options
|
async getSelectSubBranch (bankcode, subBranchCode, key) {
|
const params = {
|
bankcode,
|
bankname: '',
|
subBranchCode,
|
currentPage: 1,
|
pageSize: 10
|
}
|
const subBranchRes = await selectSubBranch(params)
|
if (!subBranchRes || subBranchRes.code !== '00') {
|
return ''
|
}
|
const records = subBranchRes.result.records
|
records[0].checked = true
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
if (key === 'partnersbranch') {
|
this.partnersbankList = records
|
partnerForm.formValues.partnersbranchName = records[0].label
|
} else {
|
this.paymentbankList = records
|
partnerForm.formValues.paymentbranchName = records[0].label
|
}
|
partnerForm.update()
|
},
|
// 获取虚拟账号
|
handleGetValue () {
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
partnerForm.$refs['createForm'].validateField(
|
'enterprisename',
|
errorMessage => {
|
if (errorMessage) {
|
this.$message.warning('请输入企业工商登记名称')
|
return false
|
}
|
partnerForm.$refs['createForm'].validateField(
|
'socialcreditcode',
|
async errorMessage => {
|
if (errorMessage) {
|
this.$message.warning('请输入统一社会信用代码')
|
return false
|
}
|
const {
|
enterprisename,
|
socialcreditcode
|
} = partnerForm.formValues
|
const virtualAccountRes = await qryVirtualAccount({
|
enterprisename,
|
socialcreditcode
|
})
|
if (!virtualAccountRes && virtualAccountRes.code !== '00') {
|
return false
|
}
|
partnerForm.formValues.clearingvirtual =
|
virtualAccountRes.result.virtualno
|
partnerForm.update()
|
}
|
)
|
}
|
)
|
},
|
// 获取维度定义表单值
|
getFormsValue (checkflag) {
|
const baseForm = this.$refs.BASEINFO[0]
|
const matchForm = this.$refs.MATCHEDELEMENT[0]
|
const amountForm = this.$refs.AMOUNTSETTING[0]
|
const busniessForm = this.$refs.PROBUSINESSBSASE[0]
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
const operatingForm = this.$refs.OPERATINGSETTING[0]
|
const { objectno, productid } = this
|
const otherParams = {
|
checkflag,
|
objectno,
|
productid,
|
paymentbranch: partnerForm.formValues.paymentbranch || this.paymentbranchValue,
|
partnersbranch: partnerForm.formValues.partnersbranch || this.partnersbranchValue
|
}
|
let baseFormValue = {}
|
const showForms = baseForm.formItems.filter(
|
form => form && form.show !== false
|
)
|
showForms.forEach(form => {
|
baseFormValue[form.name] = baseForm.formValues[form.name]
|
})
|
return {
|
...this.getFormItemsValue(
|
baseForm.formItems,
|
baseForm.formValues,
|
DIMENSIONBASEINFODEF
|
),
|
...this.getFormItemsValue(
|
matchForm.formItems,
|
matchForm.formValues,
|
MATCHEDELEMENTDEFVALUE
|
),
|
...this.getFormItemsValue(
|
amountForm.formItems,
|
amountForm.formValues,
|
AMOUNTSETTINGDEFVALUE
|
),
|
...this.getFormItemsValue(
|
busniessForm.formItems,
|
busniessForm.formValues,
|
DIMENSIONPOSTLOANDEFVALUE
|
),
|
...this.getFormItemsValue(
|
partnerForm.formItems,
|
partnerForm.formValues,
|
PARTNERSINFOSETTINGDEFVALUE
|
),
|
...this.getFormItemsValue(
|
operatingForm.formItems,
|
operatingForm.formValues,
|
OPERATINGSETTINGDEFVALUE
|
),
|
...otherParams
|
}
|
},
|
// 获取显示表单对应的value值
|
getFormItemsValue (forms, values, defvalue) {
|
let newDfvalue = {}
|
Object.getOwnPropertyNames(defvalue).forEach(key => {
|
newDfvalue[key] = ''
|
})
|
const showForms = forms.filter(form => form && form.show !== false)
|
let formsValue = {}
|
showForms.forEach(form => {
|
formsValue[form.name] = values[form.name]
|
})
|
return { ...newDfvalue, ...formsValue }
|
},
|
async submitForm () {
|
await this.validateForms()
|
const {
|
isBaseForm,
|
isMatchForm,
|
isAmountForm,
|
isBusniessForm,
|
isPartnerForm,
|
isOperatingForm
|
} = this
|
if (
|
!isBaseForm ||
|
!isMatchForm ||
|
!isAmountForm ||
|
!isBusniessForm ||
|
!isPartnerForm ||
|
!isOperatingForm
|
) {
|
return false
|
}
|
this.saveDimensionsInfo(true)
|
},
|
getScreenWidth () {
|
this.$set(this, 'screenWidth', document.body.offsetWidth)
|
},
|
handleSelectorSubmit (selRow) {
|
const partnerForm = this.$refs.PARTNERSINFOSETTING[0]
|
console.log('this.bankFiled', this.bankFiled)
|
if (this.bankFiled === 'partnersbranch') {
|
partnerForm.formValues.partnersbranch = selRow.value
|
partnerForm.formValues.partnersbranchName = selRow.label
|
partnerForm.$refs['createForm'].clearValidate(['partnersbranchName'])
|
} else {
|
partnerForm.formValues.paymentbranch = selRow.value
|
partnerForm.formValues.paymentbranchName = selRow.label
|
partnerForm.$refs['createForm'].clearValidate(['paymentbranchName'])
|
}
|
partnerForm.update()
|
this.bankDialogVisible = false
|
},
|
handleSelectorCancel () {
|
this.bankDialogVisible = false
|
},
|
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 >=
|
scrollItems[i].offsetTop - scrollItems[0].offsetTop - 50
|
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="postcss" scoped>
|
.left {
|
width: 160px;
|
height: 100%;
|
position: fixed;
|
outline: 1px solid #eeeeee;
|
background: #fff;
|
z-index: 999;
|
}
|
.right {
|
position: absolute;
|
width: calc(100% - 220px);
|
padding: 20px 30px;
|
background: rgba(249, 249, 249, 1);
|
right: 0;
|
& >>> .el-dialog__wrapper {
|
z-index: 2006;
|
& .dimension_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);
|
span {
|
margin-left: -9px;
|
}
|
}
|
}
|
}
|
}
|
}
|
& >>> .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;
|
}
|
}
|
& >>> .bank_dialog {
|
width: 850px;
|
}
|
}
|
|
.scroll_item {
|
min-height: 200px;
|
background: rgba(249, 249, 249, 1);
|
padding-bottom: 10px;
|
}
|
|
.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;
|
}
|
}
|
.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;
|
}
|
.product_submit_dialog {
|
& >>> .el-button--default {
|
width: 120px;
|
height: 30px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
}
|
</style>
|
