|
|
|
@ -10,7 +10,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<el-table :data="list" class="cus-table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
|
|
|
<el-table :data="list" class="cus-table" ref="table" stripe header-align="center" empty-text="暂无数据，支持导入xlsx 、csv 、txt等格式的文件" @selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="80" align="center"></el-table-column> |
|
|
|
<el-table-column type="selection" width="80" align="center"></el-table-column> |
|
|
|
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column> |
|
|
|
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column> |
|
|
|
<el-table-column prop="fileName" label="文件名称" align="center" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="fileName" label="文件名称" align="center" show-overflow-tooltip></el-table-column> |
|
|
|
@ -51,9 +51,9 @@ |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 导入数据 --> |
|
|
|
<!-- 导入数据 --> |
|
|
|
<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 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"> |
|
|
|
<el-tree v-loading="importLoading" |
|
|
|
<el-tree v-loading="importLoading" |
|
|
|
ref="typeTree" |
|
|
|
ref="typeTree" |
|
|
|
:data="importTypeList" |
|
|
|
:data="importTypeList" |
|
|
|
@ -62,23 +62,47 @@ |
|
|
|
:default-expanded-keys="defaultTypeActive" |
|
|
|
:default-expanded-keys="defaultTypeActive" |
|
|
|
:default-checked-keys="defaultTypeChecked" |
|
|
|
:default-checked-keys="defaultTypeChecked" |
|
|
|
:current-node-key="curId" |
|
|
|
:current-node-key="curId" |
|
|
|
show-checkbox |
|
|
|
|
|
|
|
highlight-current |
|
|
|
highlight-current |
|
|
|
@node-click="importTypeClick" |
|
|
|
:props="{ |
|
|
|
@node-expand="importTypeExpand" |
|
|
|
label: 'categoryName' |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
@node-click="getTable" |
|
|
|
> |
|
|
|
> |
|
|
|
</el-tree> |
|
|
|
</el-tree> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-main style="padding-top: 0;padding-bottom: 0;"> |
|
|
|
<el-main style="padding-top: 0;padding-bottom: 0;"> |
|
|
|
<el-card shadow="hover"> |
|
|
|
<el-card shadow="hover"> |
|
|
|
<div class="flex-center mgb20"> |
|
|
|
<el-input style="width: 250px;margin-bottom: 15px;" placeholder="请输入表名称" v-model="keyword" suffix-icon="el-icon-search" clearable size="small"></el-input> |
|
|
|
<p class="hr_tag"></p> |
|
|
|
<el-table :data="tables" class="cus-table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
|
|
|
<span>预览</span> |
|
|
|
<el-table-column width="40" align="center"> |
|
|
|
</div> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-table :data="fieldData" stripe header-align="center" v-if="fieldHead.length"> |
|
|
|
<el-radio class="check-table" v-model="curTable" :label="scope.row.id"></el-radio> |
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
</template> |
|
|
|
<el-table-column v-for="(item,index) in fieldHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column type="index" width="50" label="序号" align="center"></el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="tableComment" label="数据表名称" align="center"> |
|
|
|
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
|
|
|
{{scope.row.tableComment ? scope.row.tableComment : scope.row.showName}} |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="dataTotal" label="数据总量" width="80" align="center"></el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="timeRange" label="起止日期" width="200" align="center"></el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="dataSize" label="数据大小" width="80" align="center"> |
|
|
|
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
|
|
|
{{scope.row.dataSize}}M |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" width="160" align="center"></el-table-column> |
|
|
|
|
|
|
|
<el-table-column label="操作" width="80" align="center"> |
|
|
|
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
|
|
|
<el-button type="text" @click="preview(scope.row)">预览</el-button> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-table> |
|
|
|
|
|
|
|
<div class="pagination"> |
|
|
|
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :current-page="pageTable" @current-change="handleCurrentChangeTable" :total="totalTable"> |
|
|
|
|
|
|
|
</el-pagination> |
|
|
|
|
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
</el-main> |
|
|
|
</el-main> |
|
|
|
</el-container> |
|
|
|
</el-container> |
|
|
|
@ -87,6 +111,12 @@ |
|
|
|
<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="预览" :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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -95,6 +125,7 @@ import Cookie from 'js-cookie' |
|
|
|
import util from '@/util' |
|
|
|
import util from '@/util' |
|
|
|
import clipboard from '@/util/clipboard' |
|
|
|
import clipboard from '@/util/clipboard' |
|
|
|
import breadcrumb from '@/components/breadcrumb' |
|
|
|
import breadcrumb from '@/components/breadcrumb' |
|
|
|
|
|
|
|
import axios from 'axios' |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
@ -120,6 +151,15 @@ export default { |
|
|
|
curId: '', |
|
|
|
curId: '', |
|
|
|
curExpand: '', |
|
|
|
curExpand: '', |
|
|
|
submited: false, |
|
|
|
submited: false, |
|
|
|
|
|
|
|
tables: [], |
|
|
|
|
|
|
|
keywordTable: '', |
|
|
|
|
|
|
|
pageTable: 1, |
|
|
|
|
|
|
|
pageSizeTable: 10, |
|
|
|
|
|
|
|
totalTable: 0, |
|
|
|
|
|
|
|
curTable: '', |
|
|
|
|
|
|
|
previewVisible: false, |
|
|
|
|
|
|
|
previewHead: [], |
|
|
|
|
|
|
|
previewData: [], |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: { |
|
|
|
components: { |
|
|
|
@ -210,13 +250,8 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 查看 |
|
|
|
// 查看 |
|
|
|
show(row) { |
|
|
|
show(row) { |
|
|
|
// 如果是word,pdf,excel，就用预览插件打开，图片等就直接打开 |
|
|
|
|
|
|
|
const format = row.fileFormat |
|
|
|
const format = row.fileFormat |
|
|
|
// if ('xls,xlsx'.includes(format)) { |
|
|
|
|
|
|
|
// this.$router.push(`/preview?path=${row.filePath}`) |
|
|
|
|
|
|
|
// } else { |
|
|
|
|
|
|
|
window.open((util.isDoc(format) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + row.filePath) |
|
|
|
window.open((util.isDoc(format) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + row.filePath) |
|
|
|
// } |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
// 下载 |
|
|
|
// 下载 |
|
|
|
download(row) { |
|
|
|
download(row) { |
|
|
|
@ -242,286 +277,146 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 递归查询当前展开的分类下的子分类 |
|
|
|
|
|
|
|
getMoreTable(list,id){ |
|
|
|
|
|
|
|
list.map(n => { |
|
|
|
|
|
|
|
if(n.id == id){ |
|
|
|
|
|
|
|
this.getTable(n,1) |
|
|
|
|
|
|
|
}else if(n.children && n.children.length){ |
|
|
|
|
|
|
|
this.getMoreTable(n.children,id) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 懒加载后新加载出来的数据可能是之前就存在于这个分类下了的,因此是要自动勾选的,所以在这里去拿这个分类下已经存在了的表的id去做一个重新勾选 |
|
|
|
|
|
|
|
renderChecked(){ |
|
|
|
|
|
|
|
let result = [] |
|
|
|
|
|
|
|
let list = this.$refs.typeTree.getCheckedNodes() |
|
|
|
|
|
|
|
list.map((n,i) => { |
|
|
|
|
|
|
|
if(n.tableLen && n.tableLen > n.children.length){ |
|
|
|
|
|
|
|
result = [...result,...n.children.map(n => n.id)] |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
result.push(n.id) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
this.$refs.typeTree.setCheckedKeys(result) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 因为数据会有上万条的情况,一次加载出来dom太多了,所以用懒加载去处理 |
|
|
|
|
|
|
|
loadType(e){ |
|
|
|
|
|
|
|
clearTimeout(this.typeTimer) |
|
|
|
|
|
|
|
let typeTree = this.$refs.typeTreeWrap |
|
|
|
|
|
|
|
// 防抖 |
|
|
|
|
|
|
|
this.typeTimer = setTimeout(() => { |
|
|
|
|
|
|
|
this.typeTreeScrollTop = typeTree.scrollTop - this.typeTreeScrollTop |
|
|
|
|
|
|
|
// 如果已经滚动到底部,则加载下面的数据 |
|
|
|
|
|
|
|
if(this.typeTreeScrollTop > 0 && typeTree.scrollHeight - (typeTree.clientHeight + parseInt(typeTree.scrollTop)) < 10){ |
|
|
|
|
|
|
|
this.getMoreTable(this.importTypeList,this.curExpand) |
|
|
|
|
|
|
|
Promise.all(this.tablePromises).then(_ => { |
|
|
|
|
|
|
|
this.renderChecked() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
},50) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 查询分类下的表 |
|
|
|
|
|
|
|
getTable(n,isConcat){ |
|
|
|
|
|
|
|
this.tablePromises.push(new Promise((resolve,reject) => { |
|
|
|
|
|
|
|
this.$post(`${this.api.originalListById}?categoryId=${n.realId}&pageNum=${n.typeTreePage ? n.typeTreePage : 1}&pageSize=${this.typeTreeUnit}`).then(res => { |
|
|
|
|
|
|
|
let list = res.list.records |
|
|
|
|
|
|
|
list.map(n => { |
|
|
|
|
|
|
|
n.label = n.showName |
|
|
|
|
|
|
|
n.id = String(n.id) |
|
|
|
|
|
|
|
// 已经存在的表,禁止再次勾选 |
|
|
|
|
|
|
|
if(this.defaultTypeChecked.includes(n.id)){ |
|
|
|
|
|
|
|
n.disabled = true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
// 如果是懒加载,则拼接 |
|
|
|
|
|
|
|
if(isConcat){ |
|
|
|
|
|
|
|
n.children = n.children.concat(list) |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
n.children = list |
|
|
|
|
|
|
|
n.tableLen = res.list.total |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 每次加载完,分页码数自动+1 |
|
|
|
|
|
|
|
n.typeTreePage++ |
|
|
|
|
|
|
|
resolve() |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
|
|
|
reject() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 导入数据 |
|
|
|
// 导入数据 |
|
|
|
showData(){ |
|
|
|
showData(){ |
|
|
|
|
|
|
|
this.curTable = '' |
|
|
|
|
|
|
|
this.tables = [] |
|
|
|
this.importLoading = true |
|
|
|
this.importLoading = true |
|
|
|
this.importVisible = true |
|
|
|
this.importVisible = true |
|
|
|
// 这里查的是原始分类，跟其他任何地方查分类的接口都不一样，不要混淆，如果要改这个地方，要跟后端沟通 |
|
|
|
this.$post(this.api.getDataProductBoughtByOurSchool).then(({ data }) => { |
|
|
|
this.$post(this.api.originalList).then(res => { |
|
|
|
this.importTypeList = data |
|
|
|
// 处理id和label。因为这个树形要同时展示分类和表，所以name的key统一用label（分类和表的name的key不一样） |
|
|
|
|
|
|
|
function handleId(data){ |
|
|
|
|
|
|
|
data.map(n => { |
|
|
|
|
|
|
|
n.realId = n.id |
|
|
|
|
|
|
|
// 分类id跟表id可能会冲突，所以加上uuid |
|
|
|
|
|
|
|
n.id = uuid.v4() |
|
|
|
|
|
|
|
n.label = n.categoryName |
|
|
|
|
|
|
|
if(n.children.length){ |
|
|
|
|
|
|
|
handleId(n.children) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
handleId(res) |
|
|
|
|
|
|
|
// 查询该分类下已勾选的表。pageSize传3000是防止查的表太少，无法选中分类，因为每个分类初始化的时候只查子下的20个表，后续可根据需求修改 |
|
|
|
|
|
|
|
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) // copyId为原始表id，通过这个id才能选中表 |
|
|
|
|
|
|
|
// 递归处理分页 |
|
|
|
|
|
|
|
const handleId = data => { |
|
|
|
|
|
|
|
data.map(n => { |
|
|
|
|
|
|
|
if(n.children.length){ |
|
|
|
|
|
|
|
handleId(n.children) |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
// 默认分页码数为1 |
|
|
|
|
|
|
|
n.typeTreePage = 1 |
|
|
|
|
|
|
|
this.getTable(n) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
Promise.all(this.tablePromises).then(_ => { |
|
|
|
|
|
|
|
handleDisabled(res) |
|
|
|
|
|
|
|
this.importTypeList = res |
|
|
|
|
|
|
|
this.importLoading = false |
|
|
|
this.importLoading = false |
|
|
|
}) |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { |
|
|
|
this.importLoading = false |
|
|
|
this.importLoading = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
}).catch(res => { |
|
|
|
}, |
|
|
|
this.importLoading = false |
|
|
|
// 查询分类下的表 |
|
|
|
|
|
|
|
getTable(){ |
|
|
|
|
|
|
|
this.$post(`${this.api.getPurchasedTableByCategory}?categoryId=${this.$refs.typeTree.getCurrentKey()}&pageNum=${this.pageTable}&pageSize=${this.pageSizeTable}`).then(({ data }) => { |
|
|
|
|
|
|
|
const list = data.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) { |
|
|
|
|
|
|
|
e.timeRange = startTime + ' ~ ' + endTime |
|
|
|
|
|
|
|
} else if (startTime) { |
|
|
|
|
|
|
|
e.timeRange = startTime |
|
|
|
|
|
|
|
} else if (endTime) { |
|
|
|
|
|
|
|
e.timeRange = e.endTime |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
this.tables = list |
|
|
|
|
|
|
|
this.totalTable = data.total |
|
|
|
|
|
|
|
}).catch(res => {}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 查询表的字段 |
|
|
|
handleCurrentChangeTable(val) { |
|
|
|
getFields(){ |
|
|
|
this.pageTable = val |
|
|
|
this.$get(`${this.api.staticPreview}?tableName=${this.tableName}`).then(res => { |
|
|
|
this.getTable() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 预览 |
|
|
|
|
|
|
|
preview(row){ |
|
|
|
|
|
|
|
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => { |
|
|
|
let comment = res.comment |
|
|
|
let comment = res.comment |
|
|
|
let fieldHead = [] |
|
|
|
let previewHead = [] |
|
|
|
// id和操作时间这两个字段不用展示 |
|
|
|
this.curComment = comment // 用来修改表头的，先保存完整的表头，修改表头的时候需要传给后端 |
|
|
|
comment.map(n => { |
|
|
|
comment.map(n => { |
|
|
|
n.field != 'id' && n.field != 'operation_time' && fieldHead.push(n) |
|
|
|
// 表格上不用展示id和操作时间 |
|
|
|
|
|
|
|
n.field != 'id' && n.field != 'operation_time' && previewHead.push(n) |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.fieldHead = fieldHead |
|
|
|
this.previewHead = previewHead |
|
|
|
|
|
|
|
|
|
|
|
let data = res.data |
|
|
|
let data = res.data |
|
|
|
|
|
|
|
// 如果是自定义表头，则在数据最前面加个custom的行，用来修改表头 |
|
|
|
|
|
|
|
isEdit && data.unshift({ |
|
|
|
|
|
|
|
custom: true |
|
|
|
|
|
|
|
}) |
|
|
|
data.map(n => { |
|
|
|
data.map(n => { |
|
|
|
for(let i in n){ |
|
|
|
for(let i in n){ |
|
|
|
// 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式 |
|
|
|
// 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式 |
|
|
|
if(typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = this.formatDate('yyyy-MM-dd hh:mm:ss',new Date(n[i])) |
|
|
|
if(typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = this.formatDate('yyyy-MM-dd hh:mm:ss',new Date(n[i])) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.fieldData = data |
|
|
|
this.previewData = data |
|
|
|
}).catch(res => {}) |
|
|
|
this.previewVisible = true // 非自定义表头进来的，才需要显示预览弹框 |
|
|
|
this.importVisible = true |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 分类点击回调 |
|
|
|
|
|
|
|
importTypeClick(data){ |
|
|
|
|
|
|
|
// 如果点击的是表,则加载这个表下面的字段,分类则不用 |
|
|
|
|
|
|
|
if(data.name){ |
|
|
|
|
|
|
|
this.tableName = data.name |
|
|
|
|
|
|
|
this.curId = data.id |
|
|
|
|
|
|
|
this.getFields() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 分类展开的回调 |
|
|
|
|
|
|
|
importTypeExpand(obj,node,com){ |
|
|
|
|
|
|
|
this.curExpand = obj.id |
|
|
|
|
|
|
|
this.renderChecked() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 关闭导入弹框回调 |
|
|
|
|
|
|
|
closeImport(){ |
|
|
|
|
|
|
|
this.$refs.typeTree.setCheckedKeys([]) |
|
|
|
|
|
|
|
this.categorys = [] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 查询分类下的表id |
|
|
|
|
|
|
|
getNames(list){ |
|
|
|
|
|
|
|
const categoryId = Number(this.categoryId) |
|
|
|
|
|
|
|
return new Promise((resolve,reject) => { |
|
|
|
|
|
|
|
this.$get(`${this.api.getAllTableInfoByCategoryId}?categoryId=${list.join()}`).then(res => { |
|
|
|
|
|
|
|
const list = res.tableInfo |
|
|
|
|
|
|
|
list.map(e => { |
|
|
|
|
|
|
|
delete e.id // id不用传给后端 |
|
|
|
|
|
|
|
e.categoryId = categoryId |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
this.categorys = list |
|
|
|
|
|
|
|
resolve() |
|
|
|
|
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => {}) |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
// 保存成功后的操作 |
|
|
|
// 上传到python数据列表 |
|
|
|
saveSuccess() { |
|
|
|
importData(file) { |
|
|
|
|
|
|
|
this.$post(this.api.importData, { |
|
|
|
|
|
|
|
fileFormat: file.fileType || file.fileFormat, |
|
|
|
|
|
|
|
fileName: file.originalFileName || file.fileName, |
|
|
|
|
|
|
|
filePath: file.fileUrl || file.filePath, |
|
|
|
|
|
|
|
fileSize: file.fileSize, |
|
|
|
|
|
|
|
ossFileName: file.ossFileName |
|
|
|
|
|
|
|
}).then(res => { |
|
|
|
this.$message.success('导入成功') |
|
|
|
this.$message.success('导入成功') |
|
|
|
this.getData() |
|
|
|
this.getData() |
|
|
|
this.importVisible = false |
|
|
|
this.importVisible = false |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
this.submited = false |
|
|
|
this.submited = false |
|
|
|
}, 1000) |
|
|
|
}, 1000) |
|
|
|
|
|
|
|
this.sourceVisible = false |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
|
|
|
this.submited = false |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 导入表 |
|
|
|
// 导入表 |
|
|
|
confirmImport(){ |
|
|
|
confirmImport(){ |
|
|
|
if(this.submited) return false // 导入防抖标识 |
|
|
|
if(this.submited) return false // 导入防抖标识 |
|
|
|
const checked = this.$refs.typeTree.getCheckedNodes().filter(e => !e.disabled) // 勾选的数据 |
|
|
|
const id = this.curTable // 勾选的数据 |
|
|
|
// 如果没有选择任何数据 |
|
|
|
// 如果没有选择任何数据 |
|
|
|
if(!checked.length) return this.$message.warning('请选择数据') |
|
|
|
if(!id) return this.$message.warning('请选择数据') |
|
|
|
|
|
|
|
const row = this.tables.find(e => e.id === id) |
|
|
|
|
|
|
|
const { name } = row |
|
|
|
this.submited = true |
|
|
|
this.submited = true |
|
|
|
// 分类要调另一个接口去查询该分类下的表，所以，要先把分类id和表id分开，再一次性传分类id去查询表，再把查询出来的表跟另外勾选的表拼接，再保存。要做去重 |
|
|
|
// 查询某表的Excel文件是否存在 |
|
|
|
const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id（分类没有name，表才有name），再获取分类真正的id（id作了自增处理，获取的id不是真正的id，realId才是这个分类真正的id） |
|
|
|
this.$post(`${this.api.lookupTableFile}?tableName=${name}`).then(({ data }) => { |
|
|
|
const tableIds = checked.filter(e => e.name) // 筛选出表 |
|
|
|
// 如果不存在，则下载该表并上传到阿里云 |
|
|
|
const categoryId = Number(this.categoryId) // 外面勾选的分类，即要导入数据的分类 |
|
|
|
if (!data) { |
|
|
|
// 给表加categoryId |
|
|
|
// 通过预览接口获取字段 |
|
|
|
tableIds.map(e => { |
|
|
|
this.$get(`${this.api.previewData}?tableName=${name}&tableId=${id}`).then(({ comment }) => { |
|
|
|
delete e.id |
|
|
|
// 下载该表 |
|
|
|
e.categoryId = categoryId |
|
|
|
axios.get(`${this.api.downloadData}?tableName=${name}&table_id=${id}&fields=${comment.map(e => e.field).join()}&startTime=${row.startTime}&endTime=${row.endTime}&frequency=1`, { |
|
|
|
}) |
|
|
|
headers: { |
|
|
|
/** |
|
|
|
token: this.token |
|
|
|
* 根据某个值给数组对象去重 |
|
|
|
}, |
|
|
|
* @param arr 要处理的数组 |
|
|
|
responseType: 'blob' |
|
|
|
* @param val 去重依据的值 |
|
|
|
}).then((res) => { |
|
|
|
*/ |
|
|
|
// if (res.data.type != 'multipart/form-data') return util.warningMsg('数据总数为零！') |
|
|
|
function uniq (arr, val) { |
|
|
|
// 把该表上传到阿里云 |
|
|
|
const res = new Map() |
|
|
|
const form = new FormData() |
|
|
|
return arr.filter(e => !res.has(e[val]) && res.set(e[val], 1)) |
|
|
|
form.append('file', new Blob([res.data], {type: 'application/vnd.ms-excel'})) |
|
|
|
} |
|
|
|
form.append('tableName', name) |
|
|
|
// 分类id，如果有分类id，则调接口去查询分类下的表，再新增，否则，直接拿表id去新增 |
|
|
|
form.append('token', this.token) |
|
|
|
if (typeIds.length) { |
|
|
|
axios({ |
|
|
|
this.getNames(typeIds).then(() => { |
|
|
|
method: 'post', |
|
|
|
const allIds = [...this.categorys, ...tableIds] // 合并通过分类查询到的表id和另外勾选的表id |
|
|
|
url: `${this.api.fileupload}`, |
|
|
|
const data = uniq(allIds, 'name') |
|
|
|
data: form, |
|
|
|
const dataList = [] |
|
|
|
headers: { |
|
|
|
// 每个接口只新增2000个表，一次新增太多无法请求成功，这里做个分割 |
|
|
|
token: this.token, |
|
|
|
for (let i = 0, len = data.length; i < len; i += 2000) { |
|
|
|
'Content-Type': 'multipart/form-data' |
|
|
|
dataList.push(data.slice(i, i + 2000)) |
|
|
|
}, |
|
|
|
} |
|
|
|
}).then(({ data }) => { |
|
|
|
const promiseList = [] |
|
|
|
this.importData(data.filesResult) |
|
|
|
// 如果切割成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() |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
|
|
|
reject() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
Promise.all(promiseList).then(res => { |
|
|
|
|
|
|
|
dataList.slice(6).map(e => { |
|
|
|
|
|
|
|
promiseList.push(new Promise((resolve,reject) => { |
|
|
|
|
|
|
|
this.$post(this.api.saveTable, e).then(res => { |
|
|
|
|
|
|
|
resolve() |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { |
|
|
|
reject() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
Promise.all(promiseList).then(res => { |
|
|
|
|
|
|
|
this.saveSuccess() |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
this.submited = false |
|
|
|
this.submited = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
}).catch(err => { |
|
|
|
}).catch(res => { |
|
|
|
this.submited = false |
|
|
|
this.submited = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
|
|
|
|
dataList.map(e => { |
|
|
|
|
|
|
|
promiseList.push(new Promise((resolve,reject) => { |
|
|
|
|
|
|
|
this.$post(this.api.saveTable, e).then(res => { |
|
|
|
|
|
|
|
resolve() |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { |
|
|
|
reject() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
})) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
Promise.all(promiseList).then(res => { |
|
|
|
|
|
|
|
this.saveSuccess() |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
this.submited = false |
|
|
|
this.submited = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// 如果数据库里已经有这个表，则直接调导入数据的接口 |
|
|
|
|
|
|
|
this.importData(data) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} else { // 保存表 |
|
|
|
|
|
|
|
this.$post(this.api.saveTable, tableIds).then(res => { |
|
|
|
|
|
|
|
this.saveSuccess() |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { |
|
|
|
this.submited = false |
|
|
|
this.submited = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -582,4 +477,9 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/.check-table { |
|
|
|
|
|
|
|
.el-radio__label { |
|
|
|
|
|
|
|
display: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
