ssts-hospital-web-master项目实战记录二十三：项目迁移-核心模块实现（useSystemStore）

记录时间：2024-02-28

一、useSystemStore模块实现

types/system.ts

import { Terminal } from './terminal'
import { Device } from './device'
import { FlowConfig } from './flow-config'
import { PageConfig } from './page-config'
import { PagerConfig } from './pager-config'
import { Receipt } from './receipt'

// 定义 KeyValueDataMap 类型
type KeyValueDataMap = {
  [key: string]: any
}

// 定义 SystemConfig 的类型
interface SystemConfig {
  // 版本信息
  version: string

  // 页面目录
  BasePageDir: string
  BizPageDir: string

  // 打印机纸张索引列表
  ReceiptPrinterPaperIndexList: number[]
  LabelPrinterPaperIndexList: number[]
  DocumentPrinterPaperIndexList: number[]
}

// 定义 SystemFlag 的类型
interface SystemFlag {
  // 网络是否在线标志
  NetOnlineFlag: boolean

  // 标志信息
  FrontManageFlag: boolean

  // 银行签到标志
  BankSignInFlag: boolean
  BankSignInDate: string

  // 医保签到标志
  YBSignNo: string
  YBSignDate: string
}

// 定义 SystemDict 的类型
interface SystemDict {
  // 版本数据
  versionData: KeyValueDataMap

  // 终端数据
  terminalIp: string
  operatorId: string
  terminal: Terminal
  deviceList: Array<Device>
  deviceNameList: string[]
  deviceCnNameList: string[]
  deviceStatusList: string[]
  deviceStatusError: string

  // 参数数据
  page: KeyValueDataMap
  common: KeyValueDataMap
  device: KeyValueDataMap
  system: KeyValueDataMap
  staticValue: KeyValueDataMap
  nullValue: KeyValueDataMap
  config: KeyValueDataMap
  out: KeyValueDataMap

  // 流程数据
  flowKey: string
  flow: FlowConfig
  linkFlowKey: string
  linkFlowPage: string
  businessTrace: string
  tradeId: string
  currentPage: PageConfig
  currentPagers: Array<PagerConfig>

  // 凭条数据
  receiptList: Array<Receipt>

  // 前台管理数据
  manage: KeyValueDataMap
}

// 定义 SystemMessage 的类型
interface SystemMessage {
  msg: string
  error: string
  voice: string
}

// 定义 System 的类型
interface System {
  // 配置信息
  config: SystemConfig

  // 标志信息
  flag: SystemFlag

  // 字典信息
  dict: SystemDict

  // 消息信息
  message: SystemMessage
}

export type { System, SystemDict, KeyValueDataMap }
 
 

store/useSystemStore.ts

import { defineStore } from 'pinia'
import { System, KeyValueDataMap } from '@/types/system'
import { Terminal } from '@/types/terminal'
import { Device } from '@/types/device'
import { FlowConfig } from '@/types/flow-config'
import { PageConfig } from '@/types/page-config'
import { PagerConfig } from '@/types/pager-config'
import { Receipt } from '@/types/receipt'

export const useSystemStore = defineStore({
  // store的唯一ID
  id: 'system',

  // store的状态
  state: (): System => ({
    config: {
      version: '',
      BasePageDir: '',
      BizPageDir: '',
      ReceiptPrinterPaperIndexList: [] as number[],
      LabelPrinterPaperIndexList: [] as number[],
      DocumentPrinterPaperIndexList: [] as number[]
    },
    flag: {
      NetOnlineFlag: false,
      FrontManageFlag: false,
      BankSignInFlag: false,
      BankSignInDate: '',
      YBSignNo: '',
      YBSignDate: ''
    },
    dict: {
      versionData: {} as KeyValueDataMap,
      terminalIp: '',
      operatorId: '',
      terminal: {} as Terminal,
      deviceList: [] as Array<Device>,
      deviceNameList: [] as string[],
      deviceCnNameList: [] as string[],
      deviceStatusList: [] as string[],
      deviceStatusError: '',
      page: {} as KeyValueDataMap,
      common: {} as KeyValueDataMap,
      device: {} as KeyValueDataMap,
      system: {} as KeyValueDataMap,
      staticValue: {} as KeyValueDataMap,
      nullValue: {} as KeyValueDataMap,
      config: {} as KeyValueDataMap,
      out: {} as KeyValueDataMap,
      flowKey: '',
      flow: {} as FlowConfig,
      linkFlowKey: '',
      linkFlowPage: '',
      businessTrace: '',
      tradeId: '',
      currentPage: {} as PageConfig,
      currentPagers: [] as Array<PagerConfig>,
      receiptList: [] as Array<Receipt>,
      manage: {} as KeyValueDataMap
    },
    message: {
      msg: '',
      error: '',
      voice: ''
    }
  }),
  actions: {
    setConfigVersion(version: string) {
      this.config.version = version
    },
    setConfigBasePageDir(basePageDir: string) {
      this.config.BasePageDir = basePageDir
    },
    setConfigBizPageDir(bizPageDir: string) {
      this.config.BizPageDir = bizPageDir
    },
    setConfigReceiptPrinterPaperIndexList(indexList: number[]) {
      this.config.ReceiptPrinterPaperIndexList = indexList
    },
    setConfigLabelPrinterPaperIndexList(indexList: number[]) {
      this.config.LabelPrinterPaperIndexList = indexList
    },
    setConfigDocumentPrinterPaperIndexList(indexList: number[]) {
      this.config.DocumentPrinterPaperIndexList = indexList
    },
    setFlagNetOnlineFlag(flag: boolean) {
      this.flag.NetOnlineFlag = flag
    },
    setFlagFrontManageFlag(flag: boolean) {
      this.flag.FrontManageFlag = flag
    },
    setFlagBankSignInFlag(flag: boolean) {
      this.flag.BankSignInFlag = flag
    },
    setFlagBankSignInDate(bankSignDate: string) {
      this.flag.BankSignInDate = bankSignDate
    },
    setFlagYBSignNo(ybSignNo: string) {
      this.flag.YBSignNo = ybSignNo
    },
    setFlagYBSignDate(ybSignDate: string) {
      this.flag.YBSignDate = ybSignDate
    },
    syncDictVersionData(key: string, value: any) {
      this.dict.versionData[key] = value
    },
    setDictTerminalIp(terminalIp: string) {
      this.dict.terminalIp = terminalIp
    },
    setDictOperatorId(operatorId: string) {
      this.dict.operatorId = operatorId
    },
    setDictTerminal(terminal: Terminal) {
      this.dict.terminal = terminal
    },
    syncDictTerminal(key: string, value: any) {
      this.dict.terminal[key] = value
    },
    setDictDeviceList(deviceList: Array<Device>) {
      this.dict.deviceList = deviceList
    },
    setDictDeviceNameList(deviceNameList: string[]) {
      this.dict.deviceNameList = deviceNameList
    },
    setDictDeviceCnNameList(deviceCnNameList: string[]) {
      this.dict.deviceCnNameList = deviceCnNameList
    },
    setDictDeviceStatusList(deviceStatusList: string[]) {
      this.dict.deviceStatusList = deviceStatusList
    },
    setDictDeviceStatusError(deviceStatusError: string) {
      this.dict.deviceStatusError = deviceStatusError
    },
    syncDictPage(key: string, value: any) {
      this.dict.page[key] = value
    },
    initDictCommon() {
      this.dict.versionData = {}
    },
    syncDictCommon(key: string, value: any) {
      this.dict.common[key] = value
    },
    initDictDevice() {
      this.dict.device = {}
    },
    syncDictDevice(key: string, value: any) {
      this.dict.device[key] = value
    },
    initDictSystem() {
      this.dict.system = {}
    },
    syncDictSystem(key: string, value: any) {
      this.dict.system[key] = value
    },
    initDictStaticValue() {
      this.dict.staticValue = {}
    },
    syncDictStaticValue(key: string, value: any) {
      this.dict.staticValue[key] = value
    },
    initDictNullValue() {
      this.dict.nullValue = {}
    },
    syncDictNullValue(key: string, value: any) {
      this.dict.nullValue[key] = value
    },
    initDictOut() {
      this.dict.out = {}
    },
    syncDictOut(key: string, value: any) {
      this.dict.out[key] = value
    },
    initDictConfig() {
      this.dict.config = {}
    },
    syncDictConfig(key: string, value: any) {
      this.dict.config[key] = value
    },
    setDictFlowKey(flowKey: string) {
      this.dict.flowKey = flowKey
    },
    initDictFlow() {
      this.dict.flow = {} as FlowConfig
    },
    setDictFlow(flow: FlowConfig) {
      this.dict.flow = flow
    },
    setDictLinkFlowKey(linkFlowKey: string) {
      this.dict.linkFlowKey = linkFlowKey
    },
    setDictLinkFlowPage(linkFlowPage: string) {
      this.dict.linkFlowPage = linkFlowPage
    },
    setDictBusinessTrace(businessTrace: string) {
      this.dict.businessTrace = businessTrace
    },
    setDictTradeId(tradeId: string) {
      this.dict.tradeId = tradeId
    },
    intDictPage() {
      this.dict.currentPage = {} as PageConfig
    },
    setDictPage(page: PageConfig) {
      this.dict.currentPage = page
    },
    setDictPager(pagers: Array<PagerConfig>) {
      this.dict.currentPagers = pagers
    },
    setDictReceiptList(receiptList: Array<any>) {
      this.dict.receiptList = receiptList
    },
    addToDictReceiptList(receipt: any) {
      if (this.dict.receiptList) {
        this.dict.receiptList.push(receipt)
      } else {
        this.dict.receiptList = [receipt]
      }
    },
    initDictManage() {
      this.dict.manage = {}
    },
    syncDictManage(key: string, value: any) {
      this.dict.manage[key] = value
    },
    setMessageMsg(msg: string) {
      this.message.msg = msg
    },
    setMessageError(error: string) {
      this.message.error = error
    },
    setMessageUndefinedFlow(flowKey: string) {
      this.message.error = `流程[${flowKey}]未定义。`
    },
    setMessageUndefinedTrace(adapterTrace: string) {
      this.message.error = `交易流水[${adapterTrace}]未定义。`
    },
    setMessageVoice(voice: string) {
      this.message.voice = voice
    }
  },
  getters: {
    configVersion(state) {
      return state.config.version
    },
    configBasePageDir(state) {
      return state.config.BasePageDir
    },
    configBizPageDir(state) {
      return state.config.BizPageDir
    },
    configReceiptPrinterPaperIndexList(state) {
      return state.config.ReceiptPrinterPaperIndexList
    },
    configLabelPrinterPaperIndexList(state) {
      return state.config.LabelPrinterPaperIndexList
    },
    configDocumentPrinterPaperIndexList(state) {
      return state.config.DocumentPrinterPaperIndexList
    },
    flagNetOnlineFlag(state) {
      return state.flag.NetOnlineFlag
    },
    flagFrontManageFlag(state) {
      return state.flag.FrontManageFlag
    },
    flagBankSignInFlag(state) {
      return state.flag.BankSignInFlag
    },
    flagBankSignDate(state) {
      return state.flag.BankSignInDate
    },
    flagYBSignNo(state) {
      return state.flag.YBSignNo
    },
    flagYBSignDate(state) {
      return state.flag.YBSignDate
    },
    dictVersionData(state) {
      return state.dict.versionData
    },
    dictTerminalIp(state) {
      return state.dict.terminalIp
    },
    dictOperatorId(state) {
      return state.dict.operatorId
    },
    dictTerminal(state) {
      return state.dict.terminal
    },
    dictDeviceList(state) {
      return state.dict.deviceList
    },
    dictDeviceNameList(state) {
      return state.dict.deviceNameList
    },
    dictDeviceCnNameList(state) {
      return state.dict.deviceCnNameList
    },
    dictDeviceStatusList(state) {
      return state.dict.deviceStatusList
    },
    dictDeviceStatusError(state) {
      return state.dict.deviceStatusError
    },
    dictPage(state) {
      return state.dict.page
    },
    dictCommon(state) {
      return state.dict.common
    },
    dictDevice(state) {
      return state.dict.device
    },
    dictSystem(state) {
      return state.dict.system
    },
    dictStaticValue(state) {
      return state.dict.staticValue
    },
    dictNullValue(state) {
      return state.dict.nullValue
    },
    dictConfig(state) {
      return state.dict.config
    },
    dictOut(state) {
      return state.dict.out
    },
    dictFlowKey(state) {
      return state.dict.flowKey
    },
    dictFlow(state) {
      return state.dict.flow
    },
    dictLinkFlowKey(state) {
      return state.dict.linkFlowKey
    },
    dictLinkFlowPage(state) {
      return state.dict.linkFlowPage
    },
    dictBusinessTrace(state) {
      return state.dict.businessTrace
    },
    dictTradeId(state) {
      return state.dict.tradeId
    },
    dictCurrentPage(state) {
      return state.dict.currentPage
    },
    dictCurrentPagers(state) {
      return state.dict.currentPagers
    },
    dictReceiptList(state) {
      return state.dict.receiptList
    },
    dictManage(state) {
      return state.dict.manage
    },
    messageMsg(state) {
      return state.message.msg
    },
    messageError(state) {
      return state.message.error
    },
    messageVoice(state) {
      return state.message.voice
    }
  }
})
 

二、调用示例

test-page-use-system-store.vue
<script setup lang="ts">
import { onMounted } from 'vue'
import { clientWebApi, serveWebApi } from '@/common'
import { useSystemStore } from '@/store'

const systemStore = useSystemStore()
onMounted(() => {
  console.log('onMounted')

  clientWebApi('/api/System/GetIpAddress', {}).then((res: string) => {
    const terminalIp = res
    systemStore.setDictTerminalIp(terminalIp)

    serveWebApi('/api/Terminal/GetTerminalByTerminalIp', {
      terminalIp: terminalIp
    }).then((res: any) => {
      const terminals = res
      if (terminals && terminals.length > 0) {
        systemStore.setDictTerminal(terminals[0])
      }
    })

    serveWebApi('/api/Terminal/GetDeviceListByTerminalTypeId', {
      terminalTypeId: systemStore.dictTerminal['TypeId']
    }).then((res: any) => {
      const deviceList = res
      if (deviceList && deviceList.length > 0) {
        systemStore.setDictDeviceList(deviceList)
      }
    })
  })

  systemStore.setConfigVersion('1.0.0')
  systemStore.syncDictSystem('test', 'abc123')
})
</script>

<template>
  <div>
    <!-- 设置和显示 systemStore.configVersion -->
    <p>
      <button @click="systemStore.setConfigVersion('1.0.0')">
        setConfigVersion('1.0.0')
      </button>
      <button @click="systemStore.setConfigVersion('2.0.0')">
        setConfigVersion('2.0.0')
      </button>
    </p>
    <p>systemStore.configVersion: {{ systemStore.configVersion }}</p>
    <hr />

    <!-- 显示 systemStore.dictTerminalIp -->
    <p>systemStore.dictTerminalIp: {{ systemStore.dictTerminalIp }}</p>
    <hr />
    <!-- 使用 p元素 和 v-for 遍历 systemStore.dictTerminal 的属性并为每个属性创建一个新的行 -->
    <p v-for="(value, key) in systemStore.dictTerminal" :key="key">
      {{ key }}: {{ value }}
    </p>
    <hr />

    <!-- 使用 p元素 和 v-for 遍历 systemStore.dictDeviceList 的属性并为每个属性创建一个新的行 -->
    <p v-for="(value, key) in systemStore.dictDeviceList" :key="key">
      {{ key }}: {{ value }}
    </p>
    <hr />

    <!-- 显示 dictSystem -->
    <p>dictSystem: {{ systemStore.dictSystem }}</p>
  </div>
</template>

<style scoped></style>

 

三、运行测试

 

 

 

 

 

 

 

posted @ 2024-02-28 16:24  lizhigang  阅读(18)  评论(0)    收藏  举报