|
|
|
|
@ -5,11 +5,14 @@ |
|
|
|
|
<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="true" v-loading="loadingType" @current-change="typeClick"> |
|
|
|
|
<el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" |
|
|
|
|
:current-node-key="categoryId" :props="defaultProps" :highlight-current="true" v-loading="loadingType" |
|
|
|
|
@current-change="typeClick"> |
|
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
|
|
<span :title="node.label">{{ node.label }}</span> |
|
|
|
|
<span class="actions"> |
|
|
|
|
<i class="el-icon-circle-plus-outline" @click.stop="addType(node)" v-if="data.level != 6" v-auth="'/data:数据架构:新增分类'"></i> |
|
|
|
|
<i class="el-icon-circle-plus-outline" @click.stop="addType(node)" v-if="data.level != 6" |
|
|
|
|
v-auth="'/data:数据架构:新增分类'"></i> |
|
|
|
|
<i class="el-icon-edit" @click.stop="editType(node)" v-auth="'/data:数据架构:编辑分类'"></i> |
|
|
|
|
<i class="el-icon-delete" @click.stop="delType(node)" v-auth="'/data:数据架构:删除分类'"></i> |
|
|
|
|
</span> |
|
|
|
|
@ -21,7 +24,8 @@ |
|
|
|
|
<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-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> |
|
|
|
|
@ -30,12 +34,13 @@ |
|
|
|
|
<el-button type="primary" round @click="delAllSelection" v-auth="'/data:数据架构:批量删除'">批量删除</el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-form> |
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
|
|
|
|
<el-table :data="listData" class="table" ref="table" header-align="center" |
|
|
|
|
@selection-change="handleSelectionChange"> |
|
|
|
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
|
|
|
|
<el-table-column type="index" width="70" 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}} |
|
|
|
|
{{ scope.row.tableComment ? scope.row.tableComment : scope.row.showName }} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="showName" label="产品表名称" align="center"></el-table-column> |
|
|
|
|
@ -43,7 +48,7 @@ |
|
|
|
|
<el-table-column prop="dataTotal" label="数据总量" width="100" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataSize" label="数据大小" width="100" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.row.dataSize}}M |
|
|
|
|
{{ scope.row.dataSize }}M |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" width="180" align="center"></el-table-column> |
|
|
|
|
@ -57,28 +62,21 @@ |
|
|
|
|
</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 background layout="total, prev, pager, next" :current-page="page" |
|
|
|
|
@current-change="handleCurrentChange" :total="total"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 导入数据 --> |
|
|
|
|
<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;"> |
|
|
|
|
<div style="overflow:auto;height: 558px;width:330px;padding:15px;background:#fff" ref="typeTreeWrap" @scroll="loadType"> |
|
|
|
|
<el-tree v-loading="importLoading" |
|
|
|
|
ref="typeTree" |
|
|
|
|
:data="importTypeList" |
|
|
|
|
node-key="id" |
|
|
|
|
accordion |
|
|
|
|
:default-expanded-keys="defaultTypeActive" |
|
|
|
|
:default-checked-keys="defaultTypeChecked" |
|
|
|
|
:current-node-key="curId" |
|
|
|
|
show-checkbox |
|
|
|
|
:props="defaultProps" |
|
|
|
|
highlight-current |
|
|
|
|
@node-click="importTypeClick" |
|
|
|
|
@node-expand="importTypeExpand" |
|
|
|
|
> |
|
|
|
|
<div style="overflow:auto;height: 558px;width:330px;padding:15px;background:#fff" ref="typeTreeWrap" |
|
|
|
|
@scroll="loadType"> |
|
|
|
|
<el-tree v-loading="importLoading" ref="typeTree" :data="importTypeList" node-key="id" accordion |
|
|
|
|
:default-expanded-keys="defaultTypeActive" :default-checked-keys="defaultTypeChecked" |
|
|
|
|
:current-node-key="curId" show-checkbox :props="defaultProps" highlight-current |
|
|
|
|
@node-click="importTypeClick" @node-expand="importTypeExpand"> |
|
|
|
|
|
|
|
|
|
</el-tree> |
|
|
|
|
</div> |
|
|
|
|
@ -88,9 +86,10 @@ |
|
|
|
|
<p class="hr_tag"></p> |
|
|
|
|
<span>预览</span> |
|
|
|
|
</div> |
|
|
|
|
<el-table :data="fieldData" stripe header-align="center" v-if="fieldHead.length"> |
|
|
|
|
<el-table :data="fieldData" header-align="center" v-if="fieldHead.length"> |
|
|
|
|
<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-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> |
|
|
|
|
@ -102,7 +101,8 @@ |
|
|
|
|
</span> |
|
|
|
|
</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> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="typeVisible = false">取 消</el-button> |
|
|
|
|
@ -111,9 +111,10 @@ |
|
|
|
|
</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 :data="previewData" class="table" 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-column v-for="(item, index) in previewHead" :prop="item.field" :key="index" :label="item.comment" |
|
|
|
|
align="center"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
</el-dialog> |
|
|
|
|
<!-- 编辑产品数据表名称 --> |
|
|
|
|
@ -126,19 +127,20 @@ |
|
|
|
|
</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 :data="previewData" class="table" header-align="center" row-key="id" :key="editIndex"> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<template v-if="scope.row.custom">序号</template> |
|
|
|
|
<template v-else>{{ scope.$index }}</template> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column v-for="(item,index) in previewHead" :prop="item.field" :key="index" :label="item.oldComment" align="center"> |
|
|
|
|
<el-table-column v-for="(item, index) in previewHead" :prop="item.field" :key="index" :label="item.oldComment" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<template v-if="scope.row.custom"> |
|
|
|
|
<el-input placeholder="请输入" size="medium" v-model="item.comment"></el-input> |
|
|
|
|
</template> |
|
|
|
|
<template v-else>{{scope.row[item.field]}}</template> |
|
|
|
|
<template v-else>{{ scope.row[item.field] }}</template> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
@ -153,7 +155,7 @@ |
|
|
|
|
import { uuid } from 'vue-uuid' |
|
|
|
|
import { Loading } from 'element-ui' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
loadingType: false, |
|
|
|
|
typeList: [], |
|
|
|
|
@ -206,29 +208,29 @@ export default { |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function(val) { |
|
|
|
|
keyword: function (val) { |
|
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
this.initData() |
|
|
|
|
},500) |
|
|
|
|
}, 500) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted(){ |
|
|
|
|
mounted () { |
|
|
|
|
this.getType() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取分类 |
|
|
|
|
getType(){ |
|
|
|
|
getType () { |
|
|
|
|
this.loadingType = true |
|
|
|
|
this.$post(this.api.getTableByClassification).then(res => { |
|
|
|
|
// 递归赋值,同时添加层级标识 |
|
|
|
|
function handleId(data,level = 0){ |
|
|
|
|
function handleId (data, level = 0) { |
|
|
|
|
data.map(n => { |
|
|
|
|
n.id = String(n.id) |
|
|
|
|
n.label = n.categoryName |
|
|
|
|
n.level = level + 1 |
|
|
|
|
if(n.children.length){ |
|
|
|
|
handleId(n.children,n.level) |
|
|
|
|
if (n.children.length) { |
|
|
|
|
handleId(n.children, n.level) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
@ -237,10 +239,10 @@ export default { |
|
|
|
|
this.loadingType = false |
|
|
|
|
// 如果是删除或者新增编辑分类后调的重新查询分类，则不用默认选中第一个子级，只有页面一加载完成才需要默认选中第一个子级，addEd就是操作完分类后的标识 |
|
|
|
|
if (!this.addEd) { |
|
|
|
|
if(res[0].children.length){ // 如果有孙级节点，则选中孙级节点，否则选中子级 |
|
|
|
|
if (res[0].children.length) { // 如果有孙级节点，则选中孙级节点，否则选中子级 |
|
|
|
|
this.categoryId = res[0].children[0].id |
|
|
|
|
this.defaultActive = [res[0].children[0].id] |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
this.categoryId = res[0].id |
|
|
|
|
this.defaultActive = [res[0].id] |
|
|
|
|
} |
|
|
|
|
@ -251,10 +253,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
this.addEd = false // 要重置为false |
|
|
|
|
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 => { |
|
|
|
|
const list = res.pageList.records |
|
|
|
|
list.map(e => { |
|
|
|
|
@ -271,32 +273,32 @@ export default { |
|
|
|
|
}) |
|
|
|
|
this.listData = list |
|
|
|
|
this.total = res.pageList.total |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 筛选的时候把分页重置为1 |
|
|
|
|
initData(){ |
|
|
|
|
initData () { |
|
|
|
|
this.page = 1 |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
// 点击分类后查询表 |
|
|
|
|
typeClick(data,node){ |
|
|
|
|
typeClick (data, node) { |
|
|
|
|
this.categoryId = data.id |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
// 新增分类 |
|
|
|
|
addType(row){ |
|
|
|
|
addType (row) { |
|
|
|
|
if (row) this.defaultActive = [row.data.id] // 添加一级分类是没有id的，传到这个方法里row是0 |
|
|
|
|
this.typeVisible = true |
|
|
|
|
this.levelId = row ? row.data.id : 0 // levelId是添加分类的时候要传到后端的父级id，一级分类没有父级id，所以传0 |
|
|
|
|
}, |
|
|
|
|
// 编辑分类 |
|
|
|
|
editType(row){ |
|
|
|
|
editType (row) { |
|
|
|
|
this.typeVisible = true |
|
|
|
|
this.id = row.data.id |
|
|
|
|
this.categoryName = row.data.categoryName |
|
|
|
|
}, |
|
|
|
|
// 删除分类 |
|
|
|
|
delType(row){ |
|
|
|
|
delType (row) { |
|
|
|
|
// 该分类下的数据表已存在于产品管理中，是否确认删除？ |
|
|
|
|
this.$confirm('确定要删除吗？', '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
@ -305,16 +307,16 @@ export default { |
|
|
|
|
this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => { |
|
|
|
|
this.$message.success('删除成功') |
|
|
|
|
this.getType() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(() => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 保存分类 |
|
|
|
|
confirmType(){ |
|
|
|
|
if(this.submited) return false // 提交防抖标识 |
|
|
|
|
confirmType () { |
|
|
|
|
if (this.submited) return false // 提交防抖标识 |
|
|
|
|
this.submited = true |
|
|
|
|
this.addEd = true |
|
|
|
|
if(this.id){ |
|
|
|
|
this.$post(this.api.updateCategory,{ |
|
|
|
|
if (this.id) { |
|
|
|
|
this.$post(this.api.updateCategory, { |
|
|
|
|
id: this.id, |
|
|
|
|
categoryName: this.categoryName |
|
|
|
|
}).then(res => { |
|
|
|
|
@ -323,12 +325,12 @@ export default { |
|
|
|
|
this.typeVisible = false |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.submited = false |
|
|
|
|
},1500) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => { |
|
|
|
|
this.submited = false |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
this.$post(this.api.saveCategory,{ |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.saveCategory, { |
|
|
|
|
levelId: this.levelId, |
|
|
|
|
categoryName: this.categoryName |
|
|
|
|
}).then(res => { |
|
|
|
|
@ -337,14 +339,14 @@ export default { |
|
|
|
|
this.typeVisible = false |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.submited = false |
|
|
|
|
},1500) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => { |
|
|
|
|
this.submited = false |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 关闭添加编辑分类弹框回调 |
|
|
|
|
closeType(){ |
|
|
|
|
closeType () { |
|
|
|
|
this.id = 0 |
|
|
|
|
this.levelId = 0 |
|
|
|
|
this.categoryName = '' |
|
|
|
|
@ -354,7 +356,7 @@ export default { |
|
|
|
|
* @param row 行数据 |
|
|
|
|
* @param isEdit 是否是从自定义表头进来的 |
|
|
|
|
*/ |
|
|
|
|
preview(row, isEdit){ |
|
|
|
|
preview (row, isEdit) { |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => { |
|
|
|
|
let comment = res.comment |
|
|
|
|
let previewHead = [] |
|
|
|
|
@ -371,33 +373,33 @@ export default { |
|
|
|
|
custom: true |
|
|
|
|
}) |
|
|
|
|
data.map(n => { |
|
|
|
|
for(let i in n){ |
|
|
|
|
for (let i in n) { |
|
|
|
|
// 如果是以+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.previewData = data |
|
|
|
|
if (!isEdit) this.previewVisible = true // 非自定义表头进来的，才需要显示预览弹框 |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 删除表 |
|
|
|
|
delTable(row){ |
|
|
|
|
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(() => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 编辑产品表名 |
|
|
|
|
editName(row){ |
|
|
|
|
editName (row) { |
|
|
|
|
this.curRow = JSON.parse(JSON.stringify(row)) // 深拷贝当前行数据 |
|
|
|
|
this.nameVisible = true |
|
|
|
|
}, |
|
|
|
|
// 保存产品表名 |
|
|
|
|
confirmName(){ |
|
|
|
|
confirmName () { |
|
|
|
|
this.$post(this.api.editTableName, { |
|
|
|
|
id: this.curRow.id, |
|
|
|
|
showName: this.curRow.showName, |
|
|
|
|
@ -405,33 +407,33 @@ export default { |
|
|
|
|
this.$message.success('修改成功') |
|
|
|
|
this.nameVisible = false |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 编辑产品表头 |
|
|
|
|
editHead(row){ |
|
|
|
|
editHead (row) { |
|
|
|
|
this.curRow = JSON.parse(JSON.stringify(row)) // 深拷贝当前行数据 |
|
|
|
|
this.preview(row, 1) |
|
|
|
|
this.editIndex++ // 强刷新表 |
|
|
|
|
this.headVisible = true |
|
|
|
|
}, |
|
|
|
|
// 保存自定义表头 |
|
|
|
|
confirmHead(){ |
|
|
|
|
confirmHead () { |
|
|
|
|
let data = JSON.parse(JSON.stringify(this.curComment)) |
|
|
|
|
this.$post(`${this.api.updateTableCommit}?tableName=${this.curRow.name}`, data).then(res => { |
|
|
|
|
this.$message.success('修改成功') |
|
|
|
|
this.headVisible = false |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange(val) { |
|
|
|
|
handleSelectionChange (val) { |
|
|
|
|
this.multipleSelection = val |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange(val) { |
|
|
|
|
handleCurrentChange (val) { |
|
|
|
|
this.page = val |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
delAllSelection() { |
|
|
|
|
if(this.multipleSelection.length != ''){ |
|
|
|
|
delAllSelection () { |
|
|
|
|
if (this.multipleSelection.length != '') { |
|
|
|
|
let newArr = this.multipleSelection |
|
|
|
|
let delList = newArr.map(item => { |
|
|
|
|
return `tableIds=${item.id}` |
|
|
|
|
@ -440,76 +442,76 @@ export default { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
this.$post(`${this.api.deleteTable}?${delList.join('&')}`).then(res => { |
|
|
|
|
if(delList.length == this.listData.length){ |
|
|
|
|
if(this.page > 1){ |
|
|
|
|
this.page = this.page-1 |
|
|
|
|
if (delList.length == this.listData.length) { |
|
|
|
|
if (this.page > 1) { |
|
|
|
|
this.page = this.page - 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.$refs.table.clearSelection() |
|
|
|
|
this.$message.success('删除成功') |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(() => {}) |
|
|
|
|
}else{ |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
} else { |
|
|
|
|
this.$message.error('请先选择数据') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 递归查询当前展开的分类下的子分类 |
|
|
|
|
getMoreTable(list,id){ |
|
|
|
|
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) |
|
|
|
|
if (n.id == id) { |
|
|
|
|
this.getTable(n, 1) |
|
|
|
|
} else if (n.children && n.children.length) { |
|
|
|
|
this.getMoreTable(n.children, id) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 懒加载后新加载出来的数据可能是之前就存在于这个分类下了的,因此是要自动勾选的,所以在这里去拿这个分类下已经存在了的表的id去做一个重新勾选 |
|
|
|
|
renderChecked(){ |
|
|
|
|
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{ |
|
|
|
|
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){ |
|
|
|
|
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) |
|
|
|
|
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) |
|
|
|
|
}, 50) |
|
|
|
|
}, |
|
|
|
|
// 查询分类下的表 |
|
|
|
|
getTable(n,isConcat){ |
|
|
|
|
this.tablePromises.push(new Promise((resolve,reject) => { |
|
|
|
|
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)){ |
|
|
|
|
if (this.defaultTypeChecked.includes(n.id)) { |
|
|
|
|
n.disabled = true |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// 如果是懒加载,则拼接 |
|
|
|
|
if(isConcat){ |
|
|
|
|
if (isConcat) { |
|
|
|
|
n.children = n.children.concat(list) |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
n.children = list |
|
|
|
|
n.tableLen = res.list.total |
|
|
|
|
} |
|
|
|
|
@ -522,19 +524,19 @@ export default { |
|
|
|
|
})) |
|
|
|
|
}, |
|
|
|
|
// 导入数据 |
|
|
|
|
batchImport(){ |
|
|
|
|
batchImport () { |
|
|
|
|
this.importLoading = true |
|
|
|
|
this.importVisible = true |
|
|
|
|
// 这里查的是原始分类，跟其他任何地方查分类的接口都不一样，不要混淆，如果要改这个地方，要跟后端沟通 |
|
|
|
|
this.$post(this.api.originalList).then(res => { |
|
|
|
|
// 处理id和label。因为这个树形要同时展示分类和表，所以name的key统一用label（分类和表的name的key不一样） |
|
|
|
|
function handleId(data){ |
|
|
|
|
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){ |
|
|
|
|
if (n.children.length) { |
|
|
|
|
handleId(n.children) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
@ -547,9 +549,9 @@ export default { |
|
|
|
|
// 递归处理分页 |
|
|
|
|
const handleId = data => { |
|
|
|
|
data.map(n => { |
|
|
|
|
if(n.children.length){ |
|
|
|
|
if (n.children.length) { |
|
|
|
|
handleId(n.children) |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
// 默认分页码数为1 |
|
|
|
|
n.typeTreePage = 1 |
|
|
|
|
this.getTable(n) |
|
|
|
|
@ -580,7 +582,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 查询表的字段 |
|
|
|
|
getFields(){ |
|
|
|
|
getFields () { |
|
|
|
|
this.$get(`${this.api.staticPreview}?tableName=${this.tableName}`).then(res => { |
|
|
|
|
let comment = res.comment |
|
|
|
|
let fieldHead = [] |
|
|
|
|
@ -592,38 +594,38 @@ export default { |
|
|
|
|
|
|
|
|
|
let data = res.data |
|
|
|
|
data.map(n => { |
|
|
|
|
for(let i in n){ |
|
|
|
|
for (let i in n) { |
|
|
|
|
// 如果是以+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 |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
this.importVisible = true |
|
|
|
|
}, |
|
|
|
|
// 分类点击回调 |
|
|
|
|
importTypeClick(data){ |
|
|
|
|
importTypeClick (data) { |
|
|
|
|
// 如果点击的是表,则加载这个表下面的字段,分类则不用 |
|
|
|
|
if(data.name){ |
|
|
|
|
if (data.name) { |
|
|
|
|
this.tableName = data.name |
|
|
|
|
this.curId = data.id |
|
|
|
|
this.getFields() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 分类展开的回调 |
|
|
|
|
importTypeExpand(obj,node,com){ |
|
|
|
|
importTypeExpand (obj, node, com) { |
|
|
|
|
this.curExpand = obj.id |
|
|
|
|
this.renderChecked() |
|
|
|
|
}, |
|
|
|
|
// 关闭导入弹框回调 |
|
|
|
|
closeImport(){ |
|
|
|
|
closeImport () { |
|
|
|
|
this.$refs.typeTree.setCheckedKeys([]) |
|
|
|
|
this.categorys = [] |
|
|
|
|
}, |
|
|
|
|
// 查询分类下的表id |
|
|
|
|
getNames(list){ |
|
|
|
|
getNames (list) { |
|
|
|
|
const categoryId = Number(this.categoryId) |
|
|
|
|
return new Promise((resolve,reject) => { |
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
this.$get(`${this.api.getAllTableInfoByCategoryId}?categoryId=${list.join()}`).then(res => { |
|
|
|
|
const list = res.tableInfo |
|
|
|
|
list.map(e => { |
|
|
|
|
@ -632,24 +634,24 @@ export default { |
|
|
|
|
}) |
|
|
|
|
this.categorys = list |
|
|
|
|
resolve() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 保存成功后的操作 |
|
|
|
|
saveSuccess() { |
|
|
|
|
saveSuccess () { |
|
|
|
|
this.$message.success('导入成功') |
|
|
|
|
this.getData() |
|
|
|
|
this.importVisible = false |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.submited = false |
|
|
|
|
},1000) |
|
|
|
|
}, 1000) |
|
|
|
|
}, |
|
|
|
|
// 导入表 |
|
|
|
|
confirmImport(){ |
|
|
|
|
if(this.submited) return false // 导入防抖标识 |
|
|
|
|
confirmImport () { |
|
|
|
|
if (this.submited) return false // 导入防抖标识 |
|
|
|
|
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 |
|
|
|
|
// 分类要调另一个接口去查询该分类下的表，所以，要先把分类id和表id分开，再一次性传分类id去查询表，再把查询出来的表跟另外勾选的表拼接，再保存。要做去重 |
|
|
|
|
const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id（分类没有name，表才有name），再获取分类真正的id（id作了自增处理，获取的id不是真正的id，realId才是这个分类真正的id） |
|
|
|
|
@ -683,7 +685,7 @@ export default { |
|
|
|
|
// 如果切割成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) => { |
|
|
|
|
promiseList.push(new Promise((resolve, reject) => { |
|
|
|
|
this.$post(this.api.saveTable, e).then(res => { |
|
|
|
|
resolve() |
|
|
|
|
}).catch(res => { |
|
|
|
|
@ -693,7 +695,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
Promise.all(promiseList).then(res => { |
|
|
|
|
dataList.slice(6).map(e => { |
|
|
|
|
promiseList.push(new Promise((resolve,reject) => { |
|
|
|
|
promiseList.push(new Promise((resolve, reject) => { |
|
|
|
|
this.$post(this.api.saveTable, e).then(res => { |
|
|
|
|
resolve() |
|
|
|
|
}).catch(res => { |
|
|
|
|
@ -711,7 +713,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
dataList.map(e => { |
|
|
|
|
promiseList.push(new Promise((resolve,reject) => { |
|
|
|
|
promiseList.push(new Promise((resolve, reject) => { |
|
|
|
|
this.$post(this.api.saveTable, e).then(res => { |
|
|
|
|
resolve() |
|
|
|
|
}).catch(res => { |
|
|
|
|
@ -742,28 +744,33 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
height: calc(100vh - 223px); |
|
|
|
|
padding: 0 24px; |
|
|
|
|
|
|
|
|
|
.side { |
|
|
|
|
width: 300px; |
|
|
|
|
padding: 24px 10px 24px 0; |
|
|
|
|
margin-right: 24px; |
|
|
|
|
border-right: 1px solid rgba(0, 0, 0, 0.06); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: calc(100% - 374px); |
|
|
|
|
padding: 24px 0; |
|
|
|
|
} |
|
|
|
|
.plus{ |
|
|
|
|
|
|
|
|
|
.plus { |
|
|
|
|
text-align: right; |
|
|
|
|
color: #9278FF; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.custom-tree-node{ |
|
|
|
|
|
|
|
|
|
.custom-tree-node { |
|
|
|
|
flex: 1; |
|
|
|
|
display: inline-flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
.actions{ |
|
|
|
|
i{ |
|
|
|
|
|
|
|
|
|
.actions { |
|
|
|
|
i { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
color: #9278FF; |
|
|
|
|
} |
|
|
|
|
|
