完成节点类型表结构,联合查询,数据输出的配置
parent
0a302cb1d9
commit
2755da368f
|
@ -22,13 +22,11 @@
|
||||||
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
// 例如:import 《组件名称》 from '《组件路径》,
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
import TableUpd from './type/tableUpd.vue'
|
import TableUpd from './type/tableUpd.vue'
|
||||||
import ExporUpd from './type/exporUpd.vue'
|
|
||||||
import {batchAddUpd} from "@/api/quest/disposition";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// import引入的组件需要注入到对象中才能使用"
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
name: 'type-table',
|
name: 'type-table',
|
||||||
components: {TableUpd, ExporUpd},
|
components: {TableUpd},
|
||||||
props: {
|
props: {
|
||||||
data: {},
|
data: {},
|
||||||
node: {},
|
node: {},
|
||||||
|
|
|
@ -1,37 +1,123 @@
|
||||||
<template>
|
<template>
|
||||||
<div @click="getInfo">
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<span v-if="disp.formData.db.formDb && disp.formData.db.formTable">输入表信息:
|
<span v-if="formDb">
|
||||||
{{ disp.formData.db.formDb }}.
|
输入表信息: <br><br>
|
||||||
{{ disp.formData.db.formTable }}
|
<span v-for="db in formDb">
|
||||||
({{ disp.formData.db.formTableComment }})
|
<el-tag type="primary" v-if="db.dbTable">{{ db.dbTable }}</el-tag><br><br>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span v-else>无输入表</span>
|
<span v-else>无输入表</span>
|
||||||
<br><br>
|
<br><br>
|
||||||
<span v-if="disp.formData.db.toDb && disp.formData.db.toTable">输出表信息:
|
<span v-if="toDb && toDb.dbTable">
|
||||||
{{ disp.formData.db.toDb }}.
|
输出表信息: <br><br>
|
||||||
{{ disp.formData.db.toTable }}
|
<el-tag type="primary" v-if="toDb.dbTable">{{ toDb.dbTable }}</el-tag>
|
||||||
({{ disp.formData.db.toTableComment }})
|
<el-button type="text" @click="checkFields">更改输出表</el-button>
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
无输出表:
|
||||||
|
<el-button type="text" @click="checkFields">选择输出表</el-button>
|
||||||
</span>
|
</span>
|
||||||
<span v-else>无输出表</span>
|
|
||||||
<br><br>
|
<br><br>
|
||||||
</div>
|
</div>
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<el-table v-model="disp.formData.fields">
|
<el-table ref="table" :data="formFields" height="450px">
|
||||||
<el-table-column label="输入字段" prop="formFields" />
|
<el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
|
||||||
<el-table-column label="输出字段" prop="toFields" />
|
<el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
|
||||||
</el-table>
|
<el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
|
||||||
|
<el-table-column :show-overflow-tooltip="true" label="字段所属表" prop="tableName" />
|
||||||
|
<el-table-column :show-overflow-tooltip="true" label="输出字段">
|
||||||
|
<span slot-scope="scope" v-if="fieldsList && fieldsList.get(scope.row.fieldName)">
|
||||||
|
{{ fieldsList.get(scope.row.fieldName).fieldName+ '(' + fieldsList.get(scope.row.fieldName).fieldComment + ')' }}
|
||||||
|
</span>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<el-button @click="disp.findFlag = false">确认</el-button>
|
<el-button @click="disp.findFlag = false">返回</el-button>
|
||||||
<el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
|
<el-button type="primary" disp.findFlag = false>确认</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="选择输出表" :visible.sync="checkFieldsFlag" width="60%">
|
||||||
|
<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-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="280px"
|
||||||
|
@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 @click="checkFieldsFlag = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="checkFieldsFlag = false;checkFieldsMapFlag = true">下一步</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog title="选择字段" :visible.sync="checkFieldsMapFlag" width="60%">
|
||||||
|
<div style="padding-left: 10px;padding-right: 10px;">
|
||||||
|
<el-table ref="table" :data="formFields" height="500px">
|
||||||
|
<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-column :show-overflow-tooltip="true" label="目标字段">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-select v-model="scope.row.toFidlesName" placeholder="请选择字段">
|
||||||
|
<el-option v-for="field in toFields" :label="field.fieldName+'('+field.fieldComment+')'" :value="field.fieldName"/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div align="center">
|
||||||
|
<el-button @click="checkFieldsMapFlag = false;checkFieldsFlag = true;">上一步</el-button>
|
||||||
|
<el-button type="primary" @click="save">确认</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
// 例如:import 《组件名称》 from '《组件路径》,
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
import {batchAddUpd, listDisposition} from "../../../../../../api/quest/disposition";
|
||||||
|
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "../../../../../../api/tool/gen";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// import引入的组件需要注入到对象中才能使用"
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
name: 'exporFind',
|
name: 'exporFind',
|
||||||
|
@ -51,7 +137,24 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
// 这里存放数据"
|
// 这里存放数据"
|
||||||
return {}
|
return {
|
||||||
|
formDb: [],
|
||||||
|
toDb: {},
|
||||||
|
formFields: [],
|
||||||
|
toFields: [],
|
||||||
|
fieldsList: new Map(),
|
||||||
|
checkFieldsFlag: false,
|
||||||
|
checkFieldsMapFlag: false,
|
||||||
|
// 数据库列表
|
||||||
|
dbNameOptions: [],
|
||||||
|
// 展示数据表列表
|
||||||
|
tableOptions: [],
|
||||||
|
// 字段列表
|
||||||
|
fieldsOptions: [],
|
||||||
|
// 所有数据库列表
|
||||||
|
tableList: [],
|
||||||
|
queryParams: {}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 计算属性 类似于data概念",
|
// 计算属性 类似于data概念",
|
||||||
computed: {},
|
computed: {},
|
||||||
|
@ -62,52 +165,176 @@ export default {
|
||||||
// 方法集合",
|
// 方法集合",
|
||||||
methods: {
|
methods: {
|
||||||
// 初始化
|
// 初始化
|
||||||
info() {
|
init() {
|
||||||
console.log(this.data)
|
// 查询上级的所有节点
|
||||||
console.log(this.node)
|
/** 1.查询该节点的上一级节点*/
|
||||||
|
this.data.lineList.forEach(line => {
|
||||||
|
if (line.to === this.node.id){
|
||||||
|
listDisposition({nodeCode: line.from}).then(res => {
|
||||||
|
const data = this.getVueDisp(res.data.rows)
|
||||||
|
this.formDb = data.db
|
||||||
|
this.formFields = data.fields
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 查询自身
|
||||||
|
listDisposition({nodeCode: this.node.id}).then(res => {
|
||||||
|
const data = this.getVueDisp(res.data.rows)
|
||||||
|
console.log(data)
|
||||||
|
this.toDb = data.toDb
|
||||||
|
this.fieldsList = data.fieldsMap
|
||||||
|
})
|
||||||
},
|
},
|
||||||
/** 类型转换 mysql -> vue */
|
// 选择数据库按钮
|
||||||
getVueDisp(dispList) {
|
checkFields() {
|
||||||
let type = this.node.type
|
this.selDbNameList()
|
||||||
const db = {}
|
this.getListAll()
|
||||||
const fields = []
|
this.checkFieldsFlag = true
|
||||||
if (type === 'exportation') {
|
},
|
||||||
let i = 0
|
// 保存目标数据库
|
||||||
let j = 0
|
save() {
|
||||||
dispList.forEach(disp => {
|
console.log('formDb',this.formDb)
|
||||||
if (disp.dispKey === 'formDb'){
|
console.log('toDb',this.toDb)
|
||||||
db.formDb = disp.dispValue
|
console.log('formFields',this.formFields)
|
||||||
}
|
console.log('toFields',this.toFields)
|
||||||
if (disp.dispKey === 'formTable'){
|
console.log('fieldsList',this.fieldsList)
|
||||||
db.formTable = disp.dispValue
|
// 处理输入字段与输出字段
|
||||||
db.formTableComment = disp.dispLabel
|
const field = this.formFields
|
||||||
}
|
let map = field.map(item => [item.fieldName, item.toFidlesName]);
|
||||||
if (disp.dispKey === 'toDb'){
|
this.fieldsList = new Map()
|
||||||
db.toDb = disp.dispValue
|
map.forEach(item => {
|
||||||
}
|
this.toFields.forEach(toField => {
|
||||||
if (disp.dispKey === 'toTable'){
|
if (toField.fieldName === item[1]){
|
||||||
db.toTable = disp.dispValue
|
this.fieldsList.set(item[0], toField)
|
||||||
db.toTableComment = disp.dispLabel
|
|
||||||
}
|
|
||||||
if (disp.dispKey === 'formFields'){
|
|
||||||
fields.push({
|
|
||||||
id: i++,
|
|
||||||
fieldName: disp.dispValue,
|
|
||||||
fieldType: disp.dispType,
|
|
||||||
fieldComment: disp.dispLabel
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (disp.dispKey === 'toFields'){
|
|
||||||
fields.push({
|
|
||||||
id: j++,
|
|
||||||
fieldName: disp.dispValue,
|
|
||||||
fieldType: disp.dispType,
|
|
||||||
fieldComment: disp.dispLabel
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
// 格式转换
|
||||||
|
let mysqlDisp = this.getMysqlDisp(this.toDb,this.fieldsList);
|
||||||
|
// 保存数据库
|
||||||
|
batchAddUpd(mysqlDisp, this.disp.nodeCode).then(res => {
|
||||||
|
this.$message.success(res.msg)
|
||||||
|
this.checkFieldsFlag = false
|
||||||
|
this.checkFieldsMapFlag = false
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 表字段查询*/
|
||||||
|
selectTable(row) {
|
||||||
|
this.toFields.fields = []
|
||||||
|
this.toDb = {
|
||||||
|
dbName: row.dbName,
|
||||||
|
tableName: row.tableName,
|
||||||
|
tableComment: row.tableComment,
|
||||||
|
dbTable: row.dbName+'.'+row.tableName+'('+ row.tableComment +')'
|
||||||
}
|
}
|
||||||
return {db, fields}
|
selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
|
||||||
|
this.fieldsOptions = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clickRow(row) {
|
||||||
|
this.$refs.table.toggleRowSelection(row);
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.toFields = selection.map(item => {
|
||||||
|
return {
|
||||||
|
dbTable: this.toDb.dbName+'.'+this.toDb.tableName,
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 节点配置 类型转换 mysql -> vue */
|
||||||
|
getVueDisp(dispList) {
|
||||||
|
const db = []
|
||||||
|
const fields = []
|
||||||
|
const fieldsMap = new Map()
|
||||||
|
let toDb = {}
|
||||||
|
dispList.forEach(disp => {
|
||||||
|
if (disp.dispKey === 'table') {
|
||||||
|
db.push({
|
||||||
|
dbName: disp.dispDesc,
|
||||||
|
tableName: disp.dispValue,
|
||||||
|
tableComment: disp.dispLabel,
|
||||||
|
dbTable: disp.dispDesc+'.'+disp.dispValue+'('+disp.dispLabel+')'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (disp.dispKey === 'fields') {
|
||||||
|
fields.push({
|
||||||
|
tableName: disp.dispDesc,
|
||||||
|
fieldName: disp.dispValue,
|
||||||
|
fieldType: disp.dispType,
|
||||||
|
fieldComment: disp.dispLabel
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 输出调整
|
||||||
|
if (disp.dispKey === 'toDb'){
|
||||||
|
toDb = {
|
||||||
|
dbName: disp.dispDesc,
|
||||||
|
tableName: disp.dispValue,
|
||||||
|
tableComment: disp.dispLabel,
|
||||||
|
dbTable: disp.dispDesc+'.'+disp.dispValue+'('+disp.dispLabel+')'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (disp.dispKey === 'toFields'){
|
||||||
|
fieldsMap.set(disp.dispDesc, {
|
||||||
|
fieldName: disp.dispValue,
|
||||||
|
fieldType: disp.dispType,
|
||||||
|
fieldComment: disp.dispLabel
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return {db, fields, toDb, fieldsMap}
|
||||||
|
},
|
||||||
|
/** 节点配置 expor vue 转 mysql */
|
||||||
|
getMysqlDisp(db, fields) {
|
||||||
|
const dispList = []
|
||||||
|
dispList.push({
|
||||||
|
nodeCode: this.node.id,
|
||||||
|
dispKey: 'toDb',
|
||||||
|
dispDesc: db.dbName,
|
||||||
|
dispValue: db.tableName,
|
||||||
|
dispLabel: db.tableComment,
|
||||||
|
dispType: 'String'
|
||||||
|
})
|
||||||
|
fields.keys().forEach(key => {
|
||||||
|
dispList.push({
|
||||||
|
nodeCode: this.node.id,
|
||||||
|
dispKey: 'toFields',
|
||||||
|
dispDesc: key,
|
||||||
|
dispValue: fields.get(key).fieldName,
|
||||||
|
dispLabel: fields.get(key).fieldComment,
|
||||||
|
dispType: fields.get(key).fieldType
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return dispList;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,298 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div style="padding-left: 10px;padding-right: 10px;">
|
|
||||||
<h3>选择输出数据库</h3>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<br><br>
|
|
||||||
<div align="center">
|
|
||||||
<el-button type="primary" @click="checkFields">确 定</el-button>
|
|
||||||
<el-button @click="disp.updFlag = false">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-dialog title="字段选择" :visible.sync="fieldsFlag" width="60%" append-to-body>
|
|
||||||
<el-table ref="table" :data="reqDispData.fields" height="300px">
|
|
||||||
<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="输出字段">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-select v-model="scope.row.toName" placeholder="请选择输出字段">
|
|
||||||
<el-option v-for="item in respDispData.fields"
|
|
||||||
:key="item.columnName"
|
|
||||||
:label="item.columnName+'('+item.columnComment+')'"
|
|
||||||
:value="item.columnName"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<br><br>
|
|
||||||
<el-button type="primary" @click="saveDisposition">确 定</el-button>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<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',
|
|
||||||
props: {
|
|
||||||
data: {},
|
|
||||||
node: {},
|
|
||||||
disp: {
|
|
||||||
nodeCode: undefined,
|
|
||||||
nodeType: undefined,
|
|
||||||
findFlag: false,
|
|
||||||
updFlag: false,
|
|
||||||
formData: {
|
|
||||||
db: {},
|
|
||||||
fields: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
// 这里存放数据"
|
|
||||||
return {
|
|
||||||
// 数据库列表
|
|
||||||
dbNameOptions: [],
|
|
||||||
// 展示数据表列表
|
|
||||||
tableOptions: [],
|
|
||||||
// 字段列表
|
|
||||||
fieldsOptions: [],
|
|
||||||
// 所有数据库列表
|
|
||||||
tableList: [],
|
|
||||||
queryParams: {},
|
|
||||||
// 上一级节点编码
|
|
||||||
preNodeId: [],
|
|
||||||
// 上一级节点配置信息
|
|
||||||
preNodeDisp: [],
|
|
||||||
// 最终选择的配置
|
|
||||||
selectDisp: [],
|
|
||||||
// 上一级节点配置信息整合
|
|
||||||
reqDispData: {
|
|
||||||
dbTableName: [],
|
|
||||||
fields: []
|
|
||||||
},
|
|
||||||
respDispData: {
|
|
||||||
dbTableName: [],
|
|
||||||
fields: []
|
|
||||||
},
|
|
||||||
fieldsFlag: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 计算属性 类似于data概念",
|
|
||||||
computed: {},
|
|
||||||
// 生命周期 - 创建完成(可以访问当前this实例)",
|
|
||||||
created() {
|
|
||||||
this.csh()
|
|
||||||
},
|
|
||||||
// 方法集合",
|
|
||||||
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.respDispData.dbTableName = row.dbName+'.'+row.tableName+'('+row.tableComment+')'
|
|
||||||
selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
|
|
||||||
this.respDispData.fields = 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()
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
// 启动按钮
|
|
||||||
checkFields() {
|
|
||||||
this.fieldsFlag = true
|
|
||||||
this.saveDisposition()
|
|
||||||
},
|
|
||||||
// 保存配置按钮
|
|
||||||
saveDisposition() {
|
|
||||||
console.log('dbNameOptions',this.dbNameOptions)
|
|
||||||
console.log('tableOptions',this.tableOptions)
|
|
||||||
console.log('fieldsOptions',this.fieldsOptions)
|
|
||||||
console.log('tableList',this.tableList)
|
|
||||||
console.log('queryParams',this.queryParams)
|
|
||||||
console.log('preNodeId',this.preNodeId)
|
|
||||||
console.log('preNodeDisp',this.preNodeDisp)
|
|
||||||
console.log('selectDisp',this.selectDisp)
|
|
||||||
console.log('reqDispData',this.reqDispData)
|
|
||||||
console.log('respDispData',this.respDispData)
|
|
||||||
},
|
|
||||||
/** 类型转换 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;
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
/** 1.查询该节点的上一级节点*/
|
|
||||||
this.data.lineList.forEach(line => {
|
|
||||||
if (line.to === this.node.id){
|
|
||||||
this.preNodeId.push(line.from)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.preNodeId = [...new Set(this.preNodeId)]
|
|
||||||
console.log(1,this.preNodeId)
|
|
||||||
/** 2.获取上一级节点的配置参数*/
|
|
||||||
if (this.preNodeId){
|
|
||||||
this.preNodeId.forEach(id => {
|
|
||||||
this.findDisp(id)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
this.init2()
|
|
||||||
},1000)
|
|
||||||
},
|
|
||||||
init2() {
|
|
||||||
let i = 1
|
|
||||||
console.log(2,this.preNodeDisp)
|
|
||||||
this.preNodeDisp.forEach(nodeDisp => {
|
|
||||||
console.log(3, nodeDisp)
|
|
||||||
let dbTableName = nodeDisp.db.dbName + '.' +
|
|
||||||
nodeDisp.db.tableName + '(' + nodeDisp.db.tableComment + ')';
|
|
||||||
this.reqDispData.dbTableName.push(dbTableName)
|
|
||||||
nodeDisp.fields.forEach(field => {
|
|
||||||
field.id = i++
|
|
||||||
this.reqDispData.fields.push(field)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
console.log(4, this.reqDispData)
|
|
||||||
},
|
|
||||||
findDisp(nodeCode) {
|
|
||||||
listDisposition({nodeCode: nodeCode}).then(res => {
|
|
||||||
this.preNodeDisp.push(this.getVueDisp(res.data.rows))
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 选择完成输入表字段
|
|
||||||
toSelectResp() {
|
|
||||||
console.log(this.selectDisp)
|
|
||||||
},
|
|
||||||
/** 类型转换 mysql -> vue */
|
|
||||||
getVueDisp(dispList) {
|
|
||||||
const db = {}
|
|
||||||
const fields = []
|
|
||||||
dispList.forEach(disp => {
|
|
||||||
if (disp.dispKey === 'db') {
|
|
||||||
db.dbName = disp.dispValue
|
|
||||||
}
|
|
||||||
if (disp.dispKey === 'table') {
|
|
||||||
db.tableName = disp.dispValue
|
|
||||||
db.tableComment = disp.dispLabel
|
|
||||||
}
|
|
||||||
if (disp.dispKey === 'fields') {
|
|
||||||
fields.push({
|
|
||||||
fieldName: disp.dispValue,
|
|
||||||
fieldType: disp.dispType,
|
|
||||||
fieldComment: disp.dispLabel
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return {db, fields}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
|
@ -1,85 +0,0 @@
|
||||||
<template>
|
|
||||||
<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 }} </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>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
|
||||||
// 例如:import 《组件名称》 from '《组件路径》,
|
|
||||||
import {listDisposition} from "@/api/quest/disposition";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
// import引入的组件需要注入到对象中才能使用"
|
|
||||||
name: 'exporUpd',
|
|
||||||
props: {
|
|
||||||
data: {},
|
|
||||||
node: {},
|
|
||||||
disp: {
|
|
||||||
nodeCode: undefined,
|
|
||||||
nodeType: undefined,
|
|
||||||
findFlag: false,
|
|
||||||
updFlag: false,
|
|
||||||
formData: {
|
|
||||||
db: {},
|
|
||||||
fields: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
// 这里存放数据"
|
|
||||||
return {
|
|
||||||
// 上一级节点编码
|
|
||||||
preNodeId: [],
|
|
||||||
// 上一级节点配置信息
|
|
||||||
preNodeDisp: [],
|
|
||||||
// 最终选择的配置
|
|
||||||
selectDisp: [],
|
|
||||||
// 上一级节点配置信息整合
|
|
||||||
reqDispData: {
|
|
||||||
dbTableName: [],
|
|
||||||
fields: []
|
|
||||||
},
|
|
||||||
respDispData: {
|
|
||||||
dbTableName: [],
|
|
||||||
fields: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 计算属性 类似于data概念",
|
|
||||||
computed: {},
|
|
||||||
// 生命周期 - 创建完成(可以访问当前this实例)",
|
|
||||||
created() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
// 方法集合",
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
|
@ -245,6 +245,7 @@ export default {
|
||||||
/** 节点配置--unite 类型转换 vue -> mysql*/
|
/** 节点配置--unite 类型转换 vue -> mysql*/
|
||||||
getMysqlDisp(resp) {
|
getMysqlDisp(resp) {
|
||||||
const db = resp.db
|
const db = resp.db
|
||||||
|
const table = resp.db
|
||||||
const fields = resp.fields
|
const fields = resp.fields
|
||||||
const join = resp.join
|
const join = resp.join
|
||||||
const form = resp.joinData.form
|
const form = resp.joinData.form
|
||||||
|
@ -256,12 +257,23 @@ export default {
|
||||||
dispList.push({
|
dispList.push({
|
||||||
nodeCode: this.node.id, // 节点编码
|
nodeCode: this.node.id, // 节点编码
|
||||||
dispKey: 'db', // 存储编码
|
dispKey: 'db', // 存储编码
|
||||||
dispLabel: item.tableComment, // 显示名称
|
dispLabel: '数据库', // 显示名称
|
||||||
dispValue: item.dbName, // 存储值
|
dispValue: item.dbName, // 存储值
|
||||||
dispType: 'string', // 存储类型
|
dispType: 'string', // 存储类型
|
||||||
dispDesc: item.dbTable // 备注信息
|
dispDesc: item.dbTable // 备注信息
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
// 数据表
|
||||||
|
table.forEach(item => {
|
||||||
|
dispList.push({
|
||||||
|
nodeCode: this.node.id,
|
||||||
|
dispKey: 'table',
|
||||||
|
dispLabel: item.tableComment,
|
||||||
|
dispValue: item.tableName,
|
||||||
|
dispType: 'string',
|
||||||
|
dispDesc: item.dbTable
|
||||||
|
})
|
||||||
|
})
|
||||||
// 表结构
|
// 表结构
|
||||||
fields.forEach(field => {
|
fields.forEach(field => {
|
||||||
dispList.push({
|
dispList.push({
|
||||||
|
|
|
@ -75,9 +75,7 @@
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column label="任务编码" align="center" prop="taskCode" />
|
<el-table-column label="任务编码" align="center" prop="taskCode" />
|
||||||
<el-table-column label="任务名称" align="center" prop="taskName" />
|
<el-table-column label="任务名称" align="center" prop="taskName" />
|
||||||
<el-table-column label="任务触发器" align="center" prop="taskWebhook" />
|
<el-table-column label="任务优先级" align="center" prop="taskType" />
|
||||||
<el-table-column label="规则编码" align="center" prop="ruleCode" />
|
|
||||||
<el-table-column label="任务类型" align="center" prop="taskType" />
|
|
||||||
<el-table-column label="任务内容" align="center" prop="taskData" />
|
<el-table-column label="任务内容" align="center" prop="taskData" />
|
||||||
<el-table-column label="启用状态" align="center" prop="state">
|
<el-table-column label="启用状态" align="center" prop="state">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
@ -125,11 +123,13 @@
|
||||||
<el-form-item label="任务名称" prop="taskName">
|
<el-form-item label="任务名称" prop="taskName">
|
||||||
<el-input v-model="form.taskName" placeholder="请输入任务名称" />
|
<el-input v-model="form.taskName" placeholder="请输入任务名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="任务触发器" prop="taskWebhook">
|
<el-form-item label="任务优先级" prop="taskType">
|
||||||
<el-input v-model="form.taskWebhook" placeholder="请输入任务触发器" />
|
<el-select v-model="form.taskType" placeholder="请选择任务类型">
|
||||||
</el-form-item>
|
<el-option label="低"/>
|
||||||
<el-form-item label="规则编码" prop="ruleCode">
|
<el-option label="中"/>
|
||||||
<el-input v-model="form.ruleCode" placeholder="请输入规则编码" />
|
<el-option label="高"/>
|
||||||
|
<el-option label="紧急"/>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="任务内容">
|
<el-form-item label="任务内容">
|
||||||
<editor v-model="form.taskData" :min-height="192"/>
|
<editor v-model="form.taskData" :min-height="192"/>
|
||||||
|
@ -184,7 +184,10 @@ export default {
|
||||||
state: null,
|
state: null,
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {
|
||||||
|
taskType: '低',
|
||||||
|
state: "Y"
|
||||||
|
},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {
|
rules: {
|
||||||
taskCode: [
|
taskCode: [
|
||||||
|
@ -220,9 +223,9 @@ export default {
|
||||||
taskName: null,
|
taskName: null,
|
||||||
taskWebhook: null,
|
taskWebhook: null,
|
||||||
ruleCode: null,
|
ruleCode: null,
|
||||||
taskType: null,
|
taskType: '低',
|
||||||
taskData: null,
|
taskData: null,
|
||||||
state: null,
|
state: 'Y',
|
||||||
createBy: null,
|
createBy: null,
|
||||||
createTime: null,
|
createTime: null,
|
||||||
updateBy: null,
|
updateBy: null,
|
||||||
|
|
Loading…
Reference in New Issue