aiotagro/admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: 重构 bpmnProcessDesigner 组件 ele => antd

Browse Source
This commit is contained in:
puhui999
2025-09-10 11:30:08 +08:00
parent b913ece251
commit f17e4fdc58
4 changed files with 447 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
View File

@@ -1,24 +1,31 @@
<template>
<div class="panel-tab__content">
<component :is="customConfigComponent" v-bind="$props" />
</div>
</template>
<script lang="ts" setup>
import { defineOptions, defineProps, ref, watch } from 'vue';
import { CustomConfigMap } from './data';
defineOptions({ name: 'ElementCustomConfig' });
const props = defineProps({
id: String,
type: String,
id: {
type: String,
default: '',
},
type: {
type: String,
default: '',
},
businessObject: {
type: Object,
default: () => {},
type: Object as () => BusinessObject,
default: () => ({}),
},
});
const bpmnInstances = () => (window as any)?.bpmnInstances;
interface BusinessObject {
eventDefinitions?: Array<{ $type: string }>;
[key: string]: any;
}
// const bpmnInstances = () => (window as any)?.bpmnInstances;
const customConfigComponent = ref<any>(null);
watch(
@@ -30,11 +37,17 @@ watch(
val +=
props.businessObject.eventDefinitions[0]?.$type.split(':')[1] || '';
}
customConfigComponent.value = CustomConfigMap[val]?.componet;
customConfigComponent.value = (CustomConfigMap as any)[val]?.component;
}
},
{ immediate: true },
);
</script>
<template>
<div class="panel-tab__content">
<component :is="customConfigComponent" v-bind="$props" />
</div>
</template>
<style lang="scss" scoped></style>

4
apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/data.ts
View File

@@ -4,10 +4,10 @@ import UserTaskCustomConfig from './components/UserTaskCustomConfig.vue';
export const CustomConfigMap = {
UserTask: {
name: '用户任务',
componet: UserTaskCustomConfig,
component: UserTaskCustomConfig,
},
BoundaryEventTimerEventDefinition: {
name: '定时边界事件(非中断)',
componet: BoundaryEventTimer,
component: BoundaryEventTimer,
},
};

216
apps/web-antd/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
View File

@@ -1,98 +1,28 @@
<template>
<div class="panel-tab__content">
<el-form :model="flowConditionForm" label-width="90px" size="small">
<el-form-item label="流转类型">
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
<el-option label="普通流转路径" value="normal" />
<el-option label="默认流转路径" value="default" />
<el-option label="条件流转路径" value="condition" />
</el-select>
</el-form-item>
<el-form-item
label="条件格式"
v-if="flowConditionForm.type === 'condition'"
key="condition"
>
<el-select v-model="flowConditionForm.conditionType">
<el-option label="表达式" value="expression" />
<el-option label="脚本" value="script" />
</el-select>
</el-form-item>
<el-form-item
label="表达式"
v-if="
flowConditionForm.conditionType &&
flowConditionForm.conditionType === 'expression'
"
key="express"
>
<el-input
v-model="flowConditionForm.body"
style="width: 192px"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
<template
v-if="
flowConditionForm.conditionType &&
flowConditionForm.conditionType === 'script'
"
>
<el-form-item label="脚本语言" key="language">
<el-input
v-model="flowConditionForm.language"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
<el-form-item label="脚本类型" key="scriptType">
<el-select v-model="flowConditionForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
label="脚本"
v-if="flowConditionForm.scriptType === 'inlineScript'"
key="body"
>
<el-input
v-model="flowConditionForm.body"
type="textarea"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
<el-form-item
label="资源地址"
v-if="flowConditionForm.scriptType === 'externalScript'"
key="resource"
>
<el-input
v-model="flowConditionForm.resource"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
</template>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
import { Form, Input, Select } from 'ant-design-vue';
defineOptions({ name: 'FlowCondition' });
const props = defineProps({
businessObject: Object,
type: String,
businessObject: {
type: Object,
default: () => ({}),
},
type: {
type: String,
default: '',
},
});
const flowConditionForm = ref<any>({});
const bpmnElement = ref();
const bpmnElementSource = ref();
const bpmnElementSourceRef = ref();
const flowConditionRef = ref();
const bpmnInstances = () => (window as any)?.bpmnInstances;
const resetFlowCondition = () => {
bpmnElement.value = bpmnInstances().bpmnElement;
bpmnElementSource.value = bpmnElement.value.source;
@@ -105,10 +35,7 @@ const resetFlowCondition = () => {
bpmnElementSourceRef.value.default.id === bpmnElement.value.id
) {
flowConditionForm.value = { type: 'default' };
} else if (!bpmnElement.value.businessObject.conditionExpression) {
// 普通
flowConditionForm.value = { type: 'normal' };
} else {
} else if (bpmnElement.value.businessObject.conditionExpression) {
// 带条件
const conditionExpression =
bpmnElement.value.businessObject.conditionExpression;
@@ -117,23 +44,27 @@ const resetFlowCondition = () => {
if (flowConditionForm.value.resource) {
// this.$set(this.flowConditionForm, "conditionType", "script");
// this.$set(this.flowConditionForm, "scriptType", "externalScript");
flowConditionForm.value['conditionType'] = 'script';
flowConditionForm.value['scriptType'] = 'externalScript';
flowConditionForm.value.conditionType = 'script';
flowConditionForm.value.scriptType = 'externalScript';
return;
}
if (conditionExpression.language) {
// this.$set(this.flowConditionForm, "conditionType", "script");
// this.$set(this.flowConditionForm, "scriptType", "inlineScript");
flowConditionForm.value['conditionType'] = 'script';
flowConditionForm.value['scriptType'] = 'inlineScript';
flowConditionForm.value.conditionType = 'script';
flowConditionForm.value.scriptType = 'inlineScript';
return;
}
// this.$set(this.flowConditionForm, "conditionType", "expression");
flowConditionForm.value['conditionType'] = 'expression';
flowConditionForm.value.conditionType = 'expression';
} else {
// 普通
flowConditionForm.value = { type: 'normal' };
}
};
const updateFlowType = (flowType) => {
const updateFlowType = (flowType: any) => {
// 正常条件类
if (flowType === 'condition') {
flowConditionRef.value = bpmnInstances().moddle.create(
@@ -167,8 +98,9 @@ const updateFlowType = (flowType) => {
conditionExpression: null,
});
};
const updateFlowCondition = () => {
let { conditionType, scriptType, body, resource, language } =
const { conditionType, scriptType, body, resource, language } =
flowConditionForm.value;
let condition;
if (conditionType === 'expression') {
@@ -182,10 +114,10 @@ const updateFlowCondition = () => {
language,
});
// this.$set(this.flowConditionForm, "resource", "");
flowConditionForm.value['resource'] = '';
flowConditionForm.value.resource = '';
} else {
// this.$set(this.flowConditionForm, "body", "");
flowConditionForm.value['body'] = '';
flowConditionForm.value.body = '';
condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
resource,
language,
@@ -205,8 +137,8 @@ onBeforeUnmount(() => {
watch(
() => props.businessObject,
(val) => {
console.log(val, 'val');
(_) => {
// console.log(val, 'val');
nextTick(() => {
resetFlowCondition();
});
@@ -216,3 +148,89 @@ watch(
},
);
</script>
<template>
<div class="panel-tab__content">
<Form
:model="flowConditionForm"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<Form.Item label="流转类型">
<Select v-model:value="flowConditionForm.type" @change="updateFlowType">
<Select.Option value="normal">普通流转路径</Select.Option>
<Select.Option value="default">默认流转路径</Select.Option>
<Select.Option value="condition">条件流转路径</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="条件格式"
v-if="flowConditionForm.type === 'condition'"
key="condition"
>
<Select v-model:value="flowConditionForm.conditionType">
<Select.Option value="expression">表达式</Select.Option>
<Select.Option value="script">脚本</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="表达式"
v-if="
flowConditionForm.conditionType &&
flowConditionForm.conditionType === 'expression'
"
key="express"
>
<Input
v-model:value="flowConditionForm.body"
style="width: 192px"
allow-clear
@change="updateFlowCondition"
/>
</Form.Item>
<template
v-if="
flowConditionForm.conditionType &&
flowConditionForm.conditionType === 'script'
"
>
<Form.Item label="脚本语言" key="language">
<Input
v-model:value="flowConditionForm.language"
allow-clear
@change="updateFlowCondition"
/>
</Form.Item>
<Form.Item label="脚本类型" key="scriptType">
<Select v-model:value="flowConditionForm.scriptType">
<Select.Option value="inlineScript">内联脚本</Select.Option>
<Select.Option value="externalScript">外部脚本</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="脚本"
v-if="flowConditionForm.scriptType === 'inlineScript'"
key="body"
>
<Input
v-model:value="flowConditionForm.body"
:autosize="{ minRows: 2, maxRows: 6 }"
allow-clear
@change="updateFlowCondition"
/>
</Form.Item>
<Form.Item
label="资源地址"
v-if="flowConditionForm.scriptType === 'externalScript'"
key="resource"
>
<Input
v-model:value="flowConditionForm.resource"
allow-clear
@change="updateFlowCondition"
/>
</Form.Item>
</template>
</Form>
</div>
</template>

594
apps/web-antd/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
View File

@@ -1,248 +1,25 @@
<template>
<div class="panel-tab__content">
<el-form label-width="80px">
<el-form-item label="流程表单">
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
<el-select v-model="formKey" clearable @change="updateElementFormKey">
<el-option
v-for="form in formList"
:key="form.id"
:label="form.name"
:value="form.id"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="业务标识">-->
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
<!-- <el-option label="无" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form>
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
<!-- <el-table-column label="序号" type="index" width="50px" />-->
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column-->
<!-- label="字段类型"-->
<!-- prop="type"-->
<!-- min-width="80px"-->
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="默认值"-->
<!-- prop="defaultValue"-->
<!-- min-width="80px"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeField(scope, scope.$index)"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
<!-- </div>-->
<!--字段配置侧边栏-->
<!-- <el-drawer-->
<!-- v-model="fieldModelVisible"-->
<!-- title="字段配置"-->
<!-- :size="`${width}px`"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="formFieldForm" label-width="90px">-->
<!-- <el-form-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型">-->
<!-- <el-select-->
<!-- v-model="formFieldForm.typeType"-->
<!-- placeholder="请选择字段类型"-->
<!-- clearable-->
<!-- @change="changeFieldTypeType"-->
<!-- >-->
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <el-input v-model="formFieldForm.type" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称">-->
<!-- <el-input v-model="formFieldForm.label" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="默认值">-->
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
<!-- >添加枚举值</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
<!-- >添加约束</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
<!-- >添加属性</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button>取 消</el-button>-->
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
<!-- </div>-->
<!-- </el-drawer>-->
<!-- <el-dialog-->
<!-- v-model="fieldOptionModelVisible"-->
<!-- :title="optionModelTitle"-->
<!-- width="600px"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <template #footer>-->
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
<!-- </template>-->
<!-- </el-dialog>-->
</div>
</template>
<script lang="ts" setup>
import * as FormApi from '@/api/bpm/form';
import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
import { Form, FormItem, Select } from 'ant-design-vue';
import { getFormSimpleList } from '#/api/bpm/form';
defineOptions({ name: 'ElementForm' });
const props = defineProps({
id: String,
type: String,
id: {
type: String,
default: '',
},
type: {
type: String,
default: '',
},
});
const prefix = inject('prefix');
const width = inject('width');
const formKey = ref(undefined);
const formKey = ref<number | string | undefined>(undefined);
const businessKey = ref('');
const optionModelTitle = ref('');
const fieldList = ref<any[]>([]);
@@ -282,21 +59,20 @@ const resetFormList = () => {
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
// 获取元素表单配置 或者 创建新的表单配置
formData.value =
elExtensionElements.value.values.filter(
(ex) => ex.$type === `${prefix}:FormData`,
)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] });
elExtensionElements.value.values.find(
(ex: any) => ex.$type === `${prefix}:FormData`,
) || bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] });
// 业务标识 businessKey， 绑定在 formData 中
businessKey.value = formData.value.businessKey;
// 保留剩余扩展元素，便于后面更新该元素对应属性
otherExtensions.value = elExtensionElements.value.values.filter(
(ex) => ex.$type !== `${prefix}:FormData`,
(ex: any) => ex.$type !== `${prefix}:FormData`,
);
// 复制原始值，填充表格
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []));
fieldList.value = structuredClone(formData.value.fields || []);
// 更新元素扩展属性，避免后续报错
updateElementExtensions();
@@ -306,7 +82,7 @@ const updateElementFormKey = () => {
formKey: formKey.value,
});
};
const updateElementBusinessKey = () => {
const _updateElementBusinessKey = () => {
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnELement.value),
formData.value,
@@ -316,36 +92,14 @@ const updateElementBusinessKey = () => {
);
};
// 根据类型调整字段type
const changeFieldTypeType = (type) => {
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
formFieldForm.value['type'] = type === 'custom' ? '' : type;
const _changeFieldTypeType = (type: any) => {
formFieldForm.value.type = type === 'custom' ? '' : type;
};
// 打开字段详情侧边栏
const openFieldForm = (field, index) => {
const _openFieldForm = (field: any, index: any) => {
formFieldIndex.value = index;
if (index !== -1) {
const FieldObject = formData.value.fields[index];
formFieldForm.value = JSON.parse(JSON.stringify(field));
// 设置自定义类型
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
formFieldForm.value['typeType'] = !fieldType.value[field.type]
? 'custom'
: field.type;
// 初始化枚举值列表
field.type === 'enum' &&
(fieldEnumList.value = JSON.parse(
JSON.stringify(FieldObject?.values || []),
));
// 初始化约束条件列表
fieldConstraintsList.value = JSON.parse(
JSON.stringify(FieldObject?.validation?.constraints || []),
);
// 初始化自定义属性列表
fieldPropertiesList.value = JSON.parse(
JSON.stringify(FieldObject?.properties?.values || []),
);
} else {
if (index === -1) {
formFieldForm.value = {};
// 初始化枚举值列表
fieldEnumList.value = [];
@@ -353,28 +107,49 @@ const openFieldForm = (field, index) => {
fieldConstraintsList.value = [];
// 初始化自定义属性列表
fieldPropertiesList.value = [];
} else {
const FieldObject = formData.value.fields[index];
formFieldForm.value = structuredClone(field);
// 设置自定义类型
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
formFieldForm.value.typeType = fieldType.value[
field.type as keyof typeof fieldType.value
]
? field.type
: 'custom';
// 初始化枚举值列表
field.type === 'enum' &&
(fieldEnumList.value = structuredClone(FieldObject?.values || []));
// 初始化约束条件列表
fieldConstraintsList.value = structuredClone(
FieldObject?.validation?.constraints || [],
);
// 初始化自定义属性列表
fieldPropertiesList.value = structuredClone(
FieldObject?.properties?.values || [],
);
}
fieldModelVisible.value = true;
};
// 打开字段 某个 配置项 弹窗
const openFieldOptionForm = (option, index, type) => {
const _openFieldOptionForm = (option: any, index: any, type: any) => {
fieldOptionModelVisible.value = true;
fieldOptionType.value = type;
formFieldOptionIndex.value = index;
if (type === 'property') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {};
fieldOptionForm.value = option ? structuredClone(option) : {};
return (optionModelTitle.value = '属性配置');
}
if (type === 'enum') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {};
fieldOptionForm.value = option ? structuredClone(option) : {};
return (optionModelTitle.value = '枚举值配置');
}
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {};
fieldOptionForm.value = option ? structuredClone(option) : {};
return (optionModelTitle.value = '约束条件配置');
};
// 保存字段 某个 配置项
const saveFieldOption = () => {
const _saveFieldOption = () => {
if (formFieldOptionIndex.value === -1) {
if (fieldOptionType.value === 'property') {
fieldPropertiesList.value.push(fieldOptionForm.value);
@@ -409,7 +184,7 @@ const saveFieldOption = () => {
fieldOptionForm.value = {};
};
// 保存字段配置
const saveField = () => {
const _saveField = () => {
const { id, type, label, defaultValue, datePattern } = formFieldForm.value;
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, {
id,
@@ -419,8 +194,8 @@ const saveField = () => {
defaultValue && (Field.defaultValue = defaultValue);
datePattern && (Field.datePattern = datePattern);
// 构建属性
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
if (fieldPropertiesList.value && fieldPropertiesList.value.length > 0) {
const fieldPropertyList = fieldPropertiesList.value.map((fp: any) => {
return bpmnInstances().moddle.create(`${prefix}:Property`, {
id: fp.id,
value: fp.value,
@@ -431,8 +206,8 @@ const saveField = () => {
});
}
// 构建校验规则
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
if (fieldConstraintsList.value && fieldConstraintsList.value.length > 0) {
const fieldConstraintList = fieldConstraintsList.value.map((fc: any) => {
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
name: fc.name,
config: fc.config,
@@ -443,8 +218,8 @@ const saveField = () => {
});
}
// 构建枚举值
if (fieldEnumList.value && fieldEnumList.value.length) {
Field.values = fieldEnumList.value.map((fe) => {
if (fieldEnumList.value && fieldEnumList.value.length > 0) {
Field.values = fieldEnumList.value.map((fe: any) => {
return bpmnInstances().moddle.create(`${prefix}:Value`, {
name: fe.name,
id: fe.id,
@@ -464,7 +239,7 @@ const saveField = () => {
};
// 移除某个 字段的 配置项
const removeFieldOptionItem = (option, index, type) => {
const _removeFieldOptionItem = (_option: any, index: any, type: any) => {
// console.log(option, 'option')
if (type === 'property') {
fieldPropertiesList.value.splice(index, 1);
@@ -477,8 +252,8 @@ const removeFieldOptionItem = (option, index, type) => {
fieldConstraintsList.value.splice(index, 1);
};
// 移除 字段
const removeField = (field, index) => {
console.log(field, 'field');
const _removeField = (field: any, index: any) => {
console.warn(field, 'field');
fieldList.value.splice(index, 1);
formData.value.fields.splice(index, 1);
updateElementExtensions();
@@ -489,7 +264,7 @@ const updateElementExtensions = () => {
const newElExtensionElements = bpmnInstances().moddle.create(
`bpmn:ExtensionElements`,
{
values: otherExtensions.value.concat(formData.value),
values: [...otherExtensions.value, formData.value],
},
);
// 更新到元素上
@@ -498,17 +273,26 @@ const updateElementExtensions = () => {
});
};
const formList = ref([]); // 流程表单的下拉框的数据
const formList = ref<any[]>([]); // 流程表单的下拉框的数据
const formOptions = computed(() => {
return formList.value.map((form: any) => ({
value: form.id,
label: form.name,
}));
});
onMounted(async () => {
formList.value = await FormApi.getFormSimpleList();
formKey.value = parseInt(formKey.value);
formList.value = await getFormSimpleList();
formKey.value = formKey.value
? Number.parseInt(formKey.value as string)
: undefined;
});
watch(
() => props.id,
(val) => {
(val: any) => {
val &&
val.length &&
val.length > 0 &&
nextTick(() => {
resetFormList();
});
@@ -516,3 +300,231 @@ watch(
{ immediate: true },
);
</script>
<template>
<div class="panel-tab__content">
<Form :label-col="{ style: { width: '80px' } }">
<FormItem label="流程表单">
<!-- <Input v-model:value="formKey" @change="updateElementFormKey" />-->
<Select
v-model:value="formKey"
allow-clear
@change="updateElementFormKey"
:options="formOptions"
/>
</FormItem>
<!-- <FormItem label="业务标识">-->
<!-- <Select v-model:value="businessKey" @change="updateElementBusinessKey">-->
<!-- <SelectOption v-for="i in fieldList" :key="i.id" :value="i.id">{{ i.label }}</SelectOption>-->
<!-- <SelectOption value="">无</SelectOption>-->
<!-- </Select>-->
<!-- </FormItem>-->
</Form>
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <Divider><Icon icon="ep:coin" /> 表单字段</Divider>-->
<!-- <Table :data-source="fieldList" :scroll="{ y: 240 }" bordered>-->
<!-- <TableColumn title="序号" type="index" width="50px" />-->
<!-- <TableColumn title="字段名称" dataIndex="label" width="80px" :ellipsis="true" />-->
<!-- <TableColumn-->
<!-- title="字段类型"-->
<!-- dataIndex="type"-->
<!-- width="80px"-->
<!-- :customRender="({ text }) => fieldType[text] || text"-->
<!-- :ellipsis="true"-->
<!-- />-->
<!-- <TableColumn-->
<!-- title="默认值"-->
<!-- dataIndex="defaultValue"-->
<!-- width="80px"-->
<!-- :ellipsis="true"-->
<!-- />-->
<!-- <TableColumn title="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <Button type="link" @click="openFieldForm(scope, scope.$index)">-->
<!-- 编辑-->
<!-- </Button>-->
<!-- <Divider type="vertical" />-->
<!-- <Button-->
<!-- type="link"-->
<!-- danger-->
<!-- @click="removeField(scope, scope.$index)"-->
<!-- >-->
<!-- 移除-->
<!-- </Button>-->
<!-- </template>-->
<!-- </TableColumn>-->
<!-- </Table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <Button type="primary" @click="openFieldForm(null, -1)">添加字段</Button>-->
<!-- </div>-->
<!--字段配置侧边栏-->
<!-- <Drawer-->
<!-- v-model:open="fieldModelVisible"-->
<!-- title="字段配置"-->
<!-- :width="`${width}px`"-->
<!-- destroyOnClose-->
<!-- >-->
<!-- <Form :model="formFieldForm" :label-col="{ style: { width: '90px' } }">-->
<!-- <FormItem label="字段ID">-->
<!-- <Input v-model:value="formFieldForm.id" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="类型">-->
<!-- <Select-->
<!-- v-model:value="formFieldForm.typeType"-->
<!-- placeholder="请选择字段类型"-->
<!-- allowClear-->
<!-- @change="changeFieldTypeType"-->
<!-- >-->
<!-- <SelectOption v-for="(value, key) of fieldType" :key="key" :value="key">{{ value }}</SelectOption>-->
<!-- </Select>-->
<!-- </FormItem>-->
<!-- <FormItem label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <Input v-model:value="formFieldForm.type" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="名称">-->
<!-- <Input v-model:value="formFieldForm.label" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <Input v-model:value="formFieldForm.datePattern" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="默认值">-->
<!-- <Input v-model:value="formFieldForm.defaultValue" allowClear />-->
<!-- </FormItem>-->
<!-- </Form>-->
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <Divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
<!-- <Button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
<!-- >添加枚举值</Button-->
<!-- >-->
<!-- </p>-->
<!-- <Table :data-source="fieldEnumList" key="enum-table" :scroll="{ y: 240 }" bordered>-->
<!-- <TableColumn title="序号" width="50px" type="index" />-->
<!-- <TableColumn title="枚举值编号" dataIndex="id" width="100px" :ellipsis="true" />-->
<!-- <TableColumn title="枚举值名称" dataIndex="name" width="100px" :ellipsis="true" />-->
<!-- <TableColumn title="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <Button-->
<!-- type="link"-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
<!-- >-->
<!-- 编辑-->
<!-- </Button>-->
<!-- <Divider type="vertical" />-->
<!-- <Button-->
<!-- type="link"-->
<!-- danger-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
<!-- >-->
<!-- 移除-->
<!-- </Button>-->
<!-- </template>-->
<!-- </TableColumn>-->
<!-- </Table>-->
<!-- </template>-->
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <Divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
<!-- <Button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
<!-- >添加约束</Button-->
<!-- >-->
<!-- </p>-->
<!-- <Table :data-source="fieldConstraintsList" key="validation-table" :scroll="{ y: 240 }" bordered>-->
<!-- <TableColumn title="序号" width="50px" type="index" />-->
<!-- <TableColumn title="约束名称" dataIndex="name" width="100px" :ellipsis="true" />-->
<!-- <TableColumn title="约束配置" dataIndex="config" width="100px" :ellipsis="true" />-->
<!-- <TableColumn title="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <Button-->
<!-- type="link"-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
<!-- >-->
<!-- 编辑-->
<!-- </Button>-->
<!-- <Divider type="vertical" />-->
<!-- <Button-->
<!-- type="link"-->
<!-- danger-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
<!-- >-->
<!-- 移除-->
<!-- </Button>-->
<!-- </template>-->
<!-- </TableColumn>-->
<!-- </Table>-->
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <Divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
<!-- <Button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
<!-- >添加属性</Button-->
<!-- >-->
<!-- </p>-->
<!-- <Table :data-source="fieldPropertiesList" key="property-table" :scroll="{ y: 240 }" bordered>-->
<!-- <TableColumn title="序号" width="50px" type="index" />-->
<!-- <TableColumn title="属性编号" dataIndex="id" width="100px" :ellipsis="true" />-->
<!-- <TableColumn title="属性值" dataIndex="value" width="100px" :ellipsis="true" />-->
<!-- <TableColumn title="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <Button-->
<!-- type="link"-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
<!-- >-->
<!-- 编辑-->
<!-- </Button>-->
<!-- <Divider type="vertical" />-->
<!-- <Button-->
<!-- type="link"-->
<!-- danger-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
<!-- >-->
<!-- 移除-->
<!-- </Button>-->
<!-- </template>-->
<!-- </TableColumn>-->
<!-- </Table>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <Button>取 消</Button>-->
<!-- <Button type="primary" @click="saveField">保 存</Button>-->
<!-- </div>-->
<!-- </Drawer>-->
<!-- <Modal-->
<!-- v-model:open="fieldOptionModelVisible"-->
<!-- :title="optionModelTitle"-->
<!-- width="600px"-->
<!-- destroyOnClose-->
<!-- >-->
<!-- <Form :model="fieldOptionForm" :label-col="{ style: { width: '96px' } }">-->
<!-- <FormItem label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<!-- <Input v-model:value="fieldOptionForm.id" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<!-- <Input v-model:value="fieldOptionForm.name" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<!-- <Input v-model:value="fieldOptionForm.config" allowClear />-->
<!-- </FormItem>-->
<!-- <FormItem label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<!-- <Input v-model:value="fieldOptionForm.value" allowClear />-->
<!-- </FormItem>-->
<!-- </Form>-->
<!-- <template #footer>-->
<!-- <Button @click="fieldOptionModelVisible = false">取 消</Button>-->
<!-- <Button type="primary" @click="saveFieldOption">确 定</Button>-->
<!-- </template>-->
<!-- </Modal>-->
</div>
</template>