# SystemIntegration

**Repository Path**: z6bpm/system-integration

## Basic Information

- **Project Name**: SystemIntegration
- **Description**: CodeDriver系统业务编排、API接口编排
- **Primary Language**: Java
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-08
- **Last Updated**: 2025-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 核心组件（目录说明）

```bash
路径： components/core/
```

| 组件名称 | 描述 | 是否全局组件 |
| --- | --- | --- |
| draggable-modal | `可拖拽弹窗`基于 a-modal 二次封装的可拖拽模态框，基本使用方式与 antdv 的 a-modal 保持一致 | 否 |
| dynamic-table | `动态表格`基于 a-table 二次封装的表格，基本使用方式与 antdv 的 a-table 保持一致 | 否 |
| schema-form | `动态表单`基于 a-form 二次封装。通过 JSON schema 的方式配置使用 | 否 |

# 动态表格 DynamicTable

## DynamicTableProps 表格属性

```
定义路径 src/components/core/dynamic-table/src/dynamic-table.ts
```

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| rowKey | --- | ---- | id | --- |
| search | 是否显示搜索表单 | Boolean | true | ture false |
| formProps | 表单属性 | SchemaFormProps | {} | ------ |
| columns | 表格列配置 | TableColumn | [] | ------ |
| dataRequest | 表格数据请求函数 | Function (params?: LoadDataParams, onChangeParams?: OnChangeCallbackParams) => Promise | --- | ------ |
| showIndex | 是否显示索引号 | Boolean | false |
| indexColumnProps | 索引列属性配置 | TableColumn | {} | ------ |
| showToolBar | 是否显示表格工具栏 | Boolean | true | ------ |
| showTableSetting | 是否显示表格设置 | Boolean | true | ------ |
| headerTitle | 表格标题 | string | ------ | ------ |
| titleTooltip | 表格标题提示信息 | string | ------ | ------ |
| autoHeight | 表格自适应高度 | Boolean | ------ | ------ |
| exportFileName | 导出的文件名 | string | ------ | ------ |
| exportBookType | xlsx的booktype | string | xlsx | ------ |
| exportAutoWidth | 自动宽度 | Boolean | true | ------ |
| exportFormatter | 自定义数据导出格式函数 | (columns: TableColumn[], tableData: any[]) => { header: string[]; data: any[] } | null | ------ |
| editableType | 编辑行类型 | String | single | single:编辑一行 multiple: 编辑多行 cell: 编辑单元格 |
| onSave | 单元格保存编辑回调 | OnSave | --- | ------ |
| onCancel | 单元格取消编辑回调 | onCancel | --- | ------ |
| onlyOneLineEditorAlertMessage | 只能编辑一行的的提示 | string | --- | ------ |

:::

## TableColumn 表格列属性

```
定义路径 src/components/core/dynamic-table/src/types/column.ts
```

````javascript

{
  dataIndex?: keyof T | ColumnKeyFlagType | Omit<DataIndex, string>;
  /** 指定搜索的字段 */
  searchField?: string;
  /** 在查询表单中不展示此项 */
  hideInSearch?: boolean;
  /** 在 Table 中不展示此列 */
  hideInTable?: boolean;
  /** 传递给搜索表单 Form.Item 的配置,可以配置 rules */
  formItemProps?: Partial<FormSchema<T>>;
  /** 传递给可编辑表格 Form.Item 的配置,可以配置 rules */
  editFormItemProps?: Partial<FormSchema<T>> & {
    /**
     * 是否继承于搜索表单`TableColumn.formItemProps`的所有属性,为深拷贝合并
     * 值为`true`时的行为伪代码如下：
     * ```js
     * Object.assign({}, TableColumn.formItemProps, TableColumn.editFormItemProps)
     * ```
     * @defaultValue 默认值为`true`
     * */
    extendSearchFormProps?: boolean;
  };
  /** 操作列，一般用于对表格某一行数据进行操作 */
  actions?: (params: CustomRenderParams<T>, action: TableActionType) => ActionItem[];
  /** 当前单元格是否允许被编辑 */
  editable?: boolean | ((params: CustomRenderParams<T>) => boolean);
  /** 当前单元格是否默认开启编辑，仅 `editableType`为`cell`时有效 */
  defaultEditable?: boolean;
}
````

### 当前组件所有的状态和方法

```
见/src/components/core/dynamic-table/src/hooks/目录下
```

### 使用方式

具体页面参考现成页面

```javascript
Hooks调用
/**
 * @DynamicTable 组件Render
 * @dynamicTableInstance 组件Ref实例 通过此实例访问Table 方法与属性
 * */
 import { useTable } from '@/components/core/dynamic-table';
 const [DynamicTable, dynamicTableInstance] = useTable(props: DynamicTableProps);
 // 刷新表格方法
 dynamicTableInstance?.reload();

<template>
  <DynamicTable>
</template>
```

# Schema-form 表单组件

### schemaFormProps 表单属性

```javascript
// 详情见/src/components/core/schema-form/src/schema-form.ts
export const schemaFormProps = {
  layout: {
    type: String as PropType<FormProps['layout']>,
    default: 'horizontal',
  },
  /** 预置字段默认值 */
  initialValues: {
    type: Object as PropType<Recordable>,
    default: () => ({}),
  },
  // 标签宽度  固定宽度
  labelWidth: {
    type: [Number, String] as PropType<number | string>,
    default: 0,
  },
  fieldMapToTime: {
    type: Array as PropType<FieldMapToTime>,
    default: () => [],
  },
  compact: { type: Boolean as PropType<boolean> },
  /** 表单配置规则 */
  schemas: {
    type: [Array] as PropType<FormSchema[]>,
    default: () => [],
  },
  mergeDynamicData: {
    type: Object as PropType<Recordable>,
    default: null,
  },
  baseRowStyle: {
    type: Object as PropType<CSSProperties>,
  },
  baseColProps: {
    type: Object as PropType<Partial<ColEx>>,
  },
  autoSetPlaceHolder: { type: Boolean as PropType<boolean>, default: true },
  /** 在INPUT组件上单击回车时，是否自动提交 */
  autoSubmitOnEnter: { type: Boolean as PropType<boolean>, default: false },
  submitOnReset: { type: Boolean as PropType<boolean> },
  submitOnChange: { type: Boolean as PropType<boolean> },
  /** 禁用表单 */
  disabled: { type: Boolean as PropType<boolean> },
  emptySpan: {
    type: [Number, Object] as PropType<number>,
    default: 0,
  },
  /** 是否显示收起展开按钮 */
  showAdvancedButton: { type: Boolean as PropType<boolean> },
  /** 转化时间 */
  transformDateFunc: {
    type: Function as PropType<Fn>,
    default: (date: any) => {
      return date?.format?.('YYYY-MM-DD HH:mm:ss') ?? date;
    },
  },
  rulesMessageJoinLabel: { type: Boolean as PropType<boolean>, default: true },
  /** 超过3行自动折叠 */
  autoAdvancedLine: {
    type: Number as PropType<number>,
    default: 3,
  },
  /** 不受折叠影响的行数 */
  alwaysShowLines: {
    type: Number as PropType<number>,
    default: 1,
  },

  /** 是否显示操作按钮 */
  showActionButtonGroup: { type: Boolean as PropType<boolean>, default: true },
  /** 操作列Col配置 */
  actionColOptions: Object as PropType<Partial<ColEx>>,
  /** 显示重置按钮 */
  showResetButton: { type: Boolean as PropType<boolean>, default: true },
  /** 是否聚焦第一个输入框，只在第一个表单项为input的时候作用 */
  autoFocusFirstItem: { type: Boolean as PropType<boolean> },
  /** 重置按钮配置 */
  resetButtonOptions: Object as PropType<Partial<ButtonProps>>,

  /** 显示确认按钮 */
  showSubmitButton: { type: Boolean as PropType<boolean>, default: true },
  /** 确认按钮配置 */
  submitButtonOptions: Object as PropType<Partial<ButtonProps>>,

  /** 自定义重置函数 */
  resetFunc: Function as PropType<() => Promise<void>>,
  submitFunc: Function as PropType<() => Promise<void>>,
  /** 动态表格实例 */
  tableInstance: {
    type: Object as PropType<TableActionType>,
  },

  rowProps: Object as PropType<RowProps>,
};
```

### FormSchema 表单配置项属性

```javascript
// 详情见/src/components/core/schema-form/src/types/form.ts
/** 表单项 */
export interface FormSchema<T = string> {
  /** 字段名 */
  field: T extends string ? string : GetFieldKeys<T>;
  // 修改回调
  changeEvent?: string;
  // 替换字段名
  valueField?: string;
  // label 名称
  label?: string | ((v: RenderCallbackParams<T>) => string);
  // 次级label
  subLabel?: string;
  // 提示信息
  helpMessage?:
    | string
    | string[]
    | ((renderCallbackParams: RenderCallbackParams<T>) => string | string[]);
  helpComponentProps?: Partial<HelpComponentProps>;
  labelWidth?: string | number;
  disabledLabelWidth?: boolean;
  /** 表单项对应的组件，eg: Input */
  component?: ComponentMapType | CustomRenderFn<T> | ((opt: RenderCallbackParams<T>) => Component);
  /** 表单组件属性 */
  componentProps?:
    | ComponentProps
    | {
        (opt: RenderCallbackParams<T>): ComponentProps;
        requestResult: ComponentProps['requestResult'];
      };
  /** 表单组件slots，例如 a-input 的 suffix slot 可以写成：{ suffix: () => VNode } */
  componentSlots?:
    | ((renderCallbackParams: RenderCallbackParams<T>) => Recordable<CustomRenderFn<T>>)
    | Recordable<CustomRenderFn<T>>
    | ReturnType<CustomRenderFn>;
  required?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean);

  suffix?: string | number | ((values: RenderCallbackParams<T>) => string | number);
  rules?: Rule[];
  rulesMessageJoinLabel?: boolean;
  /** 组件加载状态 */
  loading?: boolean;
  formItemProps?: Partial<FormItemProps>;
  colProps?: Partial<ColEx>;
  /** 搜索表单项排序 */
  order?: number;
  // 默认值
  defaultValue?: any;
  isAdvanced?: boolean;
  span?: number;
  /** 作用同v-show */
  vShow?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean);
  /** 作用同v-if */
  vIf?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean);

  // 渲染col内容需要外层包装form-item
  renderColContent?: CustomRenderFn<T>;
  slot?: string;
  // 自定义槽，类似renderColContent
  colSlot?: string;

  dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean);

  dynamicRules?: (renderCallbackParams: RenderCallbackParams<T>) => Rule[];
}
```

### 表单方法及属性

```
详见src/components/core/schema-form/src/hooks下
常用方法
    更新formItemSchema：updateSchema(data: Partial<FormSchema> | Partial<FormSchema>[])

    设置字段值: setFieldsValue()
```

### 示例请查看具体页面用法

#draggable-modal 可拖拽弹窗

```
路径： src/components/core/draggable-modal/index.vue
```

### 扩展参数

```javascript
 // 全屏
 fullscreen: {
    type: Boolean,
    default: false,
  },
  // 定位位置
  getContainer: {
    type: Function,
    default: () => document.body,
  }
```

### 弹窗用法

```javascript
 组件引入  引入src/components/core/draggable-modal 即可
```

### 拖拽弹窗扩展

#### 1.普通弹窗Hooks用法

```javascript
   import { useModal } from '@/hooks/useModal/useModal';
   const [ModalRender, modalRef] = useModal()
   ModalRender.show(props: HookModalProps)
```

#####普通弹窗额外参数 HookModalProps

```javascript
  /** 当前模态框是否处于App.vue上下文中 */
  isAppChild?: boolean;
  // 渲染内容
  content?: string | JSX.Element | (() => JSX.Element);
  closeModal?: () => void;
```

#### 2.表单弹窗Hooks用法 与shcema-form结合

```javascript
   import { useFormModal } from '@/hooks/useModal/useFormModal';
   const [showModal, modalRef] = useFormModal()
   // 调用showModal方法会返回表单Ref 通过表单Ref操作调用表单方法操作
   const [formRef] = await showModal.show({
      modalProps: FormModalProps<T>;
      formProps: Partial<SchemaFormProps>;
   })
```

#####表单弹窗方法参数

```
modalProps: FormModalProps<T>;
formProps: Partial<SchemaFormProps>;
```

#####表单弹窗额外参数 FormModalProps

```javascript
  //继承普通弹窗属性
  ...HookModalProps
  /**
   * 接受返回一个boolean，返回 true 会关掉这个弹窗
   *
   * @name 表单结束后调用
   */
  onFinish?: (formData: T) => Promise<boolean | void>;
  /**
   * 接受返回一个boolean，返回 true 会关掉这个弹窗
   *
   * @name 表单验证失败时调用
   */
  onFail?: (formData: T) => any;
```

# 抽屉Hooks

## 使用方式与弹窗hooks相同

```
目录：src/hooks/useDrawer/
```

##### 普通抽屉额外参数 HookDrawerProps

```javascript
  // 内容
  content?: string | JSX.Element | (() => JSX.Element);
  // 关闭抽屉回调
  closeDrawer?: () => void;
  // 确定回调
  open?: (e: any) => any;
  // 额外内容
  extra: any;
  // 显示默认额外内容
  defaultExtra?: boolean;
```

##### 表单抽屉额外参数 FormDrawerProps

```javascript
  //继承普通抽屉属性
  ...HookDrawerProps
  /**
   * 接受返回一个boolean，返回 true 会关掉这个弹窗
   *
   * @name 表单结束后调用
   */
  onFinish?: (formData: T) => Promise<boolean | void>;
  /**
   * 接受返回一个boolean，返回 true 会关掉这个弹窗
   *
   * @name 表单验证失败时调用
   */
  onFail?: (formData: T) => any;
```

# Icon组件

#### SvgIcon

#### 资源引入设置：vite.config.ts下 createSvgIconPlugin中添加路径

##### 使用

```javascript
 引入组件：import { SvgIcon } from '@/components/basic/svg-icon';
 template使用： <SvgIcon :name="iconName" size="18" />
```

#### Iconfont

##### 属性

```javascript
{
  type: {
    type: String as PropType<string>,
    default: '',
  },
  prefix: {
    type: String,
    default: 'icon-',
  },
  color: {
    type: String as PropType<string>,
    default: 'unset',
  },
  size: {
    type: [Number, String] as PropType<number | string>,
    default: 14,
  },
  scriptUrl: {
    // 阿里图库字体图标路径  默认使用[`${import.meta.env.BASE_URL}iconfont.js`];
    type: String as PropType<string | string[]>,
    default: '',
  },
}
```

##### 使用

```javascript
引入组件：  import { IconFont } from '@/components/basic/iconfont';
 template使用： <IconFont :type="iconType" size="18" />
```