@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

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:

<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:

{
  "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

{
  "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

{
  "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.