https://github.com/codingapi/flow-mobile
https://github.com/codingapi/flow-mobile
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codingapi/flow-mobile
- Owner: codingapi
- License: apache-2.0
- Created: 2025-04-28T03:44:28.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-06-16T08:29:55.000Z (7 months ago)
- Last Synced: 2025-06-16T08:47:57.378Z (7 months ago)
- Language: TypeScript
- Size: 90.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@codingapi/flow-mobile)
# Flow-Mobile
基于Mobile的流程引擎
## 安装
```bash
# npm
npm install @codingapi/flow-mobile
# yarn
yarn add @codingapi/flow-mobile
# pnpm
pnpm add @codingapi/flow-mobile
```
## 使用
### 流程审批
```tsx
import React from "react";
import {useLocation, useNavigate} from "react-router";
import {FlowView} from "@codingapi/flow-mobile";
import {Result} from "antd-mobile";
import {flowViews} from "@/config/flows";
const FlowDetailPage = () => {
const location = useLocation();
const state = location.state;
const navigate = useNavigate();
if (state) {
return (
<>
{
navigate(-1);
}}
/>
>
)
}
return (
<>
>
)
}
export default FlowDetailPage;
```
### 自定义视图拓展
* 自定义延期提醒
```tsx
import React from "react";
import {PostponedFormProps} from "@codingapi/ui-framework";
import Popup from "@/components/popup";
import {DatePickerView} from "antd-mobile";
import dayjs from "dayjs";
import {dateLabelRenderer} from "@codingapi/form-mobile";
const PostponedFormView: React.FC = (props) => {
const [value, setValue] = React.useState(new Date());
// 获取一小时后的日期
const now = dayjs().add(1, 'hour').toDate();
return (
{
const diff = dayjs(value).diff(dayjs(now), 'hour') + 1;
props.onFinish(diff);
}}
>
{
setValue(value);
}}
/>
)
}
export default PostponedFormView;
```
添加自定义视图到配置中
```
import {PostponedFormViewKey} from "@codingapi/ui-framework";
import {ComponentBus} from "@codingapi/ui-framework";
import {FlowApiContent,FlowApi} from "@codingapi/flow-mobile";
import PostponedFormView from "@/components/flow/PostponedFormView";
ComponentBus.getInstance().registerComponent(PostponedFormViewKey,PostponedFormView);
```
* 自定义选人组件
```
import React, {useEffect} from "react";
import {UserSelectFormProps} from "@codingapi/ui-framework";
import Popup from "@/components/popup";
import {Form,FormInput} from "@codingapi/form-mobile";
const UserSelectFormView: React.FC = (props) => {
const formInstance = Form.useForm();
useEffect(() => {
if(props.visible){
if(props.specifyUserIds){
formInstance.setFieldValue("users", props.specifyUserIds.join(","));
}
}
}, [props.visible]);
return (
{
const users = formInstance.getFieldValue("users");
if(users){
const userIds = Array.of(...users.split(",")).map(item =>{
return {
id: item,
name: item
}
});
props.onFinish(userIds);
}
}}
>
)
}
export default UserSelectFormView;
```
然后再注册到配置中。
更多的实例请参考：https://github.com/codingapi/flow-mobile/tree/main/playground
## 开发
```bash
# Install dependencies
yarn install
# Start development server
yarn dev
# Build for production
yarn build
# Run tests
yarn test
```
## 许可
Apache-2.0 © [CodingAPI](https://github.com/codingapi/flow-mobile/blob/main/LICENSE)