# ApproveWrapper 审批流程组件

对审批流程的高度封装，满足业务系统的审批需求

## 代码演示

<CodePreview src="/doc-comp/approve" :height="600">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper
    contentFullHeight
    contentBackground
    title="审批流程组件"
    content="用于业务系统发起ERP审批流程"
  >
    <a-button @click="submit">提交审核</a-button>
    <ApproveWrapper @register="registerApproveWrapper" @success="approveSuccess" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper, useMessage } from '@eciol/ant-ui';
  import { ApproveWrapper, useApprove } from '@eciol/business-ui';
  import { generateUUID } from '@eciol/shared';

  const { createMessage } = useMessage();
  const realChangeApi = () => {
    // TODO: 替换为保存业务数据的api接口,接口返回值为业务id
    return Promise.resolve(generateUUID());
  };

  const [registerApproveWrapper, { submit: submitApprove }] = useApprove({
    modelKey: 'FINANCE_RECEIVEBILL_APPLY_PROCESS',
    realChangeApi,
  });

  const submit = () => {
    // TODO: 业务系统需要保存的数据
    const formData = {};
    submitApprove(formData);
  };

  const approveSuccess = () => {
    createMessage.success('审批发起成功');
  };
</script>
```

</details>
</CodePreview>

## Usage

### useApprove 方式

下面是一个使用审批流程组件的示例

```vue
<template>
  <div class="m-4">
    <ApproveWrapper
      modelKey="FINANCE_RECEIVEBILL_APPLY_PROCESS"
      :realChangeApi="(formData) => realChangeApi(formData)"
      @success="approveSuccess"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ApproveWrapper } from '@eciol/business-ui';
  import { useMessage } from '@eciol/ant-ui';

  const { createMessage } = useMessage();
  const realChangeApi = () => {
    // TODO: 替换为保存业务数据的api接口
    return Promise.resolve(true);
  };

  const approveSuccess = () => {
    createMessage.success('审批成功');
  };
</script>
```

## useApprove

ApproveWrapper 组件还提供了 `useApprove`，方便调用函数内部方法

### 示例

```vue
<template>
  <div class="m-4">
    <a-button @click="submit">提交审核</a-button>
    <ApproveWrapper @register="registerApproveWrapper" @success="approveSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { ApproveWrapper, useApprove } from '@eciol/business-ui';
  import { useMessage } from '@eciol/ant-ui';

  const { createMessage } = useMessage();
  const realChangeApi = () => {
    // TODO: 替换为保存业务数据的api接口
    return Promise.resolve(true);
  };

  const [registerApproveWrapper, { submit: submitApprove }] = useApprove({
    modelKey: 'FINANCE_RECEIVEBILL_APPLY_PROCESS',
    realChangeApi,
  });

  const submit = () => {
    // TODO: 业务系统需要保存的数据
    const formData = {};
    submitApprove(formData);
  };

  const approveSuccess = () => {
    createMessage.success('审批成功');
  };
</script>
```

### 参数介绍

```ts
const [register, methods] = useApprove(props);
```

**参数 props 内的值可以是 computed 或者 ref 类型**

**register**

register 用于注册 `useApprove`，如果需要使用 `useApprove` 提供的 api，必须将 register 传入组件的 `onRegister`

```vue
<template>
  <div class="m-4">
    <ApproveWrapper @register="register" />
  </div>
</template>
<script lang="ts" setup>
  import { ApproveWrapper, useApprove } from '@eciol/business-ui';
  const [register] = useApprove();
</script>
```

`Methods`见下方说明

### Methods

**submit**

类型: `(formData: Recordable) => Promise<void>`

说明: 提交审批

**setApproveProps**

::: tip

设置表单的 props 可以直接在标签上传递，也可以使用 setApproveProps，或者初始化直接写 useApprove(props)

:::

类型: `(approveProps: Partial<ApproveProps>) => Promise<void>`

说明: 设置表单 Props

## Props

| 属性 | 类型 | 默认值 | 可选值 | 说明 | 版本 |
| --- | --- | --- | --- | --- | --- | --- |
| modelKey | `string` | - | - | 模型 KEY，登录 root 账号在 erp-平台配置的流程引擎-流程管理中配置 |  |
| realChangeApi | `(formData: Recordable) => Promise<string | number>` | - | - | 业务系统保存数据的 api 接口 |  |

## useFormConfig

`useFormConfig`用于业务系统的外置表单页面，便于 ERP 系统嵌套提交表单。

### 示例

```vue
<template>
  <a-spin :spinning="spinning" tip="努力加载中...">
    <div v-if="!isEmptyDetail"> 表单详情 </div>
    <AEmpty v-else />
  </a-spin>
</template>
<script lang="ts" setup>
  import { useFormConfig } from '@eciol/business-ui';

  const checkAndSubmitFn = async () => {
    const formData = {};
    // TODO: 处理业务系统表单数据
    return formData;
  };

  const serveCheckApi = async (token, formData) => {
    // TODO: 业务系统保存表单数据
    return true;
  };

  const afterFetchStartUp = (token, formData) => {
    // TODO: 流程更新成功回调
  };

  const { spinning, isEmptyDetail } = useFormConfig({
    getProcessDataApi: async (token, procInstId) => {
      return {};
    },
    afterFetchDetail: (data) => {
      return data;
    },
    checkAndSubmitFn,
    serveCheckApi,
    afterFetchStartUp,
    hasCheckAndSubmit: true,
    hasAfterStartupSuccess: true,
  });
</script>
```

### 参数/Options

```ts
import { useFormConfig } from '@eciol/business-ui';

const { spinning, isEmptyDetail, formDetailData} = useFormConfig(opt: Options);
```

### Options

| 属性 | 类型 | 默认值 | 可选值 | 说明 |
| --- | --- | --- | --- | --- |
| ResultEnum | `object` | `enum ResultEnum {SUCCESS = '200',ERROR = -1,TIMEOUT = '401',TYPE ='success'}` | - | 业务系统接口响应结果枚举 |
| getProcessDataApi | `(token: string, procInstId: string) => Promise<any>` | - | - | 获取业务系统表单详情 api |
| afterFetchDetail | `(data: any) => any` | - | - | 处理获取详情接口成功结果的函数 |
| afterFetchStartUp | `(data: any) => any` | - | - | 处理更新流程接口成功后的函数 |
| checkAndSubmitFn | `async () => any` | - | - | 检查表单函数，返回处理后的表单数据 |
| serveCheckApi | `(token: string, data: any) => any` | - | - | 业务系统保存数据接口 api |
| hasCheckAndSubmit | `boolean` | `true` | `true`, `false` | 是否使用默认 checkAndSubmit 函数 |
| hasAfterStartupSuccess | `boolean` | `true` | `true`, `false` | 是否使用默认 afterStartupSuccess 函数 |

### 返回值

**spinning**

加载中状态

**isEmptyDetail**

表单详情数据是否为空

**formDetailData**

表单详情数据