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

数据架构导入

Browse Source
dev_2022-03-03
yujialong 3 years ago
parent ae33bde9c1 95b1b0f00f
commit fbb64f6dcf
1 changed files with 152 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 179
      src/views/data/Framework.vue

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

@ -1,6 +1,7 @@
<template>
<div class="wrap">
<el-container>
<!-- 左边的分类 -->
<el-aside width="300px">
<div class="plus">
<i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i>
@ -16,7 +17,7 @@
</span>
</el-tree>
</el-aside>
<!-- 右边的表 -->
<el-main style="padding-top: 0">
<el-card class="main-wrap" shadow="hover">
<el-form label-width="80px" class="flex-between mgb20">
@ -64,7 +65,7 @@
</el-card>
</el-main>
</el-container>
<!-- 导入数据 -->
<el-dialog title="导入" :visible.sync="importVisible" width="80%" center @close="closeImport" class="dialog" :close-on-click-modal="false">
<el-container style="padding: 20px 0 20px 20px;background-color: #f0f0f0;">
<div style="overflow:auto;height: 558px;width:330px;padding:15px;background:#fff" ref="typeTreeWrap" @scroll="loadType">
@ -104,7 +105,7 @@
<el-button type="primary" :loading="submited" @click="confirmImport">确 定</el-button>
</span>
</el-dialog>
<!-- 新增编辑分类 -->
<el-dialog :title="id ? '编辑分类' : '新增分类'" :visible.sync="typeVisible" width="24%" center @close="closeType" :close-on-click-modal="false">
<el-input placeholder="请输入分类名称" v-model="categoryName"></el-input>
<span slot="footer" class="dialog-footer">
@ -112,14 +113,14 @@
<el-button type="primary" @click="confirmType">确 定</el-button>
</span>
</el-dialog>
<!-- 预览 -->
<el-dialog title="预览" :visible.sync="previewVisible" width="60%" center :close-on-click-modal="false">
<el-table :data="previewData" class="table" stripe header-align="center" row-key="id">
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
<el-table-column v-for="(item,index) in previewHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column>
</el-table>
</el-dialog>
<!-- 编辑产品数据表名称 -->
<el-dialog title="编辑产品数据表名称" :visible.sync="nameVisible" width="24%" center :close-on-click-modal="false">
<el-input placeholder="请输入产品数据表名称" v-model="curRow.showName"></el-input>
<span slot="footer" class="dialog-footer">
@ -127,7 +128,7 @@
<el-button type="primary" @click="confirmName">确 定</el-button>
</span>
</el-dialog>
<!-- 自定义表头 -->
<el-dialog title="自定义表头" :visible.sync="headVisible" width="60%" center :close-on-click-modal="false">
<el-table :data="previewData" class="table" stripe header-align="center" row-key="id" :key="editIndex">
<el-table-column type="index" width="100" label="序号" align="center">
@ -162,7 +163,7 @@ export default {
label: 'label'
},
defaultActive: [],
added: false,
addEd: false,
typeVisible: false,
categoryName: '',
categoryId: '',
@ -194,7 +195,7 @@ export default {
previewData: [],
curComment: [],
submited: false,
names: [],
categorys: [],
nameVisible: false,
curRow: {},
headVisible: false,
@ -216,6 +217,7 @@ export default {
this.getType()
},
methods: {
// 获取分类
getType(){
this.$post(this.api.getTableByClassification).then(res => {
// 递归赋值,同时添加层级标识
@ -230,29 +232,31 @@ export default {
})
}
handleId(res)
this.typeList = res
if (!this.added) {
if(res[0].children.length){
// 如果是删除或者新增编辑分类后调的重新查询分类，则不用默认选中第一个子级，只有页面一加载完成才需要默认选中第一个子级，addEd就是操作完分类后的标识
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.$refs.type.setCurrentKey(res[0].children[0].id)
this.$refs.type.setCurrentKey(this.categoryId)
})
}
this.added = false
this.addEd = false // 要重置为false
this.getData()
}).catch(res => {})
},
// 查询表
getData(){
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.categoryId}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=${this.updateTime ? this.updateTime : ''}`).then(res => {
const list = res.pageList.records
list.map(e => {
// 开始结束日期不用显示时间，所以只需要截取日期
const startTime = e.startTime ? e.startTime.slice(0, 10) : ''
const endTime = e.endTime ? e.endTime.slice(0, 10) : ''
if (startTime && endTime) {
@ -267,40 +271,46 @@ export default {
this.total = res.pageList.total
}).catch(res => {})
},
// 筛选的时候把分页重置为1
initData(){
this.page = 1
this.getData()
},
// 点击分类后查询表
typeClick(data,node){
this.categoryId = data.id
this.getData()
},
// 新增分类
addType(row){
if (row) this.defaultActive = [row.data.id]
if (row) this.defaultActive = [row.data.id] // 添加一级分类是没有id的，传到这个方法里row是0
this.typeVisible = true
this.levelId = row ? row.data.id : 0
this.levelId = row ? row.data.id : 0 // levelId是添加分类的时候要传到后端的父级id，一级分类没有父级id，所以传0
},
// 编辑分类
editType(row){
this.typeVisible = true
this.id = row.data.id
this.categoryName = row.data.categoryName
},
// 删除分类
delType(row){
// 该分类下的数据表已存在于产品管理中，是否确认删除？
this.$confirm('确定要删除吗？', '提示', {
type: 'warning'
}).then(() => {
this.added = true
this.addEd = true
this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => {
this.$message.success('删除成功')
this.getType()
}).catch(res => {})
}).catch(() => {})
},
// 保存分类
confirmType(){
if(this.submited) return false
if(this.submited) return false // 提交防抖标识
this.submited = true
this.added = true
this.addEd = true
if(this.id){
this.$post(this.api.updateCategory,{
id: this.id,
@ -331,22 +341,30 @@ export default {
})
}
},
// 关闭添加编辑分类弹框回调
closeType(){
this.id = 0
this.levelId = 0
this.categoryName = ''
},
/**
* 表预览
* @param row 行数据
* @param isEdit 是否是从自定义表头进来的
*/
preview(row, isEdit){
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
let comment = res.comment
let previewHead = []
this.curComment = comment
this.curComment = comment // 用来修改表头的，先保存完整的表头，修改表头的时候需要传给后端
comment.map(n => {
// 表格上不用展示id和操作时间
n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
})
this.previewHead = previewHead
let data = res.data
// 如果是自定义表头，则在数据最前面加个custom的行，用来修改表头
isEdit && data.unshift({
custom: true
})
@ -357,9 +375,10 @@ export default {
}
})
this.previewData = data
if (!isEdit) this.previewVisible = true
if (!isEdit) this.previewVisible = true // 非自定义表头进来的，才需要显示预览弹框
}).catch(res => {})
},
// 删除表
delTable(row){
this.$confirm('确定要删除吗？', '提示', {
type: 'warning'
@ -370,10 +389,12 @@ export default {
}).catch(res => {})
}).catch(() => {})
},
// 编辑产品表名
editName(row){
this.curRow = JSON.parse(JSON.stringify(row))
this.nameVisible = true
},
// 保存产品表名
confirmName(){
this.$post(this.api.editTableName, {
id: this.curRow.id,
@ -384,12 +405,14 @@ export default {
this.getData()
}).catch(res => {})
},
// 编辑产品表头
editHead(row){
this.curRow = JSON.parse(JSON.stringify(row))
this.preview(row, 1)
this.editIndex++
this.editIndex++ // 强刷新表
this.headVisible = true
},
// 保存自定义表头
confirmHead(){
let data = JSON.parse(JSON.stringify(this.curComment))
this.$post(`${this.api.updateTableCommit}?tableName=${this.curRow.name}`, data).then(res => {
@ -487,9 +510,12 @@ export default {
n.typeTreePage++
}).catch(res => {})
},
// 导入数据
batchImport(){
// 这里查的是原始分类，跟其他任何地方查分类的接口都不一样，不要混淆，如果要改这个地方，要跟后端沟通
this.$post(this.api.originalList).then(res => {
const that = this
// 处理id和label。因为这个树形要同时展示分类和表，所以name的key统一用label（分类和表的name的key不一样）
function handleId(data){
data.map(n => {
that.importTypeIndex++
@ -503,10 +529,12 @@ export default {
})
}
handleId(res)
// 查询表。pageSize传3000是防止选中的表在下面，查的太少的话无法选中分类，后续可根据需求修改
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.categoryId}&showName=${this.keyword}&pageNum=1&pageSize=3000&updateTime=${this.updateTime ? this.updateTime : ''}`).then(res1 => {
let list = res1.pageList.records
this.defaultTypeChecked = list.map(n => n.copyId)
this.defaultTypeChecked = list.map(n => n.copyId) // copyId为原始表id，通过这个id才能选中表
const that = this
// 递归处理分页
function handleId(data){
data.map(n => {
if(n.children.length){
@ -519,7 +547,17 @@ export default {
})
}
handleId(res)
// 如果是已经勾选了的表，则禁止勾选
function handleDisabled (list) {
list.map(e => {
if (e.children && e.children.length) {
if (e.children.every(e => e.disabled)) e.disabled = true
handleDisabled(e.children)
}
})
}
setTimeout(() => {
handleDisabled(res)
this.importTypeList = res
},500)
}).catch(res => {})
@ -527,6 +565,7 @@ export default {
this.importVisible = true
}).catch(res => {})
},
// 查询表的字段
getFields(){
this.$get(`${this.api.staticPreview}?tableName=${this.tableName}`).then(res => {
let comment = res.comment
@ -548,6 +587,7 @@ export default {
}).catch(res => {})
this.importVisible = true
},
// 分类点击回调
importTypeClick(data){
// 如果点击的是表,则加载这个表下面的字段,分类则不用
if(data.name){
@ -561,48 +601,74 @@ export default {
this.curExpand = obj.id
this.renderChecked()
},
// 关闭导入弹框回调
closeImport(){
this.$refs.typeTree.setCheckedKeys([])
this.names = []
this.categorys = []
},
// 获取names和showNames,提交的时候需要
// 查询分类下的表id
getNames(list){
const categoryId = Number(this.categoryId)
return new Promise((resolve,reject) => {
// 根据选择的分类id查询下面的表id
this.$get(`${this.api.getAllTableInfoByCategoryId}?categoryId=${list.join()}`).then(res => {
const list = res.tableInfo
list.map(e => {
delete e.id
delete e.id // id不用传给后端
e.categoryId = categoryId
})
this.names = list
this.categorys = list
resolve()
}).catch(res => {})
})
},
// 保存成功后的操作
saveSuccess() {
this.$message.success('导入成功')
this.getData()
this.importVisible = false
setTimeout(() => {
this.submited = false
},1000)
},
// 导入表
confirmImport(){
if(this.submited) return false
const checked = this.$refs.typeTree.getCheckedNodes() // 勾选的数据
if(this.submited) return false // 导入防抖标识
const checked = this.$refs.typeTree.getCheckedNodes().filter(e => !e.disabled) // 勾选的数据
// 如果没有选择任何数据
if(!checked.length) return this.$message.warning('请选择数据')
this.submited = true
const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id，再获取分类真正的id
const tableIds = checked.filter(e => e.name)
const categoryId = Number(this.categoryId)
// 分类要调另一个接口去查询该分类下的表，所以，要先把分类id和表id分开，再一次性传分类id去查询表，再把查询出来的表跟另外勾选的表拼接，再保存。要做去重
const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id（分类没有name，表才有name），再获取分类真正的id（id作了自增处理，获取的id不是真正的id，realId才是这个分类真正的id）
const tableIds = checked.filter(e => e.name) // 筛选出表
const categoryId = Number(this.categoryId) // 外面勾选的分类，即要导入数据的分类
// 给表加categoryId
tableIds.map(e => {
delete e.id
e.categoryId = categoryId
})
/**
* 根据某个值给数组对象去重
* @param arr 要处理的数组
* @param val 去重依据的值
*/
function uniq (arr, val) {
const res = new Map()
return arr.filter(e => !res.has(e[val]) && res.set(e[val], 1))
}
// 分类id，如果有分类id，则调接口去查询分类下的表，再新增，否则，直接拿表id去新增
if (typeIds.length) {
this.getNames(typeIds).then(() => {
const data = this.names
const allIds = [...this.categorys, ...tableIds] // 合并通过分类查询到的表id和另外勾选的表id
const data = uniq(allIds, 'name')
const dataList = []
// 每个接口只新增2000个表，一次新增太多无法请求成功，这里做个分割
for (let i = 0, len = data.length; i < len; i += 2000) {
dataList.push(data.slice(i, i + 2000))
}
const promiseList = []
dataList.map(e => {
// 如果切割成2000条一个item，超过6个item的话，就一次调太多次接口了，也有可能会请求失败，所以如果超过6个item，则再分两次去新增，后续如果数据又增加了，可以考虑做个二次分割，即先切割成2000个一个item，如果超过6个item，则再以6个item为单位切割。新增的时候就是每个接口新增2000个表，每次调6次新增，这6次调完后，再调另外的6次，以此循环
if (dataList.length > 6) {
dataList.slice(0, 6).map(e => {
promiseList.push(new Promise((resolve,reject) => {
this.$post(this.api.saveTable, e).then(res => {
resolve()
@ -612,24 +678,43 @@ export default {
}))
})
Promise.all(promiseList).then(res => {
this.$message.success('导入成功')
this.getData()
this.importVisible = false
setTimeout(() => {
this.submited = false
},1000)
dataList.slice(6).map(e => {
promiseList.push(new Promise((resolve,reject) => {
this.$post(this.api.saveTable, e).then(res => {
resolve()
}).catch(res => {
reject()
})
}))
})
Promise.all(promiseList).then(res => {
this.saveSuccess()
}).catch(err => {
this.submited = false
})
}).catch(err => {
this.submited = false
})
} else {
this.$post(this.api.saveTable, tableIds).then(res => {
this.$message.success('导入成功')
this.getData()
this.importVisible = false
setTimeout(() => {
dataList.map(e => {
promiseList.push(new Promise((resolve,reject) => {
this.$post(this.api.saveTable, e).then(res => {
resolve()
}).catch(res => {
reject()
})
}))
})
Promise.all(promiseList).then(res => {
this.saveSuccess()
}).catch(err => {
this.submited = false
},1000)
})
}
})
} else { // 保存表
this.$post(this.api.saveTable, tableIds).then(res => {
this.saveSuccess()
}).catch(res => {
this.submited = false
})

Write Preview
Loading…
Cancel
Save