Pre Merge pull request !293 from Jason/dev
Jason
Gitee
commit
8ab9c88007
|
|
@ -1,25 +1,25 @@
|
|||
<script lang="ts" setup>
|
||||
import { inject, nextTick, ref, watch } from 'vue';
|
||||
|
||||
import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Drawer,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Modal,
|
||||
Select,
|
||||
SelectOption,
|
||||
Table,
|
||||
TableColumn,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
|
||||
|
||||
import { createListenerObject, updateElementExtensions } from '../../utils';
|
||||
import ProcessListenerDialog from './ProcessListenerDialog.vue';
|
||||
import ListenerFieldModal from './ListenerFieldModal.vue';
|
||||
import {
|
||||
fieldType,
|
||||
initListenerForm,
|
||||
|
|
@ -41,13 +41,9 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const prefix = inject('prefix');
|
||||
const width = inject('width');
|
||||
const elementListenersList = ref<any[]>([]); // 监听器列表
|
||||
const listenerForm = ref<any>({}); // 监听器详情表单
|
||||
const listenerFormModelVisible = ref(false); // 监听器 编辑 侧边栏显示状态
|
||||
const fieldsListOfListener = ref<any[]>([]);
|
||||
const listenerFieldForm = ref<any>({}); // 监听器 注入字段 详情表单
|
||||
const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
|
||||
const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
|
||||
const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
|
||||
const listenerTypeObject = ref(listenerType);
|
||||
|
|
@ -56,7 +52,6 @@ const bpmnElement = ref();
|
|||
const otherExtensionList = ref();
|
||||
const bpmnElementListeners = ref();
|
||||
const listenerFormRef = ref();
|
||||
const listenerFieldFormRef = ref();
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||
|
||||
const resetListenersList = () => {
|
||||
|
|
@ -75,13 +70,12 @@ const resetListenersList = () => {
|
|||
};
|
||||
// 打开 监听器详情 侧边栏
|
||||
const openListenerForm = (listener: any, index: number) => {
|
||||
// debugger
|
||||
if (listener) {
|
||||
listenerForm.value = initListenerForm(listener);
|
||||
editingListenerIndex.value = index;
|
||||
} else {
|
||||
listenerForm.value = {};
|
||||
editingListenerIndex.value = -1; // 标记为新增
|
||||
editingListenerIndex.value = -1;
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
fieldsListOfListener.value = listener.fields.map((field: any) => ({
|
||||
|
|
@ -92,8 +86,7 @@ const openListenerForm = (listener: any, index: number) => {
|
|||
fieldsListOfListener.value = [];
|
||||
listenerForm.value.fields = [];
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
listenerFormModelVisible.value = true;
|
||||
listenerDrawerApi.open();
|
||||
nextTick(() => {
|
||||
if (listenerFormRef.value) {
|
||||
listenerFormRef.value.clearValidate();
|
||||
|
|
@ -103,82 +96,51 @@ const openListenerForm = (listener: any, index: number) => {
|
|||
|
||||
// 打开监听器字段编辑弹窗
|
||||
const openListenerFieldForm = (field: any, index: number) => {
|
||||
listenerFieldForm.value = field ? cloneDeep(field) : {};
|
||||
const data = field ? cloneDeep(field) : {};
|
||||
editingListenerFieldIndex.value = field ? index : -1;
|
||||
listenerFieldFormModelVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (listenerFieldFormRef.value) {
|
||||
listenerFieldFormRef.value.clearValidate();
|
||||
}
|
||||
});
|
||||
fieldModalApi.setData(data).open();
|
||||
};
|
||||
// 保存监听器注入字段
|
||||
const saveListenerFiled = async () => {
|
||||
// debugger
|
||||
const validateStatus = await listenerFieldFormRef.value.validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const saveListenerFiled = async (data: any) => {
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
fieldsListOfListener.value.push(listenerFieldForm.value);
|
||||
listenerForm.value.fields.push(listenerFieldForm.value);
|
||||
fieldsListOfListener.value.push(data);
|
||||
listenerForm.value.fields.push(data);
|
||||
} else {
|
||||
fieldsListOfListener.value.splice(
|
||||
editingListenerFieldIndex.value,
|
||||
1,
|
||||
listenerFieldForm.value,
|
||||
);
|
||||
listenerForm.value.fields.splice(
|
||||
editingListenerFieldIndex.value,
|
||||
1,
|
||||
listenerFieldForm.value,
|
||||
);
|
||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
|
||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
|
||||
}
|
||||
listenerFieldFormModelVisible.value = false;
|
||||
nextTick(() => {
|
||||
listenerFieldForm.value = {};
|
||||
});
|
||||
};
|
||||
// 移除监听器字段
|
||||
const removeListenerField = (index: number) => {
|
||||
// debugger
|
||||
Modal.confirm({
|
||||
title: '确认移除该字段吗？',
|
||||
content: '此操作不可撤销',
|
||||
okText: '确 认',
|
||||
cancelText: '取 消',
|
||||
onOk() {
|
||||
fieldsListOfListener.value.splice(index, 1);
|
||||
listenerForm.value.fields.splice(index, 1);
|
||||
},
|
||||
onCancel() {
|
||||
console.warn('操作取消');
|
||||
},
|
||||
confirm({
|
||||
title: '提示',
|
||||
content: '确认移除该字段吗？',
|
||||
}).then(() => {
|
||||
fieldsListOfListener.value.splice(index, 1);
|
||||
listenerForm.value.fields.splice(index, 1);
|
||||
});
|
||||
};
|
||||
// 移除监听器
|
||||
const removeListener = (index: number) => {
|
||||
Modal.confirm({
|
||||
title: '确认移除该监听器吗？',
|
||||
content: '此操作不可撤销',
|
||||
okText: '确 认',
|
||||
cancelText: '取 消',
|
||||
onOk() {
|
||||
bpmnElementListeners.value.splice(index, 1);
|
||||
elementListenersList.value.splice(index, 1);
|
||||
updateElementExtensions(bpmnElement.value, [
|
||||
...otherExtensionList.value,
|
||||
...bpmnElementListeners.value,
|
||||
]);
|
||||
},
|
||||
onCancel() {
|
||||
console.warn('操作取消');
|
||||
},
|
||||
confirm({
|
||||
title: '提示',
|
||||
content: '确认移除该监听器吗？',
|
||||
}).then(() => {
|
||||
bpmnElementListeners.value.splice(index, 1);
|
||||
elementListenersList.value.splice(index, 1);
|
||||
updateElementExtensions(bpmnElement.value, [
|
||||
...otherExtensionList.value,
|
||||
...bpmnElementListeners.value,
|
||||
]);
|
||||
});
|
||||
};
|
||||
// 保存监听器配置
|
||||
const saveListenerConfig = async () => {
|
||||
// debugger
|
||||
const validateStatus = await listenerFormRef.value.validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
try {
|
||||
await listenerFormRef.value.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
const listenerObject = createListenerObject(
|
||||
listenerForm.value,
|
||||
false,
|
||||
|
|
@ -199,7 +161,6 @@ const saveListenerConfig = async () => {
|
|||
listenerForm.value,
|
||||
);
|
||||
}
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
|
||||
|
|
@ -208,15 +169,101 @@ const saveListenerConfig = async () => {
|
|||
...otherExtensionList.value,
|
||||
...bpmnElementListeners.value,
|
||||
]);
|
||||
// 4. 隐藏侧边栏
|
||||
listenerFormModelVisible.value = false;
|
||||
listenerDrawerApi.close();
|
||||
listenerForm.value = {};
|
||||
};
|
||||
|
||||
// 配置主列表 Grid
|
||||
const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'event', title: '事件类型', minWidth: 100 },
|
||||
{
|
||||
field: 'listenerType',
|
||||
title: '监听器类型',
|
||||
minWidth: 100,
|
||||
formatter: ({ cellValue }: { cellValue: string }) =>
|
||||
(listenerTypeObject.value as Record<string, any>)[cellValue],
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
slots: { default: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
height: 'auto',
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 配置字段列表 Grid
|
||||
const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'name', title: '字段名称', minWidth: 100 },
|
||||
{
|
||||
field: 'fieldType',
|
||||
title: '字段类型',
|
||||
minWidth: 80,
|
||||
formatter: ({ cellValue }: { cellValue: string }) =>
|
||||
(fieldTypeObject.value as Record<string, any>)[cellValue],
|
||||
},
|
||||
{
|
||||
title: '字段值/表达式',
|
||||
minWidth: 100,
|
||||
formatter: ({ row }: { row: any }) => row.string || row.expression,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
slots: { default: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
maxHeight: 200,
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 配置 Drawer
|
||||
const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
|
||||
title: '执行监听器',
|
||||
destroyOnClose: true,
|
||||
onConfirm: saveListenerConfig,
|
||||
});
|
||||
|
||||
// 配置字段 Modal
|
||||
const [FieldModal, fieldModalApi] = useVbenModal({
|
||||
connectedComponent: ListenerFieldModal,
|
||||
});
|
||||
|
||||
// 配置选择监听器 Modal
|
||||
const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
|
||||
useVbenModal({
|
||||
connectedComponent: ProcessListenerSelectModal,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processListenerDialogRef = ref();
|
||||
const openProcessListenerDialog = async () => {
|
||||
processListenerDialogRef.value.open('execution');
|
||||
processListenerSelectModalApi.setData({ type: 'execution' }).open();
|
||||
};
|
||||
const selectProcessListener = (listener: any) => {
|
||||
const listenerForm = initListenerForm2(listener);
|
||||
|
|
@ -235,6 +282,22 @@ const selectProcessListener = (listener: any) => {
|
|||
]);
|
||||
};
|
||||
|
||||
watch(
|
||||
elementListenersList,
|
||||
(val) => {
|
||||
listenerGridApi.setGridOptions({ data: val });
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
fieldsListOfListener,
|
||||
(val) => {
|
||||
fieldsGridApi.setGridOptions({ data: val });
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val: string) => {
|
||||
|
|
@ -248,56 +311,44 @@ watch(
|
|||
);
|
||||
</script>
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<Table
|
||||
:data-source="elementListenersList"
|
||||
size="small"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<TableColumn title="序号" width="50px">
|
||||
<template #default="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
</TableColumn>
|
||||
<TableColumn title="事件类型" width="100px" data-index="event" />
|
||||
<TableColumn
|
||||
title="监听器类型"
|
||||
width="100px"
|
||||
:custom-render="
|
||||
({ record }: any) =>
|
||||
listenerTypeObject[record.listenerType as keyof typeof listenerType]
|
||||
"
|
||||
/>
|
||||
<TableColumn title="操作" width="100px">
|
||||
<template #default="{ record, index }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openListenerForm(record, index)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeListener(index)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</TableColumn>
|
||||
</Table>
|
||||
<div class="element-drawer__button">
|
||||
<Button type="primary" size="small" @click="openListenerForm(null, -1)">
|
||||
<div class="-mx-2">
|
||||
<ListenerGrid :data="elementListenersList">
|
||||
<template #action="{ row, rowIndex }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openListenerForm(row, rowIndex)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeListener(rowIndex)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</ListenerGrid>
|
||||
<div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
|
||||
<Button
|
||||
class="flex flex-1 items-center justify-center"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openListenerForm(null, -1)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:plus" />
|
||||
</template>
|
||||
添加监听器
|
||||
</Button>
|
||||
<Button size="small" @click="openProcessListenerDialog">
|
||||
<Button
|
||||
class="flex flex-1 items-center justify-center"
|
||||
size="small"
|
||||
@click="openProcessListenerDialog"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:select" />
|
||||
</template>
|
||||
|
|
@ -306,13 +357,13 @@ watch(
|
|||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<Drawer
|
||||
v-model:open="listenerFormModelVisible"
|
||||
title="执行监听器"
|
||||
:width="width as any"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<Form :model="listenerForm" ref="listenerFormRef">
|
||||
<ListenerDrawer>
|
||||
<Form
|
||||
:model="listenerForm"
|
||||
ref="listenerFormRef"
|
||||
:label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 19 }"
|
||||
>
|
||||
<FormItem
|
||||
label="事件类型"
|
||||
name="event"
|
||||
|
|
@ -466,8 +517,9 @@ watch(
|
|||
注入字段
|
||||
</span>
|
||||
<Button
|
||||
type="primary"
|
||||
title="添加字段"
|
||||
class="flex items-center"
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openListenerFieldForm(null, -1)"
|
||||
>
|
||||
<template #icon>
|
||||
|
|
@ -476,143 +528,32 @@ watch(
|
|||
添加字段
|
||||
</Button>
|
||||
</div>
|
||||
<Table :data-source="fieldsListOfListener" size="small" bordered>
|
||||
<TableColumn title="序号" width="50px">
|
||||
<template #default="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
</TableColumn>
|
||||
<TableColumn title="字段名称" width="100px" data-index="name" />
|
||||
<TableColumn
|
||||
title="字段类型"
|
||||
width="80px"
|
||||
:custom-render="
|
||||
({ record }: any) =>
|
||||
fieldTypeObject[record.fieldType as keyof typeof fieldType]
|
||||
"
|
||||
/>
|
||||
<TableColumn
|
||||
title="字段值/表达式"
|
||||
width="120px"
|
||||
:custom-render="
|
||||
({ record }: any) => record.string || record.expression
|
||||
"
|
||||
/>
|
||||
<TableColumn title="操作" width="80px" fixed="right">
|
||||
<template #default="{ record, index }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openListenerFieldForm(record, index)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeListenerField(index)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</TableColumn>
|
||||
</Table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<Button @click="listenerFormModelVisible = false">取 消</Button>
|
||||
<Button type="primary" @click="saveListenerConfig">保 存</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
<FieldsGrid :data="fieldsListOfListener">
|
||||
<template #action="{ row, rowIndex }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openListenerFieldForm(row, rowIndex)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeListenerField(rowIndex)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</FieldsGrid>
|
||||
</ListenerDrawer>
|
||||
|
||||
<!-- 注入字段 编辑/创建 部分 -->
|
||||
<Modal
|
||||
title="字段配置"
|
||||
v-model:open="listenerFieldFormModelVisible"
|
||||
width="600px"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<Form :model="listenerFieldForm" ref="listenerFieldFormRef">
|
||||
<FormItem
|
||||
label="字段名称："
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请填写字段名称',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Input v-model:value="listenerFieldForm.name" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="字段类型："
|
||||
name="fieldType"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择字段类型',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Select v-model:value="listenerFieldForm.fieldType">
|
||||
<SelectOption
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
:value="i"
|
||||
>
|
||||
{{ fieldTypeObject[i as keyof typeof fieldType] }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
name="string"
|
||||
key="field-string"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请填写字段值',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Input v-model:value="listenerFieldForm.string" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
name="expression"
|
||||
key="field-expression"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请填写表达式',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Input v-model:value="listenerFieldForm.expression" allow-clear />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<template #footer>
|
||||
<Button size="small" @click="listenerFieldFormModelVisible = false">
|
||||
取 消
|
||||
</Button>
|
||||
<Button size="small" type="primary" @click="saveListenerFiled">
|
||||
确 定
|
||||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
<FieldModal @confirm="saveListenerFiled" />
|
||||
</div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessListenerDialog
|
||||
ref="processListenerDialogRef"
|
||||
@select="selectProcessListener"
|
||||
/>
|
||||
<ProcessListenerSelectModalComp @select="selectProcessListener" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
|
||||
|
||||
import { fieldType } from './utilSelf';
|
||||
|
||||
defineOptions({ name: 'ListenerFieldModal' });
|
||||
|
||||
const emit = defineEmits<{
|
||||
confirm: [data: any];
|
||||
}>();
|
||||
|
||||
const fieldTypeObject = ref(fieldType);
|
||||
const form = ref<any>({});
|
||||
const formRef = ref();
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = modalApi.getData<any>();
|
||||
form.value = data || {};
|
||||
// clear validate
|
||||
setTimeout(() => {
|
||||
formRef.value?.clearValidate();
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
emit('confirm', { ...form.value });
|
||||
modalApi.close();
|
||||
} catch {
|
||||
// validate failed
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal title="字段配置" class="w-3/5">
|
||||
<Form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
>
|
||||
<FormItem
|
||||
label="字段名称："
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请填写字段名称',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Input v-model:value="form.name" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="字段类型："
|
||||
name="fieldType"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择字段类型',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Select v-model:value="form.fieldType">
|
||||
<SelectOption
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
:value="i"
|
||||
>
|
||||
{{ fieldTypeObject[i as keyof typeof fieldType] }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="form.fieldType === 'string'"
|
||||
label="字段值："
|
||||
name="string"
|
||||
key="field-string"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请填写字段值',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Input v-model:value="form.string" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="form.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
name="expression"
|
||||
key="field-expression"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请填写表达式',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Input v-model:value="form.expression" allow-clear />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<!-- 执行器选择 -->
|
||||
<script setup lang="ts">
|
||||
import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
|
||||
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import { ContentWrap } from '@vben/common-ui';
|
||||
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
|
||||
|
||||
import { Button, Modal, Pagination, Table } from 'ant-design-vue';
|
||||
|
||||
import { getProcessListenerPage } from '#/api/bpm/processListener';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
|
||||
/** BPM 流程 表单 */
|
||||
defineOptions({ name: 'ProcessListenerDialog' });
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success', 'select']);
|
||||
const dialogVisible = ref(false); // 弹窗的是否展示
|
||||
const loading = ref(true); // 列表的加载中
|
||||
const list = ref<BpmProcessListenerApi.ProcessListener[]>([]); // 列表的数据
|
||||
const total = ref(0); // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
});
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string) => {
|
||||
queryParams.pageNo = 1;
|
||||
queryParams.type = type;
|
||||
await getList();
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
defineExpose({ open }); // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await getProcessListenerPage(queryParams);
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 定义 success 事件，用于操作成功后的回调
|
||||
const select = async (row: BpmProcessListenerApi.ProcessListener) => {
|
||||
dialogVisible.value = false;
|
||||
// 发送操作成功的事件
|
||||
emit('select', row);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Modal
|
||||
title="请选择监听器"
|
||||
v-model:open="dialogVisible"
|
||||
width="1024px"
|
||||
:footer="null"
|
||||
>
|
||||
<ContentWrap>
|
||||
<Table
|
||||
:loading="loading"
|
||||
:data-source="list"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
>
|
||||
<Table.Column title="名字" align="center" data-index="name" />
|
||||
<Table.Column title="类型" align="center" data-index="type">
|
||||
<template #default="{ record }">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE"
|
||||
:value="record.type"
|
||||
/>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="事件" align="center" data-index="event" />
|
||||
<Table.Column title="值类型" align="center" data-index="valueType">
|
||||
<template #default="{ record }">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
|
||||
:value="record.valueType"
|
||||
/>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="值" align="center" data-index="value" />
|
||||
<Table.Column title="操作" align="center" fixed="right">
|
||||
<template #default="{ record }">
|
||||
<Button type="primary" @click="select(record)"> 选择 </Button>
|
||||
</template>
|
||||
</Table.Column>
|
||||
</Table>
|
||||
<!-- 分页 -->
|
||||
<div class="mt-4 flex justify-end">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:current="queryParams.pageNo"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
show-size-changer
|
||||
@change="getList"
|
||||
/>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -16,9 +16,10 @@ import {
|
|||
} from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import ProcessListenerDialog from '#/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue';
|
||||
import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
|
||||
|
||||
import { createListenerObject, updateElementExtensions } from '../../utils';
|
||||
import ListenerFieldModal from './ListenerFieldModal.vue';
|
||||
import {
|
||||
eventType,
|
||||
fieldType,
|
||||
|
|
@ -47,12 +48,10 @@ const fieldTypeObject = ref(fieldType);
|
|||
const fieldsListOfListener = ref<any[]>([]);
|
||||
const editingListenerIndex = ref(-1);
|
||||
const editingListenerFieldIndex = ref<any>(-1);
|
||||
const listenerFieldForm = ref<any>({});
|
||||
const bpmnElement = ref<any>();
|
||||
const bpmnElementListeners = ref<any[]>([]);
|
||||
const otherExtensionList = ref<any[]>([]);
|
||||
const listenerFormRef = ref<any>({});
|
||||
const listenerFieldFormRef = ref<any>({});
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||
|
||||
|
|
@ -143,12 +142,9 @@ async function saveListenerConfig() {
|
|||
}
|
||||
|
||||
const openListenerFieldForm = (field: any, index?: number) => {
|
||||
listenerFieldForm.value = field ? cloneDeep(field) : {};
|
||||
const data = field ? cloneDeep(field) : {};
|
||||
editingListenerFieldIndex.value = field ? index : -1;
|
||||
fieldModalApi.open();
|
||||
nextTick(() => {
|
||||
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
|
||||
});
|
||||
fieldModalApi.setData(data).open();
|
||||
};
|
||||
|
||||
const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
|
||||
|
|
@ -189,28 +185,13 @@ const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
|
|||
},
|
||||
});
|
||||
|
||||
async function saveListenerField() {
|
||||
try {
|
||||
await listenerFieldFormRef.value.validate();
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
fieldsListOfListener.value.push(cloneDeep(listenerFieldForm.value));
|
||||
listenerForm.value.fields.push(cloneDeep(listenerFieldForm.value));
|
||||
} else {
|
||||
fieldsListOfListener.value.splice(
|
||||
editingListenerFieldIndex.value,
|
||||
1,
|
||||
cloneDeep(listenerFieldForm.value),
|
||||
);
|
||||
listenerForm.value.fields.splice(
|
||||
editingListenerFieldIndex.value,
|
||||
1,
|
||||
cloneDeep(listenerFieldForm.value),
|
||||
);
|
||||
}
|
||||
fieldModalApi.close();
|
||||
listenerFieldForm.value = {};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
async function saveListenerField(data: any) {
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
fieldsListOfListener.value.push(data);
|
||||
listenerForm.value.fields.push(data);
|
||||
} else {
|
||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
|
||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,12 +205,12 @@ const removeListenerField = (_: any, index: number) => {
|
|||
});
|
||||
};
|
||||
|
||||
const processListenerDialogRef = ref<any>();
|
||||
const openProcessListenerDialog = async () => {
|
||||
processListenerDialogRef.value.open('task');
|
||||
processListenerSelectModalApi.setData({ type: 'task' }).open();
|
||||
};
|
||||
const selectProcessListener = (listener: any) => {
|
||||
const listenerForm = initListenerForm2(listener);
|
||||
listenerForm.id = listener.id;
|
||||
const listenerObject = createListenerObject(listenerForm, true, prefix);
|
||||
bpmnElementListeners.value.push(listenerObject);
|
||||
elementListenersList.value.push(listenerForm);
|
||||
|
|
@ -251,10 +232,15 @@ const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
|
|||
});
|
||||
|
||||
const [FieldModal, fieldModalApi] = useVbenModal({
|
||||
title: '字段配置',
|
||||
onConfirm: saveListenerField,
|
||||
connectedComponent: ListenerFieldModal,
|
||||
});
|
||||
|
||||
const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
|
||||
useVbenModal({
|
||||
connectedComponent: ProcessListenerSelectModal,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
|
|
@ -550,60 +536,9 @@ watch(
|
|||
</ListenerDrawer>
|
||||
|
||||
<!-- 注入字段 编辑/创建 部分 -->
|
||||
<FieldModal class="w-3/5">
|
||||
<Form
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
:model="listenerFieldForm"
|
||||
ref="listenerFieldFormRef"
|
||||
>
|
||||
<FormItem
|
||||
label="字段名称："
|
||||
name="name"
|
||||
:rules="[{ required: true, message: '请输入字段名称' }]"
|
||||
>
|
||||
<Input v-model:value="listenerFieldForm.name" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="字段类型："
|
||||
name="fieldType"
|
||||
:rules="[{ required: true, message: '请选择字段类型' }]"
|
||||
>
|
||||
<Select v-model:value="listenerFieldForm.fieldType">
|
||||
<SelectOption
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
:value="i"
|
||||
>
|
||||
{{ fieldTypeObject[i as keyof typeof fieldType] }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
name="string"
|
||||
key="field-string"
|
||||
:rules="[{ required: true, message: '请输入字段值' }]"
|
||||
>
|
||||
<Input v-model:value="listenerFieldForm.string" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
name="expression"
|
||||
key="field-expression"
|
||||
:rules="[{ required: true, message: '请输入表达式' }]"
|
||||
>
|
||||
<Input v-model:value="listenerFieldForm.expression" allow-clear />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</FieldModal>
|
||||
<FieldModal @confirm="saveListenerField" />
|
||||
</div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessListenerDialog
|
||||
ref="processListenerDialogRef"
|
||||
@select="selectProcessListener"
|
||||
/>
|
||||
<ProcessListenerSelectModalComp @select="selectProcessListener" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export function initListenerForm2(processListener: any) {
|
|||
class: processListener.value,
|
||||
event: processListener.event,
|
||||
fields: [],
|
||||
id: undefined,
|
||||
};
|
||||
}
|
||||
case 'delegateExpression': {
|
||||
|
|
@ -61,6 +62,7 @@ export function initListenerForm2(processListener: any) {
|
|||
delegateExpression: processListener.value,
|
||||
event: processListener.event,
|
||||
fields: [],
|
||||
id: undefined,
|
||||
};
|
||||
}
|
||||
case 'expression': {
|
||||
|
|
@ -69,6 +71,7 @@ export function initListenerForm2(processListener: any) {
|
|||
expression: processListener.value,
|
||||
event: processListener.event,
|
||||
fields: [],
|
||||
id: undefined,
|
||||
};
|
||||
}
|
||||
// No default
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
|
||||
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { Textarea } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'ElementOtherConfig' });
|
||||
|
||||
|
|
@ -12,8 +12,6 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const { Textarea } = Input;
|
||||
|
||||
const documentation = ref('');
|
||||
const bpmnElement = ref();
|
||||
|
||||
|
|
@ -58,10 +56,10 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="element-property input-property">
|
||||
<div class="element-property__label">元素文档：</div>
|
||||
<div class="element-property__value">
|
||||
<div class="px-2 py-1">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-20 pt-1 text-sm text-gray-700">元素文档：</div>
|
||||
<div class="flex-1">
|
||||
<Textarea
|
||||
v-model:value="documentation"
|
||||
:auto-size="{ minRows: 2, maxRows: 4 }"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,13 @@
|
|||
<script lang="ts" setup>
|
||||
import { inject, nextTick, ref, toRaw, watch } from 'vue';
|
||||
|
||||
import { confirm, useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Modal,
|
||||
Table,
|
||||
TableColumn,
|
||||
} from 'ant-design-vue';
|
||||
import { Button, Divider, Form, FormItem, Input } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
|
||||
defineOptions({ name: 'ElementProperties' });
|
||||
|
||||
|
|
@ -29,12 +23,10 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const prefix = inject('prefix');
|
||||
// const width = inject('width')
|
||||
|
||||
const elementPropertyList = ref<Array<{ name: string; value: string }>>([]);
|
||||
const propertyForm = ref<{ name?: string; value?: string }>({});
|
||||
const editingPropertyIndex = ref(-1);
|
||||
const propertyFormModelVisible = ref(false);
|
||||
const bpmnElement = ref<any>();
|
||||
const otherExtensionList = ref<any[]>([]);
|
||||
const bpmnElementProperties = ref<any[]>([]);
|
||||
|
|
@ -44,9 +36,8 @@ const bpmnInstances = () => (window as any)?.bpmnInstances;
|
|||
|
||||
const resetAttributesList = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
otherExtensionList.value = []; // 其他扩展配置
|
||||
otherExtensionList.value = [];
|
||||
bpmnElementProperties.value =
|
||||
// bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex: any) => {
|
||||
if (ex.$type !== `${prefix}:Properties`) {
|
||||
|
|
@ -56,57 +47,41 @@ const resetAttributesList = () => {
|
|||
},
|
||||
) ?? [];
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
bpmnElementPropertyList.value = bpmnElementProperties.value.flatMap(
|
||||
(current: any) => current.values,
|
||||
);
|
||||
// 复制 显示
|
||||
elementPropertyList.value = cloneDeep(bpmnElementPropertyList.value ?? []);
|
||||
};
|
||||
|
||||
const openAttributesForm = (
|
||||
attr: null | { name: string; value: string },
|
||||
index: number,
|
||||
) => {
|
||||
editingPropertyIndex.value = index;
|
||||
// @ts-ignore
|
||||
propertyForm.value = index === -1 ? {} : cloneDeep(attr);
|
||||
propertyFormModelVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (attributeFormRef.value) attributeFormRef.value.clearValidate();
|
||||
});
|
||||
};
|
||||
|
||||
const removeAttributes = (
|
||||
_attr: { name: string; value: string },
|
||||
index: number,
|
||||
) => {
|
||||
Modal.confirm({
|
||||
confirm({
|
||||
title: '提示',
|
||||
content: '确认移除该属性吗？',
|
||||
okText: '确 认',
|
||||
cancelText: '取 消',
|
||||
onOk() {
|
||||
elementPropertyList.value.splice(index, 1);
|
||||
bpmnElementPropertyList.value.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = bpmnInstances().moddle.create(
|
||||
`${prefix}:Properties`,
|
||||
{
|
||||
values: bpmnElementPropertyList.value,
|
||||
},
|
||||
);
|
||||
updateElementExtensions(propertiesObject);
|
||||
resetAttributesList();
|
||||
},
|
||||
onCancel() {
|
||||
// console.info('操作取消');
|
||||
},
|
||||
}).then(() => {
|
||||
elementPropertyList.value.splice(index, 1);
|
||||
bpmnElementPropertyList.value.splice(index, 1);
|
||||
const propertiesObject = bpmnInstances().moddle.create(
|
||||
`${prefix}:Properties`,
|
||||
{
|
||||
values: bpmnElementPropertyList.value,
|
||||
},
|
||||
);
|
||||
updateElementExtensions(propertiesObject);
|
||||
resetAttributesList();
|
||||
});
|
||||
};
|
||||
|
||||
const saveAttribute = () => {
|
||||
// console.log(propertyForm.value, 'propertyForm.value');
|
||||
const saveAttribute = async () => {
|
||||
try {
|
||||
await attributeFormRef.value?.validate();
|
||||
} catch {
|
||||
// 校验未通过，直接返回
|
||||
return;
|
||||
}
|
||||
|
||||
const { name, value } = propertyForm.value;
|
||||
if (editingPropertyIndex.value === -1) {
|
||||
// 新建属性字段
|
||||
|
|
@ -135,7 +110,7 @@ const saveAttribute = () => {
|
|||
},
|
||||
);
|
||||
}
|
||||
propertyFormModelVisible.value = false;
|
||||
fieldModalApi.close();
|
||||
resetAttributesList();
|
||||
};
|
||||
|
||||
|
|
@ -148,11 +123,61 @@ const updateElementExtensions = (properties: any) => {
|
|||
});
|
||||
};
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'name', title: '属性名', minWidth: 120 },
|
||||
{ field: 'value', title: '属性值', minWidth: 120 },
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
slots: { default: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
height: 'auto',
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [FieldModal, fieldModalApi] = useVbenModal({
|
||||
title: '属性配置',
|
||||
onConfirm: saveAttribute,
|
||||
});
|
||||
|
||||
const openAttributesForm = (
|
||||
attr: null | { name: string; value: string },
|
||||
index: number,
|
||||
) => {
|
||||
editingPropertyIndex.value = index;
|
||||
propertyForm.value = index === -1 ? {} : cloneDeep(attr || {});
|
||||
fieldModalApi.open();
|
||||
nextTick(() => {
|
||||
if (attributeFormRef.value) attributeFormRef.value.clearValidate();
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
elementPropertyList,
|
||||
(val) => {
|
||||
gridApi.setGridOptions({ data: val });
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
if (val) {
|
||||
val && val.length > 0 && resetAttributesList();
|
||||
if (val && val.length > 0) {
|
||||
resetAttributesList();
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
|
|
@ -160,38 +185,34 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<Table :data="elementPropertyList" size="small" bordered>
|
||||
<TableColumn title="序号" width="50">
|
||||
<template #default="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
</TableColumn>
|
||||
<TableColumn title="属性名" data-index="name" />
|
||||
<TableColumn title="属性值" data-index="value" />
|
||||
<TableColumn title="操作">
|
||||
<template #default="{ record, index }">
|
||||
<Button
|
||||
type="link"
|
||||
@click="openAttributesForm(record, index)"
|
||||
size="small"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
@click="removeAttributes(record, index)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</TableColumn>
|
||||
</Table>
|
||||
<div class="element-drawer__button">
|
||||
<Button type="primary" @click="openAttributesForm(null, -1)">
|
||||
<div class="-mx-2">
|
||||
<Grid :data="elementPropertyList">
|
||||
<template #action="{ row, rowIndex }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openAttributesForm(row, rowIndex)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeAttributes(row, rowIndex)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
<div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
|
||||
<Button
|
||||
class="flex flex-1 items-center justify-center"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openAttributesForm(null, -1)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:plus" />
|
||||
</template>
|
||||
|
|
@ -199,24 +220,28 @@ watch(
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model:open="propertyFormModelVisible"
|
||||
title="属性配置"
|
||||
:width="600"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<Form :model="propertyForm" ref="attributeFormRef">
|
||||
<FormItem label="属性名：" name="name">
|
||||
<FieldModal class="w-3/5">
|
||||
<Form
|
||||
:model="propertyForm"
|
||||
ref="attributeFormRef"
|
||||
:label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 17 }"
|
||||
>
|
||||
<FormItem
|
||||
label="属性名："
|
||||
name="name"
|
||||
:rules="[{ required: true, message: '请输入属性名' }]"
|
||||
>
|
||||
<Input v-model:value="propertyForm.name" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem label="属性值：" name="value">
|
||||
<FormItem
|
||||
label="属性值："
|
||||
name="value"
|
||||
:rules="[{ required: true, message: '请输入属性值' }]"
|
||||
>
|
||||
<Input v-model:value="propertyForm.value" allow-clear />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<template #footer>
|
||||
<Button @click="propertyFormModelVisible = false">取 消</Button>
|
||||
<Button type="primary" @click="saveAttribute">确 定</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</FieldModal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { confirm, useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
|
|
@ -10,17 +11,16 @@ import {
|
|||
FormItem,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Table,
|
||||
TableColumn,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
|
||||
defineOptions({ name: 'SignalAndMassage' });
|
||||
const signalList = ref<any[]>([]);
|
||||
const messageList = ref<any[]>([]);
|
||||
const dialogVisible = ref(false);
|
||||
const modelType = ref('');
|
||||
const modelObjectForm = ref<any>({});
|
||||
const formRef = ref();
|
||||
const rootElements = ref();
|
||||
const messageIdMap = ref();
|
||||
const signalIdMap = ref();
|
||||
|
|
@ -75,17 +75,24 @@ const openModel = (type: any) => {
|
|||
id: generateStandardId(type),
|
||||
name: '',
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
modelModalApi.open();
|
||||
};
|
||||
|
||||
const openEditModel = (type: any, row: any, index: number) => {
|
||||
modelType.value = type;
|
||||
editingIndex.value = index;
|
||||
modelObjectForm.value = { ...row };
|
||||
dialogVisible.value = true;
|
||||
modelModalApi.open();
|
||||
};
|
||||
|
||||
const addNewObject = () => {
|
||||
const addNewObject = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
// 校验未通过，直接返回
|
||||
return;
|
||||
}
|
||||
|
||||
if (modelType.value === 'message') {
|
||||
// 编辑模式
|
||||
if (editingIndex.value === -1) {
|
||||
|
|
@ -135,144 +142,202 @@ const addNewObject = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
dialogVisible.value = false;
|
||||
modelModalApi.close();
|
||||
initDataList();
|
||||
};
|
||||
|
||||
// 补充"编辑"、"移除"功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270
|
||||
const removeObject = (type: any, row: any) => {
|
||||
Modal.confirm({
|
||||
confirm({
|
||||
title: '提示',
|
||||
content: `确认移除该${type === 'message' ? '消息' : '信号'}吗？`,
|
||||
okText: '确 认',
|
||||
cancelText: '取 消',
|
||||
onOk() {
|
||||
// 从 rootElements 中移除
|
||||
const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
|
||||
const elementIndex = rootElements.value.findIndex(
|
||||
(el: any) => el.$type === targetType && el.id === row.id,
|
||||
);
|
||||
if (elementIndex !== -1) {
|
||||
rootElements.value.splice(elementIndex, 1);
|
||||
}
|
||||
// 刷新列表
|
||||
initDataList();
|
||||
message.success('移除成功');
|
||||
},
|
||||
onCancel() {
|
||||
// console.info('操作取消');
|
||||
},
|
||||
}).then(() => {
|
||||
// 从 rootElements 中移除
|
||||
const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
|
||||
const elementIndex = rootElements.value.findIndex(
|
||||
(el: any) => el.$type === targetType && el.id === row.id,
|
||||
);
|
||||
if (elementIndex !== -1) {
|
||||
rootElements.value.splice(elementIndex, 1);
|
||||
}
|
||||
// 刷新列表
|
||||
initDataList();
|
||||
message.success('移除成功');
|
||||
});
|
||||
};
|
||||
|
||||
const [MessageGrid, messageGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'id', title: '消息ID', minWidth: 120 },
|
||||
{ field: 'name', title: '消息名称', minWidth: 100 },
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
slots: { default: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
height: 'auto',
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [SignalGrid, signalGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: [
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'id', title: '信号ID', minWidth: 120 },
|
||||
{ field: 'name', title: '信号名称', minWidth: 100 },
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
slots: { default: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
height: 'auto',
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [ModelModal, modelModalApi] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
onConfirm: addNewObject,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initDataList();
|
||||
});
|
||||
|
||||
watch(
|
||||
messageList,
|
||||
(val) => {
|
||||
messageGridApi.setGridOptions({ data: val });
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
signalList,
|
||||
(val) => {
|
||||
signalGridApi.setGridOptions({ data: val });
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="panel-tab__content--title">
|
||||
<div class="-mx-2">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
|
||||
消息列表
|
||||
</span>
|
||||
<Button type="primary" title="创建新消息" @click="openModel('message')">
|
||||
<Button
|
||||
class="flex items-center"
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openModel('message')"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:plus" />
|
||||
</template>
|
||||
创建新消息
|
||||
</Button>
|
||||
</div>
|
||||
<Table :data-source="messageList" size="small" bordered>
|
||||
<TableColumn title="序号" width="60px">
|
||||
<template #default="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
</TableColumn>
|
||||
<TableColumn title="消息ID" data-index="id" />
|
||||
<TableColumn title="消息名称" data-index="name" />
|
||||
<TableColumn title="操作" width="110px">
|
||||
<template #default="{ record, index }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openEditModel('message', record, index)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeObject('message', record)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</TableColumn>
|
||||
</Table>
|
||||
<div class="panel-tab__content--title mt-2 border-t border-gray-200 pt-2">
|
||||
<MessageGrid :data="messageList">
|
||||
<template #action="{ row, rowIndex }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openEditModel('message', row, rowIndex)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeObject('message', row)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</MessageGrid>
|
||||
<div
|
||||
class="mb-2 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
|
||||
信号列表
|
||||
</span>
|
||||
<Button type="primary" title="创建新信号" @click="openModel('signal')">
|
||||
<Button
|
||||
class="flex items-center"
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openModel('signal')"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="ep:plus" />
|
||||
</template>
|
||||
创建新信号
|
||||
</Button>
|
||||
</div>
|
||||
<Table :data-source="signalList" size="small" bordered>
|
||||
<TableColumn title="序号" width="60px">
|
||||
<template #default="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
</TableColumn>
|
||||
<TableColumn title="信号ID" data-index="id" />
|
||||
<TableColumn title="信号名称" data-index="name" />
|
||||
<TableColumn title="操作" width="110px">
|
||||
<template #default="{ record, index }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openEditModel('signal', record, index)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeObject('signal', record)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</TableColumn>
|
||||
</Table>
|
||||
<SignalGrid :data="signalList">
|
||||
<template #action="{ row, rowIndex }">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="openEditModel('signal', row, rowIndex)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Divider type="vertical" />
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
@click="removeObject('signal', row)"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</template>
|
||||
</SignalGrid>
|
||||
|
||||
<Modal
|
||||
v-model:open="dialogVisible"
|
||||
:title="modelConfig.title"
|
||||
:mask-closable="false"
|
||||
width="400px"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<Form :model="modelObjectForm">
|
||||
<FormItem :label="modelConfig.idLabel">
|
||||
<ModelModal :title="modelConfig.title" class="w-3/5">
|
||||
<Form
|
||||
:model="modelObjectForm"
|
||||
ref="formRef"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
>
|
||||
<FormItem
|
||||
:label="modelConfig.idLabel"
|
||||
name="id"
|
||||
:rules="[{ required: true, message: '请输入 ID' }]"
|
||||
>
|
||||
<Input v-model:value="modelObjectForm.id" allow-clear />
|
||||
</FormItem>
|
||||
<FormItem :label="modelConfig.nameLabel">
|
||||
<Input v-model:value="modelObjectForm.name" allow-clear />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<template #footer>
|
||||
<Button @click="dialogVisible = false">取 消</Button>
|
||||
<Button type="primary" @click="addNewObject">保 存</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</ModelModal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@ import {
|
|||
Tooltip,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { DeptSelectModal, UserSelectModal } from '#/components/select-modal';
|
||||
import { ImageUpload } from '#/components/upload';
|
||||
import { DeptSelectModal } from '#/views/system/dept/components';
|
||||
import { UserSelectModal } from '#/views/system/user/components';
|
||||
|
||||
const props = defineProps({
|
||||
categoryList: {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { formatDateTime, isEmpty } from '@vben/utils';
|
|||
|
||||
import { Avatar, Button, Image, Timeline, Tooltip } from 'ant-design-vue';
|
||||
|
||||
import { UserSelectModal } from '#/components/select-modal';
|
||||
import { UserSelectModal } from '#/views/system/user/components';
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceTimeline' });
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
|
||||
/** 选择监听器弹窗的列表字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{ field: 'name', title: '名字', minWidth: 120 },
|
||||
{
|
||||
field: 'type',
|
||||
title: '类型',
|
||||
minWidth: 200,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
|
||||
},
|
||||
},
|
||||
{ field: 'event', title: '事件', minWidth: 200 },
|
||||
{
|
||||
field: 'valueType',
|
||||
title: '值类型',
|
||||
minWidth: 200,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE },
|
||||
},
|
||||
},
|
||||
{ field: 'value', title: '值', minWidth: 150 },
|
||||
{
|
||||
title: '操作',
|
||||
width: 100,
|
||||
slots: { default: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeGridPropTypes } from '#/adapter/vxe-table';
|
||||
import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { CommonStatusEnum } from '@vben/constants';
|
||||
|
||||
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getProcessListenerPage } from '#/api/bpm/processListener';
|
||||
|
||||
import { useGridColumns } from './data';
|
||||
|
||||
defineOptions({ name: 'ProcessListenerSelectModal' });
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [listener: BpmProcessListenerApi.ProcessListener];
|
||||
}>();
|
||||
|
||||
// 查询参数
|
||||
const queryParams = ref({
|
||||
type: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
});
|
||||
|
||||
// 配置 VxeGrid
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
showOverflow: true,
|
||||
minHeight: 300,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
return await getProcessListenerPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
type: queryParams.value.type,
|
||||
status: queryParams.value.status,
|
||||
});
|
||||
},
|
||||
},
|
||||
} as VxeGridPropTypes.ProxyConfig,
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 配置 Modal
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
showConfirmButton: false,
|
||||
onOpenChange: async (isOpen: boolean) => {
|
||||
if (!isOpen) {
|
||||
queryParams.value.type = '';
|
||||
return;
|
||||
}
|
||||
const data = modalApi.getData<{ type: string }>();
|
||||
if (data?.type) {
|
||||
queryParams.value.type = data.type;
|
||||
}
|
||||
},
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
// 选择监听器
|
||||
function handleSelect(row: BpmProcessListenerApi.ProcessListener) {
|
||||
emit('select', row);
|
||||
modalApi.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-4/5" title="请选择监听器">
|
||||
<Grid>
|
||||
<template #action="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '选择',
|
||||
type: 'link',
|
||||
icon: 'lucide:pointer',
|
||||
onClick: handleSelect.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
// TODO @芋艿：是否有更好的组织形式？！
|
||||
<script lang="ts" setup>
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
|
|
@ -1,2 +1 @@
|
|||
export { default as DeptSelectModal } from './dept-select-modal.vue';
|
||||
export { default as UserSelectModal } from './user-select-modal.vue';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as UserSelectModal } from './user-select-modal.vue';
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
// TODO @芋艿：是否有更好的组织形式？！
|
||||
import type { Key } from 'ant-design-vue/es/table/interface';
|
||||
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
Loading…
Reference in New Issue