!114 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !114 from Jason/dev

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

@@ -29,6 +29,7 @@ import { getSimpleUserList } from '#/api/system/user';
 
 import BasicInfo from './modules/basic-info.vue';
 import FormDesign from './modules/form-design.vue';
+import ProcessDesign from './modules/process-design.vue';
 
 defineOptions({ name: 'BpmModelCreate' });
 
@@ -69,6 +70,8 @@ const userStore = useUserStore();
 const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
 // 表单设计组件引用
 const formDesignRef = ref<InstanceType<typeof FormDesign>>();
+// 流程设计组件引用
+const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
 
 /** 步骤校验函数 */
 const validateBasic = async () => {
@@ -82,7 +85,7 @@ const validateForm = async () => {
 
 /** 流程设计校验 */
 const validateProcess = async () => {
-  // TODO
+  await processDesignRef.value?.validate();
 };
 
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
@@ -102,7 +105,7 @@ const formData: any = ref({
   category: undefined,
   icon: undefined,
   description: '',
-  type: BpmModelType.BPMN,
+  type: BpmModelType.SIMPLE,
   formType: BpmModelFormType.NORMAL,
   formId: '',
   formCustomCreatePath: '',
@@ -190,7 +193,7 @@ const initData = async () => {
   } else {
     // 情况三：新增场景
     formData.value.startUserType = 0; // 全体
-    formData.value.managerUserIds.push(userStore.userInfo?.userId);
+    formData.value.managerUserIds.push(userStore.userInfo?.id);
   }
 
   // 获取表单列表
@@ -352,6 +355,7 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
+    console.warn('handleStepClick', index);
     if (index !== 0) {
       await validateBasic();
     }
@@ -401,7 +405,7 @@ onBeforeUnmount(() => {
   // 清理所有的引用
   basicInfoRef.value = undefined;
   formDesignRef.value = undefined;
-  // processDesignRef.value = null;
+  processDesignRef.value = undefined;
 });
 </script>
 
@@ -486,7 +490,7 @@ onBeforeUnmount(() => {
             />
           </div>
           <!-- 第二步：表单设计  -->
-          <div v-show="currentStep === 1" class="mx-auto w-4/6">
+          <div v-if="currentStep === 1" class="mx-auto w-4/6">
             <FormDesign
               v-model="formData"
               :form-list="formList"
@@ -494,10 +498,15 @@ onBeforeUnmount(() => {
             />
           </div>
 
-          <!-- 第三步：流程设计 TODO -->
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
 
           <!-- 第四步：更多设置 TODO -->
-          <div v-show="currentStep === 3" class="mx-auto w-4/6"></div>
+          <div v-if="currentStep === 3" class="mx-auto w-4/6"></div>
         </div>
       </Card>
     </div>

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>

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -54,35 +54,39 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
     align: 'left' as const,
-    minWidth: 250,
+    ellipsis: true,
+    width: 250,
   },
   {
     title: '可见范围',
     dataIndex: 'startUserIds',
     key: 'startUserIds',
     align: 'center' as const,
-    minWidth: 150,
+    ellipsis: true,
+    width: 150,
   },
   {
     title: '流程类型',
     dataIndex: 'type',
     key: 'type',
     align: 'center' as const,
-    minWidth: 120,
+    ellipsis: true,
+    width: 120,
   },
   {
     title: '表单信息',
     dataIndex: 'formType',
     key: 'formType',
     align: 'center' as const,
-    minWidth: 150,
+    ellipsis: true,
+    width: 150,
   },
   {
     title: '最后发布',
     dataIndex: 'deploymentTime',
     key: 'deploymentTime',
     align: 'center' as const,
-    minWidth: 250,
+    width: 250,
   },
   {
     title: '操作',
@@ -316,6 +320,7 @@ const handleRenameSuccess = () => {
           :columns="columns"
           :pagination="false"
           :custom-row="customRow"
+          :scroll="{ x: '100%' }"
           row-key="id"
         >
           <template #bodyCell="{ column, record }">