<template>
|
<div>
|
<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"
|
@handleElmentChange="handleElmentChange" />
|
</div>
|
</div>
|
<NperConfigList v-if="item.name === 'NPERCONFIGLIST'"
|
ref="nperRef"
|
:edit="type === 'edit'" />
|
</div>
|
<el-row class="right_opreat">
|
<el-button class="back-button"
|
@click="handleBtnBack"
|
:disabled="subLoading">返回</el-button>
|
<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="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 { PRODUCTFREEMENUS } from '../utils/menusConfig.js'
|
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 NperConfigList from './components/NperConfigList'
|
import { qryCurrentInputUserInfo, addOrUpdateCusPaymentType, qryCondition, qryCusPaymentTypeInfo } from '../api/productManage.api.js'
|
export default {
|
data () {
|
return {
|
screenWidth: document.documentElement.clientWidth || 1660, // 屏幕宽度
|
menuItems: [...PRODUCTFREEMENUS(true)],
|
subLoading: false,
|
rowSerialno: this.$route.query.serialno || '',
|
serialno: this.$route.query.type === 'edit' ? this.$route.query.serialno : '', // 保存基本信息返回的流水号
|
type: this.$route.query.type || '',
|
commitDialogVisible: false
|
}
|
},
|
components: {
|
LeftMenus,
|
ModuleTitle,
|
MenusTitle,
|
CreateForms,
|
NperConfigList
|
},
|
computed: {},
|
async mounted () {
|
window.addEventListener('scroll', this.onScroll)
|
window.addEventListener('resize', this.getScreenWidth)
|
this.$router.afterEach((to, from, next) => {
|
window.scrollTo(0, 0)
|
})
|
await this.getCurrentInputUserInfo()
|
await this.getCondition('IsInUse', 'status')
|
this.type === 'edit' && this.qryCusPaymentTypeInfo()
|
},
|
destroyed () {
|
window.removeEventListener('scroll', this.onScroll)
|
window.removeEventListener('resize', this.getScreenWidth)
|
},
|
deactivated () { },
|
methods: {
|
// 返回列表
|
backList (type) {
|
this.$router.go(-1)
|
},
|
handleSelOnChange () { },
|
handleElmentChange () { },
|
handleBtnBack () { },
|
async saveBase () {
|
const baseForm = this.$refs.BASEINFO[0]
|
const {
|
componenremark,
|
effectdate,
|
failuredate,
|
paymentname,
|
paymentno,
|
status
|
} = baseForm.formValues
|
const params = {
|
componenremark,
|
effectdate,
|
failuredate,
|
paymentname,
|
paymentno,
|
serialno: this.serialno || '',
|
status
|
}
|
const baseRes = await addOrUpdateCusPaymentType(params)
|
if (!baseRes || baseRes.code !== '00') {
|
return false
|
}
|
this.serialno = baseRes.result.serialNo
|
const nperRef = this.$refs.nperRef[0]
|
nperRef.handleSave()
|
},
|
handleSave () {
|
const baseForm = this.$refs.BASEINFO[0]
|
baseForm.$refs['createForm'].validate(async valid => {
|
if (valid) {
|
this.saveBase()
|
} else {
|
this.$message.warning('请完基本信息必填项！')
|
return false
|
}
|
})
|
},
|
submitForm () { },
|
enterMessages () { },
|
// 获取信息
|
async qryCusPaymentTypeInfo () {
|
const { rowSerialno } = this
|
if (!rowSerialno) {
|
return false
|
}
|
const params = { serialno: rowSerialno }
|
const detailRes = await qryCusPaymentTypeInfo(params)
|
if (!detailRes || detailRes.code !== '00') {
|
return false
|
}
|
const result = detailRes.result
|
const itemMenus = [...this.menuItems].map(item => {
|
const newItem = { ...item }
|
if (newItem.name === 'BASEINFO') {
|
const newChildren = newItem.children.map(child => {
|
const newChild = { ...child }
|
newChild.defValues = { ...newChild.defValues, ...result }
|
return newChild
|
})
|
newItem.children = newChildren
|
}
|
return newItem
|
})
|
this.$set(this, 'menuItems', itemMenus)
|
},
|
getScreenWidth () {
|
this.$set(this, 'screenWidth', document.body.offsetWidth)
|
},
|
async getCurrentInputUserInfo () {
|
const infoRes = await qryCurrentInputUserInfo()
|
if (!infoRes || infoRes.code !== '00') {
|
return
|
}
|
this.infoData = infoRes.result
|
},
|
/**
|
* 获取下拉选择项
|
*/
|
async getCondition (conditionName, name) {
|
const params = { conditionName }
|
const res = await qryCondition(params)
|
if (res.code !== '00') {
|
return false
|
}
|
const itemMenus = [...this.menuItems].map(item => {
|
const newItem = { ...item }
|
if (newItem.name === 'BASEINFO') {
|
const newChildren = newItem.children.map(child => {
|
const newChild = { ...child }
|
const newFormItems = newChild.formItems.map(forms => {
|
const newForms = { ...forms }
|
if (newForms.name === name) {
|
newForms.options = res.result
|
}
|
return newForms
|
})
|
newChild.formItems = newFormItems
|
newChild.defValues = { ...newChild.defValues, ...this.infoData, inputdata: this.infoData.inputtime, updatedate: this.infoData.updatetime }
|
return newChild
|
})
|
newItem.children = newChildren
|
}
|
return newItem
|
})
|
this.$set(this, 'menuItems', itemMenus)
|
},
|
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="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;
|
& .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>
|
