Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into dev

2025-11-28 15:51:53 +08:00
parent 1dc2a31f84 8fa541ac95
commit 6214c33c86
29 changed files with 1027 additions and 298 deletions
--- a/apps/web-antd/src/components/form-create/components/use-api-select.tsx
+++ b/apps/web-antd/src/components/form-create/components/use-api-select.tsx
@@ -145,8 +145,8 @@ export function useApiSelect(option: ApiSelectProps) {
            }

            return {
-              label: label,
-              value: value,
+              label,
+              value,
            };
          });
          return;
--- a/apps/web-antd/src/components/select-modal/index.ts
+++ b/apps/web-antd/src/components/select-modal/index.ts
@@ -1,3 +1,2 @@
-// TODO @xingyu：【待讨论】是不是把 user select 放到 user 目录的 components 下，dept select 放到 dept 目录的 components 下
 export { default as DeptSelectModal } from './dept-select-modal.vue';
 export { default as UserSelectModal } from './user-select-modal.vue';
--- a/apps/web-antd/src/components/select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/components/select-modal/user-select-modal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 // TODO @芋艿：是否有更好的组织形式？！
-// TODO @xingyu：你感觉，这个放到每个 system、infra 模块下，然后新建一个 components，表示每个模块，有一些共享的组件？然后，全局只放通用的（无业务含义的），可以哇？
 import type { Key } from 'ant-design-vue/es/table/interface';

 import type { SystemDeptApi } from '#/api/system/dept';
@@ -33,24 +32,23 @@ interface DeptTreeNode {
  name: string;
 }

+interface Props {
+  cancelText?: string;
+  confirmText?: string;
+  multiple?: boolean;
+  title?: string;
+  value?: number[];
+}
+
 defineOptions({ name: 'UserSelectModal' });

-withDefaults(
-  defineProps<{
-    cancelText?: string;
-    confirmText?: string;
-    multiple?: boolean;
-    title?: string;
-    value?: number[];
-  }>(),
-  {
-    title: '选择用户',
-    multiple: true,
-    value: () => [],
-    confirmText: '确定',
-    cancelText: '取消',
-  },
-);
+withDefaults(defineProps<Props>(), {
+  title: '选择用户',
+  multiple: true,
+  value: () => [],
+  confirmText: '确定',
+  cancelText: '取消',
+});

 const emit = defineEmits<{
  cancel: [];
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
@@ -1,4 +1,4 @@
-export default (key, name, type) => {
+function defaultEmpty(key, name, type) {
  if (!type) type = 'camunda';
  const TYPE_TARGET = {
    activiti: 'http://activiti.org/bpmn',
@@ -21,4 +21,6 @@ export default (key, name, type) => {
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
 </bpmn2:definitions>`;
-};
+}
+
+export default defaultEmpty;
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
@@ -1,5 +1,3 @@
-'use strict';
-
 import extension from './extension';

 export default {
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-template-curly-in-string */
 /**
 * This is a sample file that should be replaced with the actual translation.
 *
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable no-unused-vars -->
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';

--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable unused-imports/no-unused-vars -->
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';

@@ -65,6 +66,7 @@ const bpmnElement = ref<any>(null);
 const multiLoopInstance = ref<any>(null);
 declare global {
  interface Window {
+    // @ts-ignore
    bpmnInstances?: () => any;
  }
 }
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
@@ -1,5 +1,8 @@
-const hljs = require('highlight.js/lib/core');
-hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
-hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
+import hljs from 'highlight.js/lib/core';
+import jsonLanguage from 'highlight.js/lib/languages/json';
+import xmlLanguage from 'highlight.js/lib/languages/xml';

-module.exports = hljs;
+hljs.registerLanguage('xml', xmlLanguage);
+hljs.registerLanguage('json', jsonLanguage);
+
+export default hljs;
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
@@ -34,6 +34,7 @@ export default {
  },
  unbind(el) {
    document.removeEventListener('touchstart', el[ctx].documentHandler); // 解绑
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
    delete el[ctx];
  },
 };
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
@@ -33,13 +33,13 @@ function xml2json(xml) {
    }
    return obj;
  } catch (error) {
-    console.log(error.message);
+    console.warn(error.message);
  }
 }

 function xmlObj2json(xml) {
  const xmlObj = xmlStr2XmlObj(xml);
-  console.log(xmlObj);
+  console.warn(xmlObj);
  let jsonObj = {};
  if (xmlObj.childNodes.length > 0) {
    jsonObj = xml2json(xmlObj);
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -135,8 +135,8 @@ function handleDeviceChange(_: any) {

 /**
 * 处理属性变化事件
- * @param propertyInfo.config 属性配置
- * @param propertyInfo.type 属性类型
+ * @param propertyInfo.config - 属性配置
+ * @param propertyInfo.type - 属性类型
 */
 function handlePropertyChange(propertyInfo: { config: any; type: string }) {
  propertyType.value = propertyInfo.type;
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -50,8 +50,8 @@ interface JsonParamsConfig {
 interface Props {
  modelValue: string;
  config: JsonParamsConfig;
-  type: JsonParamsInputType;
-  placeholder: string;
+  type?: JsonParamsInputType;
+  placeholder?: string;
 }

 interface Emits {
--- a/apps/web-antd/src/views/mall/product/comment/data.ts
+++ b/apps/web-antd/src/views/mall/product/comment/data.ts
@@ -25,7 +25,6 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      rules: 'required',
    },
-    // TODO @puhui999：商品的选择：上面 spuId 可以选择了，下面的 skuId 打开后，没商品。
    {
      fieldName: 'skuId',
      label: '商品规格',
--- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
@@ -101,23 +101,13 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      // 重置表单数据
-      // TODO @puhui999：105 到 108 的代码，不需要的呀？（可以测试下）
-      formData.value = {
-        descriptionScores: 5,
-        benefitScores: 5,
-      } as Partial<MallCommentApi.Comment>;
      selectedSku.value = undefined;
      return;
    }
    // 加载数据
    const data = modalApi.getData<MallCommentApi.Comment>();
    if (!data || !data.id) {
-      // TODO @puhui999：115 到 121 的代码，不需要的呀？（可以测试下）
      // 新建模式：重置表单
-      formData.value = {
-        descriptionScores: 5,
-        benefitScores: 5,
-      } as Partial<MallCommentApi.Comment>;
      selectedSku.value = undefined;
      await formApi.setValues({ spuId: undefined, skuId: undefined });
      return;
--- a/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
@@ -1,17 +1,16 @@
 <!-- SKU 选择弹窗组件 -->
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';

 import { ref } from 'vue';

-import { fenToYuan } from '@vben/utils';
-
 import { Modal } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';

+import { useSkuGridColumns } from './spu-select-data';
+
 interface SpuData {
  spuId: number;
 }
@@ -23,52 +22,14 @@ const emit = defineEmits<{
 const visible = ref(false);
 const spuId = ref<number>();

-/** 表格列配置 */
-const gridColumns: VxeGridProps['columns'] = [
-  {
-    type: 'radio',
-    width: 55,
-  },
-  {
-    field: 'picUrl',
-    title: '图片',
-    width: 100,
-    align: 'center',
-    cellRender: {
-      name: 'CellImage',
-    },
-  },
-  {
-    field: 'properties',
-    title: '规格',
-    minWidth: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return (
-        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
-        '-'
-      );
-    },
-  },
-  {
-    field: 'price',
-    title: '销售价(元)',
-    width: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return fenToYuan(cellValue);
-    },
-  },
-];
-
 const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
-    columns: gridColumns,
+    columns: useSkuGridColumns(),
    height: 400,
    border: true,
-    showOverflow: true,
    radioConfig: {
      reserve: true,
+      highlight: true,
    },
    rowConfig: {
      keyField: 'id',
@@ -77,22 +38,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
    pagerConfig: {
      enabled: false,
    },
-    proxyConfig: {
-      // TODO @puhui999：看看注释的部分，后续要不要删除
-      // autoLoad: false, // 禁用自动加载，手动触发查询
-      ajax: {
-        query: async () => {
-          if (!spuId.value) {
-            return { list: [], total: 0 };
-          }
-          const spu = await getSpu(spuId.value);
-          return {
-            list: spu.skus || [],
-            total: spu.skus?.length || 0,
-          };
-        },
-      },
-    },
  },
  gridEvents: {
    radioChange: () => {
@@ -111,7 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 关闭弹窗 */
 function closeModal() {
  visible.value = false;
-  gridApi.grid.clearRadioRow();
  spuId.value = undefined;
 }

@@ -122,12 +66,14 @@ async function openModal(data?: SpuData) {
  }
  spuId.value = data.spuId;
  visible.value = true;
-  // TODO @puhui999：看看注释的部分，后续要不要删除
-  // // 等待弹窗和 Grid 组件完全渲染后再查询数据
-  // await nextTick();
-  // if (gridApi.grid) {
-  //   await gridApi.query();
-  // }
+  // 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
+  // 需要手动调用 reloadData 设置表格数据
+  if (!spuId.value) {
+    gridApi.grid?.reloadData([]);
+    return;
+  }
+  const spu = await getSpu(spuId.value);
+  gridApi.grid?.reloadData(spu.skus || []);
 }

 /** 对外暴露的方法 */
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts
@@ -1,11 +1,14 @@
 import type { Ref } from 'vue';

 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCategoryApi } from '#/api/mall/product/category';

 import { computed } from 'vue';

+import { fenToYuan } from '@vben/utils';
+
 import { getRangePickerDefaultProps } from '#/utils';

 /** 列表的搜索表单 */
@@ -118,3 +121,49 @@ export function useGridColumns(
    },
  ] as VxeTableGridOptions['columns'];
 }
+
+/** SKU 列表的字段 */
+export function useSkuGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 55,
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '图片',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'properties',
+      title: '规格',
+      minWidth: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return (
+          cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+          '-'
+        );
+      },
+    },
+    {
+      field: 'price',
+      title: '销售价(元)',
+      width: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return fenToYuan(cellValue);
+      },
+    },
+  ];
+}
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue
@@ -190,13 +190,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
      keyField: 'id',
      isHover: true,
    },
-    // TODO @puhui999：貌似直接 { trigger: 'row', reserve: true } 就可以了？不会影响 radio 的哈。（可以测试下。）
-    expandConfig: props.isSelectSku
-      ? {
-          trigger: 'row',
-          reserve: true,
-        }
-      : undefined,
+    expandConfig: {
+      trigger: 'row',
+      reserve: true,
+    },
    proxyConfig: {
      ajax: {
        async query({ page }: any, formValues: any) {
--- a/apps/web-antd/src/views/mall/product/spu/components/type.ts
+++ b/apps/web-antd/src/views/mall/product/spu/components/type.ts
@@ -1,5 +1,3 @@
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
 /** 商品属性及其值的树形结构（用于前端展示和操作） */
 export interface PropertyAndValues {
  id: number;
@@ -30,4 +28,5 @@ export interface SpuProperty<T> {
 }

 // Re-export for use in generic constraint
-export type { MallSpuApi };
+
+export { type MallSpuApi } from '#/api/mall/product/spu';
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
@@ -2,7 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';

-import { useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
+
+import { Modal } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
@@ -15,7 +17,11 @@ const props = defineProps<{
  takeType?: number; // 领取方式
 }>();

-const emit = defineEmits(['success']);
+const emit = defineEmits<{
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+
+const visible = ref(false); // 弹窗显示状态

 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
@@ -48,19 +54,42 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
 });

-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    // 从 gridApi 获取选中的记录
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
-      []) as MallCouponTemplateApi.CouponTemplate[];
-    await modalApi.close();
-    emit('success', selectedRecords);
-  },
+/** 打开弹窗 */
+async function open() {
+  visible.value = true;
+  // 重置查询条件并重新加载数据，与老组件行为一致
+  await gridApi.query();
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  // 从 gridApi 获取选中的记录
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open,
 });
 </script>

 <template>
-  <Modal title="选择优惠券" class="w-2/3">
+  <Modal
+    v-model:open="visible"
+    title="选择优惠券"
+    width="65%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
    <Grid />
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -180,26 +180,16 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
+      // 重置表单数据（新增和编辑模式都需要）
      formData.value = undefined;
      spuList.value = [];
      spuPropertyList.value = [];
      return;
    }
-    // 重置表单数据（新增和编辑模式都需要）
-    // TODO @puhui999：这里的重置，是不是在 183 到 185 已经处理了呀。
-    formData.value = undefined;
-    spuList.value = [];
-    spuPropertyList.value = [];
+
    // 加载数据
    const data = modalApi.getData<MallPointActivityApi.PointActivity>();
    if (!data || !data.id) {
-      // 新增模式：重置表单字段
-      // TODO @puhui999：197 到 201 这块的 setValues 的设置，是不是必要哈。可以看看。
-      await formApi.setValues({
-        sort: 0,
-        remark: '',
-        spuId: undefined,
-      });
      return;
    }
    // 加载数据
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
@@ -166,26 +166,86 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
    },
-    // TODO @puhui999：选择完删除后，自动就退出了 modal；
    {
      fieldName: 'productSpuIds',
      label: '选择商品',
      component: 'Input',
      dependencies: {
-        triggerFields: ['productScope'],
+        triggerFields: ['productScope', 'productScopeValues'],
        show: (values) => {
          return values.productScope === PromotionProductScopeEnum.SPU.scope;
        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productSpuIds
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productCategoryIds',
+      label: '选择分类',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope
+          );
+        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productCategoryIds
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            // 单选时使用数组不能反显，取第一个元素
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
      },
      rules: 'required',
    },
-    // TODO @puhui999：这里还有个分类；
    {
      fieldName: 'rules',
      label: '优惠设置',
      component: 'Input',
      formItemClass: 'items-start',
-      // TODO @puhui999：这里可能要加个 rules: 'required',
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScopeValues', // 隐藏字段：用于自动同步 productScopeValues
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
+        show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
+      },
    },
  ];
 }
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';

-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
 import {
@@ -19,6 +19,7 @@ import {
  updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
 import { SpuShowcase } from '#/views/mall/product/spu/components';

 import { useFormSchema } from '../data';
@@ -26,10 +27,8 @@ import RewardRule from './reward-rule.vue';

 const emit = defineEmits(['success']);

-const formData = ref<MallRewardActivityApi.RewardActivity>({
-  // TODO @puhui999：这里的 conditionType、productScope 是不是可以删除呀。因为 data.ts 已经搞了 defaultValue；
+const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
  conditionType: PromotionConditionTypeEnum.PRICE.type,
-  productScope: PromotionProductScopeEnum.ALL.scope,
  rules: [],
 });

@@ -39,8 +38,6 @@ const getTitle = computed(() => {
    : $t('ui.actionTitle.create', ['满减送']);
 });

-const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
-
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
@@ -53,7 +50,6 @@ const [Form, formApi] = useVbenForm({
  showDefaultActions: false,
 });

-// TODO @芋艿：这里需要在简化下；
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
@@ -63,8 +59,9 @@ const [Modal, modalApi] = useVbenModal({
    modalApi.lock();
    // 提交表单
    try {
-      const data = await formApi.getValues();
-      rewardRuleRef.value?.setRuleCoupon();
+      const values = await formApi.getValues();
+      // 合并表单值和 formData（含 id、productSpuIds、productCategoryIds 等）
+      const data = { ...formData.value, ...values };
      if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
        data.startTime = data.startAndEndTime[0];
        data.endTime = data.startAndEndTime[1];
@@ -76,9 +73,24 @@ const [Modal, modalApi] = useVbenModal({
          item.limit = convertToInteger(item.limit || 0);
        }
      });
-      setProductScopeValues(data);
+      // 设置 productScopeValues
+      switch (data.productScope) {
+        case PromotionProductScopeEnum.CATEGORY.scope: {
+          const categoryIds = data.productCategoryIds;
+          data.productScopeValues = Array.isArray(categoryIds)
+            ? categoryIds
+            : categoryIds
+              ? [categoryIds]
+              : [];
+          break;
+        }
+        case PromotionProductScopeEnum.SPU.scope: {
+          data.productScopeValues = data.productSpuIds;
+          break;
+        }
+      }

-      await (formData.value?.id
+      await (data.id
        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
      // 关闭并提示
@@ -91,11 +103,7 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
-      formData.value = {
-        conditionType: PromotionConditionTypeEnum.PRICE.type,
-        productScope: PromotionProductScopeEnum.ALL.scope,
-        rules: [],
-      };
+      formData.value = {};
      return;
    }
    // 加载数据
@@ -116,56 +124,11 @@ const [Modal, modalApi] = useVbenModal({
      formData.value = result;
      // 设置到 values
      await formApi.setValues(result);
-
-      await getProductScope();
    } finally {
      modalApi.unlock();
    }
  },
 });
-
-async function getProductScope() {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      await nextTick();
-      let productCategoryIds = formData.value.productScopeValues as any;
-      if (
-        Array.isArray(productCategoryIds) &&
-        productCategoryIds.length === 1
-      ) {
-        productCategoryIds = productCategoryIds[0];
-      }
-      formData.value.productCategoryIds = productCategoryIds;
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      formData.value.productSpuIds = formData.value.productScopeValues;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-// TODO @puhui999：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 可以类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 productScopeValues（微信交流）
-function setProductScopeValues(data: any) {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
-        ? formData.value.productCategoryIds
-        : [formData.value.productCategoryIds];
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      data.productScopeValues = formData.value.productSpuIds;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
 </script>

 <template>
@@ -173,13 +136,16 @@ function setProductScopeValues(data: any) {
    <Form class="mx-6">
      <!-- 自定义插槽：优惠规则 -->
      <template #rules>
-        <RewardRule ref="rewardRuleRef" v-model="formData" />
+        <RewardRule v-model="formData" />
      </template>
-
      <!-- 自定义插槽：商品选择 -->
      <template #productSpuIds>
        <SpuShowcase v-model="formData.productSpuIds" />
      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </template>
    </Form>
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -2,7 +2,7 @@
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';

-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';

 import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';

@@ -32,15 +32,14 @@ interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
 const rewardRule = useVModel(props, 'modelValue', emits);
 const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表

-// TODO @puhui999：1）命名上，可以弱化 coupon；例如说 selectRef；原因是，本身就是 coupon-select.vue；2）相关的处理的方法，最好都带 handle，如果是处理事件；例如说 deleteCoupon 改成 handleDelete；
 /** 选择优惠券 */
-const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
-function selectCoupon() {
-  couponSelectRef.value?.open();
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
+function handleSelect() {
+  selectRef.value?.open();
 }

 /** 选择优惠券后的回调 */
-function handleCouponChange(val: any[]) {
+function handleChange(val: any[]) {
  for (const item of val) {
    if (list.value.some((v) => v.id === item.id)) {
      continue;
@@ -50,13 +49,18 @@ function handleCouponChange(val: any[]) {
 }

 /** 删除优惠券 */
-function deleteCoupon(index: number) {
+function handleDelete(index: number) {
  list.value.splice(index, 1);
 }

 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  // 校验优惠券存在
+  if (
+    !rewardRule.value ||
+    !rewardRule.value.giveCouponTemplateCounts ||
+    Object.keys(rewardRule.value.giveCouponTemplateCounts).length === 0
+  ) {
    return;
  }
  const tempLateIds = Object.keys(
@@ -74,19 +78,22 @@ async function initGiveCouponList() {
  });
 }

-/** 设置赠送的优惠券 */
-// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
-function setGiveCouponList() {
-  if (!rewardRule.value) {
-    return;
-  }
-  rewardRule.value.giveCouponTemplateCounts = {};
-  list.value.forEach((rule) => {
-    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
-  });
-}
-
-defineExpose({ setGiveCouponList });
+/** 监听 list 变化，自动同步到 rewardRule */
+watch(
+  list,
+  (val) => {
+    if (!rewardRule.value) {
+      return;
+    }
+    // 核心：清空 giveCouponTemplateCounts，解决删除不生效的问题
+    rewardRule.value.giveCouponTemplateCounts = {};
+    // 设置优惠券和其数量的对应
+    val.forEach((item) => {
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
+    });
+  },
+  { deep: true },
+);

 onMounted(async () => {
  await nextTick();
@@ -96,7 +103,7 @@ onMounted(async () => {

 <template>
  <div class="w-full">
-    <Button type="link" class="ml-2" @click="selectCoupon">添加优惠劵</Button>
+    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>

    <div
      v-for="(item, index) in list"
@@ -130,15 +137,15 @@ onMounted(async () => {
          type="number"
        />
        <span>张</span>
-        <Button type="link" danger @click="deleteCoupon(index)">删除</Button>
+        <Button type="link" danger @click="handleDelete(index)">删除</Button>
      </div>
    </div>

    <!-- 优惠券选择 -->
    <CouponSelect
-      ref="couponSelectRef"
+      ref="selectRef"
      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
-      @change="handleCouponChange"
+      @change="handleChange"
    />
  </div>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';

-import { computed, ref } from 'vue';
+import { computed } from 'vue';

 import { PromotionConditionTypeEnum } from '@vben/constants';

@@ -23,7 +23,7 @@ import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
 defineOptions({ name: 'RewardRule' });

 const props = defineProps<{
-  modelValue: MallRewardActivityApi.RewardActivity;
+  modelValue: Partial<MallRewardActivityApi.RewardActivity>;
 }>();

 const emits = defineEmits<{
@@ -31,8 +31,6 @@ const emits = defineEmits<{
 }>();

 const formData = useVModel(props, 'modelValue', emits);
-const rewardRuleCouponSelectRef =
-  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();

 const isPriceCondition = computed(() => {
  return (
@@ -55,19 +53,8 @@ function handleAdd() {

 /** 处理删除 */
 function handleDelete(ruleIndex: number) {
-  formData.value.rules.splice(ruleIndex, 1);
+  formData.value.rules?.splice(ruleIndex, 1);
 }
-
-function setRuleCoupon() {
-  if (!rewardRuleCouponSelectRef.value) {
-    return;
-  }
-  rewardRuleCouponSelectRef.value.forEach((item: any) =>
-    item.setGiveCouponList(),
-  );
-}
-
-defineExpose({ setRuleCoupon });
 </script>

 <template>
@@ -99,7 +86,6 @@ defineExpose({ setRuleCoupon });
                :min="0"
                :precision="2"
                :step="0.1"
-                :controls="false"
                class="!w-40"
                placeholder="请输入金额"
              />
@@ -114,59 +100,52 @@ defineExpose({ setRuleCoupon });
              <span>{{ isPriceCondition ? '元' : '件' }}</span>
            </div>
          </FormItem>
-
          <!-- 优惠内容 -->
-          <!-- TODO @puhui999：这里样式，让 AI 调整下；1）类似优惠劵折行啦；2）整体要左移点； -->
-          <FormItem label="优惠内容" :label-col="{ span: 4 }">
-            <div class="flex flex-col gap-4">
-              <!-- 订单金额优惠 -->
-              <div class="flex flex-col gap-2">
-                <div class="font-medium">订单金额优惠</div>
-                <div class="ml-4 flex items-center gap-2">
-                  <span>减</span>
-                  <InputNumber
-                    v-model:value="rule.discountPrice"
-                    :min="0"
-                    :precision="2"
-                    :step="0.1"
-                    :controls="false"
-                    class="!w-40"
-                    placeholder="请输入金额"
-                  />
-                  <span>元</span>
-                </div>
-              </div>
-
-              <!-- 包邮 -->
+          <FormItem
+            label="优惠内容"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+          >
+            <div class="flex flex-col gap-2">
+              <span>订单金额优惠</span>
              <div class="flex items-center gap-2">
-                <span class="font-medium">包邮：</span>
+                <span>减</span>
+                <InputNumber
+                  v-model:value="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-32"
+                  placeholder="请输入金额"
+                />
+                <span>元</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span>包邮:</span>
                <Switch
                  v-model:checked="rule.freeDelivery"
                  checked-children="是"
                  un-checked-children="否"
                />
              </div>
-
-              <!-- 送积分 -->
-              <div class="flex items-center gap-2">
-                <span class="font-medium">送积分：</span>
-                <span>送</span>
-                <InputNumber
-                  v-model:value="rule.point"
-                  :min="0"
-                  :controls="false"
-                  class="!w-40"
-                  placeholder="请输入积分"
-                />
-                <span>积分</span>
+              <div>
+                <div>送积分:</div>
+                <div class="mt-2 flex items-center gap-2">
+                  <span>送</span>
+                  <InputNumber
+                    v-model:value="rule.point"
+                    :min="0"
+                    class="!w-32"
+                    placeholder="请输入积分"
+                  />
+                  <span>积分</span>
+                </div>
              </div>
-
-              <!-- 送优惠券 -->
-              <div class="flex items-start gap-2">
-                <span class="font-medium">送优惠券：</span>
+              <div class="flex items-center gap-2">
+                <span class="w-20">送优惠券:</span>
                <RewardRuleCouponSelect
-                  ref="rewardRuleCouponSelectRef"
                  :model-value="rule"
+                  @update:model-value="(val) => (formData.rules![index] = val)"
                />
              </div>
            </div>
--- a/apps/web-ele/src/components/form-create/components/use-api-select.tsx
+++ b/apps/web-ele/src/components/form-create/components/use-api-select.tsx
@@ -145,8 +145,8 @@ export function useApiSelect(option: ApiSelectProps) {
            }

            return {
-              label: label,
-              value: value,
+              label,
+              value,
            };
          });
          return;
--- a/apps/web-ele/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/create/index.vue
@@ -0,0 +1,339 @@
+<script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { groupBy } from '@vben/utils';
+
+import {
+  ElCard,
+  ElCol,
+  ElInput,
+  ElMessage,
+  ElRow,
+  ElSpace,
+  ElTabPane,
+  ElTabs,
+  ElTooltip,
+} from 'element-plus';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getProcessDefinitionList } from '#/api/bpm/definition';
+import { getProcessInstance } from '#/api/bpm/processInstance';
+
+import ProcessDefinitionDetail from './modules/form.vue';
+
+defineOptions({ name: 'BpmProcessInstanceCreate' });
+
+const route = useRoute();
+
+const loading = ref(true); // 加载中
+const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
+
+const categoryList: any = ref([]); // 分类的列表
+const activeCategory = ref(''); // 当前选中的分类
+
+const searchName = ref(''); // 当前搜索关键字
+const processDefinitionList = ref<BpmProcessDefinitionApi.ProcessDefinition[]>(
+  [],
+); // 流程定义的列表
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinition[]
+>([]); // 用于存储搜索过滤后的流程定义
+
+const selectProcessDefinition = ref(); // 选择的流程定义
+const processDefinitionDetailRef = ref();
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    // 1.1 所有流程分类数据
+    await loadCategoryList();
+    // 1.2 所有流程定义数据
+    await loadProcessDefinitionList();
+
+    // 2. 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await getProcessInstance(processInstanceId);
+      if (!processInstance) {
+        ElMessage.error('重新发起流程失败，原因：流程实例不存在');
+        return;
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item: any) => item.key === processInstance.processDefinition?.key,
+      );
+      if (!processDefinition) {
+        ElMessage.error('重新发起流程失败，原因：流程定义不存在');
+        return;
+      }
+      await handleSelect(processDefinition, processInstance.formVariables);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 获取所有流程分类数据 */
+async function loadCategoryList() {
+  categoryList.value = await getCategorySimpleList();
+}
+
+/** 获取所有流程定义数据 */
+async function loadProcessDefinitionList() {
+  // 流程定义
+  processDefinitionList.value = await getProcessDefinitionList({
+    suspensionState: 1,
+  });
+
+  // 空搜索，初始化相关数据
+  handleQuery();
+}
+
+/** 搜索流程 */
+function handleQuery() {
+  if (searchName.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) =>
+        definition.name.toLowerCase().includes(searchName.value.toLowerCase()),
+    );
+    // 如果有匹配，切换到第一个包含匹配结果的分类
+    activeCategory.value = availableCategories.value[0]?.name;
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    filteredProcessDefinitionList.value = processDefinitionList.value;
+    // 恢复到第一个可用分类
+    if (availableCategories.value.length > 0) {
+      activeCategory.value = availableCategories.value[0].code;
+    }
+  }
+}
+
+/** 流程定义的分组 */
+const processDefinitionGroup = computed(() => {
+  if (!processDefinitionList.value?.length) {
+    return {};
+  }
+  // 按照 categoryList 的顺序重新组织数据
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
+  const orderedGroup: Record<
+    string,
+    BpmProcessDefinitionApi.ProcessDefinition[]
+  > = {};
+  categoryList.value.forEach((category: BpmCategoryApi.Category) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[
+        category.code
+      ] as BpmProcessDefinitionApi.ProcessDefinition[];
+    }
+  });
+  return orderedGroup;
+});
+
+/** 处理选择流程的按钮操作 */
+async function handleSelect(
+  row: BpmProcessDefinitionApi.ProcessDefinition,
+  formVariables?: any,
+) {
+  // 设置选择的流程
+  selectProcessDefinition.value = row;
+  // 初始化流程定义详情
+  await nextTick();
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables);
+}
+
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
+const availableCategories = computed(() => {
+  if (!categoryList.value?.length || !processDefinitionGroup.value) {
+    return [];
+  }
+  // 获取所有有流程的分类代码
+  const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
+  // 过滤出有流程的分类
+  return categoryList.value.filter((category: BpmCategoryApi.Category) =>
+    availableCategoryCodes.includes(category.code),
+  );
+});
+
+/** 监听可用分类变化，自动设置正确的活动分类 */
+watch(
+  availableCategories,
+  (newCategories) => {
+    if (newCategories.length > 0) {
+      // 如果当前活动分类不在可用分类中，切换到第一个可用分类
+      const currentCategoryExists = newCategories.some(
+        (category: BpmCategoryApi.Category) =>
+          category.code === activeCategory.value,
+      );
+      if (!currentCategoryExists) {
+        activeCategory.value = newCategories[0].code;
+      }
+    }
+  },
+  { immediate: true },
+);
+
+/** 初始化 */
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+    <template v-if="!selectProcessDefinition">
+      <ElCard
+        class="h-full"
+        shadow="never"
+        :class="{
+          'process-definition-container': filteredProcessDefinitionList?.length,
+        }"
+        v-loading="loading"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-lg font-medium">全部流程</span>
+            <div class="w-1/3">
+              <ElInput
+                v-model="searchName"
+                placeholder="请输入流程名称检索"
+                clearable
+                @input="handleQuery"
+                @clear="handleQuery"
+              />
+            </div>
+          </div>
+        </template>
+
+        <div v-if="filteredProcessDefinitionList?.length" class="h-full">
+          <ElTabs v-model="activeCategory" tab-position="left" class="h-full">
+            <ElTabPane
+              v-for="category in availableCategories"
+              :key="category.code"
+              :label="category.name"
+              :name="category.code"
+              class="h-full"
+            >
+              <div class="px-4">
+                <ElRow :gutter="16">
+                  <ElCol
+                    v-for="definition in processDefinitionGroup[category.code]"
+                    :key="definition.id"
+                    :xs="24"
+                    :sm="12"
+                    :md="8"
+                    :lg="8"
+                    :xl="6"
+                    class="mb-4"
+                    @click="handleSelect(definition)"
+                  >
+                    <ElCard
+                      shadow="hover"
+                      class="definition-item-card w-full cursor-pointer"
+                      :class="{
+                        'search-match': searchName.trim().length > 0,
+                      }"
+                      :body-style="{
+                        width: '100%',
+                        padding: '16px',
+                      }"
+                    >
+                      <div class="flex items-center">
+                        <img
+                          v-if="definition.icon"
+                          :src="definition.icon"
+                          class="flow-icon-img object-contain"
+                          alt="流程图标"
+                        />
+                        <div v-else class="flow-icon flex-shrink-0">
+                          <span class="text-xs text-white">
+                            {{ definition.name?.slice(0, 2) }}
+                          </span>
+                        </div>
+                        <span class="ml-3 flex-1 truncate text-base">
+                          <ElTooltip
+                            placement="top-start"
+                            :content="definition.description"
+                          >
+                            {{ definition.name }}
+                          </ElTooltip>
+                        </span>
+                      </div>
+                    </ElCard>
+                  </ElCol>
+                </ElRow>
+              </div>
+            </ElTabPane>
+          </ElTabs>
+        </div>
+        <div v-else class="!py-48 text-center">
+          <ElSpace direction="vertical" size="large">
+            <span class="text-gray-500">没有找到搜索结果</span>
+          </ElSpace>
+        </div>
+      </ElCard>
+    </template>
+
+    <!-- 第二步，填写表单，进行流程的提交 -->
+    <ProcessDefinitionDetail
+      v-else
+      ref="processDefinitionDetailRef"
+      :select-process-definition="selectProcessDefinition"
+      @cancel="selectProcessDefinition = undefined"
+    />
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+@keyframes bounce {
+  0%,
+  50% {
+    transform: translateY(-5px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.process-definition-container {
+  .definition-item-card {
+    .flow-icon-img {
+      width: 48px;
+      height: 48px;
+      border-radius: 0.25rem;
+    }
+
+    .flow-icon {
+      @apply bg-primary;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      border-radius: 0.25rem;
+    }
+
+    &.search-match {
+      background-color: rgb(63 115 247 / 10%);
+      border: 1px solid var(--primary);
+      animation: bounce 0.5s ease;
+    }
+  }
+}
+
+:deep(.el-tabs__content) {
+  height: 100%;
+  overflow-y: auto;
+}
+
+:deep(.el-tabs) {
+  height: 100%;
+}
+</style>
--- a/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
@@ -0,0 +1,372 @@
+<script lang="ts" setup>
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import {
+  BpmCandidateStrategyEnum,
+  BpmFieldPermissionType,
+  BpmModelFormType,
+  BpmModelType,
+  BpmNodeIdEnum,
+} from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import FormCreate from '@form-create/element-ui';
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElMessage,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  createProcessInstance,
+  getApprovalDetail as getApprovalDetailApi,
+} from '#/api/bpm/processInstance';
+import { decodeFields, setConfAndFields2 } from '#/components/form-create';
+import { router } from '#/router';
+import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
+import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
+import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
+
+/** 类型定义 */
+interface ProcessFormData {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+interface UserTask {
+  id: number;
+  name: string;
+}
+
+defineOptions({ name: 'BpmProcessInstanceCreateForm' });
+
+const props = defineProps({
+  selectProcessDefinition: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['cancel']);
+const { closeCurrentTab } = useTabs();
+
+const getTitle = computed(() => {
+  return `流程表单 - ${props.selectProcessDefinition.name}`;
+});
+
+const detailForm = ref<ProcessFormData>({
+  rule: [],
+  option: {},
+  value: {},
+});
+const fApi = ref<any>();
+
+const startUserSelectTasks = ref<UserTask[]>([]);
+const startUserSelectAssignees = ref<Record<string, string[]>>({});
+const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
+
+const bpmnXML = ref<string | undefined>(undefined);
+const simpleJson = ref<string | undefined>(undefined);
+
+const timelineRef = ref<any>();
+const activeTab = ref('form');
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
+const processInstanceStartLoading = ref(false);
+
+/** 提交按钮 */
+async function submitForm() {
+  if (!fApi.value || !props.selectProcessDefinition) {
+    return;
+  }
+  // 流程表单校验
+  await fApi.value.validate();
+  // 校验指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      const assignees = startUserSelectAssignees.value[userTask.id];
+      if (Array.isArray(assignees) && assignees.length === 0) {
+        ElMessage.warning(`请选择${userTask.name}的候选人`);
+        return;
+      }
+    }
+  }
+
+  processInstanceStartLoading.value = true;
+  try {
+    // 提交请求
+    await createProcessInstance({
+      processDefinitionId: props.selectProcessDefinition.id,
+      variables: detailForm.value.value,
+      startUserSelectAssignees: startUserSelectAssignees.value,
+    });
+    // 关闭并提示
+    ElMessage.success('发起流程成功');
+    await closeCurrentTab();
+    await router.push({ name: 'BpmTaskMy' });
+  } finally {
+    processInstanceStartLoading.value = false;
+  }
+}
+
+/** 设置表单信息、获取流程图数据 */
+async function initProcessInfo(row: any, formVariables?: any) {
+  // 重置指定审批人
+  startUserSelectTasks.value = [];
+  startUserSelectAssignees.value = {};
+
+  // 情况一：流程表单
+  if (row.formType === BpmModelFormType.NORMAL) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+
+    // 解析表单字段列表（不创建实例，避免重复渲染）
+    const decodedFields = decodeFields(row.formFields);
+    const allowedFields = new Set(
+      decodedFields.map((field: any) => field.field).filter(Boolean),
+    );
+
+    // 过滤掉不允许的字段
+    if (formVariables) {
+      for (const key in formVariables) {
+        if (!allowedFields.has(key)) {
+          delete formVariables[key];
+        }
+      }
+    }
+
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
+
+    // 在配置中禁用 form-create 自带的提交和重置按钮
+    detailForm.value.option = {
+      ...detailForm.value.option,
+      submitBtn: false,
+      resetBtn: false,
+    };
+
+    await nextTick();
+
+    // 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
+    await getApprovalDetail({
+      id: row.id,
+      processVariablesStr: JSON.stringify(formVariables),
+    });
+
+    // 加载流程图
+    const processDefinitionDetail: BpmProcessDefinitionApi.ProcessDefinition =
+      await getProcessDefinition(row.id);
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml;
+      simpleJson.value = processDefinitionDetail.simpleModel;
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
+    // 返回选择流程
+    emit('cancel');
+  }
+}
+
+/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
+watch(
+  () => detailForm.value.value,
+  (newValue) => {
+    if (newValue && Object.keys(newValue).length > 0) {
+      // 记录之前的节点审批人
+      tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
+      startUserSelectAssignees.value = {};
+      // 加载最新的审批详情
+      getApprovalDetail({
+        id: props.selectProcessDefinition.id,
+        processVariablesStr: JSON.stringify(newValue), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+      });
+    }
+  },
+  {
+    deep: true,
+  },
+);
+
+/** 获取审批详情 */
+async function getApprovalDetail(row: {
+  id: string;
+  processVariablesStr: string;
+}) {
+  const data = await getApprovalDetailApi({
+    processDefinitionId: row.id,
+    activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+    processVariablesStr: row.processVariablesStr,
+  });
+  if (!data) {
+    ElMessage.error('查询不到审批详情信息！');
+    return;
+  }
+
+  // 获取审批节点
+  activityNodes.value = data.activityNodes;
+
+  // 获取发起人自选的任务
+  startUserSelectTasks.value = (data.activityNodes?.filter(
+    (node) =>
+      BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+  ) || []) as unknown as UserTask[];
+
+  // 恢复之前的选择审批人
+  if (startUserSelectTasks.value.length > 0) {
+    for (const node of startUserSelectTasks.value) {
+      const tempAssignees = tempStartUserSelectAssignees.value[node.id];
+      startUserSelectAssignees.value[node.id] = tempAssignees?.length
+        ? tempAssignees
+        : [];
+    }
+  }
+
+  // 设置表单字段权限
+  const formFieldsPermission = data.formFieldsPermission;
+  if (formFieldsPermission) {
+    Object.entries(formFieldsPermission).forEach(([field, permission]) => {
+      setFieldPermission(field, permission as string);
+    });
+  }
+}
+
+/** 设置表单权限 */
+function setFieldPermission(field: string, permission: string) {
+  if (permission === BpmFieldPermissionType.READ) {
+    fApi.value?.disabled(true, field);
+  }
+  if (permission === BpmFieldPermissionType.WRITE) {
+    fApi.value?.disabled(false, field);
+  }
+  if (permission === BpmFieldPermissionType.NONE) {
+    fApi.value?.hidden(true, field);
+  }
+}
+
+/** 取消发起审批 */
+function handleCancel() {
+  emit('cancel');
+}
+
+/** 选择发起人 */
+function selectUserConfirm(activityId: string, userList: any[]) {
+  if (!activityId || !Array.isArray(userList)) return;
+  startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
+}
+
+defineExpose({ initProcessInfo });
+</script>
+
+<template>
+  <ElCard class="h-full overflow-hidden" shadow="never">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <span class="text-lg font-medium">{{ getTitle }}</span>
+        <ElButton plain type="default" @click="handleCancel">
+          <IconifyIcon icon="lucide:arrow-left" />&nbsp; 返回
+        </ElButton>
+      </div>
+    </template>
+
+    <div class="flex h-full flex-col">
+      <ElTabs v-model="activeTab" class="flex flex-1 flex-col overflow-hidden">
+        <ElTabPane label="表单填写" name="form">
+          <div class="h-full overflow-y-auto p-6">
+            <ElRow :gutter="48">
+              <ElCol :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
+                <FormCreate
+                  :rule="detailForm.rule"
+                  v-model:api="fApi"
+                  v-model="detailForm.value"
+                  :option="detailForm.option"
+                  @submit="submitForm"
+                />
+              </ElCol>
+              <ElCol :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+                <ProcessInstanceTimeline
+                  ref="timelineRef"
+                  :activity-nodes="activityNodes"
+                  :show-status-icon="false"
+                  @select-user-confirm="selectUserConfirm"
+                />
+              </ElCol>
+            </ElRow>
+          </div>
+        </ElTabPane>
+        <ElTabPane
+          label="流程图"
+          name="flow"
+          class="flex flex-1 overflow-hidden"
+        >
+          <div class="h-full w-full overflow-y-auto">
+            <!-- BPMN 流程图预览 -->
+            <ProcessInstanceBpmnViewer
+              :bpmn-xml="bpmnXML"
+              v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+            />
+            <ProcessInstanceSimpleViewer
+              :simple-json="simpleJson"
+              v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
+            />
+          </div>
+        </ElTabPane>
+      </ElTabs>
+
+      <div v-if="activeTab === 'form'" class="border-t pb-4 pt-2">
+        <div class="flex w-full items-center justify-center">
+          <ElButton
+            plain
+            type="primary"
+            @click="submitForm"
+            :loading="processInstanceStartLoading"
+          >
+            <IconifyIcon icon="lucide:check" />
+            <span class="ml-1">发起</span>
+          </ElButton>
+          <ElButton plain type="default" @click="handleCancel">
+            <IconifyIcon icon="lucide:x" />
+            <span class="ml-1">取消</span>
+          </ElButton>
+        </div>
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-card__body) {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 60px); // header height approx
+  padding: 0;
+  overflow: hidden;
+}
+
+:deep(.el-tabs__content) {
+  flex: 1;
+  overflow: hidden;
+}
+
+:deep(.el-tab-pane) {
+  height: 100%;
+}
+
+:deep(.el-tabs__header) {
+  padding: 0 16px;
+  margin-bottom: 0;
+}
+</style>