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>
三、运行测试
