拆分节点配置功能,新增类型判断
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-bottom" v-show="mouseEnter"></div>
|
||||
<div class="node-anchor anchor-left" v-show="mouseEnter"></div>
|
||||
<!-- 节点配置-->
|
||||
<div align="center">
|
||||
<el-drawer
|
||||
:visible.sync="disposition.findFlag"
|
||||
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>
|
||||
<TypeTable :node="node" :disp="disp" />
|
||||
<TypeTableUpd :node="node" :disp="disp" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -108,9 +27,18 @@
|
|||
<script>
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
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 {
|
||||
name: "nodeItem",
|
||||
components: {
|
||||
TypeTable,
|
||||
TypeTableUpd,
|
||||
},
|
||||
props: {
|
||||
node: Object
|
||||
},
|
||||
|
|
@ -133,32 +61,16 @@ export default {
|
|||
mouseEnter: false,
|
||||
isActive: false,
|
||||
isSelected: false,
|
||||
disposition: {
|
||||
disp: {
|
||||
nodeCode: undefined,
|
||||
nodeType: undefined,
|
||||
findFlag: false,
|
||||
updFlag: false,
|
||||
formData: {
|
||||
nodeId: undefined,
|
||||
dbName: undefined,
|
||||
table: {},
|
||||
db: {},
|
||||
fields: []
|
||||
}
|
||||
},
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dbName: undefined,
|
||||
tableName: undefined,
|
||||
tableComment: undefined
|
||||
},
|
||||
// 数据库列表
|
||||
dbNameOptions: [],
|
||||
// 展示数据表列表
|
||||
tableOptions: [],
|
||||
// 所有数据库列表
|
||||
tableList: [],
|
||||
// 字段列表
|
||||
fieldsOptions: []
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -168,6 +80,7 @@ export default {
|
|||
hideAnchor() {
|
||||
this.mouseEnter = false
|
||||
},
|
||||
// 右击菜单
|
||||
onContextmenu() {
|
||||
this.$contextmenu({
|
||||
items: [
|
||||
|
|
@ -183,7 +96,7 @@ export default {
|
|||
disabled: false,
|
||||
icon: "",
|
||||
onClick: () => {
|
||||
this.disposition.updFlag = true;
|
||||
this.disp.type.findFlag = true;
|
||||
}
|
||||
},{
|
||||
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节点类型 --> 数据库节点类型 */
|
||||
toMysqlNode(node,preLine,nextLine,taskCode){
|
||||
return {
|
||||
|
|
@ -304,122 +226,26 @@ export default {
|
|||
line: line
|
||||
}
|
||||
},
|
||||
// 双击触发-查看配置
|
||||
findDisposition() {
|
||||
// 查询节点配置信息
|
||||
this.disposition.formData.nodeId = this.node.id
|
||||
this.disposition.findFlag = true
|
||||
},
|
||||
// 编辑配置
|
||||
editDisposition() {
|
||||
this.selDbNameList()
|
||||
this.getListAll()
|
||||
this.disposition.updFlag = true
|
||||
},
|
||||
// 查询所有数据库名称
|
||||
selDbNameList() {
|
||||
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)
|
||||
/** 类型转换 mysql -> vue */
|
||||
getVueDisp(dispList) {
|
||||
const db = {
|
||||
dbName: dispList.find(disp => disp.dispKey === 'db').dispValue,
|
||||
tableName: dispList.find(disp => disp.dispKey === 'table').dispValue,
|
||||
tableComment: dispList.find(disp => disp.dispKey === 'table').dispLabel
|
||||
}
|
||||
const fields = []
|
||||
dispList.forEach(disp => {
|
||||
if (disp.dispKey === 'fields'){
|
||||
fields.push({
|
||||
fieldName: disp.dispValue,
|
||||
fieldType: disp.dispType,
|
||||
fieldComment: disp.dispLabel
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
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
|
||||
};
|
||||
});
|
||||
},
|
||||
}
|
||||
return {db, fields}
|
||||
}
|
||||
},
|
||||
};
|
||||
</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 { GenNonDuplicateID } from "@/common/until";
|
||||
import {GenNonDuplicateID} from "@/common/until";
|
||||
import item from "../components/node-item"
|
||||
import Home from "../Home.vue"
|
||||
|
||||
const methods = {
|
||||
init() {
|
||||
|
|
@ -10,8 +9,10 @@ const methods = {
|
|||
this.jsPlumb.importDefaults(this.jsplumbSetting);
|
||||
//完成连线前的校验
|
||||
this.jsPlumb.bind("beforeDrop", evt => {
|
||||
let res = () => { } //此处可以添加是否创建连接的校验， 返回 false 则不添加；
|
||||
return res
|
||||
//此处可以添加是否创建连接的校验， 返回 false 则不添加；
|
||||
return () => {
|
||||
console.log(evt)
|
||||
}
|
||||
})
|
||||
//断开连线后，维护本地数据
|
||||
this.jsPlumb.bind("connectionDetached", evt => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue