<script lang="ts" setup>
|
import { computed, inject, ref, unref, watch } from 'vue';
|
|
import { getExternalLabelMid, NodeUtils } from '@jnpf/bpmn/utils';
|
import { useModal } from '@jnpf/ui/modal';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { systemFieldOptions } from '#/utils/define';
|
|
import { conditionTypeOptions, conditionTypeOptions1, logicOptions } from '../helper/define';
|
import FormulaModal from './components/FormulaModal.vue';
|
import HeaderContainer from './components/HeaderContainer.vue';
|
|
defineOptions({ inheritAttrs: false });
|
|
const props = defineProps(['type', 'formConf', 'usedFormItems', 'updateJnpfData', 'formFieldsOptions', 'sourceIsStart', 'onConnectNameChange']);
|
const [registerFormulaModal, { openModal: openFormulaModal }] = useModal();
|
const emptyChildItem = {
|
fieldName: '',
|
symbolName: '',
|
fieldValue: undefined,
|
fieldType: 1,
|
fieldValueType: 2,
|
fieldLabel: '',
|
fieldValueJnpfKey: '',
|
logicName: '并且',
|
field: '',
|
symbol: '',
|
logic: '&&',
|
jnpfKey: '',
|
cellKey: Date.now(),
|
};
|
const emptyItem = { logic: 'and', groups: [emptyChildItem] };
|
const activeIndex = ref(0);
|
const activeChildIndex = ref(0);
|
const symbolOptions = [
|
{ id: '>=', fullName: '大于等于' },
|
{ id: '>', fullName: '大于' },
|
{ id: '==', fullName: '等于' },
|
{ id: '<=', fullName: '小于等于' },
|
{ id: '<', fullName: '小于' },
|
{ id: '<>', fullName: '不等于' },
|
{ id: 'like', fullName: '包含' },
|
{ id: 'notLike', fullName: '不包含' },
|
{ id: 'in', fullName: '包含任意一个' },
|
{ id: 'notIn', fullName: '不包含任意一个' },
|
{ id: 'null', fullName: '为空' },
|
{ id: 'notNull', fullName: '不为空' },
|
];
|
const bpmn: (() => string | undefined) | undefined = inject('bpmn');
|
const getBpmn = computed(() => (bpmn as () => any)());
|
const getJnpfGlobalData = computed(() => {
|
const jnpfData: any = unref(getBpmn).get('jnpfData');
|
return jnpfData?.getValue('global') || {};
|
});
|
const getSystemFieldOptions = computed(() => systemFieldOptions.map((o) => ({ ...o, label: o.fullName ? `${o.id}(${o.fullName})` : o.id })));
|
const getParameterList = computed(() => unref(getJnpfGlobalData).globalParameterList || []);
|
const getConditionTypeOptions = computed(() => (props.sourceIsStart ? conditionTypeOptions1.filter((o) => o.id != 3) : conditionTypeOptions1));
|
|
watch(
|
() => props.formConf,
|
() => props.updateJnpfData(),
|
{ deep: true, immediate: true },
|
);
|
watch(
|
() => props.formConf,
|
() => updateConnectLabel(),
|
{ deep: true, immediate: true },
|
);
|
// 修改线条label
|
function updateConnectLabel() {
|
const modeling = unref(getBpmn).get('modeling');
|
const jnpfData = unref(getBpmn).get('jnpfData');
|
const elementRegistry: any = unref(getBpmn).get('elementRegistry');
|
const connect = elementRegistry.get(props.formConf?.nodeId);
|
const connectLabel = elementRegistry.get(`${props.formConf?.nodeId}_label`);
|
let labelCenter = getExternalLabelMid(connect);
|
const text = NodeUtils.getConditionsContent(props.formConf.conditions, props.formConf.matchLogic);
|
labelCenter = NodeUtils.updateLabelWaypoints(connect, elementRegistry, jnpfData, props.type);
|
if (connectLabel) {
|
connectLabel.text = text;
|
connectLabel.width = 128;
|
connectLabel.height = 28;
|
if (Object.keys(labelCenter).length > 0) {
|
connectLabel.x = labelCenter.x;
|
connectLabel.y = labelCenter.y;
|
}
|
connectLabel.nodeName = props.formConf.nodeName;
|
modeling.updateProperties(connectLabel, {});
|
} else {
|
if (text?.trim()) {
|
const existingElement = unref(getBpmn).get('elementRegistry').get(`${connect.id}_label`);
|
if (!existingElement) {
|
labelCenter = NodeUtils.updateLabelWaypoints(connect, elementRegistry, jnpfData, props.type);
|
const labelElement = modeling.createLabel(connect, labelCenter, {
|
id: `${connect.id}_label`,
|
businessObject: connect.businessObject,
|
text: '',
|
wnType: 'condition',
|
di: connect.di,
|
width: 128,
|
height: 0,
|
});
|
labelElement.x = labelCenter.x;
|
labelElement.y = labelCenter.y;
|
modeling.updateProperties(labelElement, {});
|
}
|
}
|
}
|
return null;
|
}
|
|
function addItem(index) {
|
props.formConf.conditions[index].groups.push(cloneDeep(emptyChildItem));
|
}
|
function delItem(index, childIndex) {
|
props.formConf.conditions[index].groups.splice(childIndex, 1);
|
if (!props.formConf.conditions[index].groups.length) delGroup(index);
|
}
|
function addGroup() {
|
props.formConf.conditions.push(cloneDeep(emptyItem));
|
}
|
function delGroup(index) {
|
props.formConf.conditions.splice(index, 1);
|
}
|
function editFormula(item, index, childIndex) {
|
activeIndex.value = index;
|
activeChildIndex.value = childIndex;
|
openFormulaModal(true, { value: item.field, fieldsOptions: props.formFieldsOptions });
|
}
|
function updateFormula(formula) {
|
props.formConf.conditions[activeIndex.value].groups[activeChildIndex.value].field = formula;
|
props.formConf.conditions[activeIndex.value].groups[activeChildIndex.value].fieldName = formula;
|
}
|
function onFieldTypeChange(item) {
|
item.field = '';
|
handleNull(item);
|
}
|
function onFieldChange(item, val, data, index, childIndex) {
|
if (!val) return handleNull(item);
|
item.fieldName = data.__config__.label;
|
item.jnpfKey = data.__config__.jnpfKey;
|
const newItem = cloneDeep(emptyChildItem);
|
for (const key of Object.keys(newItem)) {
|
newItem[key] = item[key];
|
}
|
item = { ...newItem, ...data, disabled: item.disabled };
|
if (item.fieldValueType == 2) {
|
item.fieldValue = undefined;
|
item.fieldLabel = '';
|
item.fieldValueJnpfKey = '';
|
}
|
props.formConf.conditions[index].groups[childIndex] = item;
|
}
|
function handleNull(item) {
|
item.fieldName = '';
|
item.jnpfKey = '';
|
if (item.fieldValueType == 2) {
|
item.fieldValue = undefined;
|
item.fieldLabel = '';
|
item.fieldValueJnpfKey = '';
|
}
|
}
|
function onSymbolChange(item, val, data) {
|
item.symbolName = val ? data.fullName : '';
|
item.disabled = ['notNull', 'null'].includes(val);
|
if (['in', 'notIn'].includes(val)) {
|
item.fieldValueType = 2;
|
}
|
if (['notNull', 'null'].includes(val)) {
|
item.fieldValueType = 2;
|
item.fieldValue = '';
|
item.fieldValueJnpfKey = '';
|
} else if (item?.fieldValue?.length > 1) {
|
item.fieldValue = undefined;
|
}
|
}
|
function onFieldValueChange(item, val, data) {
|
item.fieldLabel = val ? data.fullName : '';
|
item.fieldValueJnpfKey = val ? data.__config__.jnpfKey : '';
|
}
|
function onFieldValueTypeChange(item) {
|
item.fieldValue = undefined;
|
item.fieldLabel = '';
|
item.fieldValueJnpfKey = '';
|
}
|
function onConditionDateChange(val, item) {
|
if (!val) return (item.fieldLabel = '');
|
const format = item.format || 'YYYY-MM-DD HH:mm:ss';
|
item.fieldLabel = formatToDateTime(val, format);
|
}
|
function onConditionListChange(item, val, data) {
|
if (!val) return (item.fieldLabel = '');
|
const labelList = data.map((o) => o.fullName);
|
item.fieldLabel = labelList.join('/');
|
}
|
function onConditionOrganizeChange(item, val, data) {
|
if (!val) return (item.fieldLabel = '');
|
item.fieldLabel = data.orgNameTree || '';
|
}
|
function onConditionObjChange(item, val, data) {
|
if (!val) return (item.fieldLabel = '');
|
item.fieldLabel = data.fullName || '';
|
}
|
function onDefaultChange() {
|
// 获取 BPMN 相关数据
|
const bpmnInstance = unref(getBpmn);
|
const jnpfData: any = bpmnInstance.get('jnpfData');
|
const elementRegistry: any = bpmnInstance.get('elementRegistry');
|
// 获取当前节点的所有连接线（出去的连线）
|
const currentElement = elementRegistry.get(props.formConf?.nodeId);
|
if (!currentElement) return;
|
const outgoingConnections = currentElement.source?.outgoing || [];
|
// 检查是否需要更新默认分支
|
if (props.formConf?.isDefault && outgoingConnections.length) {
|
outgoingConnections.forEach((connect: any) => {
|
if (connect.id !== props.formConf?.nodeId) {
|
const data = jnpfData.getValue(connect.id);
|
if (data?.isDefault) {
|
data.isDefault = false;
|
jnpfData.setValue(connect.id, data);
|
}
|
}
|
});
|
}
|
}
|
</script>
|
|
<template>
|
<HeaderContainer :form-conf="formConf" @on-node-name-change="onConnectNameChange(props.formConf?.nodeId, $event)" />
|
<div class="condition-main overflow-auto p-[15px]">
|
<div class="mb-[12px]"><a-checkbox v-model:checked="formConf.isDefault" @change="onDefaultChange">设置为默认分支</a-checkbox></div>
|
<div class="mb-[10px]" v-if="formConf.conditions?.length">
|
<jnpf-radio v-model:value="formConf.matchLogic" :options="logicOptions" option-type="button" button-style="solid" />
|
</div>
|
<div class="condition-item" v-for="(item, index) in formConf.conditions" :key="index">
|
<div class="condition-item-title">
|
<div>条件组</div>
|
<i class="icon-ym icon-ym-nav-close" @click="delGroup(index)"></i>
|
</div>
|
<div class="condition-item-content">
|
<div class="condition-item-cap">
|
以下条件全部执行：
|
<jnpf-radio v-model:value="item.logic" :options="logicOptions" option-type="button" button-style="solid" size="small" />
|
</div>
|
<a-row :gutter="8" v-for="(child, childIndex) in item.groups" :key="index + childIndex" wrap class="mb-[10px]">
|
<a-col :span="7" class="!flex items-center">
|
<jnpf-select v-model:value="child.fieldType" :options="conditionTypeOptions" @change="onFieldTypeChange(child)" />
|
</a-col>
|
<a-col :span="9" class="!flex items-center">
|
<jnpf-select
|
v-model:value="child.field"
|
:options="usedFormItems"
|
allow-clear
|
show-search
|
:field-names="{ options: 'options1' }"
|
class="!flex-1"
|
@change="(val, data) => onFieldChange(child, val, data, index, childIndex)"
|
v-if="child.fieldType === 1" />
|
<a-button @click="editFormula(child, index, childIndex)" class="!flex-1" v-if="child.fieldType === 3">公式编辑</a-button>
|
</a-col>
|
<a-col :span="8">
|
<jnpf-select
|
class="w-full"
|
v-model:value="child.symbol"
|
:options="child.fieldValueType != 2 ? symbolOptions.filter((o) => !['in', 'notIn'].includes(o.id)) : symbolOptions"
|
@change="(val, data) => onSymbolChange(child, val, data)" />
|
</a-col>
|
<a-col :span="7" class="mt-[10px]">
|
<jnpf-select
|
v-model:value="child.fieldValueType"
|
:options="['in', 'notIn'].includes(child.symbol) ? getConditionTypeOptions.filter((o) => o.id == 2) : getConditionTypeOptions"
|
@change="onFieldValueTypeChange(child)" />
|
</a-col>
|
<a-col :span="16" class="mt-[10px] !flex items-center">
|
<template v-if="child.fieldValueType === 1">
|
<jnpf-select
|
v-model:value="child.fieldValue"
|
:options="usedFormItems"
|
allow-clear
|
show-search
|
:field-names="{ options: 'options1' }"
|
class="flex-1"
|
@change="(val, data) => onFieldValueChange(child, val, data)" />
|
</template>
|
<div class="w-[150px] flex-1" v-if="child.fieldValueType === 2">
|
<template v-if="child.jnpfKey === 'inputNumber'">
|
<a-input-number class="w-full" v-model:value="child.fieldValue" placeholder="请输入" :precision="child.precision" :disabled="child.disabled" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'calculate'">
|
<a-input-number class="w-full" v-model:value="child.fieldValue" placeholder="请输入" :precision="2" :disabled="child.disabled" />
|
</template>
|
<template v-else-if="['rate', 'slider'].includes(child.jnpfKey)">
|
<a-input-number class="w-full" v-model:value="child.fieldValue" placeholder="请输入" :disabled="child.disabled" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'switch'">
|
<jnpf-switch v-model:value="child.fieldValue" :disabled="child.disabled" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'timePicker'">
|
<jnpf-time-picker v-model:value="child.fieldValue" :format="child.format || 'HH:mm:ss'" allow-clear :disabled="child.disabled" />
|
</template>
|
<template v-else-if="['datePicker', 'createTime', 'modifyTime', 'dateCalculate'].includes(child.jnpfKey)">
|
<jnpf-date-picker
|
v-model:value="child.fieldValue"
|
:format="child.format || 'YYYY-MM-DD HH:mm:ss'"
|
allow-clear
|
:disabled="child.disabled"
|
@change="onConditionDateChange($event, child)" />
|
</template>
|
<template v-else-if="['organizeSelect', 'currOrganize'].includes(child.jnpfKey)">
|
<jnpf-organize-select
|
v-model:value="child.fieldValue"
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionOrganizeChange(child, val, data)" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'roleSelect'">
|
<jnpf-role-select
|
v-model:value="child.fieldValue"
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionObjChange(child, val, data)" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'groupSelect'">
|
<jnpf-group-select
|
v-model:value="child.fieldValue"
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionObjChange(child, val, data)" />
|
</template>
|
<template v-else-if="['posSelect', 'currPosition'].includes(child.jnpfKey)">
|
<jnpf-pos-select
|
v-model:value="child.fieldValue"
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionOrganizeChange(child, val, data)" />
|
</template>
|
<template v-else-if="['userSelect', 'createUser', 'modifyUser'].includes(child.jnpfKey)">
|
<jnpf-user-select
|
v-model:value="child.fieldValue"
|
has-sys
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionObjChange(child, val, data)" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'usersSelect'">
|
<jnpf-users-select
|
v-model:value="child.fieldValue"
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionOrganizeChange(child, val, data)" />
|
</template>
|
<template v-else-if="child.jnpfKey === 'areaSelect'">
|
<jnpf-area-select
|
v-model:value="child.fieldValue"
|
:level="child.level"
|
allow-clear
|
:disabled="child.disabled"
|
@change="(val, data) => onConditionListChange(child, val, data)" />
|
</template>
|
<template v-else>
|
<a-select
|
v-model:value="child.fieldValue"
|
placeholder="请输入"
|
allow-clear
|
mode="tags"
|
:open="false"
|
:disabled="child.disabled"
|
v-if="['in', 'notIn'].includes(child.symbol)" />
|
<a-input v-else v-model:value="child.fieldValue" placeholder="请输入" allow-clear :disabled="child.disabled" />
|
</template>
|
</div>
|
<template v-else-if="child.fieldValueType === 3">
|
<jnpf-select
|
v-model:value="child.fieldValue"
|
:options="getSystemFieldOptions"
|
:field-names="{ label: 'label', options: 'options1' }"
|
allow-clear />
|
</template>
|
<template v-if="child.fieldValueType === 4">
|
<jnpf-select
|
v-model:value="child.fieldValue"
|
:options="getParameterList"
|
:field-names="{ label: 'fieldName', value: 'fieldName', options: 'options1' }"
|
allow-clear />
|
</template>
|
</a-col>
|
<a-col :span="1" class="mt-[10px] text-center">
|
<i class="icon-ym icon-ym-btn-clearn" @click="delItem(index, childIndex)"></i>
|
</a-col>
|
</a-row>
|
<span class="link-text inline-block" @click="addItem(index)"><i class="icon-ym icon-ym-btn-add mr-[4px] text-[14px]"></i>添加条件</span>
|
</div>
|
</div>
|
<span class="link-text inline-block" @click="addGroup()"><i class="icon-ym icon-ym-btn-add mr-[4px] text-[14px]"></i>添加条件组</span>
|
</div>
|
<FormulaModal @register="registerFormulaModal" @confirm="updateFormula" />
|
</template>
|
