# flow-page

**Repository Path**: sstscode/flow-page

## Basic Information

- **Project Name**: flow-page
- **Description**: 智能终端源码-流程页面
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-02-07
- **Last Updated**: 2025-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: ssts, flow-page

## README

# @sstscode/flow-page

Flow page management module for SSTS system, providing flow configuration and page rendering capabilities.

## Features

- Flow configuration management
- Dynamic page rendering based on flow configuration
- Device status checking integration
- Custom display information support

## Installation

```bash
npm install @sstscode/flow-page
```

## Usage

### Example Usage (Vue Composition API)

Here's a example showing how to use @sstscode/flow-page in a Vue application:

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { serveFile } from '@/common'
import { useSystemStore } from '@/store'
import { CheckDoFunctionMapper, useFlowPage } from '@/api'

const flowDir = 'web/biz-basic/flow'
const flowFileName = ref('')
const flowKey = ref('')
const pageName = ref('')
const flowPageInfo = ref('')

const updateFlowPage = async () => {
  const flowConfig = await flowPage.getFlowConfigInUse(serveFile, flowDir, flowFileName.value, flowKey.value)
  if (flowConfig) {
    systemStore.setDictFlow(flowConfig)

    const customDisplayInfo = {}
    const checkDeviceStatusMapper = CheckDoFunctionMapper
    flowPage.getFlowPageByConfig(flowConfig, flowKey.value, pageName.value, customDisplayInfo, checkDeviceStatusMapper)
  }
  flowPageInfo.value = JSON.stringify(flowPage, null, 2)
}

const setFlowValues = (key: string, page: string) => {
  flowFileName.value = key // Assume fileName is the same as flowKey
  flowKey.value = key
  pageName.value = page
}

const test1 = async () => {
  setFlowValues('IDCardSign', 'SelectCardType')
  updateFlowPage()
}

const test2 = async () => {
  setFlowValues('RealTimeRegister', 'SelectCardType')
  updateFlowPage()
}

const test3 = async () => {
  setFlowValues('RealTimeRegister', 'ReadIDCard')
  updateFlowPage()
}

const test4 = async () => {
  setFlowValues('RealTimeRegister', 'InputSSCardPwd')
  updateFlowPage()
}

// Import necessary modules
const systemStore = useSystemStore()
const flowPage = useFlowPage()
</script>

<template>
  <div>
    <fieldset>
      <button @click="test1">建档：第一页面</button><br />
      <button @click="test2">当日挂号：第一页面</button>
      <button @click="test3">当日挂号：存在的页面</button>
      <button @click="test4">当日挂号：不存在的页面</button>
    </fieldset>
    <fieldset>
      <legend>{{ flowKey }}: {{ pageName }}</legend>
      <pre>{{ flowPageInfo }}</pre>
    </fieldset>
  </div>
</template>

<style scoped>
fieldset {
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em 0;
}

legend {
  font-weight: bold;
}

button {
  margin-right: 1em;
}

button.active {
  font-weight: bold;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
  text-align: left;
}
</style>
```

## API Documentation

### FlowPage Class

#### Methods

- `async getFlowConfigInUse(serveFile, flowDir, flowFileName, flowKey)`:
  - `serveFile`: A function that loads a specific file from the server.
  - `flowDir`: The directory where the flow configuration files are stored.
  - `flowFileName`: The name of the flow configuration file.
  - `flowKey`: The identifier for the flow configuration to be retrieved.
- `async getFlowPageByConfig(flowConfig, flowKey, pageName, customDisplayInfo, checkDeviceStatusMapper)`:
  - `flowConfig`: Flow configuration object
  - `flowKey`: Identifier for the flow
  - `pageName`: Target page name
  - `customDisplayInfo`: Custom display information object
  - `checkDeviceStatusMapper`: Function mapper for device status checking (e.g., CheckDoFunctionMapper)

### Type Definitions

- `FlowConfig`: Flow configuration type
- `PageConfig`: Page configuration type
- `FlowPageEvent`: Flow page event type
- `CheckDeviceStatusMapper`: A type definition for a function mapper that maps function names to their implementations.

## Configuration

Create a flow configuration file following the Note.json format:

```json
{
  "root": {
    "flow": [
      {
        "use": "1-启用；0-不启用",
        "key": "流程键",
        "name": "流程名称",
        "value": "以“/”分割的流程导航",
        "comment": "默认的流程说明内容",
        "remark": "备注",
        "pages": [
          {
            "name": "页面名称",
            "description": "单页面描述（匹配属性value中被分割后的部分，页面显示流程的当前步骤）",
            "title": "标题内容（不为空时，覆盖原内容）",
            "value": "为空时，读取流程节点的属性value",
            "comment": "为空时，读取流程节点的属性comment",
            "showInfo": "显示用户信息（1-显示；0-不显示）",
            "msg": "页面加载时的文字提示内容（为空时，取默认值）",
            "voice": "页面加载时的语音提示内容（为空时，取默认值）",
            "currentUrl": "如果不是按正常的流程顺序跳转页面，假定当前页为另一页面，跳转到另一页面的下一页",
            "checkDo": [
              {
                "function": "检查设备状态或调用设备驱动函数（主要用于“设备操作页面”（如获取信息、输密码等）和“结束页面”（完成、失败、错误等））",
                "meaning": "含义",
                "msg": "检测不通过或执行失败时，自定义文字提示内容（为空时，取函数指定的默认值）",
                "voice": "检测不通过或执行失败时，自定义语音提示内容（为空时，无语音）"
              }
            ]
          }
        ]
      }
    ]
  }
}
```

### Example Configuration Files

- `IDCardSign.json`: Example flow configuration for ID card signing

```json
{
  "root": {
    "flow": [
      {
        "use": "1",
        "key": "IDCardSign",
        "name": "自助建档",
        "value": "选择就诊方式",
        "comment": "",
        "remark": "标准",
        "pages": [
          {
            "name": "SelectCardType",
            "description": "选择就诊方式",
            "title": "请选择就诊方式",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请选择就诊方式"
          }
        ]
      }
    ]
  }
}
```

- `RealTimeRegister.json`: Example flow configuration for real-time registration

```json
{
  "root": {
    "flow": [
      {
        "use": "1",
        "key": "RealTimeRegister",
        "name": "当日挂号",
        "value": "获取信息/选择科室/选择医生/确认挂号信息/付款",
        "comment": "",
        "remark": "标准",
        "pages": [
          {
            "name": "SelectCardType",
            "description": "获取信息",
            "title": "请选择就诊方式",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请选择就诊方式",
            "checkDo": [
              {
                "function": "CheckDeviceStatus('凭条打印机')",
                "meaning": "检测设备状态",
                "msg": "",
                "voice": ""
              }
            ]
          },
          {
            "name": "ReadIDCardYB",
            "description": "获取信息",
            "title": "请插入您的医保卡",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请插入您的医保卡"
          },
          {
            "name": "InputSSCardPwd",
            "description": "获取信息",
            "title": "请输入您的医保卡密码",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请输入您的医保卡密码",
            "currentUrl": "ReadIDCard"
          },
          {
            "name": "ReadIDCard",
            "description": "获取信息",
            "title": "[读身份证提示]",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "[读身份证提示]"
          },
          {
            "name": "ConfirmIDCardInfo",
            "description": "获取信息",
            "title": "请确认您的身份信息",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请确认您的身份信息"
          },
          {
            "name": "RegisterSelectDepartment",
            "description": "选择科室",
            "title": "请选择挂号科室",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请选择挂号科室"
          },
          {
            "name": "RegisterSelectDoctor",
            "description": "选择医生",
            "title": "请选择挂号医生",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请选择挂号医生"
          },
          {
            "name": "ConfirmRegisterInfo",
            "description": "确认挂号信息",
            "title": "请确认您的挂号信息",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请确认您的挂号信息"
          },
          {
            "name": "SelectPayWay",
            "description": "付款",
            "title": "请选择支付方式",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "请选择支付方式"
          },
          {
            "name": "Successful",
            "description": "完成",
            "title": "挂号成功，请取走您的卡和凭条",
            "value": "",
            "comment": "",
            "showInfo": "",
            "msg": "",
            "voice": "挂号成功，请取走您的卡和凭条"
          }
        ]
      }
    ]
  }
}
```

## Development

1. Clone the repository
2. Install dependencies: `npm install`
3. Build the project: `npm run build`
4. Run tests: `npm test`

## License

This project is licensed under the MIT License.