feat: [bpm][antd] todo 修改
jason
parent
db97d414ec
commit
012412ec22
|
|
@ -29,6 +29,7 @@ import {
|
|||
|
||||
import { getForm } from '#/api/bpm/form';
|
||||
import { getModelList } from '#/api/bpm/model';
|
||||
import { parseFormFields } from '#/components/form-create';
|
||||
|
||||
import {
|
||||
CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE,
|
||||
|
|
@ -42,12 +43,7 @@ import {
|
|||
TIME_UNIT_TYPES,
|
||||
TimeUnitType,
|
||||
} from '../../consts';
|
||||
import {
|
||||
parseFormFields,
|
||||
useFormFields,
|
||||
useNodeName,
|
||||
useWatchNode,
|
||||
} from '../../helpers';
|
||||
import { useFormFields, useNodeName, useWatchNode } from '../../helpers';
|
||||
import { convertTimeUnit } from './utils';
|
||||
|
||||
defineOptions({ name: 'ChildProcessNodeConfig' });
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ import type { ComponentPublicInstance, Ref } from 'vue';
|
|||
import type { ButtonSetting, SimpleFlowNode } from '../../consts';
|
||||
import type { UserTaskFormType } from '../../helpers';
|
||||
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import { computed, nextTick, onMounted, reactive, ref, watchEffect } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||
import {
|
||||
BpmModelFormType,
|
||||
BpmNodeTypeEnum,
|
||||
|
|
@ -39,6 +39,8 @@ import {
|
|||
TypographyText,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { ProcessExpressionSelectModal } from '#/views/bpm/processExpression/components';
|
||||
|
||||
import {
|
||||
APPROVE_METHODS,
|
||||
APPROVE_TYPE,
|
||||
|
|
@ -112,10 +114,20 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
|||
},
|
||||
});
|
||||
|
||||
const [ExpressionSelectModal, expressionSelectModalApi] = useVbenModal({
|
||||
connectedComponent: ProcessExpressionSelectModal,
|
||||
destroyOnClose: true,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
|
||||
// 节点名称配置
|
||||
const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
|
||||
useNodeName(BpmNodeTypeEnum.USER_TASK_NODE);
|
||||
|
||||
watchEffect(() => {
|
||||
void inputRef.value;
|
||||
});
|
||||
|
||||
// 激活的 Tab 标签页
|
||||
const activeTabName = ref('user');
|
||||
|
||||
|
|
@ -218,9 +230,18 @@ function changeCandidateStrategy() {
|
|||
configForm.value.deptLevel = 1;
|
||||
configForm.value.formUser = '';
|
||||
configForm.value.formDept = '';
|
||||
configForm.value.expression = '';
|
||||
configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
|
||||
}
|
||||
|
||||
function openExpressionSelect() {
|
||||
expressionSelectModalApi.open();
|
||||
}
|
||||
|
||||
function handleExpressionSelected(row: any) {
|
||||
configForm.value.expression = row?.expression ?? '';
|
||||
}
|
||||
|
||||
/** 审批方式改变 */
|
||||
function approveMethodChanged() {
|
||||
configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
|
||||
|
|
@ -843,7 +864,6 @@ onMounted(() => {
|
|||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<!-- TODO @jason：后续要支持选择已经存好的表达式 -->
|
||||
<FormItem
|
||||
v-if="
|
||||
configForm.candidateStrategy === CandidateStrategy.EXPRESSION
|
||||
|
|
@ -851,7 +871,15 @@ onMounted(() => {
|
|||
label="流程表达式"
|
||||
name="expression"
|
||||
>
|
||||
<Textarea v-model:value="configForm.expression" allow-clear />
|
||||
<div class="flex gap-2">
|
||||
<Textarea v-model:value="configForm.expression" :rows="2" />
|
||||
<div class="flex flex-col gap-2">
|
||||
<Button type="primary" @click="openExpressionSelect">
|
||||
选择
|
||||
</Button>
|
||||
<Button @click="configForm.expression = ''">清空</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<!-- 多人审批/办理 方式 -->
|
||||
<FormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
|
||||
|
|
@ -1266,4 +1294,6 @@ onMounted(() => {
|
|||
</TabPane>
|
||||
</Tabs>
|
||||
</Drawer>
|
||||
|
||||
<ExpressionSelectModal @select="handleExpressionSelected" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ import {
|
|||
ProcessVariableEnum,
|
||||
} from '@vben/constants';
|
||||
|
||||
import { parseFormFields } from '#/components/form-create';
|
||||
|
||||
import {
|
||||
ApproveMethodType,
|
||||
AssignEmptyHandlerType,
|
||||
|
|
@ -56,49 +58,6 @@ function parseFormCreateFields(formFields?: string[]) {
|
|||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析表单组件的 field, title 等字段（递归，如果组件包含子组件）
|
||||
*
|
||||
* @param rule 组件的生成规则 https://www.form-create.com/v3/guide/rule
|
||||
* @param fields 解析后表单组件字段
|
||||
* @param parentTitle 如果是子表单，子表单的标题，默认为空
|
||||
*/
|
||||
export const parseFormFields = (
|
||||
rule: Record<string, any>,
|
||||
fields: Array<Record<string, any>> = [],
|
||||
parentTitle: string = '',
|
||||
) => {
|
||||
const { type, field, $required, title: tempTitle, children } = rule;
|
||||
if (field && tempTitle) {
|
||||
let title = tempTitle;
|
||||
if (parentTitle) {
|
||||
title = `${parentTitle}.${tempTitle}`;
|
||||
}
|
||||
let required = false;
|
||||
if ($required) {
|
||||
required = true;
|
||||
}
|
||||
fields.push({
|
||||
field,
|
||||
title,
|
||||
type,
|
||||
required,
|
||||
});
|
||||
// TODO 子表单 需要处理子表单字段
|
||||
// if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
|
||||
// // 解析子表单的字段
|
||||
// rule.props.rule.forEach((item) => {
|
||||
// parseFields(item, fieldsPermission, title)
|
||||
// })
|
||||
// }
|
||||
}
|
||||
if (children && Array.isArray(children)) {
|
||||
children.forEach((rule) => {
|
||||
parseFormFields(rule, fields);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -7,5 +7,3 @@ export { default as SimpleProcessDesigner } from './components/simple-process-de
|
|||
export { default as SimpleProcessViewer } from './components/simple-process-viewer.vue';
|
||||
|
||||
export type { SimpleFlowNode } from './consts';
|
||||
|
||||
export { parseFormFields } from './helpers';
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ defineProps<{
|
|||
const emit = defineEmits(['success', 'init-finished']);
|
||||
|
||||
const formFields = ref<string[]>([]); // 表单信息
|
||||
const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
|
||||
const formType = ref(BpmModelFormType.NORMAL); // 表单类型
|
||||
provide('formFields', formFields);
|
||||
provide('formType', formType);
|
||||
|
||||
|
|
@ -40,7 +40,6 @@ const xmlString = inject('processData') as Ref; // 注入流程数据
|
|||
const modelData = inject('modelData') as Ref; // 注入模型数据
|
||||
|
||||
const modeler = shallowRef(); // BPMN Modeler
|
||||
const processDesigner = ref();
|
||||
const controlForm = ref({
|
||||
simulation: true,
|
||||
labelEditing: false,
|
||||
|
|
@ -102,7 +101,6 @@ onBeforeUnmount(() => {
|
|||
:value="xmlString"
|
||||
v-bind="controlForm"
|
||||
keyboard
|
||||
ref="processDesigner"
|
||||
@init-finished="initModeler"
|
||||
:additional-model="controlForm.additionalModel"
|
||||
:model="model"
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@ import {
|
|||
cancelProcessInstanceByAdmin,
|
||||
getProcessInstanceManagerPage,
|
||||
} from '#/api/bpm/processInstance';
|
||||
// TODO @jason：现在 ele 和 antd 使用的 parseFormFields 路径不同；看看以哪个为主。ele 是 import { parseFormFields } from '#/components/form-create';
|
||||
import { parseFormFields } from '#/views/bpm/components/simple-process-design';
|
||||
import { parseFormFields } from '#/components/form-create';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue