You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
411 lines
17 KiB
411 lines
17 KiB
<template> |
|
<div> |
|
<el-container> |
|
<el-aside width="300px"> |
|
<div class="plus"> |
|
<i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i> |
|
</div> |
|
<el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @current-change="typeClick"> |
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
<span>{{ node.label }}</span> |
|
<span class="actions"> |
|
<i v-if="!data.isThird" class="el-icon-circle-plus-outline" @click.stop="addType(node)"></i> |
|
<i class="el-icon-edit" @click.stop="editType(node)"></i> |
|
<i class="el-icon-delete" @click.stop="delType(node)"></i> |
|
</span> |
|
</span> |
|
</el-tree> |
|
</el-aside> |
|
|
|
<el-main style="padding-top: 0"> |
|
<el-card shadow="hover"> |
|
<el-form label-width="80px" class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<el-form-item label="创建日期" style="margin: 0 20px 0 0"> |
|
<el-date-picker v-model="updateTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="initData"></el-date-picker> |
|
</el-form-item> |
|
<el-input placeholder="请输入数据表名称" v-model="keyword" prefix-icon="el-icon-search" clearable></el-input> |
|
</div> |
|
<div> |
|
<el-button type="primary" size="small" round @click="batchImport">导入数据</el-button> |
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
|
</div> |
|
</el-form> |
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
|
<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"></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="delTable(scope.row)">删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background layout="total, prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"> |
|
</el-pagination> |
|
</div> |
|
</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;"> |
|
<el-aside width="300px"> |
|
<el-tree style="margin: 10px;" ref="typeTree" :data="importTypeList" node-key="id" accordion :default-expanded-keys="defaultTypeActive" show-checkbox :props="defaultProps" highlight-current @node-click="importTypeClick"></el-tree> |
|
</el-aside> |
|
<el-main style="padding-top: 0;padding-bottom: 0;"> |
|
<el-card shadow="hover"> |
|
<el-table :data="fieldData" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
<el-table-column v-for="(item,index) in fieldHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column> |
|
</el-table> |
|
</el-card> |
|
</el-main> |
|
</el-container> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="importVisible = false">取 消</el-button> |
|
<el-button type="primary" @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"> |
|
<el-button @click="typeVisible = false">取 消</el-button> |
|
<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> |
|
</div> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
typeList: [], |
|
defaultProps: { |
|
children: 'children', |
|
label: 'label' |
|
}, |
|
defaultActive: [], |
|
typeVisible: false, |
|
categoryName: '', |
|
categoryId: '', |
|
id: 0, |
|
levelId: 0, |
|
updateTime: '', |
|
importVisible: false, |
|
defaultTypeActive: [], |
|
listData: [], |
|
keyword: '', |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
importTypeList: [], |
|
fieldData: [], |
|
fieldHead: [], |
|
tableName: '', |
|
curId: '', |
|
categoryIndex: 0, |
|
previewVisible: false, |
|
previewHead: [], |
|
previewData: [] |
|
}; |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.getData() |
|
},500) |
|
} |
|
}, |
|
mounted(){ |
|
this.getType() |
|
}, |
|
methods: { |
|
getType(){ |
|
this.$post(this.api.getTableByClassification).then(res => { |
|
res.map(n => { |
|
n.id = String(n.id) |
|
n.label = n.categoryName |
|
n.children.map(n => { |
|
n.id = String(n.id) |
|
n.label = n.categoryName |
|
n.children.map(n => { |
|
n.id = String(n.id) |
|
n.label = n.categoryName |
|
n.isThird = true |
|
}) |
|
}) |
|
}) |
|
this.typeList = res |
|
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] |
|
} |
|
|
|
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 => { |
|
this.listData = res.list |
|
this.total = res.totalCount |
|
}).catch(res => {}) |
|
}, |
|
initData(){ |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
typeClick(data,node){ |
|
this.categoryId = data.id |
|
this.getData() |
|
}, |
|
addType(row){ |
|
this.typeVisible = true |
|
this.levelId = row ? row.data.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.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => { |
|
this.$message.success('删除成功') |
|
this.getType() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
confirmType(){ |
|
if(this.id){ |
|
this.$post(this.api.updateCategory,{ |
|
id: this.id, |
|
categoryName: this.categoryName |
|
}).then(res => { |
|
this.$message.success('编辑成功') |
|
this.getType() |
|
this.typeVisible = false |
|
}).catch(res => {}) |
|
}else{ |
|
this.$post(this.api.saveCategory,{ |
|
levelId: this.levelId, |
|
categoryName: this.categoryName |
|
}).then(res => { |
|
this.$message.success('添加成功') |
|
this.getType() |
|
this.typeVisible = false |
|
}).catch(res => {}) |
|
} |
|
}, |
|
closeType(){ |
|
this.id = 0 |
|
this.levelId = 0 |
|
this.categoryName = '' |
|
}, |
|
preview(row){ |
|
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => { |
|
let comment = res.comment |
|
let previewHead = [] |
|
comment.map(n => { |
|
n.field != 'id' && n.field != 'operation_time' && previewHead.push(n) |
|
}) |
|
this.previewHead = previewHead |
|
|
|
let data = res.data |
|
data.map(n => { |
|
for(let i in n){ |
|
if(typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = this.formatDate('yyyy-MM-dd hh:mm:ss',new Date(n[i])) |
|
} |
|
}) |
|
this.previewData = data |
|
this.previewVisible = true |
|
}).catch(res => {}) |
|
}, |
|
delTable(row){ |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
this.$post(`${this.api.deleteTable}?tableIds=${row.id}`).then(res => { |
|
this.$message.success('删除成功') |
|
this.getData() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val |
|
}, |
|
handleCurrentChange(val) { |
|
this.page = val |
|
this.getData() |
|
}, |
|
delAllSelection() { |
|
if(this.multipleSelection.length != ''){ |
|
let newArr = this.multipleSelection |
|
let delList = newArr.map(item => { |
|
return `tableIds=${item.id}` |
|
}) |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
this.$post(`${this.api.deleteTable}?${delList.join('&')}`).then(res => { |
|
this.$refs.table.clearSelection() |
|
this.$message.success('删除成功') |
|
this.getData() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}else{ |
|
this.$message.error('请先选择数据') |
|
} |
|
}, |
|
async getTable(n,i){ |
|
let res = await this.$post(`${this.api.originalListById}?categoryId=${n.id}&showName=&pageNum=1&pageSize=10000`) |
|
res.list.map(n => { |
|
n.label = n.showName |
|
n.id = String(n.id) |
|
}) |
|
n.children = res.list |
|
if(!i && !this.tableName){ |
|
this.defaultTypeActive = res.list[0].id |
|
this.tableName = res.list[0].name |
|
this.curId = res.list[0].id |
|
} |
|
}, |
|
batchImport(){ |
|
this.$post(this.api.originalList).then(res => { |
|
res.map(n => { |
|
n.id = String(n.id) |
|
n.label = n.categoryName |
|
n.children.map(n => { |
|
n.id = String(n.id) |
|
n.label = n.categoryName |
|
n.children.map(n => { |
|
n.id = String(n.id) |
|
n.label = n.categoryName |
|
n.isThird = true |
|
}) |
|
}) |
|
}) |
|
res.map((n,i) => { |
|
if(n.children.length){ |
|
n.children.map(n => { |
|
if(n.children.length){ |
|
n.children.map(n => this.getTable(n,i)) |
|
}else{ |
|
this.getTable(n,i) |
|
} |
|
}) |
|
}else{ |
|
this.getTable(n,i) |
|
} |
|
}) |
|
setTimeout(() => { |
|
this.importTypeList = res |
|
this.getFields() |
|
},500) |
|
this.importVisible = true |
|
}).catch(res => {}) |
|
}, |
|
getFields(){ |
|
this.$get(`${this.api.previewData}?tableName=${this.tableName}&tableId=${this.curId}`).then(res => { |
|
let comment = res.comment |
|
let fieldHead = [] |
|
comment.map(n => { |
|
n.field != 'id' && n.field != 'operation_time' && fieldHead.push(n) |
|
}) |
|
this.fieldHead = fieldHead |
|
|
|
let data = res.data |
|
data.map(n => { |
|
for(let i in n){ |
|
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 |
|
}).catch(res => {}) |
|
this.importVisible = true |
|
}, |
|
importTypeClick(data){ |
|
if(data.name){ |
|
this.tableName = data.name |
|
this.curId = data.id |
|
this.getFields() |
|
} |
|
}, |
|
closeImport(){ |
|
|
|
}, |
|
confirmImport(){ |
|
let list = this.$refs.typeTree.getCheckedNodes() |
|
let names = [] |
|
let showNames = [] |
|
list.map(n => { |
|
if(n.name){ |
|
names.push(n.name) |
|
showNames.push(n.showName) |
|
} |
|
}) |
|
if(!names.length) return this.$message.warning('请选择数据') |
|
let data = [] |
|
let categoryId = Number(this.categoryId) |
|
names.map((n,i) => { |
|
data.push({ |
|
categoryId, |
|
name: n, |
|
showName: showNames[i], |
|
}) |
|
}) |
|
this.$post(this.api.saveTable,data).then(res => { |
|
this.$message.success('导入成功') |
|
this.getType() |
|
this.importVisible = false |
|
}).catch(res => {}) |
|
}, |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
/deep/.el-container{ |
|
.el-aside{ |
|
padding: 15px; |
|
background-color: #fff; |
|
.plus{ |
|
text-align: right; |
|
color: #9278FF; |
|
cursor: pointer; |
|
} |
|
.custom-tree-node{ |
|
flex: 1; |
|
display: inline-flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
.actions{ |
|
i{ |
|
margin-left: 5px; |
|
color: #9278FF; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|