vue2-client 1.12.103 → 1.13.1

package/package.json

@@ -1,107 +1,107 @@
-{
-  "name": "vue2-client",
-  "version": "1.12.103",
-  "private": false,
-  "scripts": {
-    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
-    "serve:gaslink": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode gaslink",
-    "serve:revenue": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode revenue",
-    "serve:liuli": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode liuli",
-    "serve:scada": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode scada",
-    "serve:iot": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode iot",
-    "serve:his": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode his",
-    "mac-serve": "vue-cli-service serve --no-eslint --mode his",
-    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build:preview": "vue-cli-service build --mode preview",
-    "lint:nofix": "vue-cli-service lint --no-fix",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@afwenming123/vue-easy-tree": "^1.0.1",
-    "@afwenming123/vue-plugin-hiprint": "^0.0.70",
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/data-set": "^0.11.8",
-    "@antv/g2plot": "^2.4.31",
-    "@hufe921/canvas-editor": "^0.9.49",
-    "@microsoft/fetch-event-source": "^2.0.1",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "animate.css": "^4.1.1",
-    "ant-design-vue": "^1.7.8",
-    "axios": "^0.27.2",
-    "clipboard": "^2.0.11",
-    "core-js": "^3.33.0",
-    "crypto-js": "^4.1.1",
-    "date-fns": "^2.29.3",
-    "default-passive-events": "^2.0.0",
-    "dotenv": "^16.3.1",
-    "echarts": "^5.5.0",
-    "enquire.js": "^2.1.6",
-    "file-saver": "^2.0.5",
-    "highlight.js": "^11.7.0",
-    "html2canvas": "^1.4.1",
-    "js-base64": "^3.7.5",
-    "js-cookie": "^2.2.1",
-    "jsencrypt": "^3.3.2",
-    "jspdf": "^2.5.1",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4",
-    "lodash.get": "^4.4.2",
-    "marked": "^4",
-    "mockjs": "^1.1.0",
-    "nprogress": "^0.2.0",
-    "qs": "^6.11.2",
-    "regenerator-runtime": "^0.14.0",
-    "videojs-contrib-hls": "^5.15.0",
-    "viser-vue": "^2.4.8",
-    "vue": "^2.7.14",
-    "vue-codemirror": "4.0.6",
-    "vue-draggable-resizable": "^2",
-    "vue-i18n": "^8.28.2",
-    "vue-json-viewer": "^2.2.22",
-    "vue-router": "^3.6.5",
-    "vue-video-player": "^5.0.2",
-    "vue-virtual-scroller": "^1.1.2",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
-    "xlsx": "0.18.5"
-  },
-  "devDependencies": {
-    "@ant-design/colors": "^7.0.0",
-    "@babel/core": "^7.22.20",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/test-utils": "^1.3.6",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "deepmerge": "^4.3.1",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "fast-deep-equal": "^3.1.3",
-    "ignore-loader": "^0.1.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-transform-stub": "^2.0.0",
-    "less-loader": "^6.2.0",
-    "script-loader": "^0.7.2",
-    "style-resources-loader": "^1.5.0",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-jest": "^4.0.1",
-    "vue-template-compiler": "^2.7.14",
-    "webpack": "^5.88.2",
-    "webpack-theme-color-replacer": "^1.4.7",
-    "whatwg-fetch": "^3.6.19"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
-}
+{
+  "name": "vue2-client",
+  "version": "1.13.1",
+  "private": false,
+  "scripts": {
+    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
+    "serve:gaslink": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode gaslink",
+    "serve:revenue": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode revenue",
+    "serve:liuli": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode liuli",
+    "serve:scada": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode scada",
+    "serve:iot": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode iot",
+    "serve:his": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode his",
+    "mac-serve": "vue-cli-service serve --no-eslint --mode his",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
+    "lint:nofix": "vue-cli-service lint --no-fix",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@afwenming123/vue-easy-tree": "^1.0.1",
+    "@afwenming123/vue-plugin-hiprint": "^0.0.70",
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/data-set": "^0.11.8",
+    "@antv/g2plot": "^2.4.31",
+    "@hufe921/canvas-editor": "^0.9.49",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "animate.css": "^4.1.1",
+    "ant-design-vue": "^1.7.8",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
+    "core-js": "^3.33.0",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.29.3",
+    "default-passive-events": "^2.0.0",
+    "dotenv": "^16.3.1",
+    "echarts": "^5.5.0",
+    "enquire.js": "^2.1.6",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.7.0",
+    "html2canvas": "^1.4.1",
+    "js-base64": "^3.7.5",
+    "js-cookie": "^2.2.1",
+    "jsencrypt": "^3.3.2",
+    "jspdf": "^2.5.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4",
+    "lodash.get": "^4.4.2",
+    "marked": "^4",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "qs": "^6.11.2",
+    "regenerator-runtime": "^0.14.0",
+    "videojs-contrib-hls": "^5.15.0",
+    "viser-vue": "^2.4.8",
+    "vue": "^2.7.14",
+    "vue-codemirror": "4.0.6",
+    "vue-draggable-resizable": "^2",
+    "vue-i18n": "^8.28.2",
+    "vue-json-viewer": "^2.2.22",
+    "vue-router": "^3.6.5",
+    "vue-video-player": "^5.0.2",
+    "vue-virtual-scroller": "^1.1.2",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "xlsx": "0.18.5"
+  },
+  "devDependencies": {
+    "@ant-design/colors": "^7.0.0",
+    "@babel/core": "^7.22.20",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^1.3.6",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "compression-webpack-plugin": "^10.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "deepmerge": "^4.3.1",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "fast-deep-equal": "^3.1.3",
+    "ignore-loader": "^0.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
+    "less-loader": "^6.2.0",
+    "script-loader": "^0.7.2",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-jest": "^4.0.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.88.2",
+    "webpack-theme-color-replacer": "^1.4.7",
+    "whatwg-fetch": "^3.6.19"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

package/src/base-client/components/his/XHDescriptions/XHDescriptions.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="patient-info-descriptions">
     <a-descriptions
-      :column="configurationParameters?.layout"
-      :size="configurationParameters?.style?.size"
-      :bordered="configurationParameters?.style?.bordered"
+      :column="config?.layout"
+      :size="config?.style?.size"
+      :bordered="config?.style?.bordered"
       layout="horizontal">
       <template v-if="data">
+        <!-- 显示前N个标签 -->
         <a-descriptions-item
-          v-for="item in configurationParameters?.items"
-          :key="item.field">
+          v-for="(item) in visibleItems"
+          :key="item.field"
+          :colon="item.colon !== false">
           <template #label>
             <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
               <a-avatar
@@ -24,6 +26,48 @@
             {{ data[item.field] }}
           </div>
         </a-descriptions-item>
+
+        <!-- 详情按钮 -->
+        <a-descriptions-item v-if="hasMoreItems && !showAllItems">
+          <a-button
+            :type="config?.detailsConfig?.buttonType || 'link'"
+            @click="toggleDetails"
+          >
+            <a-icon type="down" />
+            {{ config?.detailsConfig?.buttonText || '详情' }}
+          </a-button>
+        </a-descriptions-item>
+
+        <!-- 展开后显示剩余标签 -->
+        <template v-if="showAllItems">
+          <a-descriptions-item
+            v-for="item in hiddenItems"
+            :key="item.field"
+            :colon="item.colon !== false">
+            <template #label>
+              <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                <a-avatar
+                  v-if="item.showAvatar"
+                  :size="item.avatar.size"
+                  :icon="item.avatar.icon"
+                  :style="{ background: item.avatar.background }"
+                />
+                <span class="label-text">{{ item.label }}</span>
+              </div>
+            </template>
+            <div class="content-wrapper">
+              {{ data[item.field] }}
+            </div>
+          </a-descriptions-item>
+
+          <!-- 收起按钮 -->
+          <a-descriptions-item>
+            <a-button type="link" @click="toggleDetails">
+              <a-icon type="up" />
+              收起
+            </a-button>
+          </a-descriptions-item>
+        </template>
       </template>
     </a-descriptions>
   </div>
@@ -36,7 +80,8 @@ export default {
   data () {
     return {
       data: null,
-      configurationParameters: null
+      config: null,
+      showAllItems: false // 控制是否显示所有标签
     }
   },
   props: {
@@ -51,20 +96,46 @@ export default {
       }
     }
   },
+  computed: {
+    // 获取详情按钮应该显示在第几个标签后
+    detailsAfterIndex () {
+      return this.config?.detailsConfig?.showAfterIndex || 3
+    },
+    // 判断是否有更多标签需要显示
+    hasMoreItems () {
+      return this.config?.items?.length > this.detailsAfterIndex
+    },
+    // 获取应该显示的标签
+    visibleItems () {
+      if (!this.config?.items) return []
+      if (this.showAllItems) return this.config.items
+      return this.config.items.slice(0, this.detailsAfterIndex)
+    },
+    // 获取隐藏的标签
+    hiddenItems () {
+      if (!this.config?.items) return []
+      return this.config.items.slice(this.detailsAfterIndex)
+    }
+  },
   created () {
     this.getData(this.queryParamsName)
   },
   methods: {
     async getData (data) {
       this.data = null
+      this.showAllItems = false // 重置展开状态
       getConfigByName(data, 'af-his', res => {
-        this.configurationParameters = res
-        console.log(this.configurationParameters)
+        this.config = res
+        console.log(this.config)
         const parameter = { ...res.parameter, ...this.parameter }
         runLogic(res.logicName, parameter, 'af-his').then(result => {
           this.data = result
         })
       })
+    },
+    // 切换详情显示状态
+    toggleDetails () {
+      this.showAllItems = !this.showAllItems
     }
   },
   watch: {
@@ -138,14 +209,14 @@ export default {
   color: rgba(0, 0, 0, 0.65);
   padding: 0 !important;
   margin: 0 !important;
-  font-size: v-bind('configurationParameters?.style?.fontSize');
+  font-size: v-bind('config?.style?.fontSize');
   display: inline-flex !important;
   align-items: center !important;
   white-space: nowrap !important;
 }
 
 :deep(.ant-descriptions-item-content) {
-  font-size: v-bind('configurationParameters?.style?.fontSize');
+  font-size: v-bind('config?.style?.fontSize');
   display: inline-flex !important;
   align-items: center !important;
   padding: 0 !important;
@@ -176,4 +247,16 @@ export default {
   background-color: rgba(0, 0, 0, 0.02);
   border-radius: 4px;
 }
+
+/* 添加详情按钮样式 */
+:deep(.ant-btn-link) {
+  padding: 0;
+  height: auto;
+  line-height: 1;
+}
+
+:deep(.ant-btn-link:hover) {
+  color: #1890ff;
+  background: transparent;
+}
 </style>

package/src/base-client/components/his/XHDescriptions/index.md

@@ -0,0 +1,183 @@
+# XHDescriptions 患者信息描述组件
+
+## 组件介绍
+
+`XHDescriptions` 是一个基于 Ant Design Vue 的描述列表组件封装，专用于显示患者基本信息。该组件具有以下特点：
+
+- 支持响应式布局，在不同屏幕尺寸下自动调整列数
+- 支持折叠/展开功能，控制信息的显示量
+- 支持自定义样式和头像
+
+## 配置说明
+
+组件通过 JSON 配置文件进行配置，主要包含以下部分：
+
+### 1. 布局配置 (layout)
+
+```json
+"layout": {
+    "xl": 8,
+    "md": 3,
+    "sm": 2,
+    "lg": 4,
+    "xs": 1,
+    "xxl": 8
+}
+```
+
+- 用于设置在不同屏幕尺寸下的列数
+- 键名对应不同的屏幕尺寸（xs, sm, md, lg, xl, xxl）
+- 值为每行显示的列数
+
+### 2. 样式配置 (style)
+
+```json
+"style": {
+    "size": "small",
+    "fontSize": "14px",
+    "bordered": false
+}
+```
+
+- `size`: 设置尺寸，可选值为 "default", "middle", "small"
+- `fontSize`: 控制文字大小
+- `bordered`: 是否显示边框
+
+### 3. 字段配置 (items)
+
+```json
+"items": [
+    {
+        "field": "patientName",
+        "style": {
+            "minHeight": "24px",
+            "width": "120px",
+            "minWidth": "100px",
+            "height": "24px"
+        },
+        "label": "患者",
+        "avatar": {
+            "size": 20,
+            "background": "#5D5C5C",
+            "icon": "user"
+        },
+        "showAvatar": true
+    }
+]
+```
+
+每个字段可配置的属性：
+
+- `field`: 字段名，用于从数据源获取值
+- `label`: 显示的标签名
+- `style`: 控制字段的样式（宽度、高度等）
+- `showAvatar`: 是否显示头像
+- `avatar`: 头像配置（仅当 showAvatar 为 true 时有效）
+  - `size`: 头像大小
+  - `background`: 头像背景色
+  - `icon`: 头像图标名称
+
+### 4. 详情按钮配置 (detailsConfig)
+
+```json
+"detailsConfig": {
+    "buttonText": "详细",
+    "buttonType": "link",
+    "showAfterIndex": 3
+}
+```
+
+- `buttonText`: 详情按钮显示的文本
+- `buttonType`: 按钮类型，可选值为 "default", "primary", "dashed", "link" 等
+- `showAfterIndex`: 控制在显示多少个字段后显示详情按钮
+
+### 5. 其他配置
+
+```json
+"logicName": "patientBasicInfo",
+"serverName": "af-his",
+"parameter": {}
+```
+
+- `logicName`: 用于获取数据的逻辑名称
+- `serverName`: 服务名称
+- `parameter`: 可选的参数对象
+
+## 使用示例
+
+```vue
+<template>
+  <XHDescriptions queryParamsName="DescriptionsExampleConfig" />
+</template>
+
+<script>
+import XHDescriptions from '@/base-client/components/his/XHDescriptions/XHDescriptions.vue'
+
+export default {
+  components: {
+    XHDescriptions
+  }
+}
+</script>
+```
+
+## 特殊说明
+
+1. **响应式布局**：
+   - 组件会根据屏幕尺寸自动调整列数
+   - 可在 `layout` 配置中自定义不同尺寸下的列数
+
+2. **折叠/展开功能**：
+   - 默认只显示 `showAfterIndex` 指定数量的字段
+   - 点击详情按钮可展开显示全部字段
+   - 点击收起按钮可恢复默认显示
+
+## 配置示例
+
+以下是一个完整的配置示例，用于展示患者基本信息：
+
+```json
+{
+    "layout": {
+        "xl": 8,
+        "md": 3,
+        "sm": 2,
+        "lg": 4,
+        "xs": 1,
+        "xxl": 8
+    },
+    "style": {
+        "size": "small",
+        "fontSize": "14px",
+        "bordered": false
+    },
+    "items": [
+        {
+            "field": "patientName",
+            "label": "患者",
+            "showAvatar": true,
+            "avatar": {
+                "size": 20,
+                "background": "#5D5C5C",
+                "icon": "user"
+            }
+        },
+        {
+            "field": "patientType",
+            "label": "类别"
+        },
+        {
+            "field": "diagnosisNo",
+            "label": "诊号"
+        }
+        // ... 更多字段
+    ],
+    "detailsConfig": {
+        "buttonText": "详细",
+        "buttonType": "link",
+        "showAfterIndex": 3
+    },
+    "logicName": "patientBasicInfo",
+    "serverName": "af-his"
+}
+```