# @eciol/business-ui

用于存放公共业务组件

## Usage

```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 updateProcessInstanceIdApi = () => {
    // TODO: 替换为关联业务系统id与流程实例id的api接口
    return Promise.resolve(true);
  };

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

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

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


```

## Export

```ts
/**
 * @description 公共业务
 */
export {
  ApproveWrapper, // 审批流程组件
  useApprove, // 审批流程hooks
};
```