211 lines
6.4 KiB
Vue
211 lines
6.4 KiB
Vue
<template>
|
||
<l-layout :top="180" >
|
||
<template #top>
|
||
<el-form
|
||
class="l-form-config"
|
||
label-width="88px"
|
||
label-position="left"
|
||
size="mini"
|
||
>
|
||
<el-form-item label="节点标识">
|
||
<el-input v-model="node.id" readonly ></el-input>
|
||
</el-form-item>
|
||
<div style="padding:0 16px;">
|
||
<el-alert
|
||
title="包容网关说明"
|
||
type="info"
|
||
description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）"
|
||
show-icon
|
||
:closable="false"
|
||
>
|
||
</el-alert>
|
||
</div>
|
||
</el-form>
|
||
</template>
|
||
<l-layout :top="40">
|
||
<template #top v-if="!disabled">
|
||
<div style="padding-left:8px;float:left;" >
|
||
<el-button-group>
|
||
<el-button size="mini" icon="el-icon-plus" @click="handleFormulaClick">{{$t('公式')}}</el-button>
|
||
<el-button size="mini" icon="el-icon-plus" @click="handleSQlClick">{{$t('sql语句')}}</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<div style="padding-right:8px;float:right;">
|
||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{$t('清空')}}</el-button>
|
||
</div>
|
||
</template>
|
||
<l-table :columns="columns" :dataSource="node.conditions" >
|
||
<template v-slot:type="scope" >
|
||
{{typeFormat(scope.row.type)}}
|
||
</template>
|
||
<l-table-btns v-if="!disabled" :btns="tableBtns" @click="handleTableBtnClick" ></l-table-btns>
|
||
</l-table>
|
||
</l-layout>
|
||
|
||
|
||
<l-dialog
|
||
:title="$t('添加公式条件')"
|
||
:visible.sync="formulaVisible"
|
||
:height="480"
|
||
|
||
@ok="handleFormulaOk"
|
||
@closed="handleFormulaClosed"
|
||
@opened="handleFormulaOpened"
|
||
>
|
||
<condition-formula ref="conditionFormula" ></condition-formula>
|
||
</l-dialog>
|
||
|
||
<l-dialog
|
||
:title="$t('添加sql条件')"
|
||
:visible.sync="sqlVisible"
|
||
:height="480"
|
||
|
||
@ok="handleSqlOk"
|
||
@closed="handleSqlClosed"
|
||
@opened="handleSqlOpened"
|
||
>
|
||
<condition-sql ref="conditionSql" ></condition-sql>
|
||
</l-dialog>
|
||
|
||
|
||
</l-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import conditionFormula from './conditionFormula.vue'
|
||
import conditionSql from './conditionSql.vue'
|
||
|
||
export default {
|
||
name:'gateway-inclusive-option',
|
||
props:{
|
||
disabled:{
|
||
type:Boolean,
|
||
default:false
|
||
}
|
||
},
|
||
components: {
|
||
conditionFormula,
|
||
conditionSql
|
||
},
|
||
data () {
|
||
return {
|
||
tableBtns:[
|
||
{prop:'Edit',label:'编辑'},
|
||
{prop:'Delete',label:'删除'}
|
||
],
|
||
columns:[
|
||
{label:'类型',prop:'type',width:'80', align: 'center'},
|
||
{label:'名称',prop:'name',minWidth:'100'},
|
||
],
|
||
tableData:[],
|
||
|
||
formulaVisible:false,
|
||
sqlVisible:false,
|
||
|
||
editRow:null,
|
||
isEdit:false,
|
||
rowIndex:0,
|
||
}
|
||
},
|
||
computed: {
|
||
node(){
|
||
return this.wfdesign.currentWfNode;
|
||
}
|
||
},
|
||
inject: ["wfdesign"],
|
||
methods:{
|
||
typeFormat(type){
|
||
switch(type){
|
||
case '1':
|
||
return '表达式'
|
||
case '2':
|
||
return 'sql语句'
|
||
}
|
||
},
|
||
handleTableBtnClick(btn){
|
||
switch(btn.type){
|
||
case 'Edit':
|
||
this.isEdit = true;
|
||
this.editRow = btn.row;
|
||
this.rowIndex = btn.rowIndex;
|
||
if(this.editRow.type == '1'){
|
||
this.formulaVisible = true;
|
||
}
|
||
else{
|
||
this.sqlVisible = true;
|
||
}
|
||
break;
|
||
case 'Delete':
|
||
this.node.conditions.splice(btn.rowIndex,1);
|
||
break;
|
||
}
|
||
console.log(btn);
|
||
//this.tableData.splice(btn.rowIndex,1);
|
||
},
|
||
handleFormulaClick(){
|
||
this.isEdit = false;
|
||
this.formulaVisible = true;
|
||
},
|
||
handleSQlClick(){
|
||
this.isEdit = false;
|
||
this.sqlVisible = true;
|
||
},
|
||
handleClearClick(){
|
||
this.node.conditions = [];
|
||
},
|
||
handleFormulaOk(){
|
||
this.$refs.conditionFormula.validateForm(()=>{
|
||
let formData = this.$refs.conditionFormula.getForm();
|
||
formData.type = '1';
|
||
|
||
if(this.isEdit){
|
||
this.node.conditions[this.rowIndex] = formData;
|
||
}
|
||
else{
|
||
formData.code = this.$uuid();
|
||
this.node.conditions.push(formData);
|
||
}
|
||
|
||
|
||
this.formulaVisible = false;
|
||
})
|
||
},
|
||
handleFormulaOpened(){
|
||
if(this.isEdit){
|
||
this.$refs.conditionFormula.setForm(this.editRow);
|
||
}
|
||
|
||
},
|
||
handleFormulaClosed(){
|
||
this.$refs.conditionFormula.resetForm();
|
||
},
|
||
handleSqlOk(){
|
||
this.$refs.conditionSql.validateForm(()=>{
|
||
let formData = this.$refs.conditionSql.getForm();
|
||
formData.type = '2';
|
||
|
||
if(this.isEdit){
|
||
this.node.conditions[this.rowIndex] = formData;
|
||
}
|
||
else{
|
||
formData.code = this.$uuid();
|
||
this.node.conditions.push(formData);
|
||
}
|
||
|
||
this.sqlVisible = false;
|
||
})
|
||
},
|
||
handleSqlOpened(){
|
||
if(this.isEdit){
|
||
this.$refs.conditionSql.setForm(this.editRow);
|
||
}
|
||
},
|
||
handleSqlClosed(){
|
||
this.$refs.conditionSql.resetForm();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style> |