Skip to content

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

流程图，总体功能已完成，值在verificaation里1

parent 51eb20f8
Show whitespace changes
Inline Side-by-side
Showing with 499 additions and 86 deletions
src/assets/imgs/bg_tiaojian_hov.svg 0 → 100644
View file @ a3fc300b
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142" height="73" viewBox="0 0 142 73">
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #fcce72;
stroke-linejoin: round;
stroke-width: 3px;
fill-rule: evenodd;
filter: url(#filter);
}
</style>
<filter id="filter" x="6" y="96" width="139" height="70" filterUnits="userSpaceOnUse">
<feOffset result="offset" dy="4" in="SourceAlpha"/>
<feGaussianBlur result="blur" stdDeviation="2.828"/>
<feFlood result="flood" flood-color="#000765" flood-opacity="0.15"/>
<feComposite result="composite" operator="in" in2="blur"/>
<feBlend result="blend" in="SourceGraphic"/>
</filter>
</defs>
<g transform="translate(-4.5 -94.5)" style="fill: #fff; filter: url(#filter)">
<path id="条件节点" class="cls-1" d="M81.665,100.221l50.709,18.925c6.16,2.3,6.16,11.429,0,13.728L81.665,151.8a19.05,19.05,0,0,1-13.361,0L17.6,132.874c-6.16-2.3-6.16-11.429,0-13.728L68.3,100.221A19.058,19.058,0,0,1,81.665,100.221Z" style="stroke: inherit; filter: none; fill: inherit"/>
</g>
<use transform="translate(-4.5 -94.5)" xlink:href="#条件节点" style="stroke: #fcce72; filter: none; fill: none"/>
</svg>
src/assets/imgs/bg_tiaojian_nor.svg 0 → 100644
View file @ a3fc300b
<svg xmlns="http://www.w3.org/2000/svg" width="118" height="46" viewBox="0 0 123 50.969">
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #f5ab4c;
stroke-linejoin: round;
stroke-width: 3px;
fill-rule: evenodd;
}
</style>
</defs>
<path id="bg_tiaojian_nor" class="cls-1" d="M506.45,765.085L555.523,781.9a6.394,6.394,0,0,1,0,12.2L506.45,810.905a20,20,0,0,1-12.93,0l-49.073-16.812a6.394,6.394,0,0,1,0-12.2l49.073-16.812A19.982,19.982,0,0,1,506.45,765.085Z" transform="translate(-438.5 -762.531)"/>
</svg>
src/components/svgIcon.vue
View file @ a3fc300b
<template> <template>
<svg :class="svgClass" aria-hidden="true"> <svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/> <use :xlink:href="iconName" />
</svg> </svg>
</template> </template>
<script> <script>
export default { export default {
name: 'SvgIcon', name: "SvgIcon",
props: { props: {
iconClass: { iconClass: {
type: String, type: String,
...@@ -14,22 +14,22 @@ export default { ...@@ -14,22 +14,22 @@ export default {
}, },
className: { className: {
type: String, type: String,
default: '', default: "",
}, },
}, },
computed: { computed: {
iconName () { iconName() {
return `#icon-${this.iconClass}` return `#icon-${this.iconClass}`;
}, },
svgClass () { svgClass() {
if (this.className) { if (this.className) {
return 'svg-icon ' + this.className return "svg-icon " + this.className;
} else { } else {
return 'svg-icon' return "svg-icon";
} }
}, },
}, },
} };
</script> </script>
<style scoped> <style scoped>
......
src/components/work-flow/super-flow.vue
View file @ a3fc300b
...@@ -14,14 +14,46 @@ ...@@ -14,14 +14,46 @@
<div class="node-container"> <div class="node-container">
<p class="label_head">节点类型</p> <p class="label_head">节点类型</p>
<p class="label_explanation">请拖拽添加到流程中</p> <p class="label_explanation">请拖拽添加到流程中</p>
<div class="nodes_i" v-for="(item, index) in nodeItemList" :key="index">
<div <div
class="node-item" class="node-item"
:class="{'node-item-begin': item.value.meta.type == 1, 'node-item-end': item.value.meta.type == 2, 'node-item-default': item.value.meta.type == 3}" :class="{
v-for="(item, index) in nodeItemList" 'node-item-begin': item.value.meta.type == 1,
:key="index" 'node-item-end': item.value.meta.type == 2,
@mousedown="evt => nodeItemMouseDown(evt, item.value)" 'node-item-default': item.value.meta.type == 3,
'node-item-judge': item.value.meta.type == 4,
}"
@mousedown="(evt) => nodeItemMouseDown(evt, item.value)"
> >
<span>{{item.label}}</span> <div>
<svg-icon
id="judge_svg"
v-if="item.value.meta.type == 4"
icon-class="bg_tiaojian_nor"
class="judge_svg"
></svg-icon>
</div>
<div>{{ item.label }}</div>
</div>
<div>
<el-popover placement="right" width="300" trigger="hover">
<div>
<p v-if="item.value.meta.type == 1">
每个流程必须有一个开始节点。
</p>
<p v-else-if="item.value.meta.type == 2">
每个流程必须有一个结束节点。
</p>
<p v-else-if="item.value.meta.type == 3">
在开始节点和结束节点中间可连接多个普通节点。
</p>
<p v-else-if="item.value.meta.type == 4">
使用条件节点可以触发分支流程。未配置条件节点的分支流程将默认触发，配置了条件节点的分支，可根据条件节点名称选择触发或不触发该分支。
</p>
</div>
<i class="node_icon el-icon-question" slot="reference"></i>
</el-popover>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -39,46 +71,92 @@ ...@@ -39,46 +71,92 @@
> >
<template v-slot:node="node"> <template v-slot:node="node">
<div <div
:class="{'flow-node-begin': nodeParams(node.meta.id).type == 1, 'flow-node-end': nodeParams(node.meta.id).type == 2, 'flow-node-default': nodeParams(node.meta.id).type == 3 && node.meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(node.meta.id).type == 3 && node.meta.id == nodeItem.id }" :class="{
'flow-node-begin': nodeParams(node.meta.id).type == 1,
'flow-node-end': nodeParams(node.meta.id).type == 2,
'flow-node-default':
nodeParams(node.meta.id).type == 3 &&
node.meta.id != nodeItem.id,
'flow-node-default-active':
nodeParams(node.meta.id).type == 3 &&
node.meta.id == nodeItem.id,
'flow-node-judge':
nodeParams(node.meta.id).type == 4 &&
node.meta.id != nodeItem.id,
}"
:id="node.meta.id" :id="node.meta.id"
> >
<div
v-if="nodeParams(node.meta.id).type == 4"
:style="`width: ${other_width}px;height: ${other_height}px`"
class="svg_in"
>
<svg-icon
id="judge_svg"
:style="`font-size: ${other_font_size}px;top: -${svg_top}px;`"
icon-class="bg_tiaojian_nor"
class="judge_svg"
></svg-icon>
</div>
<div <div
class="node_span" class="node_span"
:style="`line-height: ${line_hieght}px;font-size: ${font_size}px;`" :style="`line-height: ${line_hieght}px;font-size: ${font_size}px;`"
@click="clickItem(node.meta.id)" @click="clickItem(node.meta.id)"
@blur="blurItem" @blur="blurItem"
:title="nodeParams(node.meta.id).name" :title="nodeParams(node.meta.id).name"
>{{nodeParams(node.meta.id).name}}</div> >
{{ nodeParams(node.meta.id).name }}
</div>
<div class="node_del" @click="delNode(node.meta.id)"></div> <div class="node_del" @click="delNode(node.meta.id)"></div>
</div> </div>
</template> </template>
</super-flow> </super-flow>
</div> </div>
<div class="flow_options"> <div v-if="this.nodeItem.type == 3" class="flow_options">
<p class="options_head">操作</p> <p class="options_head">操作</p>
<div class="options_item" @click="showGeneralSettings"> <div class="options_item" @click="showGeneralSettings">
<img :src="require('@/assets/imgs/lcsj_ic_set.png')" class="options_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_set.png')"
class="options_img"
/>
<p class="options_text">常规设置</p> <p class="options_text">常规设置</p>
</div> </div>
<div class="options_item_1"> <div class="options_item_1">
<img :src="require('@/assets/imgs/lcsj_ic_chajian.png')" class="options_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_chajian.png')"
class="options_img"
/>
<p class="options_text">插件设置</p> <p class="options_text">插件设置</p>
<div class="options_pop"> <div class="options_pop">
<div class="options_pop_item" @click="showInterfacePlugin"> <div class="options_pop_item" @click="showInterfacePlugin">
<img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" class="options_item_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_jiekou.png')"
class="options_item_img"
/>
<p class="options_item_text">接口插件</p> <p class="options_item_text">接口插件</p>
</div> </div>
<div class="options_pop_item" @click="showProcessService"> <div class="options_pop_item" @click="showProcessService">
<img :src="require('@/assets/imgs/lcsj_ic_liucheng.png')" class="options_item_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_liucheng.png')"
class="options_item_img"
/>
<p class="options_item_text">流程服务</p> <p class="options_item_text">流程服务</p>
</div> </div>
<div class="options_pop_item" @click="showTimeoutManagement"> <div class="options_pop_item" @click="showTimeoutManagement">
<img :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')" class="options_item_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_chaoshi.png')"
class="options_item_img"
/>
<p class="options_item_text">超时管理</p> <p class="options_item_text">超时管理</p>
</div> </div>
</div> </div>
</div> </div>
<div v-if="nodeParams(nodeItem.id).plugins && nodeParams(nodeItem.id).plugins.length > 0"> <div
v-if="
nodeParams(nodeItem.id).plugins &&
nodeParams(nodeItem.id).plugins.length > 0
"
>
<div class="checked_line"></div> <div class="checked_line"></div>
<p class="options_head_1">已选插件</p> <p class="options_head_1">已选插件</p>
<div <div
...@@ -87,7 +165,11 @@ ...@@ -87,7 +165,11 @@
:key="'checked' + index" :key="'checked' + index"
> >
<div v-if="item.plugin_type == 1"> <div v-if="item.plugin_type == 1">
<img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" @click="showInterfacePlugin" class="checked_item_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_jiekou.png')"
@click="showInterfacePlugin"
class="checked_item_img"
/>
<img <img
:src="require('@/assets/imgs/lcsj_btn_delete.png')" :src="require('@/assets/imgs/lcsj_btn_delete.png')"
@click="delItem(1)" @click="delItem(1)"
...@@ -96,7 +178,11 @@ ...@@ -96,7 +178,11 @@
<p class="checked_item_text">接口插件</p> <p class="checked_item_text">接口插件</p>
</div> </div>
<div v-else-if="item.plugin_type == 2"> <div v-else-if="item.plugin_type == 2">
<img :src="require('@/assets/imgs/lcsj_ic_liucheng.png')" @click="showProcessService" class="checked_item_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_liucheng.png')"
@click="showProcessService"
class="checked_item_img"
/>
<img <img
:src="require('@/assets/imgs/lcsj_btn_delete.png')" :src="require('@/assets/imgs/lcsj_btn_delete.png')"
@click="delItem(2)" @click="delItem(2)"
...@@ -105,7 +191,11 @@ ...@@ -105,7 +191,11 @@
<p class="checked_item_text">流程服务</p> <p class="checked_item_text">流程服务</p>
</div> </div>
<div v-else-if="item.plugin_type == 3"> <div v-else-if="item.plugin_type == 3">
<img :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')" @click="showTimeoutManagement" class="checked_item_img" /> <img
:src="require('@/assets/imgs/lcsj_ic_chaoshi.png')"
@click="showTimeoutManagement"
class="checked_item_img"
/>
<img <img
:src="require('@/assets/imgs/lcsj_btn_delete.png')" :src="require('@/assets/imgs/lcsj_btn_delete.png')"
@click="delItem(3)" @click="delItem(3)"
...@@ -116,6 +206,16 @@ ...@@ -116,6 +206,16 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="this.nodeItem.type == 4" class="flow_options">
<p class="options_head">操作</p>
<div class="options_item" @click="showJudgeGeneralSettings">
<img
:src="require('@/assets/imgs/lcsj_ic_set.png')"
class="options_img"
/>
<p class="options_text">常规设置</p>
</div>
</div>
<el-dialog <el-dialog
:visible.sync="dialog_general" :visible.sync="dialog_general"
top="25vh" top="25vh"
...@@ -126,9 +226,14 @@ ...@@ -126,9 +226,14 @@
> >
<div class="general_settings"> <div class="general_settings">
<p class="general_title">节点编号：</p> <p class="general_title">节点编号：</p>
<p <p class="general_val">
class="general_val" {{
>{{ nodeParams(nodeItem.id).node_code && nodeParams(nodeItem.id).node_code != "" ? nodeParams(nodeItem.id).node_code : "暂无（保存后将自动生成节点编号）" }}</p> nodeParams(nodeItem.id).node_code &&
nodeParams(nodeItem.id).node_code != ""
? nodeParams(nodeItem.id).node_code
: "暂无（保存后将自动生成节点编号）"
}}
</p>
<p class="general_title">节点名称：</p> <p class="general_title">节点名称：</p>
<p class="general_input"> <p class="general_input">
<el-input v-model="node_name" placeholder="请输入节点名称"></el-input> <el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
...@@ -150,7 +255,9 @@ ...@@ -150,7 +255,9 @@
<div class="interface_plugin"> <div class="interface_plugin">
<div class="interface_msg"> <div class="interface_msg">
<i class="el-icon-warning-outline"></i> <i class="el-icon-warning-outline"></i>
<span>接口插件设置后，流程服务在节点完成时自动调取该接口，同步节点业务数据，保存到流程服务中。</span> <span
>接口插件设置后，流程服务在节点完成时自动调取该接口，同步节点业务数据，保存到流程服务中。</span
>
</div> </div>
<div class="interface_plugin_item"> <div class="interface_plugin_item">
<div class="fwcs_fwdz">服务地址：</div> <div class="fwcs_fwdz">服务地址：</div>
...@@ -170,7 +277,9 @@ ...@@ -170,7 +277,9 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-input> </el-input>
<el-button @click="clickFwcs()" class="fwcs_btn_fwcs">连接测试</el-button> <el-button @click="clickFwcs()" class="fwcs_btn_fwcs"
>连接测试</el-button
>
</div> </div>
<el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab"> <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
<el-tab-pane label="请求参数" name="0"> <el-tab-pane label="请求参数" name="0">
...@@ -208,7 +317,11 @@ ...@@ -208,7 +317,11 @@
<el-row class="sqxx_row"> <el-row class="sqxx_row">
<el-col :span="6"> <el-col :span="6">
<div class="sqxx_title">授权方式：</div> <div class="sqxx_title">授权方式：</div>
<el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select"> <el-select
v-model="sqfsVal"
placeholder="请选择"
class="sqxx_select"
>
<el-option <el-option
v-for="item in optionsSq" v-for="item in optionsSq"
:key="item.value" :key="item.value"
...@@ -222,7 +335,10 @@ ...@@ -222,7 +335,10 @@
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<div class="sqxx_title">Token：</div> <div class="sqxx_title">Token：</div>
<el-input v-model="tokenVal" placeholder="请输入内容"></el-input> <el-input
v-model="tokenVal"
placeholder="请输入内容"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
...@@ -276,7 +392,10 @@ ...@@ -276,7 +392,10 @@
<div class="skfw_csfwxx">测试服务信息：</div> <div class="skfw_csfwxx">测试服务信息：</div>
<div class="test_succ"> <div class="test_succ">
<div class="skcs_jg"> <div class="skcs_jg">
<img src="@/assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败 <img
src="@/assets/imgs/test_icon_error.png"
class="skcs_jg_img"
/>&nbsp;测试失败
</div> </div>
</div> </div>
</div> </div>
...@@ -298,7 +417,9 @@ ...@@ -298,7 +417,9 @@
<div class="process_service"> <div class="process_service">
<div class="process_msg"> <div class="process_msg">
<i class="el-icon-warning-outline"></i> <i class="el-icon-warning-outline"></i>
<span>配置流程服务插件后，该节点可调用流程服务，并在此节点触发该流程。</span> <span
>配置流程服务插件后，该节点可调用流程服务，并在此节点触发该流程。</span
>
</div> </div>
<p class="process_title">我的服务：</p> <p class="process_title">我的服务：</p>
<p class="process_input"> <p class="process_input">
...@@ -328,15 +449,25 @@ ...@@ -328,15 +449,25 @@
<div class="timeout_service"> <div class="timeout_service">
<div class="timeout_msg"> <div class="timeout_msg">
<i class="el-icon-warning-outline"></i> <i class="el-icon-warning-outline"></i>
<span>添加超时管理插件后，根据配置该节点超时后会发送消息给请求方。</span> <span
>添加超时管理插件后，根据配置该节点超时后会发送消息给请求方。</span
>
</div> </div>
<p class="timeout_title">超时设置：</p> <p class="timeout_title">超时设置：</p>
<div class="timeout_input"> <div class="timeout_input">
<div class="timeout_row"> <div class="timeout_row">
<div class="timeout_input_group"> <div class="timeout_input_group">
<div class="input_left">最大时长</div> <div class="input_left">最大时长</div>
<el-input-number v-model="max_time_0" controls-position="right" :min="0"></el-input-number> <el-input-number
<el-select v-model="max_time_type_0" class="input_right_select" placeholder="请输入"> v-model="max_time_0"
controls-position="right"
:min="0"
></el-input-number>
<el-select
v-model="max_time_type_0"
class="input_right_select"
placeholder="请输入"
>
<el-option <el-option
v-for="item in durationOptions" v-for="item in durationOptions"
:key="item.value" :key="item.value"
...@@ -354,8 +485,16 @@ ...@@ -354,8 +485,16 @@
<div class="timeout_row"> <div class="timeout_row">
<div class="timeout_input_group"> <div class="timeout_input_group">
<div class="input_left">最大时长</div> <div class="input_left">最大时长</div>
<el-input-number v-model="max_time_1" controls-position="right" :min="0"></el-input-number> <el-input-number
<el-select v-model="max_time_type_1" class="input_right_select" placeholder="请输入"> v-model="max_time_1"
controls-position="right"
:min="0"
></el-input-number>
<el-select
v-model="max_time_type_1"
class="input_right_select"
placeholder="请输入"
>
<el-option <el-option
v-for="item in durationOptions" v-for="item in durationOptions"
:key="item.value" :key="item.value"
...@@ -375,6 +514,41 @@ ...@@ -375,6 +514,41 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog
:visible.sync="dialog_general_judge"
top="25vh"
width="420px"
:modal-append-to-body="false"
title="常规设置"
:close-on-click-modal="false"
>
<div class="general_settings">
<p class="general_title">节点编号：</p>
<p class="general_val">
{{
nodeParams(nodeItem.id).node_code &&
nodeParams(nodeItem.id).node_code != ""
? nodeParams(nodeItem.id).node_code
: "暂无（保存后将自动生成节点编号）"
}}
</p>
<p class="general_title">节点名称：</p>
<p class="general_input">
<el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
</p>
<p class="general_title">条件描述：</p>
<p class="general_input">
<el-input
v-model="node_content"
placeholder="请输入条件描述"
></el-input>
</p>
<div class="dia_footer">
<el-button class="cancel" @click="generalJudgeCancel">取消</el-button>
<el-button class="submit" @click="generalJudgeSubmit">确定</el-button>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
...@@ -480,6 +654,18 @@ export default { ...@@ -480,6 +654,18 @@ export default {
info: null, info: null,
}, },
nodeItemList: [ nodeItemList: [
{
label: "开始",
value: {
width: 120,
height: 48,
meta: {
label: "开始",
name: "开始",
type: 1,
},
},
},
{ {
label: "普通节点", label: "普通节点",
value: { value: {
...@@ -493,14 +679,14 @@ export default { ...@@ -493,14 +679,14 @@ export default {
}, },
}, },
{ {
label: "开始", label: "条件节点",
value: { value: {
width: 120, width: 120,
height: 48, height: 48,
meta: { meta: {
label: "开始", label: "条件节点",
name: "开始", name: "条件节点",
type: 1, type: 4,
}, },
}, },
}, },
...@@ -530,11 +716,13 @@ export default { ...@@ -530,11 +716,13 @@ export default {
], ],
], ],
dialog_general: false, dialog_general: false,
dialog_general_judge: false,
nodeItem: { nodeItem: {
id: "", id: "",
name: "", name: "",
}, },
node_name: "", node_name: "",
node_content: "",
show_options_pop: false, show_options_pop: false,
dialog_interface: false, dialog_interface: false,
optionType: [ optionType: [
...@@ -630,6 +818,10 @@ export default { ...@@ -630,6 +818,10 @@ export default {
max_time_check_1: false, max_time_check_1: false,
line_hieght: 41, line_hieght: 41,
font_size: 16, font_size: 16,
other_width: 120,
other_height: 48,
other_font_size: 116,
svg_top:34
}; };
}, },
mounted() { mounted() {
...@@ -732,6 +924,14 @@ export default { ...@@ -732,6 +924,14 @@ export default {
id: query.meta.id, id: query.meta.id,
plugins: [], plugins: [],
}; };
} else if (conf.info.meta.type == 4) {
obj = {
label: "条件节点",
name: "条件节点",
type: 4,
id: query.meta.id,
plugins: [],
};
} }
this.nodeParamsList.push(obj); this.nodeParamsList.push(obj);
} }
...@@ -765,7 +965,7 @@ export default { ...@@ -765,7 +965,7 @@ export default {
clickItem(index) { clickItem(index) {
let item = this.nodeParams(index); let item = this.nodeParams(index);
this.nodeItem = item; this.nodeItem = item;
// console.log(item); console.log(this.nodeItem);
}, },
blurItem() { blurItem() {
this.nodeItem = { this.nodeItem = {
...@@ -791,9 +991,9 @@ export default { ...@@ -791,9 +991,9 @@ export default {
checkNodeCouldEdit() { checkNodeCouldEdit() {
let self = this; let self = this;
if (self.nodeItem.id && self.nodeItem.id != "") { if (self.nodeItem.id && self.nodeItem.id != "") {
if (self.nodeItem.type == 3) { if (self.nodeItem.type == 3 || self.nodeItem.type == 4) {
return true; return true;
} else { } else if (self.nodeItem.type == 1 || self.nodeItem.type == 2) {
self.$message({ self.$message({
message: "开始和结束节点不可被编辑", message: "开始和结束节点不可被编辑",
type: "warning", type: "warning",
...@@ -817,6 +1017,15 @@ export default { ...@@ -817,6 +1017,15 @@ export default {
self.dialog_general = true; self.dialog_general = true;
} }
}, },
showJudgeGeneralSettings() {
if (this.checkNodeCouldEdit()) {
let self = this;
self.node_name = self.nodeParamsList.find((item) => {
return item.id == self.nodeItem.id;
}).name;
self.dialog_general_judge = true;
}
},
showInterfacePlugin() { showInterfacePlugin() {
let self = this; let self = this;
if (self.checkNodeCouldEdit()) { if (self.checkNodeCouldEdit()) {
...@@ -890,6 +1099,27 @@ export default { ...@@ -890,6 +1099,27 @@ export default {
} }
self.dialog_general = false; self.dialog_general = false;
}, },
generalJudgeCancel() {
this.dialog_general_judge = false;
},
generalJudgeSubmit() {
let self = this;
if (self.nodeItem.type == 4) {
let index = self.nodeParamsList.findIndex((item) => {
return item.id == self.nodeItem.id;
});
if (index != -1) {
self.nodeParamsList[index].name = self.node_name;
self.nodeParamsList[index].content = self.node_content;
} else {
self.$message({
message: "修改失败",
type: "error",
});
}
}
self.dialog_general_judge = false;
},
clickTab() {}, clickTab() {},
getUrl(enUrl) { getUrl(enUrl) {
let url = decodeURI(enUrl); let url = decodeURI(enUrl);
...@@ -1294,6 +1524,10 @@ export default { ...@@ -1294,6 +1524,10 @@ export default {
}); });
this.line_hieght = 41 * scale; this.line_hieght = 41 * scale;
this.font_size = 16 * scale; this.font_size = 16 * scale;
this.other_width = 120 * scale;
this.other_height = 48 * scale;
this.other_font_size = 116 * scale;
this.svg_top = 34 * scale;
this.nodeList = obj.nodeList; this.nodeList = obj.nodeList;
this.linkList = obj.linkList; this.linkList = obj.linkList;
}, },
...@@ -1463,22 +1697,43 @@ export default { ...@@ -1463,22 +1697,43 @@ export default {
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
line-height: @node-item-height; line-height: @node-item-height;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); // box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
text-align: center; text-align: center;
z-index: 6; z-index: 6;
&:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
&.node-item-begin { &.node-item-begin {
border: solid 3px #25bdb1; border: solid 3px #25bdb1;
// &:hover {
// box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
// }
} }
&.node-item-end { &.node-item-end {
border: solid 3px #f78181; border: solid 3px #f78181;
// &:hover {
// box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
// }
} }
&.node-item-default { &.node-item-default {
border: solid 3px #b4c6f5; border: solid 3px #b4c6f5;
// &:hover {
// box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
// }
}
&.node-item-judge {
border: none;
box-shadow: none;
position: relative;
background: transparent;
overflow: hidden;
line-height: 48px;
.judge_svg {
font-size: 116px;
position: absolute;
z-index: -1;
top: -34px;
left: 0px;
}
} }
} }
.scale_block { .scale_block {
...@@ -1514,8 +1769,8 @@ export default { ...@@ -1514,8 +1769,8 @@ export default {
} }
} }
.node-container { .node-container {
width: 160px; width: 180px;
height: 300px; height: 360px;
text-align: center; text-align: center;
background-color: #f8f9fd; background-color: #f8f9fd;
border-radius: 8px; border-radius: 8px;
...@@ -1741,6 +1996,7 @@ export default { ...@@ -1741,6 +1996,7 @@ export default {
background-color: #25bdb1; background-color: #25bdb1;
color: #ffffff; color: #ffffff;
position: relative; position: relative;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
} }
.flow-node-end { .flow-node-end {
width: 100%; width: 100%;
...@@ -1751,6 +2007,7 @@ export default { ...@@ -1751,6 +2007,7 @@ export default {
border: solid 3px #e86262; border: solid 3px #e86262;
color: #ffffff; color: #ffffff;
position: relative; position: relative;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
} }
.flow-node-default { .flow-node-default {
width: 100%; width: 100%;
...@@ -1760,6 +2017,7 @@ export default { ...@@ -1760,6 +2017,7 @@ export default {
background-color: #fff; background-color: #fff;
border: solid 3px #b4c6f5; border: solid 3px #b4c6f5;
position: relative; position: relative;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
} }
.flow-node-default-active { .flow-node-default-active {
width: 100%; width: 100%;
...@@ -1772,6 +2030,25 @@ export default { ...@@ -1772,6 +2030,25 @@ export default {
color: #fff; color: #fff;
position: relative; position: relative;
} }
.flow-node-judge {
width: 100%;
height: 100%;
padding: 2px 6px;
border-radius: 8px;
background-color: transparent;
border: none;
position: relative;
.svg_in {
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
.judge_svg {
position: relative;
}
}
}
} }
} }
.super-flow__menu-container .super-flow__menu { .super-flow__menu-container .super-flow__menu {
...@@ -1872,4 +2149,19 @@ export default { ...@@ -1872,4 +2149,19 @@ export default {
} }
} }
} }
.super-flow-demo1 {
.super-flow__node {
box-shadow: none;
}
}
.nodes_i {
position: relative;
display: flex;
justify-content: space-around;
}
.node_icon {
position: relative;
top: 30px;
right: 4px;
}
</style> </style>
\ No newline at end of file
src/icons/svg/bg_tiaojian_hov.svg 0 → 100644
View file @ a3fc300b
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142" height="73" viewBox="0 0 142 73">
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #fcce72;
stroke-linejoin: round;
stroke-width: 3px;
fill-rule: evenodd;
filter: url(#filter);
}
</style>
<filter id="filter" x="6" y="96" width="139" height="70" filterUnits="userSpaceOnUse">
<feOffset result="offset" dy="4" in="SourceAlpha"/>
<feGaussianBlur result="blur" stdDeviation="2.828"/>
<feFlood result="flood" flood-color="#000765" flood-opacity="0.15"/>
<feComposite result="composite" operator="in" in2="blur"/>
<feBlend result="blend" in="SourceGraphic"/>
</filter>
</defs>
<g transform="translate(-4.5 -94.5)" style="fill: #fff; filter: url(#filter)">
<path id="条件节点" class="cls-1" d="M81.665,100.221l50.709,18.925c6.16,2.3,6.16,11.429,0,13.728L81.665,151.8a19.05,19.05,0,0,1-13.361,0L17.6,132.874c-6.16-2.3-6.16-11.429,0-13.728L68.3,100.221A19.058,19.058,0,0,1,81.665,100.221Z" style="stroke: inherit; filter: none; fill: inherit"/>
</g>
<use transform="translate(-4.5 -94.5)" xlink:href="#条件节点" style="stroke: #fcce72; filter: none; fill: none"/>
</svg>
src/icons/svg/bg_tiaojian_nor.svg 0 → 100644
View file @ a3fc300b
<svg xmlns="http://www.w3.org/2000/svg" width="123" height="50.969" viewBox="0 0 123 50.969">
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #f5ab4c;
stroke-linejoin: round;
stroke-width: 3px;
fill-rule: evenodd;
}
</style>
</defs>
<path id="bg_tiaojian_nor" class="cls-1" d="M506.45,765.085L555.523,781.9a6.394,6.394,0,0,1,0,12.2L506.45,810.905a20,20,0,0,1-12.93,0l-49.073-16.812a6.394,6.394,0,0,1,0-12.2l49.073-16.812A19.982,19.982,0,0,1,506.45,765.085Z" transform="translate(-438.5 -762.531)"/>
</svg>
src/pages/workbench/component-center/process-management/process-design/edit.vue
View file @ a3fc300b
<template> <template>
<div class="design_contain"> <div class="design_contain">
<el-breadcrumb separator="/" class="bread_crumb1"> <el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/workplace' }">{{ $t("lang.online_component_tool") }}</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/workplace' }">{{
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_design") }}</el-breadcrumb-item> $t("lang.online_component_tool")
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_management") }}</el-breadcrumb-item> }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{
$t("lang.process_design")
}}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{
$t("lang.process_management")
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.edit") }}</el-breadcrumb-item> <el-breadcrumb-item>{{ $t("lang.edit") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<BlockRadius class="block_item"> <BlockRadius class="block_item">
...@@ -15,10 +21,18 @@ ...@@ -15,10 +21,18 @@
class="apaas_step" class="apaas_step"
> >
<div class="step_in" ref="stepInProcess"> <div class="step_in" ref="stepInProcess">
<el-form :model="basic_form" :rules="rules" ref="basicInformation" class="form_left"> <el-form
:model="basic_form"
:rules="rules"
ref="basicInformation"
class="form_left"
>
<el-form-item prop="name"> <el-form-item prop="name">
<p class="formname">流程名称：</p> <p class="formname">流程名称：</p>
<el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input> <el-input
v-model="basic_form.name"
placeholder="请输入流程名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="workplace"> <el-form-item prop="workplace">
<p class="formname">工作区域：</p> <p class="formname">工作区域：</p>
...@@ -39,7 +53,7 @@ ...@@ -39,7 +53,7 @@
<p class="formname">流程描述：</p> <p class="formname">流程描述：</p>
<el-input <el-input
type="textarea" type="textarea"
:autosize="{ minRows: 6, maxRows: 10}" :autosize="{ minRows: 6, maxRows: 10 }"
v-model="basic_form.desc" v-model="basic_form.desc"
placeholder="请输入流程描述" placeholder="请输入流程描述"
></el-input> ></el-input>
...@@ -85,7 +99,10 @@ ...@@ -85,7 +99,10 @@
<div class="steps_container steps_done"> <div class="steps_container steps_done">
<div class="steps_done_info"> <div class="steps_done_info">
<div class="left_container"> <div class="left_container">
<img :src="require('@/assets/imgs/steps_done.png')" width="100%" /> <img
:src="require('@/assets/imgs/steps_done.png')"
width="100%"
/>
</div> </div>
<div class="right_container"> <div class="right_container">
<p>保存成功</p> <p>保存成功</p>
...@@ -166,6 +183,8 @@ export default { ...@@ -166,6 +183,8 @@ export default {
let end_after = 0; let end_after = 0;
let in_edge = 0; let in_edge = 0;
let out_edge = 0; let out_edge = 0;
let judge_nodes = [];
let in_judge_edges = 0;
let datas = { ...data.obj }; let datas = { ...data.obj };
datas.nodeList.forEach((item) => { datas.nodeList.forEach((item) => {
let da = data.params.find((nodep) => { let da = data.params.find((nodep) => {
...@@ -181,6 +200,9 @@ export default { ...@@ -181,6 +200,9 @@ export default {
end_num++; end_num++;
end_id = item.id; end_id = item.id;
} }
if (item.meta.type == 4) {
judge_nodes.push(item.meta.id);
}
if ( if (
datas.linkList.findIndex((el) => { datas.linkList.findIndex((el) => {
return el.startId == item.id; return el.startId == item.id;
...@@ -208,6 +230,9 @@ export default { ...@@ -208,6 +230,9 @@ export default {
if (end_id == item.startId) { if (end_id == item.startId) {
end_after++; end_after++;
} }
if (judge_nodes.indexOf(item.endId) != -1) {
in_judge_edges++;
}
}); });
if (start_num != 1 || end_num != 1) { if (start_num != 1 || end_num != 1) {
this.$message({ this.$message({
...@@ -238,6 +263,11 @@ export default { ...@@ -238,6 +263,11 @@ export default {
message: "不能连接本节点之前的节点", message: "不能连接本节点之前的节点",
type: "warning", type: "warning",
}); });
} else if (judge_nodes.length != in_judge_edges) {
this.$message({
message: "条件节点应当有且只有一条入边",
type: "warning",
});
} else { } else {
return datas; return datas;
} }
......
src/pages/workbench/component-center/process-management/process-design/index.vue
View file @ a3fc300b
...@@ -151,6 +151,8 @@ export default { ...@@ -151,6 +151,8 @@ export default {
let end_after = 0; let end_after = 0;
let in_edge = 0; let in_edge = 0;
let out_edge = 0; let out_edge = 0;
let judge_nodes = [];
let in_judge_edges = 0;
let datas = { ...data.obj }; let datas = { ...data.obj };
datas.nodeList.forEach((item) => { datas.nodeList.forEach((item) => {
let da = data.params.find((nodep) => { let da = data.params.find((nodep) => {
...@@ -166,6 +168,9 @@ export default { ...@@ -166,6 +168,9 @@ export default {
end_num++; end_num++;
end_id = item.id; end_id = item.id;
} }
if (item.meta.type == 4) {
judge_nodes.push(item.meta.id)
}
if ( if (
datas.linkList.findIndex((el) => { datas.linkList.findIndex((el) => {
return el.startId == item.id; return el.startId == item.id;
...@@ -193,6 +198,9 @@ export default { ...@@ -193,6 +198,9 @@ export default {
if (end_id == item.startId) { if (end_id == item.startId) {
end_after++; end_after++;
} }
if (judge_nodes.indexOf(item.endId) != -1) {
in_judge_edges++;
}
}); });
if (start_num != 1 || end_num != 1) { if (start_num != 1 || end_num != 1) {
this.$message({ this.$message({
...@@ -223,6 +231,11 @@ export default { ...@@ -223,6 +231,11 @@ export default {
message: "不能连接本节点之前的节点", message: "不能连接本节点之前的节点",
type: "warning", type: "warning",
}); });
} else if (judge_nodes.length != in_judge_edges) {
this.$message({
message: "条件节点应当有且只有一条入边",
type: "warning",
});
} else { } else {
return datas; return datas;
} }
......
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