拆分节点配置功能,新增类型判断
parent
8cfef8c206
commit
beca5cc501
|
@ -0,0 +1,53 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询节点配置列表
|
||||||
|
export function listDisposition(query) {
|
||||||
|
return request({
|
||||||
|
url: '/quest/disposition/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询节点配置详细
|
||||||
|
export function getDisposition(id) {
|
||||||
|
return request({
|
||||||
|
url: '/quest/disposition/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 新增节点配置
|
||||||
|
export function addDisposition(data) {
|
||||||
|
return request({
|
||||||
|
url: '/quest/disposition',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改节点配置
|
||||||
|
export function updateDisposition(data) {
|
||||||
|
return request({
|
||||||
|
url: '/quest/disposition',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除节点配置
|
||||||
|
export function delDisposition(id) {
|
||||||
|
return request({
|
||||||
|
url: '/quest/disposition/' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 批量操作节点配置
|
||||||
|
export function batchAddUpd(data,nodeCode) {
|
||||||
|
return request({
|
||||||
|
url: '/quest/disposition/batch/'+nodeCode,
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
|
@ -1,53 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 查询节点参数列表
|
|
||||||
export function listParam(query) {
|
|
||||||
return request({
|
|
||||||
url: '/quest/param/list',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询节点参数详细
|
|
||||||
export function getParam(id) {
|
|
||||||
return request({
|
|
||||||
url: '/quest/param/' + id,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增节点参数
|
|
||||||
export function addParam(data) {
|
|
||||||
return request({
|
|
||||||
url: '/quest/param',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 批量新增
|
|
||||||
export function batchAdd(data) {
|
|
||||||
return request({
|
|
||||||
url: '/quest/param/batchAdd',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修改节点参数
|
|
||||||
export function updateParam(data) {
|
|
||||||
return request({
|
|
||||||
url: '/quest/param',
|
|
||||||
method: 'put',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除节点参数
|
|
||||||
export function delParam(id) {
|
|
||||||
return request({
|
|
||||||
url: '/quest/param/' + id,
|
|
||||||
method: 'delete'
|
|
||||||
})
|
|
||||||
}
|
|
|
@ -17,90 +17,9 @@
|
||||||
<div class="node-anchor anchor-right" v-show="mouseEnter"></div>
|
<div class="node-anchor anchor-right" v-show="mouseEnter"></div>
|
||||||
<div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
|
<div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
|
||||||
<div class="node-anchor anchor-left" v-show="mouseEnter"></div>
|
<div class="node-anchor anchor-left" v-show="mouseEnter"></div>
|
||||||
<!-- 节点配置-->
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<el-drawer
|
<TypeTable :node="node" :disp="disp" />
|
||||||
:visible.sync="disposition.findFlag"
|
<TypeTableUpd :node="node" :disp="disp" />
|
||||||
direction="rtl"
|
|
||||||
title="配置信息"
|
|
||||||
append-to-body
|
|
||||||
size="60%">
|
|
||||||
<div style="padding-left: 10px;padding-right: 10px;">
|
|
||||||
<h5>数据库: {{ disposition.formData.dbName }}</h5>
|
|
||||||
<br>
|
|
||||||
<h5>数据表: {{ disposition.formData.table }}</h5>
|
|
||||||
<span>
|
|
||||||
<el-table ref="table" :data="disposition.formData.fields" height="300px">
|
|
||||||
<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>
|
|
||||||
</span>
|
|
||||||
<br><br>
|
|
||||||
<div align="center">
|
|
||||||
<el-button @click="disposition.findFlag = false">确认</el-button>
|
|
||||||
<el-button type="primary" @click="editDisposition">修改配置</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
<!-- 自定义表单对话框 -->
|
|
||||||
<el-drawer
|
|
||||||
:modal="false"
|
|
||||||
:visible.sync="disposition.updFlag"
|
|
||||||
direction="rtl"
|
|
||||||
title="节点配置"
|
|
||||||
append-to-body
|
|
||||||
size="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-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>
|
|
||||||
</div>
|
|
||||||
<el-divider content-position="left">选择字段 v</el-divider>
|
|
||||||
<el-table ref="table" v-show="fieldsOptions" :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>
|
|
||||||
<el-divider />
|
|
||||||
<div align="center">
|
|
||||||
<el-button type="primary" @click="saveDisposition">确 定</el-button>
|
|
||||||
<el-button @click="disposition.updFlag = false">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -108,9 +27,18 @@
|
||||||
<script>
|
<script>
|
||||||
import ClickOutside from 'vue-click-outside'
|
import ClickOutside from 'vue-click-outside'
|
||||||
import Home from '../Home.vue'
|
import Home from '../Home.vue'
|
||||||
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "../../../../api/tool/gen";
|
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
|
||||||
|
import {listDisposition} from "@/api/quest/disposition";
|
||||||
|
import TypeTable from "./node/type-table.vue";
|
||||||
|
import TypeTableUpd from "./node/type-table-upd.vue";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "nodeItem",
|
name: "nodeItem",
|
||||||
|
components: {
|
||||||
|
TypeTable,
|
||||||
|
TypeTableUpd,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
node: Object
|
node: Object
|
||||||
},
|
},
|
||||||
|
@ -133,32 +61,16 @@ export default {
|
||||||
mouseEnter: false,
|
mouseEnter: false,
|
||||||
isActive: false,
|
isActive: false,
|
||||||
isSelected: false,
|
isSelected: false,
|
||||||
disposition: {
|
disp: {
|
||||||
|
nodeCode: undefined,
|
||||||
|
nodeType: undefined,
|
||||||
findFlag: false,
|
findFlag: false,
|
||||||
updFlag: false,
|
updFlag: false,
|
||||||
formData: {
|
formData: {
|
||||||
nodeId: undefined,
|
db: {},
|
||||||
dbName: undefined,
|
|
||||||
table: {},
|
|
||||||
fields: []
|
fields: []
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
total: 0,
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
dbName: undefined,
|
|
||||||
tableName: undefined,
|
|
||||||
tableComment: undefined
|
|
||||||
},
|
|
||||||
// 数据库列表
|
|
||||||
dbNameOptions: [],
|
|
||||||
// 展示数据表列表
|
|
||||||
tableOptions: [],
|
|
||||||
// 所有数据库列表
|
|
||||||
tableList: [],
|
|
||||||
// 字段列表
|
|
||||||
fieldsOptions: []
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -168,6 +80,7 @@ export default {
|
||||||
hideAnchor() {
|
hideAnchor() {
|
||||||
this.mouseEnter = false
|
this.mouseEnter = false
|
||||||
},
|
},
|
||||||
|
// 右击菜单
|
||||||
onContextmenu() {
|
onContextmenu() {
|
||||||
this.$contextmenu({
|
this.$contextmenu({
|
||||||
items: [
|
items: [
|
||||||
|
@ -183,7 +96,7 @@ export default {
|
||||||
disabled: false,
|
disabled: false,
|
||||||
icon: "",
|
icon: "",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
this.disposition.updFlag = true;
|
this.disp.type.findFlag = true;
|
||||||
}
|
}
|
||||||
},{
|
},{
|
||||||
label: '删除节点',
|
label: '删除节点',
|
||||||
|
@ -259,6 +172,15 @@ export default {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 双击触发-查看配置
|
||||||
|
findDisposition() {
|
||||||
|
// 查询节点配置信息
|
||||||
|
this.disp.nodeCode = this.node.id
|
||||||
|
this.disp.findFlag = true
|
||||||
|
listDisposition({nodeCode: this.node.id}).then(res => {
|
||||||
|
this.disp.formData = this.getVueDisp(res.data.rows)
|
||||||
|
})
|
||||||
|
},
|
||||||
/** jsPlumb节点类型 --> 数据库节点类型 */
|
/** jsPlumb节点类型 --> 数据库节点类型 */
|
||||||
toMysqlNode(node,preLine,nextLine,taskCode){
|
toMysqlNode(node,preLine,nextLine,taskCode){
|
||||||
return {
|
return {
|
||||||
|
@ -304,122 +226,26 @@ export default {
|
||||||
line: line
|
line: line
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 双击触发-查看配置
|
/** 类型转换 mysql -> vue */
|
||||||
findDisposition() {
|
getVueDisp(dispList) {
|
||||||
// 查询节点配置信息
|
const db = {
|
||||||
this.disposition.formData.nodeId = this.node.id
|
dbName: dispList.find(disp => disp.dispKey === 'db').dispValue,
|
||||||
this.disposition.findFlag = true
|
tableName: dispList.find(disp => disp.dispKey === 'table').dispValue,
|
||||||
},
|
tableComment: dispList.find(disp => disp.dispKey === 'table').dispLabel
|
||||||
// 编辑配置
|
}
|
||||||
editDisposition() {
|
const fields = []
|
||||||
this.selDbNameList()
|
dispList.forEach(disp => {
|
||||||
this.getListAll()
|
if (disp.dispKey === 'fields'){
|
||||||
this.disposition.updFlag = true
|
fields.push({
|
||||||
},
|
fieldName: disp.dispValue,
|
||||||
// 查询所有数据库名称
|
fieldType: disp.dispType,
|
||||||
selDbNameList() {
|
fieldComment: disp.dispLabel
|
||||||
selDbNameAll().then(res => {
|
|
||||||
this.dbNameOptions = res.data
|
|
||||||
})
|
})
|
||||||
},
|
|
||||||
// 查询表字段
|
|
||||||
getFields(dbName, tableName) {
|
|
||||||
selectDbTableColumnsByName(dbName, tableName).then(res => {
|
|
||||||
this.fieldsOptions = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 保存配置按钮
|
|
||||||
saveDisposition() {
|
|
||||||
const dispositionData = this.disposition.formData
|
|
||||||
const addData = []
|
|
||||||
/**
|
|
||||||
* {
|
|
||||||
* key: '',
|
|
||||||
* name: '',
|
|
||||||
* type: ''
|
|
||||||
* value: ''
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
// // 处理数据库信息
|
|
||||||
// addData.push({
|
|
||||||
// nodeCode: dispositionData.nodeId,
|
|
||||||
// atom: {
|
|
||||||
// key: 'dbName',
|
|
||||||
// name: '数据库名称',
|
|
||||||
// type: 'String',
|
|
||||||
// value: dispositionData.dbName
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// // 处理数据表信息
|
|
||||||
// addData.push({
|
|
||||||
// nodeCode: dispositionData.nodeId,
|
|
||||||
// atom: {
|
|
||||||
// key: 'typeName',
|
|
||||||
// name: '数据表名称',
|
|
||||||
// type: 'String',
|
|
||||||
// value: dispositionData.dbName
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// addData.push({
|
|
||||||
// key: dispositionData.nodeId,
|
|
||||||
// name: '数据表名称',
|
|
||||||
// type: 'String',
|
|
||||||
// value: dispositionData.table
|
|
||||||
// })
|
|
||||||
// // 处理数据字段信息
|
|
||||||
// addData.push({
|
|
||||||
// nodeInfoCode: dispositionData.nodeId,
|
|
||||||
// nodeType: 'fields',
|
|
||||||
// nodeValue: dispositionData.fields
|
|
||||||
// })
|
|
||||||
// console.log(addData)
|
|
||||||
this.disposition.updFlag = false
|
|
||||||
this.disposition.findFlag = false
|
|
||||||
|
|
||||||
},
|
|
||||||
getListAll() {
|
|
||||||
listDbTableAll().then(res => {
|
|
||||||
this.tableList = res.data;
|
|
||||||
this.tableOptions = res.data;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
return {db, fields}
|
||||||
/** 重置按钮操作 */
|
|
||||||
resetQuery() {
|
|
||||||
this.resetForm("queryForm");
|
|
||||||
this.handleQuery();
|
|
||||||
},
|
|
||||||
/** 选择表信息*/
|
|
||||||
selectTable(row) {
|
|
||||||
this.disposition.formData.table = row.tableName
|
|
||||||
this.disposition.formData.dbName = row.dbName
|
|
||||||
this.getFields(row.dbName, row.tableName)
|
|
||||||
},
|
|
||||||
clickRow(row) {
|
|
||||||
this.$refs.table.toggleRowSelection(row);
|
|
||||||
},
|
|
||||||
// 多选框选中数据
|
|
||||||
handleSelectionChange(selection) {
|
|
||||||
this.disposition.formData.fields = selection.map(item => {
|
|
||||||
return {
|
|
||||||
fieldName: item.columnName,
|
|
||||||
fieldType: item.columnType,
|
|
||||||
fieldComment: item.columnComment
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-drawer title="节点配置" :visible.sync="disp.type.findFlag" direction="rtl" size="50%">
|
||||||
|
<el-table ref="table" :data="disp.formData.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">
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column :show-overflow-tooltip="true" label="所属数据库">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
export default {
|
||||||
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
|
name: 'type-exportation',
|
||||||
|
props: {
|
||||||
|
disp: {
|
||||||
|
nodeCode: undefined,
|
||||||
|
nodeType: undefined,
|
||||||
|
type:{
|
||||||
|
typeName: '',
|
||||||
|
findFlag: false,
|
||||||
|
updFlag: false,
|
||||||
|
},
|
||||||
|
formData: {
|
||||||
|
db: {},
|
||||||
|
fields: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// 这里存放数据"
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
// 计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
// 生命周期 - 创建完成(可以访问当前this实例)",
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
// 方法集合",
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<!-- 修改节点配置-->
|
||||||
|
<div align="center">
|
||||||
|
<!-- 自定义表单对话框 -->
|
||||||
|
<el-drawer :modal="false" :visible.sync="disp.updFlag" direction="rtl" title="节点配置" append-to-body size="60%">
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<span v-if="node.type === 'table'">
|
||||||
|
<TableUpd :disp="disp" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<el-button type="primary" @click="saveDisposition">确 定</el-button>
|
||||||
|
<el-button @click="disp.updFlag = false">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
import TableUpd from './type/tableUpd.vue'
|
||||||
|
import {selectDbTableColumnsByName, listDbTableAll, selDbNameAll} from "@/api/tool/gen";
|
||||||
|
import {batchAddUpd} from "@/api/quest/disposition";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
|
name: 'type-table',
|
||||||
|
components: {TableUpd},
|
||||||
|
props: {
|
||||||
|
node: {},
|
||||||
|
disp: {
|
||||||
|
nodeCode: undefined,
|
||||||
|
nodeType: undefined,
|
||||||
|
findFlag: false,
|
||||||
|
updFlag: false,
|
||||||
|
formData: {
|
||||||
|
db: {},
|
||||||
|
fields: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// 这里存放数据"
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
// 方法集合",
|
||||||
|
methods: {
|
||||||
|
// 保存配置按钮
|
||||||
|
saveDisposition() {
|
||||||
|
const dispData = this.disp.formData
|
||||||
|
const dispList = this.getMysqlDisp(dispData.db,dispData.fields)
|
||||||
|
console.log(dispData)
|
||||||
|
console.log(dispList)
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<!-- 节点配置-->
|
||||||
|
<div align="center">
|
||||||
|
<el-drawer :visible.sync="disp.findFlag" direction="rtl" title="配置信息" append-to-body size="60%">
|
||||||
|
{{ node }}
|
||||||
|
<div style="padding-left: 20px;padding-right: 20px;">
|
||||||
|
|
||||||
|
<span v-if="node.type === 'table'">
|
||||||
|
<TableFind :disp="disp" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<div align="center">
|
||||||
|
<el-button @click="disp.findFlag = false">确认</el-button>
|
||||||
|
<el-button type="primary" @click="editDisposition">修改配置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
import TableFind from './type/tableFind.vue'
|
||||||
|
import TableUpd from "./type/tableUpd.vue";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
|
name: 'type-table',
|
||||||
|
components: {TableUpd, TableFind},
|
||||||
|
props: {
|
||||||
|
node: {},
|
||||||
|
disp: {
|
||||||
|
nodeCode: undefined,
|
||||||
|
nodeType: undefined,
|
||||||
|
findFlag: false,
|
||||||
|
updFlag: false,
|
||||||
|
formData: {
|
||||||
|
db: {},
|
||||||
|
fields: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// 这里存放数据"
|
||||||
|
return {
|
||||||
|
xx: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
// 生命周期 - 创建完成(可以访问当前this实例)",
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 方法集合",
|
||||||
|
methods: {
|
||||||
|
editDisposition() {
|
||||||
|
this.disp.updFlag = true
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,51 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h5>数据库: {{ disp.formData.db.dbName }}</h5>
|
||||||
|
<br>
|
||||||
|
<h5>数据表: {{ disp.formData.db.tableName }}</h5>
|
||||||
|
<span>
|
||||||
|
<el-table ref="table" :data="disp.formData.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>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
export default {
|
||||||
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
|
name: 'tableFind',
|
||||||
|
props: {
|
||||||
|
disp: {
|
||||||
|
nodeCode: undefined,
|
||||||
|
nodeType: undefined,
|
||||||
|
findFlag: false,
|
||||||
|
updFlag: false,
|
||||||
|
formData: {
|
||||||
|
db: {},
|
||||||
|
fields: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// 这里存放数据"
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
// 生命周期 - 创建完成(可以访问当前this实例)",
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
// 方法集合",
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,148 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
|
// 例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
|
name: 'tableUpd',
|
||||||
|
props: {
|
||||||
|
disp: {
|
||||||
|
nodeCode: undefined,
|
||||||
|
nodeType: undefined,
|
||||||
|
findFlag: false,
|
||||||
|
updFlag: false,
|
||||||
|
formData: {
|
||||||
|
db: {},
|
||||||
|
fields: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// 这里存放数据"
|
||||||
|
return {
|
||||||
|
// 数据库列表
|
||||||
|
dbNameOptions: [],
|
||||||
|
// 展示数据表列表
|
||||||
|
tableOptions: [],
|
||||||
|
// 字段列表
|
||||||
|
fieldsOptions: [],
|
||||||
|
// 所有数据库列表
|
||||||
|
tableList: [],
|
||||||
|
queryParams: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
// 生命周期 - 创建完成(可以访问当前this实例)",
|
||||||
|
created() {
|
||||||
|
this.selDbNameList()
|
||||||
|
this.getListAll()
|
||||||
|
},
|
||||||
|
// 方法集合",
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -1,7 +1,6 @@
|
||||||
import panzoom from "panzoom";
|
import panzoom from "panzoom";
|
||||||
import {GenNonDuplicateID} from "@/common/until";
|
import {GenNonDuplicateID} from "@/common/until";
|
||||||
import item from "../components/node-item"
|
import item from "../components/node-item"
|
||||||
import Home from "../Home.vue"
|
|
||||||
|
|
||||||
const methods = {
|
const methods = {
|
||||||
init() {
|
init() {
|
||||||
|
@ -10,8 +9,10 @@ const methods = {
|
||||||
this.jsPlumb.importDefaults(this.jsplumbSetting);
|
this.jsPlumb.importDefaults(this.jsplumbSetting);
|
||||||
//完成连线前的校验
|
//完成连线前的校验
|
||||||
this.jsPlumb.bind("beforeDrop", evt => {
|
this.jsPlumb.bind("beforeDrop", evt => {
|
||||||
let res = () => { } //此处可以添加是否创建连接的校验, 返回 false 则不添加;
|
//此处可以添加是否创建连接的校验, 返回 false 则不添加;
|
||||||
return res
|
return () => {
|
||||||
|
console.log(evt)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
//断开连线后,维护本地数据
|
//断开连线后,维护本地数据
|
||||||
this.jsPlumb.bind("connectionDetached", evt => {
|
this.jsPlumb.bind("connectionDetached", evt => {
|
||||||
|
|
Loading…
Reference in New Issue