Skip to content

A
apaas-ui
Commit 50daad4a authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'ldx' into dev

parents 3545dcd0 2ba2f3bb
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 79 deletions
src/components/work-flow/super-flow.vue
View file @ 50daad4a
......@@ -5,39 +5,17 @@
<div class="node-container">
<p class="label_head">节点类型</p>
<p class="label_explanation">请拖拽添加到流程中</p>
<el-input-number
v-model="scale_num"
@change="handleChange"
:step="10"
:step-strictly="true"
:min="50"
:max="150"
label="描述文字"
></el-input-number>
<span
class="node-item"
v-for="(item, index) in nodeItemList"
:key="index"
@mousedown="evt => nodeItemMouseDown(evt, item.value)"
>{{item.label}}</span>
<el-input-number v-model="scale_num" @change="handleChange" :step="10" :step-strictly="true" :min="50" :max="150" label="描述文字"></el-input-number>
<span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span>
</div>
<div class="flow-container" :class="`scale${scale_num}`" ref="flowContainer">
<super-flow
ref="superFlow"
:node-list="nodeList"
:link-list="linkList"
:link-menu="linkMenu"
:link-base-style="linkBaseStyle"
:link-style="linkStyle"
:link-desc="linkDesc"
:origin="origin"
>
<super-flow ref="superFlow" :node-list="nodeList" :link-list="linkList" :link-menu="linkMenu" :link-base-style="linkBaseStyle" :link-style="linkStyle" :link-desc="linkDesc" :origin="origin">
<template v-slot:node="{meta}">
<div
:class="{'flow-node-begin': meta.type == 'begin', 'flow-node-end': meta.type == 'end', 'flow-node-default': meta.type == 'default'}"
:id="meta.id"
@click="clickItem(meta)"
>{{meta.name}}</div>
<div :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}" :id="meta.id">
<div @click="clickItem(meta)">
{{meta.name}}
</div>
</div>
</template>
</super-flow>
</div>
......@@ -48,7 +26,7 @@
<script>
const drawerType = {
node: 0,
link: 1,
link: 1
};
export default {
data() {
......@@ -90,14 +68,14 @@ export default {
} else {
this.$refs.linkSetting.clearValidate();
}
},
}
},
linkSetting: {
desc: "",
desc: ""
},
nodeSetting: {
name: "",
desc: "",
desc: ""
},
dragConf: {
isDown: false,
......@@ -107,7 +85,7 @@ export default {
clientX: 0,
clientY: 0,
ele: null,
info: null,
info: null
},
nodeItemList: [
{
......@@ -118,9 +96,9 @@ export default {
meta: {
label: "开始开始开始开始开始",
name: "开始开始开始开始开始",
type: "begin",
},
},
type: 0
}
}
},
{
label: "结束",
......@@ -130,9 +108,9 @@ export default {
meta: {
label: "结束",
name: "结束",
type: "end",
},
},
type: 1
}
}
},
{
label: "普通节点",
......@@ -142,27 +120,27 @@ export default {
meta: {
label: "普通节点",
name: "普通节点",
type: "default",
},
},
},
type: 2
}
}
}
],
linkMenu: [
[
{
label: "删除",
selected: (link) => {
selected: link => {
console.log(link);
link.remove();
},
}
},
{
label: "编辑",
selected: (link) => {
selected: link => {
this.drawerConf.open(drawerType.link, link);
},
},
],
}
}
]
],
linkBaseStyle: {
color: "#666666", // line 颜色
......@@ -172,8 +150,8 @@ export default {
font: "14px Arial", // line 描述文字 字体设置 参考 canvas font
dotted: false, // 是否是虚线
lineDash: [4, 4], // 虚线时生效
background: "rgba(255,255,255,0.6)", // 描述文字背景色
},
background: "rgba(255,255,255,0.6)" // 描述文字背景色
}
};
},
mounted() {
......@@ -213,7 +191,7 @@ export default {
top,
right,
bottom,
left,
left
} = this.$refs.flowContainer.getBoundingClientRect();
// 判断鼠标是否进入 flow container
if (
......@@ -232,15 +210,14 @@ export default {
clientY = bottom;
}
// 获取拖动元素左上角相对 super flow 区域原点坐标
console.log(top, right, bottom, left, clientX, clientY);
const coordinate = this.$refs.superFlow.getMouseCoordinate(
clientX - conf.offsetLeft,
clientX - conf.offsetLeft,
clientY - conf.offsetTop
);
// 添加节点
this.$refs.superFlow.addNode({
coordinate,
...conf.info,
...conf.info
});
conf.isMove = false;
}
......@@ -251,7 +228,6 @@ export default {
},
nodeItemMouseDown(evt, info) {
info.meta.id = parseInt(Math.random() * 1000 * 1000);
console.log(evt, info);
const { clientX, clientY, currentTarget } = evt;
const { top, left } = evt.currentTarget.getBoundingClientRect();
const conf = this.dragConf;
......@@ -263,7 +239,7 @@ export default {
clientY: clientY,
info,
ele,
isDown: true,
isDown: true
});
ele.style.position = "fixed";
ele.style.margin = "0";
......@@ -275,10 +251,10 @@ export default {
console.log(item);
},
getData() {
console.log(this.$refs.superFlow.toJSON());
return this.$refs.superFlow.toJSON();
},
handleChange() {},
},
handleChange() {}
}
};
</script>
......@@ -296,6 +272,7 @@ export default {
height: 800px;
background-color: #f5f5f5;
@list-width: 200px;
position: relative;
> .node-container {
width: @list-width;
position: absolute;
......@@ -326,6 +303,10 @@ export default {
box-shadow: none;
border: none;
background-color: transparent;
border-radius: 8px;
&:focus {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
}
.flow-node-begin {
width: 100%;
height: 100%;
......@@ -338,9 +319,6 @@ export default {
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #444;
&:focus {
border: 2px solid #0f0;
}
}
.flow-node-end {
width: 100%;
......@@ -353,9 +331,6 @@ export default {
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #f80;
&:focus {
border: 2px solid #0f0;
}
}
.flow-node-default {
width: 100%;
......@@ -368,9 +343,6 @@ export default {
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #3a9;
&:focus {
border: 2px solid #0f0;
}
}
}
}
......@@ -391,9 +363,6 @@ export default {
&:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
&:focus {
background-color: chocolate;
}
}
</style>
......
src/pages/workbench/component-center/process-management/process-design/index.vue
View file @ 50daad4a
<template>
<div>
<div>
<el-button @click="getData">获取参数</el-button>
</div>
<div class="design_contain">
<el-button @click="getData">获取参数</el-button>
<WorkFlow ref="workFlow" />
</div>
</template>
<script>
import WorkFlow from "@/components/work-flow/super-flow";
export default {
components: {
WorkFlow
},
methods: {
getData() {}
getData() {
let self = this;
let data = self.$refs.workFlow.getData();
console.log(data);
let start_num = 0;
let end_num = 0;
let start_id = "";
let end_id = "";
let start_before = 0;
let end_after = 0;
data.nodeList.forEach(item => {
if (item.meta.type == 0) {
start_num++;
start_id = item.id;
}
if (item.meta.type == 1) {
end_num++;
end_id = item.id;
}
});
data.linkList.forEach(item => {
if (start_id == item.endId) {
start_before++;
}
if (end_id == item.startId) {
end_after++;
}
});
if (start_num != 1 || end_num != 1) {
this.$message({
message: "开始节点与结束节点均应有且只有一个",
type: "warning"
});
} else if (start_before != 0) {
this.$message({
message: "开始节点前面不应连接其它节点",
type: "warning"
});
} else if (end_after != 0) {
this.$message({
message: "结束节点后面不应连接其它节点",
type: "warning"
});
}
}
}
};
</script>
<style scoped>
.design_contain {
width: 100%;
padding: 0 20px;
margin-bottom: 20px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment