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

Merge remote-tracking branch 'origin/master'

Browse Source 
# Conflicts:
#	src/views/data/Introduce.vue
dev_2022-03-03
e 3 years ago
parent ce1667716d 37bf68f2e5
commit 880d7e1795
3 changed files with 190 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 179
      src/views/data/Framework.vue
  2. 24
      src/views/data/Introduce.vue
  3. 27
      src/views/data/Product.vue

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

@ -1,6 +1,7 @@
<template>
<div class="wrap">
<el-container>
<!-- 左边的分类 -->
<el-aside width="300px">
<div class="plus">
<i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i>
@ -16,7 +17,7 @@
</span>
</el-tree>
</el-aside>
<!-- 右边的表 -->
<el-main style="padding-top: 0">
<el-card class="main-wrap" shadow="hover">
<el-form label-width="80px" class="flex-between mgb20">
@ -64,7 +65,7 @@
</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;">
<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>
</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">
@ -112,14 +113,14 @@
<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>
<!-- 编辑产品数据表名称 -->
<el-dialog title="编辑产品数据表名称" :visible.sync="nameVisible" width="24%" center :close-on-click-modal="false">
<el-input placeholder="请输入产品数据表名称" v-model="curRow.showName"></el-input>
<span slot="footer" class="dialog-footer">
@ -127,7 +128,7 @@
<el-button type="primary" @click="confirmName">确 定</el-button>
</span>
</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-column type="index" width="100" label="序号" align="center">
@ -162,7 +163,7 @@ export default {
label: 'label'
},
defaultActive: [],
added: false,
addEd: false,
typeVisible: false,
categoryName: '',
categoryId: '',
@ -194,7 +195,7 @@ export default {
previewData: [],
curComment: [],
submited: false,
names: [],
categorys: [],
nameVisible: false,
curRow: {},
headVisible: false,
@ -216,6 +217,7 @@ export default {
this.getType()
},
methods: {
// 获取分类
getType(){
this.$post(this.api.getTableByClassification).then(res => {
// 递归赋值,同时添加层级标识
@ -230,29 +232,31 @@ export default {
})
}
handleId(res)
this.typeList = res
if (!this.added) {
if(res[0].children.length){
// 如果是删除或者新增编辑分类后调的重新查询分类，则不用默认选中第一个子级，只有页面一加载完成才需要默认选中第一个子级，addEd就是操作完分类后的标识
if (!this.addEd) {
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]
}
// 取第一个分类的id
// 选中默认分类
this.$nextTick(() => {
this.$refs.type.setCurrentKey(res[0].children[0].id)
this.$refs.type.setCurrentKey(this.categoryId)
})
}
this.added = false
this.addEd = false // 要重置为false
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 => {
const list = res.pageList.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) {
@ -267,40 +271,46 @@ export default {
this.total = res.pageList.total
}).catch(res => {})
},
// 筛选的时候把分页重置为1
initData(){
this.page = 1
this.getData()
},
// 点击分类后查询表
typeClick(data,node){
this.categoryId = data.id
this.getData()
},
// 新增分类
addType(row){
if (row) this.defaultActive = [row.data.id]
if (row) this.defaultActive = [row.data.id] // 添加一级分类是没有id的，传到这个方法里row是0
this.typeVisible = true
this.levelId = row ? row.data.id : 0
this.levelId = row ? row.data.id : 0 // levelId是添加分类的时候要传到后端的父级id，一级分类没有父级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.added = true
this.addEd = true
this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => {
this.$message.success('删除成功')
this.getType()
}).catch(res => {})
}).catch(() => {})
},
// 保存分类
confirmType(){
if(this.submited) return false
if(this.submited) return false // 提交防抖标识
this.submited = true
this.added = true
this.addEd = true
if(this.id){
this.$post(this.api.updateCategory,{
id: this.id,
@ -331,22 +341,30 @@ export default {
})
}
},
// 关闭添加编辑分类弹框回调
closeType(){
this.id = 0
this.levelId = 0
this.categoryName = ''
},
/**
* 表预览
* @param row 行数据
* @param isEdit 是否是从自定义表头进来的
*/
preview(row, isEdit){
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
let comment = res.comment
let previewHead = []
this.curComment = comment
this.curComment = comment // 用来修改表头的，先保存完整的表头，修改表头的时候需要传给后端
comment.map(n => {
// 表格上不用展示id和操作时间
n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
})
this.previewHead = previewHead
let data = res.data
// 如果是自定义表头，则在数据最前面加个custom的行，用来修改表头
isEdit && data.unshift({
custom: true
})
@ -357,9 +375,10 @@ export default {
}
})
this.previewData = data
if (!isEdit) this.previewVisible = true
if (!isEdit) this.previewVisible = true // 非自定义表头进来的，才需要显示预览弹框
}).catch(res => {})
},
// 删除表
delTable(row){
this.$confirm('确定要删除吗？', '提示', {
type: 'warning'
@ -370,10 +389,12 @@ export default {
}).catch(res => {})
}).catch(() => {})
},
// 编辑产品表名
editName(row){
this.curRow = JSON.parse(JSON.stringify(row))
this.nameVisible = true
},
// 保存产品表名
confirmName(){
this.$post(this.api.editTableName, {
id: this.curRow.id,
@ -384,12 +405,14 @@ export default {
this.getData()
}).catch(res => {})
},
// 编辑产品表头
editHead(row){
this.curRow = JSON.parse(JSON.stringify(row))
this.preview(row, 1)
this.editIndex++
this.editIndex++ // 强刷新表
this.headVisible = true
},
// 保存自定义表头
confirmHead(){
let data = JSON.parse(JSON.stringify(this.curComment))
this.$post(`${this.api.updateTableCommit}?tableName=${this.curRow.name}`, data).then(res => {
@ -487,9 +510,12 @@ export default {
n.typeTreePage++
}).catch(res => {})
},
// 导入数据
batchImport(){
// 这里查的是原始分类，跟其他任何地方查分类的接口都不一样，不要混淆，如果要改这个地方，要跟后端沟通
this.$post(this.api.originalList).then(res => {
const that = this
// 处理id和label。因为这个树形要同时展示分类和表，所以name的key统一用label（分类和表的name的key不一样）
function handleId(data){
data.map(n => {
that.importTypeIndex++
@ -503,10 +529,12 @@ export default {
})
}
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 => {
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
// 递归处理分页
function handleId(data){
data.map(n => {
if(n.children.length){
@ -519,7 +547,17 @@ export default {
})
}
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)
}
})
}
setTimeout(() => {
handleDisabled(res)
this.importTypeList = res
},500)
}).catch(res => {})
@ -527,6 +565,7 @@ export default {
this.importVisible = true
}).catch(res => {})
},
// 查询表的字段
getFields(){
this.$get(`${this.api.staticPreview}?tableName=${this.tableName}`).then(res => {
let comment = res.comment
@ -548,6 +587,7 @@ export default {
}).catch(res => {})
this.importVisible = true
},
// 分类点击回调
importTypeClick(data){
// 如果点击的是表,则加载这个表下面的字段,分类则不用
if(data.name){
@ -561,48 +601,74 @@ export default {
this.curExpand = obj.id
this.renderChecked()
},
// 关闭导入弹框回调
closeImport(){
this.$refs.typeTree.setCheckedKeys([])
this.names = []
this.categorys = []
},
// 获取names和showNames,提交的时候需要
// 查询分类下的表id
getNames(list){
const categoryId = Number(this.categoryId)
return new Promise((resolve,reject) => {
// 根据选择的分类id查询下面的表id
this.$get(`${this.api.getAllTableInfoByCategoryId}?categoryId=${list.join()}`).then(res => {
const list = res.tableInfo
list.map(e => {
delete e.id
delete e.id // id不用传给后端
e.categoryId = categoryId
})
this.names = list
this.categorys = list
resolve()
}).catch(res => {})
})
},
// 保存成功后的操作
saveSuccess() {
this.$message.success('导入成功')
this.getData()
this.importVisible = false
setTimeout(() => {
this.submited = false
},1000)
},
// 导入表
confirmImport(){
if(this.submited) return false
const checked = this.$refs.typeTree.getCheckedNodes() // 勾选的数据
if(this.submited) return false // 导入防抖标识
const checked = this.$refs.typeTree.getCheckedNodes().filter(e => !e.disabled) // 勾选的数据
// 如果没有选择任何数据
if(!checked.length) return this.$message.warning('请选择数据')
this.submited = true
const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id，再获取分类真正的id
const tableIds = checked.filter(e => e.name)
const categoryId = Number(this.categoryId)
// 分类要调另一个接口去查询该分类下的表，所以，要先把分类id和表id分开，再一次性传分类id去查询表，再把查询出来的表跟另外勾选的表拼接，再保存。要做去重
const typeIds = checked.filter(e => !e.name).map(e => e.realId) // 先筛选出分类id（分类没有name，表才有name），再获取分类真正的id（id作了自增处理，获取的id不是真正的id，realId才是这个分类真正的id）
const tableIds = checked.filter(e => e.name) // 筛选出表
const categoryId = Number(this.categoryId) // 外面勾选的分类，即要导入数据的分类
// 给表加categoryId
tableIds.map(e => {
delete e.id
e.categoryId = categoryId
})
/**
* 根据某个值给数组对象去重
* @param arr 要处理的数组
* @param val 去重依据的值
*/
function uniq (arr, val) {
const res = new Map()
return arr.filter(e => !res.has(e[val]) && res.set(e[val], 1))
}
// 分类id，如果有分类id，则调接口去查询分类下的表，再新增，否则，直接拿表id去新增
if (typeIds.length) {
this.getNames(typeIds).then(() => {
const data = this.names
const allIds = [...this.categorys, ...tableIds] // 合并通过分类查询到的表id和另外勾选的表id
const data = uniq(allIds, 'name')
const dataList = []
// 每个接口只新增2000个表，一次新增太多无法请求成功，这里做个分割
for (let i = 0, len = data.length; i < len; i += 2000) {
dataList.push(data.slice(i, i + 2000))
}
const promiseList = []
dataList.map(e => {
// 如果切割成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()
@ -612,24 +678,43 @@ export default {
}))
})
Promise.all(promiseList).then(res => {
this.$message.success('导入成功')
this.getData()
this.importVisible = false
setTimeout(() => {
this.submited = false
},1000)
dataList.slice(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 => {
this.saveSuccess()
}).catch(err => {
this.submited = false
})
}).catch(err => {
this.submited = false
})
} else {
this.$post(this.api.saveTable, tableIds).then(res => {
this.$message.success('导入成功')
this.getData()
this.importVisible = false
setTimeout(() => {
dataList.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 => {
this.saveSuccess()
}).catch(err => {
this.submited = false
},1000)
})
}
})
} else { // 保存表
this.$post(this.api.saveTable, tableIds).then(res => {
this.saveSuccess()
}).catch(res => {
this.submited = false
})

24
src/views/data/Introduce.vue
Unescape View File

@ -24,7 +24,6 @@
<p class="label">数据源</p>
<el-input style="width: 250px" placeholder="请输入数据源" v-model="dataSource" type="text" :disabled="!editing"></el-input>
</div>
</template>
<div class="field">
<p class="label">关键字</p>
@ -124,6 +123,7 @@ export default {
this.getKeyword()
}).catch(res => {})
},
// 分类点击
typeClick(data,node){
this.editing = false
this.categoryId = data.id
@ -133,6 +133,7 @@ export default {
this.dataSource = data.dataSource
this.getKeyword()
},
// 获取关键词
getKeyword(){
this.$get(this.api.getKeywordByCategoryId,{
categoryId: this.categoryId
@ -140,12 +141,14 @@ export default {
this.keywordList = res.keywords
}).catch(res => {})
},
// 进入编辑状态
edit(){
this.editing = true
this.introduce = this.introduceText
},
confirmEdit(){
const id = this.categoryId
// 保存数据介绍和数据源
saveType(){
const id = this.categoryId // 获取当前分类id
this.$post(this.api.updateCategory,{
id,
introduce: this.introduce,
@ -158,6 +161,7 @@ export default {
this.getData()
}).catch(res => {})
},
// 删除关键词
delKeyword(item) {
this.$post(`${this.api.deleteKeyword}?categoryId=${this.categoryId}&keyword=${item.keyword}`).then(res => {
this.$message.success('删除成功')
@ -180,20 +184,24 @@ export default {
this.confirmEdit()
}
},
addKeyword() {
const keyword = this.newKeyword
// 保存
confirmData() {
const keyword = this.newKeyword // 获取输入的关键词
// 如果有关键词，则调新增关键词的接口，否则，直接调保存分类信息的接口去保存数据介绍和数据源
if (keyword) {
// 同个分类下，关键词不能重复
if (this.keywordList.find(e => e.keyword === keyword)) return this.$message.error('请不要输入重复关键字！')
this.confirmEdit()
this.saveType()
// 新增关键词
this.$post(this.api.addKeyword,{
categoryId: this.categoryId,
keyword
}).then(res => {
this.newKeyword = ''
this.newKeyword = '' // 新增后，输入框清空
this.getKeyword()
}).catch(res => {})
} else {
this.confirmEdit()
this.saveType()
}
}
}

27
src/views/data/Product.vue
Unescape View File

@ -241,6 +241,7 @@ export default {
this.getData()
},
methods: {
// 获取产品列表
getData() {
this.$post(this.api.listByEntity,{
createTime: this.startTime,
@ -254,17 +255,19 @@ export default {
this.totals = res.pageList.total
}).catch(res => {})
},
// 重置分页为1
initData(){
this.page = 1
this.getData()
},
// 获取分类下的表
getTable(n,isConcat){
this.$post(`${this.api.getIdQueryTable}?categoryId=${n.originId}&showName=&pageNum=${n.typePage}&pageSize=${this.typeUnit}&updateTime=`).then(res => {
let list = res.pageList.records
list.map(n => {
n.label = n.showName
n.id = String(n.id)
n.disabled = true
n.disabled = true // 外面的弹框里的分类禁止操作，只能查看
})
// 如果是懒加载的情况,则拼接
if(isConcat){
@ -293,7 +296,7 @@ export default {
})
}
handleId(res)
this.typeConfigList = JSON.parse(JSON.stringify(res))
this.typeConfigList = JSON.parse(JSON.stringify(res)) // 深拷贝，用来数据配置里直接使用
// 获取分类下的表
function getTable(data){
@ -301,8 +304,8 @@ export default {
if(n.children.length){
getTable(n.children)
}else{
n.typePage = 1
n.disabled = true
n.typePage = 1 // 获取表要用到的分页
n.disabled = true // 表同样禁止操作
that.getTable(n)
}
})
@ -377,25 +380,29 @@ export default {
}
},50)
},
// 获取产品详情
getDetail(){
this.$post(`${this.api.findById}?id=${this.id}`).then(res => {
const data = res.product
this.productName = data.productName
this.market = data.market
this.checkedIds = data.tableId.split(',')
this.$refs.type.setCheckedKeys(this.checkedIds)
this.$refs.type.setCheckedKeys(this.checkedIds) // 选中已选的表
}).catch(res => {})
},
// 新增产品
add(){
this.getType()
this.id = ''
this.checkedIds = []
},
// 编辑产品
edit(row){
this.getType(true)
this.id = row.id
this.userId = row.userId
},
// 启用禁用产品，直接调用编辑产品的接口，状态变下即可
switchOff(val,row) {
this.$post(this.api.updateProduct,{
id: row.id,
@ -413,11 +420,13 @@ export default {
this.$message.success(val ? '上架成功' : '下架成功')
}).catch(err => {})
},
// 表预览
preview(row){
this.getType(true)
this.isDetail = true
this.id = row.id
},
// 删除产品
handleDelete(row) {
this.$confirm('确定要删除吗？', '提示', {
type: 'warning'
@ -452,6 +461,7 @@ export default {
this.page = val
this.getData()
},
// 关闭产品弹框回调
closeProduct(){
this.productName = ''
this.market = ''
@ -485,6 +495,7 @@ export default {
this.configLoading = false
})
},
// 操作产品保存
confirm(){
if(this.submited) return false
if(!this.productName) return this.$message.warning('请输入数据产品名称')
@ -527,6 +538,7 @@ export default {
})
}
},
// 配置数据
configData(){
this.configVisible = true
this.getConfigType()
@ -537,11 +549,13 @@ export default {
this.$refs.typeConfig.setCheckedKeys(this.configIds)
}
},
// 数据配置里的分类点击回调
typeConfigClick(data){
this.categoryId = data.id
this.categoryOriginId = data.originId
this.getConfigTable()
},
// 关闭数据配置弹框回调
closeConfig(){
// 关闭的时候清除多选
this.$refs.typeConfig.setCheckedNodes([])
@ -577,6 +591,7 @@ export default {
this.totalConfig = res.pageList.total
}).catch(res => {})
},
// 重置数据配置里的分页
initConfigData(){
this.pageConfig = 1
this.getConfigTable()
@ -585,6 +600,7 @@ export default {
this.pageConfig = val
this.getConfigTable()
},
// 预览
previewConfig(row){
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
let comment = res.comment
@ -606,6 +622,7 @@ export default {
this.previewVisible = true
}).catch(res => {})
},
// 数据配置保存
confirmConfig(){
const list = this.$refs.typeConfig.getCheckedNodes().map(e => e.originId) // 获取选中的id
this.getIds(list).then(() => {

Write Preview
Loading…
Cancel
Save