2112A-ONE
/
cloud-ui
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成表结构和联合查询的配置

master
面包骑士 2024-09-01 10:43:34 +08:00
parent 8434767a7a
commit 0a302cb1d9
5 changed files with 182 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/quest/node/components/node/type/exporFind.vue
View File

@ -24,7 +24,7 @@
</div>
<div align="center">
<el-button @click="disp.findFlag = false">确认</el-button>
<el-button type="primary" @click="this.disp.updFlag = true">修改配置</el-button>
<el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
</div>
</div>
</template>
@ -57,11 +57,12 @@ export default {
computed: {},
// 生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.init()
},
// 方法集合",
methods: {
// 根据节点编码获取节点的所有信息,包括参数配置
getInfo() {
// 初始化
info() {
console.log(this.data)
console.log(this.node)
},

197
src/views/quest/node/components/node/type/exporUpd2.vue
View File

@ -1,53 +1,26 @@
<template>
<div @click="csh">
<div style="padding-left: 10px;padding-right: 10px;">
<el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
<el-form-item label="数据库名称" prop="dbName">
<el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable @change="handleQuery">
<el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
</el-select>
</el-form-item>
<el-form-item label="表名称" prop="tableName">
<el-input
v-model="queryParams.tableName"
clearable
@change="handleQuery"
placeholder="请输入表名称" />
</el-form-item>
<el-form-item label="表描述" prop="tableComment">
<el-input
v-model="queryParams.tableComment"
clearable
@change="handleQuery"
placeholder="请输入表描述" />
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查找</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table ref="table" :data="tableOptions" height="300px">
<el-table-column :show-overflow-tooltip="true" label="表名称" prop="tableName" />
<el-table-column :show-overflow-tooltip="true" label="表描述" prop="tableComment" />
<el-table-column label="操作" width="50px">
<template slot-scope="scope">
<el-button type="text" @click="selectTable(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<el-divider content-position="left">选择字段 v</el-divider>
<el-table ref="table" :data="fieldsOptions" height="300px"
@row-click="clickRow" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
<el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
<el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
</el-table>
<br><br>
<div align="center">
<el-button type="primary" @click="saveDisposition">确 定</el-button>
<el-button @click="disp.updFlag = false">取 消</el-button>
</div>
<div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<span v-if="reqDispData && reqDispData.dbTableName">输入表信息:
<span v-for="item in reqDispData.dbTableName">{{ item }} &nbsp; &nbsp; </span>
</span>
<span v-else>无输入表</span>
</el-col>
</el-row>
<span>
<el-table ref="table" :data="reqDispData.fields" height="300px"
@row-click="clickRow" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
<el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
<el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
</el-table>
</span>
<br><br>
<div align="center">
<el-button type="primary" @click="toSelectResp">确 定</el-button>
<el-button @click="disp.updFlag = false">取 消</el-button>
</div>
</div>
</template>
@ -55,13 +28,14 @@
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
// 例如：import 《组件名称》 from '《组件路径》,
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
import {batchAddUpd} from "@/api/quest/disposition";
import {listDisposition} from "@/api/quest/disposition";
export default {
// import引入的组件需要注入到对象中才能使用"
name: 'tableUpd',
name: 'exporUpd',
props: {
data: {},
node: {},
disp: {
nodeCode: undefined,
nodeType: undefined,
@ -71,120 +45,37 @@ export default {
db: {},
fields: []
}
}
},
},
data() {
// 这里存放数据"
return {
// 数据库列表
dbNameOptions: [],
// 展示数据表列表
tableOptions: [],
// 字段列表
fieldsOptions: [],
// 所有数据库列表
tableList: [],
queryParams: {}
// 上一级节点编码
preNodeId: [],
// 上一级节点配置信息
preNodeDisp: [],
// 最终选择的配置
selectDisp: [],
// 上一级节点配置信息整合
reqDispData: {
dbTableName: [],
fields: []
},
respDispData: {
dbTableName: [],
fields: []
}
}
},
// 计算属性 类似于data概念",
computed: {},
// 生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.init()
},
// 方法集合",
methods: {
/** 搜索按钮操作 */
handleQuery() {
this.tableOptions = []
this.tableList.forEach(table => {
const params = this.queryParams
if ((table.dbName === params.dbName || !params.dbName) &&
(table.tableName.includes(params.tableName) || !params.tableName) &&
(table.tableComment.includes(params.tableComment) || !params.tableComment)){
this.tableOptions.push(table)
}
})
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 表字段查询*/
selectTable(row) {
this.disp.formData.db = row
selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
this.fieldsOptions = res.data
})
},
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.disp.formData.fields = selection.map(item => {
return {
fieldName: item.columnName,
fieldType: item.columnType,
fieldComment: item.columnComment
};
});
},
// 查询所有数据库名称
selDbNameList() {
selDbNameAll().then(res => {
this.dbNameOptions = res.data
})
},
// 查询所有表名称信息
getListAll() {
listDbTableAll().then(res => {
this.tableList = res.data;
this.tableOptions = res.data;
});
},
// csh() {
// this.selDbNameList()
// this.getListAll()
// },
// 保存配置按钮
saveDisposition() {
const dispData = this.disp.formData
const dispList = this.getMysqlDisp(dispData.db,dispData.fields)
batchAddUpd(dispList, this.disp.nodeCode).then(res => {
this.$message.success(res.msg)
this.disp.updFlag = false
})
},
/** 类型转换 vue -> mysql*/
getMysqlDisp(db, fields) {
const dispList = []
dispList.push({
nodeCode: this.disp.nodeCode,
dispKey: 'db',
dispLabel: '数据库',
dispValue: db.dbName,
dispType: 'string'
},{
nodeCode: this.disp.nodeCode,
dispKey: 'table',
dispLabel: db.tableComment,
dispValue: db.tableName,
dispType: 'string'
})
fields.forEach(field => {
dispList.push({
nodeCode: this.disp.nodeCode,
dispKey: 'fields',
dispLabel: field.fieldComment,
dispValue: field.fieldName,
dispType: field.fieldType
})
})
return dispList;
},
}
}

5
src/views/quest/node/components/node/type/tableFind.vue
View File

@ -16,7 +16,7 @@
<br><br>
<div align="center">
<el-button @click="disp.findFlag = false">确认</el-button>
<el-button type="primary" @click="this.disp.updFlag = true">修改配置</el-button>
<el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
</div>
</div>
</template>
@ -53,6 +53,9 @@ export default {
},
// 方法集合",
methods: {
toUpd() {
this.disp.updFlag = true
}
}
}
</script>

1
src/views/quest/node/components/node/type/tableUpd.vue
View File

@ -114,6 +114,7 @@ export default {
},
/** 表字段查询*/
selectTable(row) {
this.disp.formData.fields = []
this.disp.formData.db = row
selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
this.fieldsOptions = res.data

155
src/views/quest/node/components/node/type/uniteFind.vue
View File

@ -15,27 +15,28 @@
</el-select>
</el-form-item>
<el-form-item label="连接条件">
<el-select v-model="respDispData.joinData.form" placeholder="请选择一号表字段">
<el-option v-for="item in reqDispData.fieldList[0]" :label="item.columnName+'('+item.columnComment+')'" :value="item.columnName" />
<el-select v-model="respDispData.joinData.form.fieldName" placeholder="请选择一号表字段">
<el-option v-for="item in reqDispData.fields[0]" :label="item.tableName+'.'+item.fieldName+'('+item.fieldComment+')'" :value="item.fieldName" />
</el-select>
&nbsp;&nbsp;
<el-select v-model="respDispData.joinData.to" placeholder="请选择二号表字段">
<el-option v-for="item in reqDispData.fieldList[1]" :label="item.columnName+'('+item.columnComment+')'" :value="item.columnName" />
<el-select v-model="respDispData.joinData.to.fieldName" placeholder="请选择二号表字段">
<el-option v-for="item in reqDispData.fields[1]" :label="item.tableName+'.'+item.fieldName+'('+item.fieldComment+')'" :value="item.fieldName" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="disp.findFlag = false">返回</el-button>
<el-button type="primary" @click="checkFieldsFlag = true">下一步</el-button>
<el-button type="primary" @click="checkFields">下一步</el-button>
</el-form-item>
</el-form>
</div>
<el-dialog title="选择字段" :visible.sync="checkFieldsFlag" width="60%" append-to-body>
<el-table ref="table" :data="reqDispData.fields" height="300px"
<el-dialog title="选择字段" :visible.sync="checkFieldsFlag" width="70%" append-to-body>
<el-table ref="table" :data="reqDispData.fieldList" height="450px"
@row-click="clickRow" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
<el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
<el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
<el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
<el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
<el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
<el-table-column :show-overflow-tooltip="true" label="字段所属表" prop="tableName" />
</el-table>
<br><br>
<div align="center">
@ -51,6 +52,7 @@
// 例如：import 《组件名称》 from '《组件路径》,
import {listDisposition} from "@/api/quest/disposition";
import {selectDbTableColumnsByName} from "@/api/tool/gen";
import {batchAddUpd} from "@/api/quest/disposition";
export default {
// import引入的组件需要注入到对象中才能使用"
@ -82,8 +84,8 @@ export default {
fields: [],
join: '',
joinData: {
form: '',
to: ''
form: {},
to: {}
}
},
formData: {},
@ -135,19 +137,39 @@ export default {
this.respDispData.join = data.join
}else{
this.reqDispData.db.push(data.db)
this.respDispData.fields.push(data.fields)
selectDbTableColumnsByName(data.db.dbName,data.db.tableName).then(res => {
this.reqDispData.fieldList.push(res.data)
})
this.reqDispData.fields.push(data.fields)
}
})
},
// 下一步按钮
checkFields() {
this.respDispData.db = this.reqDispData.db
this.reqDispData.fieldList = []
this.reqDispData.fieldList.push(...this.reqDispData.fields[0])
this.reqDispData.fieldList.push(...this.reqDispData.fields[1])
// 查询表字段
this.reqDispData.fields[0].forEach(field => {
if (this.respDispData.joinData.form.fieldName === field.fieldName){
this.respDispData.joinData.form = field
}
})
this.reqDispData.fields[1].forEach(field => {
if (this.respDispData.joinData.to.fieldName === field.fieldName){
this.respDispData.joinData.to = field
}
})
this.checkFieldsFlag = true
},
// 保存选择
save() {
console.log('reqDispData',this.reqDispData)
console.log('respDispData',this.respDispData)
this.checkFieldsFlag = false
this.disp.findFlag = false
const dispList = this.getMysqlDisp(this.respDispData)
batchAddUpd(dispList, this.disp.nodeCode).then(res => {
this.$message.success(res.msg)
this.checkFieldsFlag = false
})
// this.disp.findFlag = false
},
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
@ -156,9 +178,11 @@ export default {
handleSelectionChange(selection) {
this.respDispData.fields = selection.map(item => {
return {
fieldName: item.columnName,
fieldType: item.columnType,
fieldComment: item.columnComment
tableName: item.tableName,
fieldName: item.fieldName,
fieldType: item.fieldType,
fieldComment: item.fieldComment,
fieldDesc: item.fieldDesc
};
});
},
@ -166,6 +190,7 @@ export default {
getVueDisp(dispList) {
const db = {}
const fields = []
let tableName = ''
let join = ''
let joinData = {
form: '',
@ -179,27 +204,105 @@ export default {
db.tableName = disp.dispValue
db.tableComment = disp.dispLabel
}
tableName = db.dbName+'.'+db.tableName
db.dbTable = db.dbName+'.'+db.tableName+'('+db.tableComment +')'
if (disp.dispKey === 'fields') {
fields.push({
tableName: tableName,
fieldName: disp.dispValue,
fieldType: disp.dispType,
fieldComment: disp.dispLabel
fieldComment: disp.dispLabel,
fieldDesc: disp.fieldDesc
})
}
db.dbTable = db.dbName+'.'+db.tableName+'('+db.tableComment +')'
if (disp.dispKey === 'joinDataForm') {
joinData.form = disp.dispValue
joinData.form.push({
tableName: tableName,
fieldName: disp.dispValue,
fieldType: disp.dispType,
fieldComment: disp.dispLabel,
fieldDesc: disp.fieldDesc
})
}
if (disp.dispKey === 'joinDataTo') {
joinData.to = disp.dispValue
joinData.to.push({
tableName: tableName,
fieldName: disp.dispValue,
fieldType: disp.dispType,
fieldComment: disp.dispLabel,
fieldDesc: disp.fieldDesc
})
}
if (disp.dispKey === 'join') {
join = disp.dispValue
return {db, fields, join, joinData}
}
})
if (join !== '') {
return {db, fields, join, joinData}
}
return {db, fields}
},
/** 节点配置--unite 类型转换 vue -> mysql*/
getMysqlDisp(resp) {
const db = resp.db
const fields = resp.fields
const join = resp.join
const form = resp.joinData.form
const to = resp.joinData.to
// 处理数据库
const dispList = []
// 数据库
db.forEach(item => {
dispList.push({
nodeCode: this.node.id, // 节点编码
dispKey: 'db', // 存储编码
dispLabel: item.tableComment, // 显示名称
dispValue: item.dbName, // 存储值
dispType: 'string', // 存储类型
dispDesc: item.dbTable // 备注信息
})
})
// 表结构
fields.forEach(field => {
dispList.push({
nodeCode: this.node.id,
dispKey: 'fields',
dispLabel: field.fieldComment,
dispValue: field.fieldName,
dispType: field.fieldType,
dispDesc: field.tableName
})
})
// 连接方式
dispList.push({
nodeCode: this.node.id,
dispKey: 'join',
dispLabel: join,
dispValue: join,
dispType: 'String',
dispDesc: ''
})
// 连接字段1
dispList.push({
nodeCode: this.node.id,
dispKey: 'joinDataForm',
dispLabel: form.fieldComment,
dispValue: form.fieldName,
dispType: form.fieldType,
dispDesc: form.tableName
})
// 连接字段2
dispList.push({
nodeCode: this.node.id,
dispKey: 'joinDataTo',
dispLabel: to.fieldComment,
dispValue: to.fieldName,
dispType: to.fieldType,
dispDesc: to.tableName
})
return dispList
}
}
}