Merge branch 'master' of https://gitea.qinmian.online/2112A-ONE/cloud-ui
commit
ae63f3f0cd
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<div id="flow">
|
||||
<div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}" />
|
||||
<div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}" />
|
||||
<flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState" />
|
||||
<flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" :data="data" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
},1000)
|
||||
},1500)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -96,6 +96,7 @@ export default {
|
|||
const rows = res.data.rows
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const r = flowNode.methods.toJsPlumbNode(rows[i])
|
||||
// 节点添加
|
||||
this.data.nodeList.push({
|
||||
id: r.node.id,
|
||||
type: r.node.type,
|
||||
|
|
@ -104,6 +105,7 @@ export default {
|
|||
top: r.node.top,
|
||||
left: r.node.left
|
||||
})
|
||||
// 连线添加
|
||||
if (r.line) {
|
||||
r.line.forEach(v => {
|
||||
this.data.lineList.push({
|
||||
|
|
@ -116,6 +118,16 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
// 节点图片配置添加
|
||||
this.nodeHandle()
|
||||
// 连线去重
|
||||
this.data.lineList = this.lineHandle(this.data.lineList)
|
||||
})
|
||||
this.flag = true
|
||||
},
|
||||
// 节点批量处理-初始化
|
||||
nodeHandle() {
|
||||
// 节点图片配置添加
|
||||
this.data.nodeList.forEach(node => {
|
||||
nodeTypeList.forEach(v => {
|
||||
if (node.type === v.type) {
|
||||
|
|
@ -125,14 +137,23 @@ export default {
|
|||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
this.flag = true
|
||||
},
|
||||
// 连线去重
|
||||
lineHandle(lineList) {
|
||||
let map = new Map();
|
||||
lineList.forEach(item => {
|
||||
const key = item.from + '->' + item.to;
|
||||
if (!map.has(key)) {
|
||||
map.set(key, item);
|
||||
}
|
||||
});
|
||||
return Array.from(map.values());
|
||||
},
|
||||
// 保存修改按钮
|
||||
save() {
|
||||
// 1. 获取所有节点与连线信息
|
||||
const nodeList = this.data.nodeList
|
||||
const lineList = this.data.lineList
|
||||
const lineList = this.lineHandle(this.data.lineList)
|
||||
console.log(this.data)
|
||||
// 2. 处理所有信息,将jsPlumb类型 ==> 数据表类型
|
||||
const nodeData = []
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<DispFind :data="data" :node="node" :disp="disp" />
|
||||
<DispUpd :data="data" :node="node" :disp="disp" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -108,10 +27,20 @@
|
|||
<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 DispFind from "./node/dispFind.vue";
|
||||
import DispUpd from "./node/dispUpd.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "nodeItem",
|
||||
components: {
|
||||
DispFind,
|
||||
DispUpd,
|
||||
},
|
||||
props: {
|
||||
data: {},
|
||||
node: Object
|
||||
},
|
||||
directives: {
|
||||
|
|
@ -133,32 +62,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 +81,7 @@ export default {
|
|||
hideAnchor() {
|
||||
this.mouseEnter = false
|
||||
},
|
||||
// 右击菜单
|
||||
onContextmenu() {
|
||||
this.$contextmenu({
|
||||
items: [
|
||||
|
|
@ -183,7 +97,7 @@ export default {
|
|||
disabled: false,
|
||||
icon: "",
|
||||
onClick: () => {
|
||||
this.disposition.updFlag = true;
|
||||
this.disp.type.findFlag = true;
|
||||
}
|
||||
},{
|
||||
label: '删除节点',
|
||||
|
|
@ -259,6 +173,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 +227,68 @@ 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
|
||||
/** 类型转换 mysql -> vue */
|
||||
getVueDisp(dispList) {
|
||||
let type = this.node.type
|
||||
const db = {}
|
||||
const fields = []
|
||||
if (type === 'table'){
|
||||
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
|
||||
})
|
||||
},
|
||||
// 查询表字段
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
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
|
||||
};
|
||||
});
|
||||
},
|
||||
}
|
||||
if (type === 'exportation') {
|
||||
let i = 0
|
||||
let j = 0
|
||||
dispList.forEach(disp => {
|
||||
if (disp.dispKey === 'formDb'){
|
||||
db.formDb = disp.dispValue
|
||||
}
|
||||
if (disp.dispKey === 'formTable'){
|
||||
db.formTable = disp.dispValue
|
||||
db.formTableComment = disp.dispLabel
|
||||
}
|
||||
if (disp.dispKey === 'toDb'){
|
||||
db.toDb = disp.dispValue
|
||||
}
|
||||
if (disp.dispKey === 'toTable'){
|
||||
db.toTable = disp.dispValue
|
||||
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
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
return {db, fields}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<!-- 节点配置-->
|
||||
<div align="center">
|
||||
<el-drawer :visible.sync="disp.findFlag" direction="rtl" title="配置信息" append-to-body size="60%">
|
||||
<div style="padding-left: 20px;padding-right: 20px;">
|
||||
|
||||
<span v-if="node.type === 'table'">
|
||||
<TableFind :disp="disp" />
|
||||
</span>
|
||||
<span v-else-if="node.type === 'exportation'">
|
||||
<ExporFind :disp="disp" :data="data" :node="node" />
|
||||
</span>
|
||||
<span v-else-if="node.type === 'unite'">
|
||||
<UniteFind :disp="disp" :data="data" :node="node" />
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
// 例如：import 《组件名称》 from '《组件路径》,
|
||||
import TableFind from './type/tableFind.vue'
|
||||
import ExporFind from "./type/exporFind.vue";
|
||||
import UniteFind from "./type/uniteFind.vue";
|
||||
|
||||
|
||||
export default {
|
||||
// import引入的组件需要注入到对象中才能使用"
|
||||
name: 'type-table',
|
||||
components: {ExporFind, TableFind, UniteFind},
|
||||
props: {
|
||||
data: {},
|
||||
node: {},
|
||||
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,59 @@
|
|||
<template>
|
||||
<!-- 修改节点配置-->
|
||||
<div>
|
||||
<!-- 自定义表单对话框 -->
|
||||
<el-drawer :modal="false" :visible.sync="disp.updFlag" direction="rtl" title="节点配置" append-to-body size="60%">
|
||||
<div>
|
||||
|
||||
<span v-if="node.type === 'table'">
|
||||
<TableUpd :disp="disp" />
|
||||
</span>
|
||||
<span v-else-if="node.type === 'exportation'">
|
||||
<ExporUpd :disp="disp" :data="data" :node="node" />
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
// 例如：import 《组件名称》 from '《组件路径》,
|
||||
import TableUpd from './type/tableUpd.vue'
|
||||
|
||||
export default {
|
||||
// import引入的组件需要注入到对象中才能使用"
|
||||
name: 'type-table',
|
||||
components: {TableUpd},
|
||||
props: {
|
||||
data: {},
|
||||
node: {},
|
||||
disp: {
|
||||
nodeCode: undefined,
|
||||
nodeType: undefined,
|
||||
findFlag: false,
|
||||
updFlag: false,
|
||||
formData: {
|
||||
db: {},
|
||||
fields: []
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
// 这里存放数据"
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于data概念",
|
||||
computed: {},
|
||||
// 方法集合",
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<span v-if="formDb">
|
||||
输入表信息: <br><br>
|
||||
<span v-for="db in formDb">
|
||||
<el-tag type="primary" v-if="db.dbTable">{{ db.dbTable }}</el-tag><br><br>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>无输入表</span>
|
||||
<br><br>
|
||||
<span v-if="toDb && toDb.dbTable">
|
||||
输出表信息: <br><br>
|
||||
<el-tag type="primary" v-if="toDb.dbTable">{{ toDb.dbTable }}</el-tag>
|
||||
<el-button type="text" @click="checkFields">更改输出表</el-button>
|
||||
</span>
|
||||
<span v-else>
|
||||
无输出表:
|
||||
<el-button type="text" @click="checkFields">选择输出表</el-button>
|
||||
</span>
|
||||
<br><br>
|
||||
</div>
|
||||
<div align="center">
|
||||
<el-table ref="table" :data="formFields" height="450px">
|
||||
<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="输出字段">
|
||||
<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 align="center">
|
||||
<el-button @click="disp.findFlag = false">返回</el-button>
|
||||
<el-button type="primary" disp.findFlag = false>确认</el-button>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
// 例如：import 《组件名称》 from '《组件路径》,
|
||||
import {batchAddUpd, listDisposition} from "../../../../../../api/quest/disposition";
|
||||
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "../../../../../../api/tool/gen";
|
||||
|
||||
export default {
|
||||
// import引入的组件需要注入到对象中才能使用"
|
||||
name: 'exporFind',
|
||||
props: {
|
||||
data: {},
|
||||
node: {},
|
||||
disp: {
|
||||
nodeCode: undefined,
|
||||
nodeType: undefined,
|
||||
findFlag: false,
|
||||
updFlag: false,
|
||||
formData: {
|
||||
db: {},
|
||||
fields: []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 这里存放数据"
|
||||
return {
|
||||
formDb: [],
|
||||
toDb: {},
|
||||
formFields: [],
|
||||
toFields: [],
|
||||
fieldsList: new Map(),
|
||||
checkFieldsFlag: false,
|
||||
checkFieldsMapFlag: false,
|
||||
// 数据库列表
|
||||
dbNameOptions: [],
|
||||
// 展示数据表列表
|
||||
tableOptions: [],
|
||||
// 字段列表
|
||||
fieldsOptions: [],
|
||||
// 所有数据库列表
|
||||
tableList: [],
|
||||
queryParams: {}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于data概念",
|
||||
computed: {},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
// 方法集合",
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
// 查询上级的所有节点
|
||||
/** 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
|
||||
})
|
||||
},
|
||||
// 选择数据库按钮
|
||||
checkFields() {
|
||||
this.selDbNameList()
|
||||
this.getListAll()
|
||||
this.checkFieldsFlag = true
|
||||
},
|
||||
// 保存目标数据库
|
||||
save() {
|
||||
console.log('formDb',this.formDb)
|
||||
console.log('toDb',this.toDb)
|
||||
console.log('formFields',this.formFields)
|
||||
console.log('toFields',this.toFields)
|
||||
console.log('fieldsList',this.fieldsList)
|
||||
// 处理输入字段与输出字段
|
||||
const field = this.formFields
|
||||
let map = field.map(item => [item.fieldName, item.toFidlesName]);
|
||||
this.fieldsList = new Map()
|
||||
map.forEach(item => {
|
||||
this.toFields.forEach(toField => {
|
||||
if (toField.fieldName === item[1]){
|
||||
this.fieldsList.set(item[0], toField)
|
||||
}
|
||||
})
|
||||
})
|
||||
// 格式转换
|
||||
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 +')'
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div>
|
||||
<span v-if="disp.formData.db.dbName && disp.formData.db.tableName">配置表信息:
|
||||
{{ disp.formData.db.dbName }}.
|
||||
{{ disp.formData.db.tableName }}
|
||||
({{ disp.formData.db.tableComment }})
|
||||
</span>
|
||||
<span v-else>无配置表</span>
|
||||
<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>
|
||||
<br><br>
|
||||
<div align="center">
|
||||
<el-button @click="disp.findFlag = false">确认</el-button>
|
||||
<el-button type="primary" @click="disp.updFlag = true">修改配置</el-button>
|
||||
</div>
|
||||
</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: {
|
||||
toUpd() {
|
||||
this.disp.updFlag = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<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>
|
||||
<br><br>
|
||||
<div align="center">
|
||||
<el-button type="primary" @click="saveDisposition">确 定</el-button>
|
||||
<el-button @click="disp.updFlag = false">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
// 例如：import 《组件名称》 from '《组件路径》,
|
||||
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";
|
||||
import {batchAddUpd} from "@/api/quest/disposition";
|
||||
|
||||
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.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.disp.formData.fields = []
|
||||
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;
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-form :model="formData" label-width="100px" label-position="left" style="width: 80%">
|
||||
<el-form-item label="一号表">
|
||||
<el-input v-model="reqDispData.db[0].dbTable" placeholder="请选择表" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="二号表">
|
||||
<el-input v-model="reqDispData.db[1].dbTable" placeholder="请选择表" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="连接方式">
|
||||
<el-select v-model="respDispData.join" placeholder="请选择连接方式">
|
||||
<el-option label="左连接" value="LEFT JOIN" />
|
||||
<el-option label="右连接" value="RIGHT JOIN" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="连接条件">
|
||||
<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>
|
||||
|
||||
<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="checkFields">下一步</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<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="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">
|
||||
<el-button @click="checkFieldsFlag = false">返回</el-button>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
// 例如：import 《组件名称》 from '《组件路径》,
|
||||
import {listDisposition} from "@/api/quest/disposition";
|
||||
import {selectDbTableColumnsByName} from "@/api/tool/gen";
|
||||
import {batchAddUpd} from "@/api/quest/disposition";
|
||||
|
||||
export default {
|
||||
// import引入的组件需要注入到对象中才能使用"
|
||||
name: 'uniteFind',
|
||||
props: {
|
||||
data: {},
|
||||
node: {},
|
||||
disp: {
|
||||
nodeCode: undefined,
|
||||
nodeType: undefined,
|
||||
findFlag: false,
|
||||
updFlag: false,
|
||||
formData: {
|
||||
db: {},
|
||||
fields: []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 这里存放数据"
|
||||
return {
|
||||
reqDispData: {
|
||||
db: [],
|
||||
fields: [],
|
||||
fieldList: []
|
||||
},
|
||||
respDispData: {
|
||||
db: [],
|
||||
fields: [],
|
||||
join: '',
|
||||
joinData: {
|
||||
form: {},
|
||||
to: {}
|
||||
}
|
||||
},
|
||||
formData: {},
|
||||
checkFieldsFlag: false,
|
||||
i: 0
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于data概念",
|
||||
computed: {},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
// 方法集合",
|
||||
methods: {
|
||||
init() {
|
||||
// 查询上级的所有节点
|
||||
/** 1.查询该节点的上一级节点*/
|
||||
let preNodeId = []
|
||||
this.data.lineList.forEach(line => {
|
||||
if (line.to === this.node.id){
|
||||
preNodeId.push(line.from)
|
||||
}
|
||||
})
|
||||
// 去重
|
||||
preNodeId = [...new Set(preNodeId)]
|
||||
preNodeId.push(this.node.id)
|
||||
/** 2.获取节点的配置参数*/
|
||||
if (preNodeId){
|
||||
preNodeId.forEach(id => {
|
||||
this.findDisp(id)
|
||||
})
|
||||
}
|
||||
/** 3.查询表字段 */
|
||||
console.log('reqDispData',this.reqDispData)
|
||||
console.log('respDispData',this.respDispData)
|
||||
|
||||
},
|
||||
// 根据节点编码查询节点的配置参数
|
||||
findDisp(nodeCode) {
|
||||
listDisposition({nodeCode: nodeCode}).then(res => {
|
||||
if (!res.data.rows){
|
||||
return
|
||||
}
|
||||
let data = this.getVueDisp(res.data.rows);
|
||||
if (this.node.id === nodeCode){
|
||||
this.respDispData.db.push(data.db)
|
||||
this.respDispData.fields.push(data.fields)
|
||||
this.respDispData.join = data.join
|
||||
}else{
|
||||
this.reqDispData.db.push(data.db)
|
||||
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)
|
||||
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);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.respDispData.fields = selection.map(item => {
|
||||
return {
|
||||
tableName: item.tableName,
|
||||
fieldName: item.fieldName,
|
||||
fieldType: item.fieldType,
|
||||
fieldComment: item.fieldComment,
|
||||
fieldDesc: item.fieldDesc
|
||||
};
|
||||
});
|
||||
},
|
||||
/** 节点配置 类型转换 mysql -> vue */
|
||||
getVueDisp(dispList) {
|
||||
const db = {}
|
||||
const fields = []
|
||||
let tableName = ''
|
||||
let join = ''
|
||||
let joinData = {
|
||||
form: '',
|
||||
to: ''
|
||||
}
|
||||
dispList.forEach(disp => {
|
||||
if (disp.dispKey === 'db') {
|
||||
db.dbName = disp.dispValue
|
||||
}
|
||||
if (disp.dispKey === 'table') {
|
||||
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,
|
||||
fieldDesc: disp.fieldDesc
|
||||
})
|
||||
}
|
||||
if (disp.dispKey === 'joinDataForm') {
|
||||
joinData.form.push({
|
||||
tableName: tableName,
|
||||
fieldName: disp.dispValue,
|
||||
fieldType: disp.dispType,
|
||||
fieldComment: disp.dispLabel,
|
||||
fieldDesc: disp.fieldDesc
|
||||
})
|
||||
}
|
||||
if (disp.dispKey === 'joinDataTo') {
|
||||
joinData.to.push({
|
||||
tableName: tableName,
|
||||
fieldName: disp.dispValue,
|
||||
fieldType: disp.dispType,
|
||||
fieldComment: disp.dispLabel,
|
||||
fieldDesc: disp.fieldDesc
|
||||
})
|
||||
}
|
||||
if (disp.dispKey === 'join') {
|
||||
join = disp.dispValue
|
||||
}
|
||||
})
|
||||
if (join !== '') {
|
||||
return {db, fields, join, joinData}
|
||||
}
|
||||
return {db, fields}
|
||||
},
|
||||
/** 节点配置--unite 类型转换 vue -> mysql*/
|
||||
getMysqlDisp(resp) {
|
||||
const db = resp.db
|
||||
const table = 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: '数据库', // 显示名称
|
||||
dispValue: item.dbName, // 存储值
|
||||
dispType: 'string', // 存储类型
|
||||
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 => {
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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 => {
|
||||
|
|
|
|||
|
|
@ -75,9 +75,7 @@
|
|||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="任务编码" align="center" prop="taskCode" />
|
||||
<el-table-column label="任务名称" align="center" prop="taskName" />
|
||||
<el-table-column label="任务触发器" align="center" prop="taskWebhook" />
|
||||
<el-table-column label="规则编码" align="center" prop="ruleCode" />
|
||||
<el-table-column label="任务类型" align="center" prop="taskType" />
|
||||
<el-table-column label="任务优先级" align="center" prop="taskType" />
|
||||
<el-table-column label="任务内容" align="center" prop="taskData" />
|
||||
<el-table-column label="启用状态" align="center" prop="state">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -125,11 +123,13 @@
|
|||
<el-form-item label="任务名称" prop="taskName">
|
||||
<el-input v-model="form.taskName" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务触发器" prop="taskWebhook">
|
||||
<el-input v-model="form.taskWebhook" placeholder="请输入任务触发器" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规则编码" prop="ruleCode">
|
||||
<el-input v-model="form.ruleCode" placeholder="请输入规则编码" />
|
||||
<el-form-item label="任务优先级" prop="taskType">
|
||||
<el-select v-model="form.taskType" placeholder="请选择任务类型">
|
||||
<el-option label="低"/>
|
||||
<el-option label="中"/>
|
||||
<el-option label="高"/>
|
||||
<el-option label="紧急"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务内容">
|
||||
<editor v-model="form.taskData" :min-height="192"/>
|
||||
|
|
@ -184,7 +184,10 @@ export default {
|
|||
state: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
form: {
|
||||
taskType: '低',
|
||||
state: "Y"
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
taskCode: [
|
||||
|
|
@ -220,9 +223,9 @@ export default {
|
|||
taskName: null,
|
||||
taskWebhook: null,
|
||||
ruleCode: null,
|
||||
taskType: null,
|
||||
taskType: '低',
|
||||
taskData: null,
|
||||
state: null,
|
||||
state: 'Y',
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
</el-form>
|
||||
|
||||
|
||||
|
||||
{{ rule.name }}
|
||||
<el-descriptions class="margin-top" :column="3" border>
|
||||
<template slot="extra">
|
||||
|
|
@ -194,7 +193,6 @@
|
|||
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
<el-descriptions-item>
|
||||
<div>
|
||||
<editor v-model="customer.ruleContent" :min-height="192"/>
|
||||
|
|
@ -224,9 +222,9 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改规则对话框 -->
|
||||
<!-- 添加或修改规则版本对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
|
||||
<el-button type="primary" @click="generate">生成版本类</el-button>
|
||||
<el-button type="primary" @click="generate" style="margin-bottom:20px;">生成版本类</el-button>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="版本类" prop="ruleKind">
|
||||
<el-input v-model="form.ruleKind" placeholder="请输入版本类"/>
|
||||
|
|
@ -319,7 +317,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
|
||||
curCode: '测试',
|
||||
curCode: '测23456789asdad试',
|
||||
cmOptions: {
|
||||
lineNumbers: true, // 显示行号
|
||||
mode: 'text/x-yaml', // 语法model
|
||||
|
|
@ -328,6 +326,7 @@ export default {
|
|||
lint: true, // 开启语法检查
|
||||
},
|
||||
|
||||
|
||||
ruleAndEditionList: [],
|
||||
//版本
|
||||
ruleAndEdition: {},
|
||||
|
|
@ -398,6 +397,10 @@ export default {
|
|||
this.findById();
|
||||
},
|
||||
methods: {
|
||||
//生成版本类
|
||||
generate() {
|
||||
|
||||
},
|
||||
//版本card
|
||||
findList() {
|
||||
getEditionList(this.ruleAndVersion.id).then(res => {
|
||||
|
|
@ -485,7 +488,8 @@ export default {
|
|||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;2
|
||||
this.open = true;
|
||||
2
|
||||
this.form.ruleId = this.ruleAndVersion.id
|
||||
this.title = "添加规则";
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue