huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

数据分类改成懒加载（未完成）

Browse Source
dev
Jo 3 years ago
parent 6f64868177
commit 8adefc799e
4 changed files with 94 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/api/index.js
  2. 35
      src/components/menuTree/index.vue
  3. 186
      src/pages/data/list/index.vue
  4. 2
      src/setting.js

1
src/api/index.js
Unescape View File

@ -79,6 +79,7 @@ export default {
downloadAgain:`/data/data/downloadAgain`, downloadAgain:`/data/data/downloadAgain`,
isDownload:`/data/data/product/isDownload`, isDownload:`/data/data/product/isDownload`,
getTableTime:`/data/data/tableTime/getTableTime`, getTableTime:`/data/data/tableTime/getTableTime`,
getLevel: `/data/category/getLevel`,
// 数据操作记录 // 数据操作记录
queryAccumulate:`/data/data/dataRecord/queryAccumulate`, queryAccumulate:`/data/data/dataRecord/queryAccumulate`,

35
src/components/menuTree/index.vue
Unescape View File

@ -0,0 +1,35 @@
<template>
<div>
<template v-for="item in this.menuList">
<el-submenu :key="item.id" :index="item.id" v-if="item.children && item.children.length">
<template slot="title">
<span slot="title">{{item.categoryName}}</span>
</template>
<menuTree :menuList="item.children"></menuTree>
</el-submenu>
<el-menu-item :key="item.id" :index="item.id" v-else>
<span slot="title">{{item.categoryName}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: 'menuTree',
props: {
menuList: {
type: Array,
default: []
}
},
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>

186
src/pages/data/list/index.vue
Unescape View File

@ -2,90 +2,7 @@
<div class="wrap"> <div class="wrap">
<div class="left"> <div class="left">
<el-menu class="menu" ref="type" @open="selectType" @select="selectType" unique-opened :default-active="defaultType" :default-openeds="defaultOpenType"> <el-menu class="menu" ref="type" @open="selectType" @select="selectType" unique-opened :default-active="defaultType" :default-openeds="defaultOpenType">
<template v-for="item in typeList"> <menuTree :menuList="typeList"></menuTree>
<!-- 如果第一层有子菜单，则继续循环 -->
<template v-if="item.children.length">
<el-submenu :index="item.id" :key="item.id">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title" :title="item.categoryName">{{ item.categoryName }}</span>
</template>
<!-- 第二层 -->
<template v-for="subItem in item.children">
<!-- 如果第二层有子菜单，则继续循环 -->
<template v-if="subItem.children.length">
<el-submenu :index="subItem.id" :key="subItem.id">
<template slot="title">
<span slot="title" :title="subItem.categoryName">{{ subItem.categoryName }}</span>
</template>
<!-- <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item> -->
<!-- 第三层 -->
<template v-for="subItem2 in subItem.children">
<!-- 如果第三层有子菜单，则继续循环 -->
<template v-if="subItem2.children.length">
<el-submenu :index="subItem2.id" :key="subItem2.id">
<template slot="title">
<span slot="title" :title="subItem2.categoryName">{{ subItem2.categoryName }}</span>
</template>
<!-- <el-menu-item v-for="(fourItem,i) in subItem2.children" :key="i" :index="fourItem.index">{{ fourItem.title }}</el-menu-item> -->
<!-- 第四层 -->
<template v-for="subItem3 in subItem2.children">
<!-- 如果第四层有子菜单，则继续循环 -->
<template v-if="subItem3.children">
<el-submenu :index="subItem3.id" :key="subItem3.id">
<span slot="title" :title="subItem3.categoryName">
{{ subItem3.categoryName }}
</span>
<template v-for="subItem4 in subItem3.children">
<!-- 如果第五层有子菜单，则继续循环 -->
<template v-if="subItem4.children && subItem4.children.length">
<el-submenu :index="subItem4.id" :key="subItem4.id">
<span slot="title" :title="subItem4.categoryName">
{{ subItem4.categoryName }}
</span>
<template class="level-6" v-for="subItem5 in subItem4.children" :index="subItem5.id">
<!-- 如果第六层有子菜单，则继续循环 -->
<template v-if="subItem5.children && subItem5.children.length">
<el-submenu :index="subItem5.id" :key="subItem5.id">
<span slot="title" :title="subItem5.categoryName">
{{ subItem5.categoryName }}
</span>
<el-menu-item v-for="(fiveItem,i) in subItem5.children" :key="i" :index="fiveItem.id">{{ fiveItem.categoryName }}</el-menu-item>
</el-submenu>
</template>
<!-- 如果第五层没有子菜单 -->
<el-menu-item :index="subItem5.id" :key="subItem5.id" :title="subItem5.categoryName">{{ subItem5.categoryName }}</el-menu-item>
</template>
</el-submenu>
</template>
<!-- 如果第五层没有子菜单 -->
<el-menu-item v-else :index="subItem4.id" :key="subItem4.id" :title="subItem4.categoryName">{{ subItem4.categoryName }}</el-menu-item>
</template>
</el-submenu>
</template>
<!-- 如果第四层没有子菜单 -->
<el-menu-item v-else :index="subItem3.id" :key="subItem3.id" :title="subItem3.categoryName">{{ subItem3.categoryName }}</el-menu-item>
</template>
</el-submenu>
</template>
<!-- 如果第三层没有子菜单 -->
<el-menu-item v-else :index="subItem2.id" :key="subItem2.id" :title="subItem2.categoryName">{{ subItem2.categoryName }}</el-menu-item>
</template>
</el-submenu>
</template>
<!-- 如果第二层没有子菜单 -->
<el-menu-item v-else :index="subItem.id" :key="subItem.id" :title="subItem.categoryName">{{ subItem.categoryName }}</el-menu-item>
</template>
</el-submenu>
</template>
<!-- 如果第一层没有子菜单 -->
<template v-else>
<el-menu-item :index="item.id" :key="item.id">
<i :class="item.icon"></i>
<span slot="title" :title="item.categoryName">{{ item.categoryName }}</span>
</el-menu-item>
</template>
</template>
</el-menu> </el-menu>
</div> </div>
<div class="right"> <div class="right">
@ -181,9 +98,13 @@ import { mapState } from 'vuex'
import axios from 'axios' import axios from 'axios'
import util from '@/libs/util' import util from '@/libs/util'
import Setting from '@/setting' import Setting from '@/setting'
import menuTree from '@/components/menuTree'
let startTimeLimit = '' let startTimeLimit = ''
let endTimeLimit = '' let endTimeLimit = ''
export default { export default {
components: {
menuTree
},
data() { data() {
return { return {
that: this, that: this,
@ -273,10 +194,11 @@ export default {
} }
}, },
methods: { methods: {
getType() { getType(id = 0) {
// 获取分类 // 获取分类
this.$post(this.api.getTableByClassification).then(res => { this.$post(`${this.api.getLevel}?parentId=${id}`).then(res => {
let typeId = this.typeId // 取得传值的id const list = res.list
let typeId = this.typeId // 取得首页传过来的id
let introduce = ''// 对应股票的介绍，规则为无children则取上级 let introduce = ''// 对应股票的介绍，规则为无children则取上级
let dataSource = '' // 数据来源，同上 let dataSource = '' // 数据来源，同上
let action let action
@ -295,20 +217,25 @@ export default {
if (i) isFirst = false if (i) isFirst = false
if (typeId && e.id == typeId) {// 若id匹配 if (typeId && e.id == typeId) {// 若id匹配
action = String(e.id) action = String(e.id)
if (e.children.length) {// 若有下级 if (e.children && e.children.length) {// 若有下级
if (!e.children[0].children.length) {// 找到下级的下级若无子级，则赋值勾选 if (!e.children[0].children.length) {// 找到下级的下级若无子级，则赋值勾选
action = String(e.children[0].id) action = String(e.children[0].id)
} else {// 直接赋值 } else {// 直接赋值
action = String(e.children[0].children[0].id) action = String(e.children[0].children[0].id)
} }
} }
} else if (e.children.length) { // id不匹配，递归找 } else if (e.children && e.children.length) { // id不匹配，递归找
actionId(e.children) actionId(e.children)
} }
}) })
} }
this.typeList = res if (id) {
actionId(res) this.typeList[0].children = list
} else {
this.typeList = list
}
console.log(11, this.typeList)
actionId(list)
this.defaultType = action this.defaultType = action
this.introduce = introduce this.introduce = introduce
this.dataSource = dataSource this.dataSource = dataSource
@ -354,44 +281,45 @@ export default {
let introduce = '' let introduce = ''
let dataSource = '' let dataSource = ''
this.keyword = '' this.keyword = ''
let list = this.typeList this.getType(index)
let select = '' // let list = this.typeList
// 获取最里层的第一个子级id // let select = ''
function getDeepest(data) { // // 获取最里层的第一个子级id
if (data[0].children && data[0].children.length) { // function getDeepest(data) {
getDeepest(data[0].children) // if (data[0].children && data[0].children.length) {
} else { // getDeepest(data[0].children)
select = data[0].id // } else {
if (data[0].introduce) introduce = data[0].introduce // select = data[0].id
if (data[0].dataSource) dataSource = data[0].dataSource // if (data[0].introduce) introduce = data[0].introduce
} // if (data[0].dataSource) dataSource = data[0].dataSource
} // }
function handleData(data) { // }
data.map((n, i) => { // function handleData(data) {
// 匹配到点击的分类，默认展开子级第一个分类 // data.map((n, i) => {
if (n.id == index) { // // 匹配到点击的分类，默认展开子级第一个分类
// 如果有子级，则递归取到最下面的第一级子级id，如果没有子级，则取当前id // if (n.id == index) {
if (n.children.length) { // // 如果有子级，则递归取到最下面的第一级子级id，如果没有子级，则取当前id
getDeepest(n.children) // if (n.children.length) {
} else { // getDeepest(n.children)
select = index // } else {
if (n.introduce) introduce = n.introduce // select = index
if (n.dataSource) dataSource = n.dataSource // if (n.introduce) introduce = n.introduce
} // if (n.dataSource) dataSource = n.dataSource
} else { // }
handleData(n.children) // } else {
} // handleData(n.children)
}) // }
} // })
handleData(list) // }
if (!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce // handleData(list)
if (!dataSource) dataSource = list.find(n => n.id == indexPath[0]).dataSource // if (!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce
this.defaultType = select // if (!dataSource) dataSource = list.find(n => n.id == indexPath[0]).dataSource
this.introduce = introduce // this.defaultType = select
this.dataSource = dataSource // this.introduce = introduce
this.previewHead = [] // this.dataSource = dataSource
this.previewData = [] // this.previewHead = []
this.initData() // this.previewData = []
// this.initData()
}, },
previewCurrentChange(val) { previewCurrentChange(val) {
this.currentRow = val this.currentRow = val

2
src/setting.js
Unescape View File

@ -24,7 +24,7 @@ const Setting = {
showProgressBar: true, showProgressBar: true,
// 接口请求地址 // 接口请求地址
// apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000',// 佳坤 // apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000',// 佳坤
apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000', apiBaseURL: env === 'development' ? 'http://39.108.250.202:9000' : 'http://39.108.250.202:9000',
// 接口请求返回错误时，弹窗的持续时间，单位：秒 // 接口请求返回错误时，弹窗的持续时间，单位：秒
modalDuration: 3, modalDuration: 3,
// 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice

Write Preview
Loading…
Cancel
Save