|
|
|
|
@ -1,5 +1,13 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="search"> |
|
|
|
|
<div class="input"> |
|
|
|
|
<img src="../../../assets/img/search-gray.png" alt=""> |
|
|
|
|
<input v-model="keyword" type="text" placeholder="请输入数据表名称"> |
|
|
|
|
</div> |
|
|
|
|
<img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="keyword = ''"> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="left"> |
|
|
|
|
<el-menu class="menu" ref="type" @open="openType" @select="selectType" unique-opened :default-active="defaultType" :default-openeds="defaultOpenType"> |
|
|
|
|
<template v-for="item in typeList"> |
|
|
|
|
@ -67,39 +75,42 @@ |
|
|
|
|
</el-menu> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="block"> |
|
|
|
|
<h6 class="title">数据介绍</h6> |
|
|
|
|
<div class="desc">{{introduce}}</div> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="p-title">数据介绍</h6> |
|
|
|
|
<div class="page-content"> |
|
|
|
|
<div class="desc">{{introduce}}</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" row-key="id"> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="showName" label="数据表名称" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataTotal" label="数据总量" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataSize" label="数据大小" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.row.dataSize}}M |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column> |
|
|
|
|
<el-table-column label="操作" width="220" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button type="text" @click="preview(scope.row)">预览</el-button> |
|
|
|
|
<el-button type="text" @click="download(scope.row)">下载</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" row-key="id" highlight-current-row @current-change="previewCurrentChange"> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="showName" label="数据表名称" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataTotal" label="数据总量" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataSize" label="数据大小" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.row.dataSize}}M |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="createTime" label="更新时间" align="center"></el-table-column> |
|
|
|
|
<el-table-column label="操作" width="220" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button type="text" @click="preview(scope.row)">预览</el-button> |
|
|
|
|
<el-button type="text" @click="download(scope.row)">下载</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="block" v-if="previewHead.length"> |
|
|
|
|
<h6 class="title">数据预览</h6> |
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
<div class="page" v-if="previewHead.length"> |
|
|
|
|
<h6 class="p-title">数据预览</h6> |
|
|
|
|
<div class="page-content"> |
|
|
|
|
<el-table :data="previewData" class="table" id="previewTable" 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> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -143,6 +154,8 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
token: util.local.get(Setting.tokenKey), |
|
|
|
|
keyword: '', |
|
|
|
|
searchTimer: null, |
|
|
|
|
typeId: this.$route.query.typeId, |
|
|
|
|
typeList: [], |
|
|
|
|
defaultType: '', |
|
|
|
|
@ -154,9 +167,6 @@ export default { |
|
|
|
|
total: 0, |
|
|
|
|
previewHead: [], |
|
|
|
|
previewData: [], |
|
|
|
|
pagePreview: 1, |
|
|
|
|
pageSizePreview: 10, |
|
|
|
|
totalPreview: 0, |
|
|
|
|
downloadVisible: false, |
|
|
|
|
curRow: {}, |
|
|
|
|
checkAllFields: false, |
|
|
|
|
@ -183,6 +193,7 @@ export default { |
|
|
|
|
name: '年频' |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
currentRow: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -190,12 +201,21 @@ export default { |
|
|
|
|
'schoolId' |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function(val) { |
|
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
this.getData() |
|
|
|
|
},500) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getType() |
|
|
|
|
if(this.$route.query.download){ |
|
|
|
|
this.download({ |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
name: this.$route.query.name |
|
|
|
|
name: this.$route.query.name, |
|
|
|
|
showName: this.$route.query.showName, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -203,15 +223,33 @@ export default { |
|
|
|
|
getType(){ |
|
|
|
|
this.$post(this.api.getTableByClassification).then(res => { |
|
|
|
|
let typeId = this.typeId |
|
|
|
|
let introduce = '' |
|
|
|
|
res.map(n => { |
|
|
|
|
n.id = String(n.id) |
|
|
|
|
if(typeId && n.id == typeId) introduce = n.introduce |
|
|
|
|
n.children.map(e => { |
|
|
|
|
e.id = String(e.id) |
|
|
|
|
if(typeId && e.id == typeId){ |
|
|
|
|
if(e.introduce){ |
|
|
|
|
introduce = e.introduce |
|
|
|
|
}else{ |
|
|
|
|
introduce = n.introduce |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if(e.children.length && typeId == e.id){ |
|
|
|
|
this.defaultOpenType = [n.id,e.id] |
|
|
|
|
} |
|
|
|
|
e.children.map(n => { |
|
|
|
|
n.id = String(n.id) |
|
|
|
|
e.children.map(j => { |
|
|
|
|
if(typeId && j.id == typeId && j.introduce){ |
|
|
|
|
if(j.introduce){ |
|
|
|
|
introduce = j.introduce |
|
|
|
|
}else if(e.introduce){ |
|
|
|
|
introduce = e.introduce |
|
|
|
|
}else{ |
|
|
|
|
introduce = n.introduce |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
j.id = String(j.id) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
@ -221,17 +259,21 @@ export default { |
|
|
|
|
}else{ |
|
|
|
|
if(res[0].children.length && res[0].children[0].children.length){ |
|
|
|
|
this.defaultType = res[0].children[0].children[0].id |
|
|
|
|
introduce = res[0].children[0].children[0].introduce |
|
|
|
|
}else if(res[0].children.length){ |
|
|
|
|
this.defaultType = res[0].children[0].id |
|
|
|
|
if(!introduce) introduce = res[0].children[0].introduce |
|
|
|
|
}else{ |
|
|
|
|
this.defaultType = res[0].id |
|
|
|
|
if(!introduce) introduce = res[0].introduce |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.introduce = introduce |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
getData(){ |
|
|
|
|
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => { |
|
|
|
|
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => { |
|
|
|
|
this.listData = res.list |
|
|
|
|
this.total = res.totalCount |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
@ -242,8 +284,26 @@ export default { |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
selectType(index,indexPath){ |
|
|
|
|
let introduce = '' |
|
|
|
|
let list = this.typeList |
|
|
|
|
list.map(n => { |
|
|
|
|
if(n.id == index){ |
|
|
|
|
introduce = n.introduce |
|
|
|
|
}else{ |
|
|
|
|
n.children.map(n => { |
|
|
|
|
if(n.id == index){ |
|
|
|
|
introduce = n.introduce |
|
|
|
|
}else{ |
|
|
|
|
n.children.map(n => { |
|
|
|
|
if(n.id == index) introduce = n.introduce |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
if(!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce |
|
|
|
|
this.defaultType = index |
|
|
|
|
this.introduce = this.typeList.find(n => n.id == indexPath[0]).introduce |
|
|
|
|
this.introduce = introduce |
|
|
|
|
this.previewHead = [] |
|
|
|
|
this.previewData = [] |
|
|
|
|
this.page = 1 |
|
|
|
|
@ -264,12 +324,16 @@ export default { |
|
|
|
|
} |
|
|
|
|
this.selectType(id,indexPath) |
|
|
|
|
}, |
|
|
|
|
previewCurrentChange(val){ |
|
|
|
|
this.currentRow = val |
|
|
|
|
}, |
|
|
|
|
preview(row){ |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => { |
|
|
|
|
this.$post(this.api.saveRecord,{ |
|
|
|
|
tableId: row.id, |
|
|
|
|
type: 2, |
|
|
|
|
}).then(res => {}).catch(res => {}) |
|
|
|
|
|
|
|
|
|
let comment = res.comment |
|
|
|
|
let previewHead = [] |
|
|
|
|
comment.map(n => { |
|
|
|
|
@ -284,6 +348,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.previewData = data |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
document.querySelector('#previewTable').scrollIntoView() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
checkAllFieldsChange(val) { |
|
|
|
|
@ -390,6 +458,43 @@ export default { |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.wrap{ |
|
|
|
|
display: flex; |
|
|
|
|
.search{ |
|
|
|
|
z-index: 2; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 20px; |
|
|
|
|
right: 20%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 300px; |
|
|
|
|
padding: 7px 20px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
border-bottom: 2px solid #a5a5a5; |
|
|
|
|
.input{ |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
input{ |
|
|
|
|
width: 195px; |
|
|
|
|
padding-left: 20px; |
|
|
|
|
margin-left: 20px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #999; |
|
|
|
|
background-color: transparent; |
|
|
|
|
border: 0; |
|
|
|
|
border-left: 2px solid #ccc; |
|
|
|
|
&::-webkit-input-placeholder{color: #999} |
|
|
|
|
&::-moz-placeholder{color: #999} |
|
|
|
|
&:-moz-placeholder{color: #999} |
|
|
|
|
&:focus{ |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.remove{ |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.left{ |
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
|
|
@ -407,19 +512,8 @@ export default { |
|
|
|
|
.right{ |
|
|
|
|
flex: 1; |
|
|
|
|
max-width: calc(100% - 220px); |
|
|
|
|
.block{ |
|
|
|
|
padding: 34px; |
|
|
|
|
.page{ |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
.title{ |
|
|
|
|
padding-left: 11px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
color: $main-color; |
|
|
|
|
line-height: 1.8; |
|
|
|
|
border-left: 6px solid; |
|
|
|
|
} |
|
|
|
|
.desc{ |
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
color: #333; |
|
|
|
|
|
