ssts-hospital-web-master项目实战记录十六：项目迁移-模块实现（page-info）

标签：info web span console log ssts hospital input const

记录时间：2024-02-25

二、page-info模块实现

framework/page-info/index.ts

//javascript用来遍历指定对象所有的属性名称和值 //obj 需要遍历的对象 const allProps = function (obj: any, props: string = ''): string {   // 使用 Object.keys() 获取对象自身的所有属性键   const keys = Object.keys(obj)
  // 遍历这些属性键   for (const key of keys) {     const value = obj[key]
    // 如果是函数，则调用它     if (typeof value === 'function') {       value()     } else {       // 如果是对象，则递归调用       if (typeof value === 'object' && value !== null) {         props = allProps(value, props)       } else {         // 添加属性名和值到 props 字符串         props += `${key}=${value}\r\n`       }     }   }
  // 返回包含所有属性名和值的字符串   return props }
//生成快照文件名 /*文件命名规则 1.允许文件或者文件夹名称不得超过255个字符。 2.文件名除了开头之外任何地方都可以使用空格。 3.文件名中不能有下列符号：\/:*?"<>|。 4.Windows 98文件名不区分大小写，但在显示时可以保留大小写格式。 5.文件名中可以包含多个间隔符，如“我的文件。我的图片。001”。 */ const CreateSnapshotFileName = function (s: string) {   const pattern = new RegExp('[/:*?"<>|]')   let rs = ''   for (let i = 0; i < s.length; i++) {     rs = rs + s.substring(i, i + 1).replace(pattern, '')   }
  return rs }
//获取页面信息 const GetPageInfo = function (   state: string,   businessTrace: string | null ): string {   console.log('GetPageInfo:', state)   // 获取Url路径并解码   const href = decodeURIComponent(window.location.href)
  // 构建页面信息   let pageInfo = `【${businessTrace}】${state}-【${href}】\r\n`
  // 获取控件信息并追加到页面信息中   pageInfo += GetControlsInfo()
  return pageInfo }
//获取控件 //格式：[text]-id=（value） const GetControlsInfo = function () {   let ret = ''   // 获取所有 input 元素   const inputs = document.getElementsByTagName('input')
  // 遍历 input 元素   for (const input of inputs) {     // 只处理 type 为 'text' 且 id 不为空的 input 元素     if (input.type === 'text' && input.id) {       ret += `[${input.type}]-${input.id}-（${input.value}）\r\n`     }   }
  // 获取所有 span 元素   const spans = document.getElementsByTagName('span')
  // 遍历 span 元素   for (const span of spans) {     // 只处理 id 不为空的 span 元素     if (span.id) {       ret += `[span]-${span.id}-（${span.innerText}）\r\n`     }   }
  return ret }
export { allProps, CreateSnapshotFileName, GetPageInfo, GetControlsInfo }  

二、调用示例

test-framework-page-info.vue

<script setup lang="ts"> import { onMounted } from 'vue' import { allProps, CreateSnapshotFileName, GetPageInfo, GetControlsInfo } from '@/framework/page-info'
const TestPageInfo = function () {   console.log('TestPageInfo begin')
  const objTest = { 'TerminalIp': '192.168.1.100', 'TerminalName': 'test' }   console.log('objTest:', objTest)
  const strProps = allProps(objTest)   console.log('strProps:', strProps)
  const businessTrace = null   const info = {     errorMessage: 'test',     lineNumber: 1,     href: `http://localhost:19004/WebAdapter_AdapterTest.html`   }
  const snapshotInfoInline = `${info.href}-【${info.errorMessage}】-【行号：${info.lineNumber}】`   console.log('snapshotInfoInline:', snapshotInfoInline)   const snapshotFileName = CreateSnapshotFileName(snapshotInfoInline)   console.log('snapshotFileName:', snapshotFileName)
  const pageInfo = GetPageInfo('【错误】', businessTrace)   console.log('pageInfo:', pageInfo)
  const controlsInfo = GetControlsInfo()   console.log('controlsInfo:', controlsInfo)
  console.log('TestPageInfo end') }
onMounted(() => {   console.log('test-framework.vue', 'mounted')
  TestPageInfo() })
</script>
<template>   <div>     <title>测试框架</title>     <input id="inputTest" type="text" value="this is a test input." />     <span id="spanTest">this is a test span.</span>   </div> </template>
<style scoped></style>  

三、运行测试

 

翻译

搜索

复制

<iframe height="240" width="320"></iframe>

标签：info,web,span,console,log,ssts,hospital,input,const
From： https://www.cnblogs.com/lizhigang/p/18033326