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

数据导入注释完善

Browse Source
dev^2
yujialong 3 years ago
parent 12b6070cb4
commit 98e5a64b4a
1 changed files with 80 additions and 40 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. 102
      src/views/data/Framework.vue

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

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

Write Preview
Loading…
Cancel
Save