feat: 流程设计- Simple 模型设计 20%

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

@@ -65,7 +65,6 @@ const rules: Record<string, Rule[]> = {
   category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  // TODO 这个的校验好像没有起作用
   managerUserIds: [
     { required: true, message: '流程管理员不能为空', trigger: 'blur' },
   ],
@@ -282,10 +281,12 @@ defineExpose({ validate });
     </Form.Item>
     <Form.Item label="流程类型" name="type" class="mb-5">
       <Radio.Group v-model:value="modelData.type">
+        <!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
         <Radio
           v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
           :key="dict.value"
           :value="dict.value"
+          :disabled="dict.value === 10"
         >
           {{ dict.label }}
         </Radio>

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

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { computed, inject, nextTick } from 'vue';
+
+import { BpmModelType } from '#/utils';
+
+// TODO BPM 流程模型设计器 BpmModelEditor 待整合
+import SimpleModelDesign from './simple-model-design.vue';
+
+// 创建本地数据副本
+const modelData = defineModel<any>();
+
+const processData = inject('processData') as Ref;
+
+/** 表单校验 */
+const validate = async () => {
+  // 获取最新的流程数据
+  if (!processData.value) {
+    throw new Error('请设计流程');
+  }
+  return true;
+};
+/** 处理设计器保存成功 */
+const handleDesignSuccess = async (data?: any) => {
+  if (data) {
+    // 创建新的对象以触发响应式更新
+    const newModelData = {
+      ...modelData.value,
+      bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
+      simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
+    };
+    // 使用emit更新父组件的数据
+    await nextTick();
+    // 更新表单的模型数据部分
+    modelData.value = newModelData;
+  }
+};
+
+/** 是否显示设计器 */
+const showDesigner = computed(() => {
+  return Boolean(modelData.value?.key && modelData.value?.name);
+});
+defineExpose({
+  validate,
+});
+</script>
+<template>
+  <div class="h-full">
+    <!-- BPMN设计器 -->
+    <template v-if="modelData.type === BpmModelType.BPMN">
+      <!-- TODO BPMN 流程设计器 -->
+    </template>
+    <!-- Simple设计器 -->
+    <template v-else>
+      <SimpleModelDesign
+        v-if="showDesigner"
+        :model-id="modelData.id"
+        :model-key="modelData.key"
+        :model-name="modelData.name"
+        :start-user-ids="modelData.startUserIds"
+        :start-dept-ids="modelData.startDeptIds"
+        @success="handleDesignSuccess"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { SimpleProcessDesigner } from '#/components/simple-process-design';
+
+defineOptions({ name: 'SimpleModelDesign' });
+
+defineProps<{
+  modelId?: string;
+  modelKey?: string;
+  modelName?: string;
+  startDeptIds?: number[];
+  startUserIds?: number[];
+}>();
+
+const emit = defineEmits(['success']);
+const designerRef = ref();
+
+// 修改成功回调
+const handleSuccess = (data?: any) => {
+  if (data) {
+    emit('success', data);
+  }
+};
+</script>
+<template>
+  <ContentWrap :body-style="{ padding: '20px 16px' }">
+    <SimpleProcessDesigner
+      :model-id="modelId"
+      :model-key="modelKey"
+      :model-name="modelName"
+      @success="handleSuccess"
+      :start-user-ids="startUserIds"
+      :start-dept-ids="startDeptIds"
+      ref="designerRef"
+    />
+  </ContentWrap>
+</template>
+<style lang="scss" scoped></style>