195 lines
6.8 KiB
Vue
195 lines
6.8 KiB
Vue
<template>
|
||
<div class="user-task">
|
||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||
<a-form-item label="节点标识">
|
||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||
</a-form-item>
|
||
<a-alert message="排他网关说明"
|
||
description="排他网关不会等待所有分支汇入才往下执行，只要有分支汇入就会往下执行，出口分支只会执行一条（条件为true，如果多条出口分支条件为true也执行一条）" type="info"
|
||
show-icon />
|
||
<a-space>
|
||
<a-radio-group>
|
||
<a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
|
||
<a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
|
||
</a-radio-group>
|
||
<a-button danger :size="size" @click="handleClearClick">清空</a-button>
|
||
</a-space>
|
||
<a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
|
||
<template #bodyCell="{ column, text, record }">
|
||
<template v-if="['name'].includes(column.dataIndex)">
|
||
<div>
|
||
{{ text }}
|
||
</div>
|
||
</template>
|
||
<template v-else-if="['type'].includes(column.dataIndex)">
|
||
<div>
|
||
{{ typeFormat(text) }}
|
||
</div>
|
||
</template>
|
||
<template v-else-if="column.dataIndex === 'operation'">
|
||
<a-button @click="onEdit(record)" size="small">编辑</a-button>
|
||
<a-button danger @click='onDelete(record.id)' size="small" class="ml-2">删除</a-button>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-form>
|
||
<a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
|
||
<conditionFormula ref="conditionFormulaRef"></conditionFormula>
|
||
</a-modal>
|
||
<a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
|
||
<conditionSql ref="conditionSqlRef"></conditionSql>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import conditionFormula from './src/conditionFormula.vue'
|
||
import conditionSql from './src/conditionSql.vue'
|
||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||
import { buildGUID } from '@/utils/uuid';
|
||
import { flowStore } from '@/store/modules/flow';
|
||
const flowWfDataStore = flowStore();
|
||
const labelCol = { span: 7 };
|
||
const wrapperCol = { span: 17 };
|
||
const conditionFormulaRef = ref < any > ()
|
||
const conditionSqlRef = ref < any > ()
|
||
const props = defineProps({
|
||
element: Object,
|
||
pageType: String,
|
||
})
|
||
const node = ref({})
|
||
watch(
|
||
() => props.element,
|
||
(newVal, oldVal) => {
|
||
if (newVal.type == "bpmn:ExclusiveGateway") {
|
||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||
if (currentNode) {
|
||
node.value = currentNode
|
||
} else {
|
||
node.value = newVal
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
const data = reactive({
|
||
columns: [
|
||
{ title: '类型', dataIndex: 'type' },
|
||
{ title: '名称', dataIndex: 'name', width: '40%' },
|
||
{ title: '操作', dataIndex: 'operation' }
|
||
],
|
||
tableData: [],
|
||
formulaVisible: false,
|
||
sqlVisible: false,
|
||
editRow: null,
|
||
isEdit: false,
|
||
rowIndex: 0,
|
||
componentDisabled: props.pageType == 'detail' ? true : false
|
||
|
||
})
|
||
function updateWfData(key) {
|
||
flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
|
||
}
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
function typeFormat(type) {
|
||
switch (type) {
|
||
case '1':
|
||
return '表达式'
|
||
case '2':
|
||
return 'sql语句'
|
||
}
|
||
}
|
||
|
||
function handleFormulaClick() {
|
||
data.formulaVisible = true;
|
||
data.isEdit = false
|
||
conditionFormulaRef.value.setForm({
|
||
dbCode: '',
|
||
table: '',
|
||
columns: [],
|
||
rfield: '',
|
||
cfield: '',
|
||
compareType: '',
|
||
value: '',
|
||
name: ''
|
||
})
|
||
}
|
||
function handleSQlClick() {
|
||
data.sqlVisible = true;
|
||
data.isEdit = false
|
||
conditionSqlRef.value.setForm({
|
||
name: '',
|
||
dbCode: '',
|
||
sql: '',
|
||
})
|
||
}
|
||
function handleClearClick() {
|
||
node.value.conditions = [];
|
||
}
|
||
async function handleFormulaOk() {
|
||
conditionFormulaRef.value.validateForm()
|
||
let obj = conditionFormulaRef.value.getForm()
|
||
obj.type = '1';
|
||
if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
|
||
data.formulaVisible = true;
|
||
} else {
|
||
if (data.isEdit) {
|
||
node.value.conditions[data.rowIndex] = obj;
|
||
} else {
|
||
obj.code = buildGUID();
|
||
node.value.conditions.push(obj);
|
||
}
|
||
data.formulaVisible = false;
|
||
}
|
||
|
||
}
|
||
function handleSqlOk() {
|
||
conditionSqlRef.value.validateForm()
|
||
let obj = conditionSqlRef.value.getForm()
|
||
obj.type = '2';
|
||
if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
|
||
data.sqlVisible = true;
|
||
} else {
|
||
if (data.isEdit) {
|
||
node.value.conditions[data.rowIndex] = obj;
|
||
} else {
|
||
obj.code = buildGUID();
|
||
node.value.conditions.push(obj);
|
||
}
|
||
data.sqlVisible = false;
|
||
}
|
||
}
|
||
function onEdit(record) {
|
||
data.isEdit = true
|
||
if (data.type == 1) {
|
||
data.formulaVisible = true;
|
||
conditionFormulaRef.value.setForm(record)
|
||
} else {
|
||
data.sqlVisible = true;
|
||
conditionSqlRef.value.setForm(record)
|
||
}
|
||
}
|
||
function onDelete(id) {
|
||
let list = node.value.conditions
|
||
var currentIndex = (list || []).findIndex((element) => element.id == id);
|
||
node.value.conditions.splice(currentIndex, 1)
|
||
}
|
||
|
||
defineExpose({
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
::v-deep .ant-alert-info {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
::v-deep .ant-table-wrapper {
|
||
margin-top: 20px;
|
||
}
|
||
</style> |