huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 15 Wiki Activity

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

Browse Source
dev
Jo 3 years ago
parent 72cb889243
commit 1315f5489c
4 changed files with 103 additions and 153 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/utils/api.js
  2. 68
      src/views/data/Framework.vue
  3. 56
      src/views/data/Introduce.vue
  4. 131
      src/views/data/Product.vue

1
src/utils/api.js
Unescape View File

@ -163,6 +163,7 @@ export default {
staticPreview: `${host}/data/data/staticPreview`, staticPreview: `${host}/data/data/staticPreview`,
editTableName: `${host}/data/data/table/editTableName`, editTableName: `${host}/data/data/table/editTableName`,
updateTableCommit: `${host}/data/data/updateTableCommit`, updateTableCommit: `${host}/data/data/updateTableCommit`,
getLevel: `${host}/data/category/getLevel`,
// 产品管理 // 产品管理
deleteProduct: `${host}/data/data/product/delete`, deleteProduct: `${host}/data/data/product/delete`,

68
src/views/data/Framework.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="plus"> <div class="plus">
<i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i> <i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i>
</div> </div>
<el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick"> <el-tree ref="type" :load="getType" lazy node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick">
<span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-node" slot-scope="{ node, data }">
<span :title="node.label">{{ node.label }}</span> <span :title="node.label">{{ node.label }}</span>
<span class="actions"> <span class="actions">
@ -70,7 +70,8 @@
<div style="overflow:auto;height: 558px;width:330px;padding:15px;background:#fff" ref="typeTreeWrap" @scroll="loadType"> <div style="overflow:auto;height: 558px;width:330px;padding:15px;background:#fff" ref="typeTreeWrap" @scroll="loadType">
<el-tree <el-tree
ref="typeTree" ref="typeTree"
:data="importTypeList" :load="getType"
lazy
node-key="id" node-key="id"
accordion accordion
:default-expanded-keys="defaultTypeActive" :default-expanded-keys="defaultTypeActive"
@ -156,10 +157,9 @@
export default { export default {
data() { data() {
return { return {
typeList: [],
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'categoryName'
}, },
defaultActive: [], defaultActive: [],
added: false, added: false,
@ -199,7 +199,10 @@ export default {
nameVisible: false, nameVisible: false,
curRow: {}, curRow: {},
headVisible: false, headVisible: false,
editIndex: 0 editIndex: 0,
node: [],
resolve: null,
curNode: {}
}; };
}, },
watch: { watch: {
@ -210,37 +213,20 @@ export default {
},500) },500)
} }
}, },
mounted(){ mounted(){},
this.getType()
},
methods: { methods: {
getType(){ getType(node, resolve){
this.$post(this.api.getTableByClassification).then(res => { this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => {
// 递归赋值,同时添加层级标识 const list = res.list
function handleId(data,level = 0){ this.node = node
data.map(n => { this.resolve = resolve
n.id = String(n.id) resolve(list)
n.label = n.categoryName // 取第一个分类的id
n.level = level + 1 if (!this.added && list.length) {
if(n.children.length){ this.categoryId = list[0].id
handleId(n.children,n.level) this.defaultActive = [list[0].id]
}
})
}
handleId(res)
this.typeList = res
if (!this.added) {
if(res[0].children.length){
this.categoryId = res[0].children[0].id
this.defaultActive = [res[0].children[0].id]
}else{
this.categoryId = res[0].id
this.defaultActive = [res[0].id]
}
// 取第一个分类的id
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.type.setCurrentKey(res[0].children[0].id) this.$refs.type.setCurrentKey(list[0].id)
}) })
} }
this.added = false this.added = false
@ -274,6 +260,7 @@ export default {
this.getData() this.getData()
}, },
addType(row){ addType(row){
this.categoryId = row.data.id
if (row) this.defaultActive = [row.data.id] if (row) this.defaultActive = [row.data.id]
this.typeVisible = true this.typeVisible = true
this.levelId = row ? row.data.id : 0 this.levelId = row ? row.data.id : 0
@ -282,6 +269,8 @@ export default {
this.typeVisible = true this.typeVisible = true
this.id = row.data.id this.id = row.data.id
this.categoryName = row.data.categoryName this.categoryName = row.data.categoryName
this.curNode = row
this.categoryId = row.data.id
}, },
delType(row){ delType(row){
// 该分类下的数据表已存在于产品管理中，是否确认删除？ // 该分类下的数据表已存在于产品管理中，是否确认删除？
@ -291,7 +280,7 @@ export default {
this.added = true this.added = true
this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => { this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => {
this.$message.success('删除成功') this.$message.success('删除成功')
this.getType() this.$refs.type.remove(row)
}).catch(res => {}) }).catch(res => {})
}).catch(() => {}) }).catch(() => {})
}, },
@ -305,7 +294,9 @@ export default {
categoryName: this.categoryName categoryName: this.categoryName
}).then(res => { }).then(res => {
this.$message.success('编辑成功') this.$message.success('编辑成功')
this.getType() this.curNode.data.categoryName = this.categoryName
this.$refs.type.updateKeyChildren(this.id, this.curNode)
this.getType(this.node, this.resolve)
this.typeVisible = false this.typeVisible = false
setTimeout(() => { setTimeout(() => {
this.submited = false this.submited = false
@ -319,7 +310,10 @@ export default {
categoryName: this.categoryName categoryName: this.categoryName
}).then(res => { }).then(res => {
this.$message.success('添加成功') this.$message.success('添加成功')
this.getType() this.getType(this.node, this.resolve)
let node = this.$refs.type.getNode(this.categoryId)
node.loaded = false
node.expand()
this.typeVisible = false this.typeVisible = false
setTimeout(() => { setTimeout(() => {
this.submited = false this.submited = false

56
src/views/data/Introduce.vue
Unescape View File

@ -2,7 +2,7 @@
<div> <div>
<el-container> <el-container>
<el-aside width="350px"> <el-aside width="350px">
<el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @node-click="typeClick"></el-tree> <el-tree ref="type" :load="getData" lazy node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick"></el-tree>
</el-aside> </el-aside>
<el-main style="padding-top: 0"> <el-main style="padding-top: 0">
@ -56,10 +56,9 @@
export default { export default {
data() { data() {
return { return {
typeList: [],
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'categoryName'
}, },
defaultActive: [], defaultActive: [],
editing: false, editing: false,
@ -69,7 +68,10 @@ export default {
introduceText: '', introduceText: '',
categoryId: '', categoryId: '',
keywordList: [], keywordList: [],
newKeyword: '' newKeyword: '',
node: [],
resolve: null,
curNode: {}
}; };
}, },
watch: { watch: {
@ -80,42 +82,22 @@ export default {
},500) },500)
} }
}, },
mounted(){ mounted(){},
this.getData()
},
methods: { methods: {
getData(){ getData(node, resolve){
// 获取分类 // 获取分类
this.$post(this.api.getTableByClassification).then(res => { this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => {
// 递归处理id和label const list = res.list
function handleId(data){ this.node = node
data.map(n => { this.resolve = resolve
n.id = String(n.id) resolve(list)
n.label = n.categoryName
if(n.children.length){
handleId(n.children)
}
})
}
handleId(res)
this.typeList = res
// 取首个的id和简介 // 取首个的id和简介
if (!this.edited) { if (!this.edited && list.length) {
if(res[0].children.length){ this.categoryId = list[0].id
let item = res[0].children[0] this.dataSource = list[0].dataSource
this.categoryId = item.id this.defaultActive = [list[0].id]
this.dataSource = res[0].children[0].dataSource this.introduceText = list[0].introduce
this.defaultActive = [item.id] this.introduce = list[0].introduce
this.introduceText = item.introduce
this.introduce = item.introduce
}else{
this.categoryId = res[0].id
this.dataSource = res[0].dataSource
this.defaultActive = [res[0].id]
this.introduceText = res[0].introduce
this.introduce = res[0].introduce
}
} }
this.getKeyword() this.getKeyword()
}).catch(res => {}) }).catch(res => {})

131
src/views/data/Product.vue
Unescape View File

@ -81,14 +81,10 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="已选数据"> <el-form-item label="已选数据">
<el-button type="primary" @click="configData">配置数据权限</el-button> <el-button type="primary" @click="configData" style="margin-bottom: 10px;">配置数据权限</el-button>
<div class="type-wrap" ref="typeWrap" @scroll="loadType" v-if='configChecked.length>0'> <!-- <div class="type-wrap" ref="typeWrap" @scroll="loadType" v-if='checkedIds.length>0'> -->
<el-tree ref="type" :data="typeList" show-checkbox accordion node-key="id" :default-expanded-keys="checkedIds" :default-checked-keys="checkedIds" :props="defaultProps" @node-expand="typeExpand"> <el-tree ref="type" :data="typeList" accordion node-key="id" :default-expanded-keys="checkedIds" :default-checked-keys="checkedIds" :props="defaultProps" @node-expand="typeExpand"></el-tree>
<span class="custom-tree-node" slot-scope="{ node, data }"> <!-- </div> -->
<span :title="node.label">{{ node.label }}</span>
</span>
</el-tree>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer" v-if="!isDetail"> <span slot="footer" class="dialog-footer" v-if="!isDetail">
@ -100,7 +96,7 @@
<el-dialog title="数据配置" :visible.sync="configVisible" width="70%" center @close="closeConfig" :close-on-click-modal="false"> <el-dialog title="数据配置" :visible.sync="configVisible" width="70%" center @close="closeConfig" :close-on-click-modal="false">
<el-container style="padding: 20px 0 20px 20px;background-color: #f0f0f0;"> <el-container style="padding: 20px 0 20px 20px;background-color: #f0f0f0;">
<el-aside width="300px"> <el-aside width="300px">
<el-tree style="margin: 10px;" ref="typeConfig" :data="typeConfigList" show-checkbox node-key="id" accordion :default-expanded-keys="configIds" :default-checked-keys="configIds" :current-node-key="categoryId" :props="defaultProps" highlight-current @current-change="typeConfigClick"> <el-tree style="margin: 10px;" ref="typeConfig" :load="getConfigType" lazy show-checkbox node-key="id" accordion :default-expanded-keys="configIds" :default-checked-keys="configIds" :current-node-key="categoryId" :props="defaultProps" highlight-current @current-change="typeConfigClick">
<span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-node" slot-scope="{ node, data }">
<span :title="node.label">{{ node.label }}</span> <span :title="node.label">{{ node.label }}</span>
</span> </span>
@ -185,7 +181,7 @@ export default {
typeList: [], typeList: [],
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'categoryName'
}, },
checkedIds: [], checkedIds: [],
isDetail: false, isDetail: false,
@ -203,7 +199,6 @@ export default {
configIds: [], configIds: [],
updateTime: '', updateTime: '',
keywordConfig: '', keywordConfig: '',
typeConfigList: [],
pageConfig: 1, pageConfig: 1,
pageSizeConfig: 10, pageSizeConfig: 10,
totalConfig: 0, totalConfig: 0,
@ -260,7 +255,7 @@ export default {
this.getData() this.getData()
}, },
getTable(n,isConcat){ getTable(n,isConcat){
this.$post(`${this.api.getIdQueryTable}?categoryId=${n.originId}&showName=&pageNum=${n.typePage}&pageSize=${this.typeUnit}&updateTime=`).then(res => { this.$post(`${this.api.getIdQueryTable}?categoryId=${n.id}&showName=&pageNum=${n.typePage}&pageSize=${this.typeUnit}&updateTime=`).then(res => {
let list = res.pageList.records let list = res.pageList.records
list.map(n => { list.map(n => {
n.label = n.showName n.label = n.showName
@ -278,40 +273,25 @@ export default {
}).catch(res => {}) }).catch(res => {})
}, },
// 获取分类 // 获取分类
getType(){ getType(node, resolve){
this.productVisible = true this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => {
this.$post(this.api.getTableByClassification).then(res => {
const that = this const that = this
function handleId(data){ const list = res.list
data.map(n => { this.node = node
n.originId = n.id this.resolve = resolve
n.id = String(++that.typeIndex) resolve(list)
n.label = n.categoryName
n.disabled = true
if(n.children.length){
handleId(n.children)
}
})
}
handleId(res)
// 获取分类下的表 // 获取分类下的表
function getTable(data){ function getTable(data){
data.map(n => { data.map(n => {
if(n.children.length){ if(n.children && n.children.length){
getTable(n.children) getTable(n.children)
}else{ }else{
n.typePage = 1 n.typePage = 1
n.disabled = true
that.getTable(n) that.getTable(n)
} }
}) })
} }
getTable(res) getTable(list)
setTimeout(() => {
this.typeList = res
},500)
this.importVisible = true this.importVisible = true
}).catch(res => {}) }).catch(res => {})
}, },
@ -382,17 +362,20 @@ export default {
this.productName = data.productName this.productName = data.productName
this.market = data.market this.market = data.market
this.configChecked = data.tableId this.configChecked = data.tableId
this.checkedIds = this.handleType(data.tableId.split(','),this.typeList) // this.checkedIds = this.handleType(data.tableId.split(','),this.typeList)
this.$refs.type.setCheckedNodes(this.checkedIds) this.configIds = data.tableId.split(',')
console.log('getDetail', this.configIds)
// this.$refs.type.setCheckedNodes(this.checkedIds)
}).catch(res => {}) }).catch(res => {})
}, },
add(){ add(){
this.getType() this.productVisible = true
this.id = '' this.id = ''
this.checkedIds = [] this.checkedIds = []
}, },
edit(row){ edit(row){
this.getType() this.productVisible = true
// this.getType()
this.id = row.id this.id = row.id
this.userId = row.userId this.userId = row.userId
this.getDetail() this.getDetail()
@ -416,7 +399,8 @@ export default {
}, },
preview(row){ preview(row){
this.isDetail = true this.isDetail = true
this.getType() this.productVisible = true
// this.getType()
this.id = row.id this.id = row.id
this.getDetail() this.getDetail()
}, },
@ -476,7 +460,7 @@ export default {
list.map((n,i) => { list.map((n,i) => {
if(n.tableLen && n.tableLen > n.children.length){ if(n.tableLen && n.tableLen > n.children.length){
// pageSize传10000是要查询全部表,后续如果数据多了,则按需调整 // pageSize传10000是要查询全部表,后续如果数据多了,则按需调整
this.$post(`${this.api.getIdQueryTable}?categoryId=${n.originId}&showName=&pageNum=1&pageSize=10000&updateTime=`).then(res => { this.$post(`${this.api.getIdQueryTable}?categoryId=${n.id}&showName=&pageNum=1&pageSize=10000&updateTime=`).then(res => {
let tableList = res.pageList.records let tableList = res.pageList.records
tableList.map(n => { tableList.map(n => {
this.tableId.push(String(n.id)) this.tableId.push(String(n.id))
@ -498,25 +482,26 @@ export default {
if(!this.productName) return this.$message.warning('请输入数据产品名称') if(!this.productName) return this.$message.warning('请输入数据产品名称')
if(!this.market) return this.$message.warning('请输入市场价格') if(!this.market) return this.$message.warning('请输入市场价格')
if(isNaN(this.market)) return this.$message.warning('市场价格请输入数字') if(isNaN(this.market)) return this.$message.warning('市场价格请输入数字')
if(!this.$refs.type.getCheckedNodes().length) return this.$message.warning('请选择数据') if(!this.checkedIds.length) return this.$message.warning('请选择数据')
this.submited = true this.submited = true
this.getIds().then(() => { // this.getIds().then(() => {
let tableId = Array.from(new Set(this.tableId)) // let tableId = Array.from(new Set(this.tableId))
if(!tableId.length) return this.$message.warning('请选择数据') // if(!tableId.length) return this.$message.warning('请选择数据')
// return console.log(333, this.checkedIds)
let data = { let data = {
id: this.id, id: this.id,
productName: this.productName, productName: this.productName,
market: this.market, market: this.market,
tableId: tableId.join(), tableId: this.checkedIds.join(),
userId: this.userId, userId: this.userId,
userName: this.userName, userName: this.userName,
createTime: '', createTime: '',
orderNum: '', orderNum: '',
status: '', status: '',
tableNum: tableId.length, tableNum: this.checkedIds.length,
updateTime: '', updateTime: ''
} }
if(this.id){ if(this.id){
this.$post(this.api.updateProduct,data).then(res => { this.$post(this.api.updateProduct,data).then(res => {
@ -537,19 +522,19 @@ export default {
this.submited = false this.submited = false
}) })
} }
}) // })
}, },
configData(){ configData(){
this.configVisible = true this.configVisible = true
this.getConfigType() if (this.id) {
// let list = this.$refs.type.getCheckedNodes()
let list = this.$refs.type.getCheckedNodes() // let configIds = []
let configIds = [] // list.map(n => {
list.map(n => { // if(!n.name) configIds.push(n.id)
if(!n.name) configIds.push(n.originId) // })
}) // this.configIds = configIds
this.configIds = configIds }
}, },
typeConfigClick(data,node){ typeConfigClick(data,node){
this.categoryId = data.id this.categoryId = data.id
@ -560,23 +545,12 @@ export default {
this.$refs.typeConfig.setCheckedNodes([]) this.$refs.typeConfig.setCheckedNodes([])
}, },
// 获取配置数据里面的分类 // 获取配置数据里面的分类
getConfigType(){ getConfigType(node, resolve){
this.$post(this.api.getTableByClassification).then(res => { this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => {
function handleId(data){ const list = res.list
data.map(n => { resolve(list)
n.id = String(n.id) if(list.length){
n.label = n.categoryName this.categoryId = list[0].id
if(n.children.length){
handleId(n.children)
}
})
}
handleId(res)
this.typeConfigList = res
if(res[0].children.length){
this.categoryId = res[0].children[0].id
}else{
this.categoryId = res[0].id
} }
this.getConfigTable() this.getConfigTable()
}).catch(res => {}) }).catch(res => {})
@ -626,7 +600,7 @@ export default {
list.map(n => { list.map(n => {
if(n.children && n.children.length){ if(n.children && n.children.length){
this.getTableId(n.children) this.getTableId(n.children)
if(checked.includes(n.originId) && n.children[0].name){ if(checked.includes(n.id) && n.children[0].name){
this.configCheckedTableId = [...this.configCheckedTableId,...n.children.map(n => n.id)] this.configCheckedTableId = [...this.configCheckedTableId,...n.children.map(n => n.id)]
}else{ }else{
this.getTableId(n.children) this.getTableId(n.children)
@ -635,11 +609,10 @@ export default {
}) })
}, },
confirmConfig(){ confirmConfig(){
this.configChecked = this.$refs.typeConfig.getCheckedKeys().map(n => Number(n)) this.checkedIds = this.$refs.typeConfig.getCheckedKeys().map(n => Number(n))
this.getTableId(this.typeList)
this.checkedIds = Array.from(new Set(this.configCheckedTableId))
this.configVisible = false this.configVisible = false
this.$refs.type.setCheckedNodes(this.checkedIds) console.log(22, this.$refs.typeConfig.getCheckedNodes())
this.typeList = this.$refs.typeConfig.getCheckedNodes()
} }
} }
}; };

Write Preview
Loading…
Cancel
Save