feat: [bpm][antd] todo 修改

apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue

@@ -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' });

apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue

@@ -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>

apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts

@@ -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 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
  */

apps/web-antd/src/views/bpm/components/simple-process-design/index.ts

@@ -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';

apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue

@@ -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"

apps/web-antd/src/views/bpm/processInstance/report/index.vue

@@ -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';