vue2-client 1.13.1 → 1.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XCollapse/XCollapse.vue

@@ -48,10 +48,10 @@
         <template v-if="panel.type === 'picture'">
           <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
         </template>
-        <template v-else-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio'].includes(panel.type)">
+        <template v-else-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio', 'x-text-card'].includes(panel.type)">
           <component
             :is="getComponentName(panel.type)"
-            :ref="`dynamicComponent_${ panel.type }`"
+            :ref="`dynamicComponent_${ panel.type }_${ panelIndex }`"
             serverName="af-his"
             :queryParamsName="panel.configName"
             :parameter="panel.parameter"
@@ -89,7 +89,8 @@ export default {
     XList: () => import('@vue2-client/base-client/components/his/XList/XList.vue'),
     XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
     XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
-    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue')
+    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
+    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue')
   },
   data () {
     return {

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

@@ -10,7 +10,8 @@
         <a-descriptions-item
           v-for="(item) in visibleItems"
           :key="item.field"
-          :colon="item.colon !== false">
+          :colon="item.colon !== false"
+          v-if="data[item.field] !== null && data[item.field] !== undefined">
           <template #label>
             <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
               <a-avatar
@@ -43,7 +44,8 @@
           <a-descriptions-item
             v-for="item in hiddenItems"
             :key="item.field"
-            :colon="item.colon !== false">
+            :colon="item.colon !== false"
+            v-if="data[item.field] !== null && data[item.field] !== undefined">
             <template #label>
               <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                 <a-avatar
@@ -99,22 +101,46 @@ export default {
   computed: {
     // 获取详情按钮应该显示在第几个标签后
     detailsAfterIndex () {
-      return this.config?.detailsConfig?.showAfterIndex || 3
+      // 只有明确配置了detailsConfig且设置了showAfterIndex时才使用配置值
+      // 否则返回一个很大的值，使所有字段都显示
+      return this.config?.detailsConfig?.showAfterIndex || 999
     },
     // 判断是否有更多标签需要显示
     hasMoreItems () {
-      return this.config?.items?.length > this.detailsAfterIndex
+      // 只有明确配置了detailsConfig时才显示详情按钮
+      if (!this.config?.detailsConfig) return false
+      // 如果没有数据或没有配置项，不显示详情按钮
+      if (!this.data || !this.config?.items || !Array.isArray(this.config.items)) return false
+      // 获取隐藏项索引
+      const hiddenStartIndex = this.detailsAfterIndex || 0
+      if (hiddenStartIndex >= this.config.items.length) return false
+      // 检查隐藏的项中是否有非空值
+      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
+        const item = this.config.items[i]
+        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
+          return true
+        }
+      }
+      return false
     },
     // 获取应该显示的标签
     visibleItems () {
       if (!this.config?.items) return []
-      if (this.showAllItems) return this.config.items
+      // 如果没有配置detailsConfig或者已经展开，则显示所有项
+      if (!this.config?.detailsConfig || this.showAllItems) return this.config.items
       return this.config.items.slice(0, this.detailsAfterIndex)
     },
     // 获取隐藏的标签
     hiddenItems () {
       if (!this.config?.items) return []
+      if (!this.config?.detailsConfig) return [] // 如果没有配置detailsConfig，没有隐藏的项
       return this.config.items.slice(this.detailsAfterIndex)
+    },
+    // 获取有效的visible项目数量（排除null值）
+    validVisibleItemsCount () {
+      if (!this.config?.items || !this.data) return 0
+      const items = this.visibleItems
+      return items.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined).length
     }
   },
   created () {

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

@@ -7,6 +7,7 @@
 - 支持响应式布局，在不同屏幕尺寸下自动调整列数
 - 支持折叠/展开功能，控制信息的显示量
 - 支持自定义样式和头像
+- 自动隐藏值为 null 或 undefined 的字段
 
 ## 配置说明
 
@@ -90,6 +91,10 @@
 - `buttonText`: 详情按钮显示的文本
 - `buttonType`: 按钮类型，可选值为 "default", "primary", "dashed", "link" 等
 - `showAfterIndex`: 控制在显示多少个字段后显示详情按钮
+- **重要说明**：
+  - 只有明确配置了 `detailsConfig` 对象时，才会启用折叠功能
+  - 如果没有配置 `detailsConfig`，将直接显示所有字段，不会出现详情按钮
+  - 如果配置了 `detailsConfig` 但字段总数少于或等于 `showAfterIndex`，则不会显示详情按钮
 
 ### 5. 其他配置
 
@@ -128,13 +133,21 @@ export default {
    - 可在 `layout` 配置中自定义不同尺寸下的列数
 
 2. **折叠/展开功能**：
-   - 默认只显示 `showAfterIndex` 指定数量的字段
-   - 点击详情按钮可展开显示全部字段
-   - 点击收起按钮可恢复默认显示
+   - 折叠功能只在明确配置了 `detailsConfig` 对象时启用
+   - 没有配置 `detailsConfig` 时，会直接显示所有字段，不会出现详情按钮
+   - 配置了 `detailsConfig` 后，只显示 `showAfterIndex` 指定数量的字段，超出部分需点击详情按钮查看
+   - 点击详情按钮后会展开显示全部字段，可通过收起按钮恢复
+
+3. **空值处理**：
+   - 当字段值为 `null` 或 `undefined` 时，该字段不会显示
+   - 折叠功能会忽略值为 `null` 的字段，只有有值的隐藏字段才会触发显示详情按钮
+   - 这个特性可以用于根据数据动态控制字段的显示，无需修改配置
 
 ## 配置示例
 
-以下是一个完整的配置示例，用于展示患者基本信息：
+### 启用折叠功能示例
+
+以下配置将启用折叠功能，只显示前3个字段，其余字段需点击"详细"按钮查看：
 
 ```json
 {
@@ -169,15 +182,51 @@ export default {
         {
             "field": "diagnosisNo",
             "label": "诊号"
+        },
+        {
+            "field": "gender",
+            "label": "性别"
+        },
+        {
+            "field": "age",
+            "label": "年龄"
         }
         // ... 更多字段
     ],
     "detailsConfig": {
         "buttonText": "详细",
         "buttonType": "link",
-        "showAfterIndex": 3
+        "showAfterIndex": 3  // 设置为3表示只显示前3个字段，其余字段点击"详细"后显示
+    },
+    "logicName": "patientBasicInfo",
+    "serverName": "af-his"
+}
+```
+
+### 禁用折叠功能示例
+
+如果不希望使用折叠功能，希望一次性显示所有字段，只需要移除 `detailsConfig` 对象：
+
+```json
+{
+    "layout": {
+        "xl": 8,
+        "md": 3,
+        "sm": 2,
+        "lg": 4,
+        "xs": 1,
+        "xxl": 8
     },
+    "style": {
+        "size": "small",
+        "fontSize": "14px",
+        "bordered": false
+    },
+    "items": [
+        // 字段配置...
+    ],
     "logicName": "patientBasicInfo",
     "serverName": "af-his"
+    // 没有 detailsConfig，将直接显示所有字段
 }
 ``` 

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

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div class="text-card">
+      <!-- 添加顶部按钮区域 -->
+      <div class="text-card-header">
+        <div class="add-button" @click="handleAddClick">
+          <span class="plus-icon">+</span>
+        </div>
+      </div>
+      <div
+        v-for="(item, index) in displayItems"
+        :key="index"
+        class="text-item"
+        @click="handleItemClick(index)"
+        @contextmenu.prevent="handleContextMenu(index)">
+        <div class="text-content" :class="{ 'is-empty': !item.content }">
+          {{ item.content || '点击添加内容' }}
+        </div>
+      </div>
+      <!-- 编辑弹出框 -->
+      <div
+        v-if="showEdit"
+        class="edit-overlay"
+        @click.self="handleOverlayClick">
+        <div class="edit-card">
+          <a-textarea
+            v-model="editingContent"
+            :autoSize="{ minRows: 3 }"
+            @keyup.enter="handleSave"
+            ref="textarea"/>
+        </div>
+      </div>
+      <!-- 删除确认弹框 -->
+      <a-modal
+        v-model="showDeleteModal"
+        title="确认删除"
+        okText="确认"
+        cancelText="取消"
+        @ok="handleDeleteConfirm">
+        <p>确定要删除这条内容吗？</p>
+      </a-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XTextCard',
+  props: {
+    // logic配置名,要求返回一个数组[]
+    queryParamsName: {
+      type: String,
+      default: 'memorandumLOGIC'
+    },
+    queryParams: {
+      type: Object,
+      default: () => { return {} }
+    },
+    // 请求参数
+    parameter: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      localItems: [], // 本地数据
+      showEdit: false, // 是否显示编辑框
+      editingIndex: -1, // 当前编辑的索引
+      editingContent: '', // 编辑框的内容
+      showDeleteModal: false, // 是否显示删除确认框
+      deleteIndex: -1, // 要删除的项目索引
+    }
+  },
+  computed: {
+    // 显示的列表，始终保持一个空行
+    displayItems () {
+      const items = [...this.localItems]
+      // 如果最后一项不是空的，添加一个空项
+      if (!items.length || items[items.length - 1].content) {
+        items.push({ content: '' })
+      }
+      return items
+    }
+  },
+  methods: {
+    // 添加新方法
+    handleAddClick () {
+      // 直接打开编辑框，索引设为数组长度（等同于点击最后一个空行）
+      this.editingIndex = this.localItems.length
+      this.editingContent = ''
+      this.showEdit = true
+      this.$nextTick(() => {
+        this.$refs.textarea?.focus()
+      })
+    },
+    // 点击项目
+    handleItemClick (index) {
+      this.editingIndex = index
+      this.editingContent = this.displayItems[index].content
+      this.showEdit = true
+      this.$nextTick(() => {
+        this.$refs.textarea?.focus()
+      })
+    },
+    // 点击遮罩层保存
+    handleOverlayClick () {
+      this.handleSave()
+    },
+    // 保存内容
+    handleSave () {
+      if (this.editingContent.trim()) {
+        if (this.editingIndex === this.localItems.length) {
+          // 如果是在最后一个空行添加，push新内容
+          this.localItems.push({ content: this.editingContent.trim() })
+        } else {
+          // 否则更新现有内容
+          this.localItems[this.editingIndex].content = this.editingContent.trim()
+        }
+        // 触发更新事件
+        this.$emit('add', this.editingContent.trim())
+      }
+      this.showEdit = false
+      this.editingIndex = -1
+      this.editingContent = ''
+    },
+    // 初始化数据
+    async initData (data, parameter) {
+      // 从配置中获取数据
+      const resData = await runLogic(data, parameter, 'af-his')
+      this.localItems = resData.map(content => ({ content: content }))
+      return resData
+    },
+    // 处理右键菜单
+    handleContextMenu (index) {
+      // 如果是最后一个空行，不显示删除框
+      if (index === this.localItems.length) {
+        return
+      }
+      this.deleteIndex = index
+      this.showDeleteModal = true
+    },
+    // 确认删除
+    handleDeleteConfirm () {
+      if (this.deleteIndex > -1) {
+        this.localItems.splice(this.deleteIndex, 1)
+        this.$emit('delete', [...this.localItems][this.deleteIndex])
+        this.deleteIndex = -1
+      }
+      this.showDeleteModal = false
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (newVal) {
+        this.initData(newVal, this.parameter)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.text-card {
+  position: relative;
+  width: 100%;
+  // 添加头部样式
+  .text-card-header {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    .add-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s;
+      &:hover {
+        background-color: #f5f5f5;
+      }
+      .plus-icon {
+        font-size: 20px;
+        line-height: 1;
+        color: #5D5C5C;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .text-item {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none; // 防止文本被选中
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    .text-content {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.5;
+
+      &.is-empty {
+        color: #bfbfbf;
+      }
+    }
+  }
+  .edit-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .edit-card {
+      background: white;
+      padding: 16px;
+      border-radius: 8px;
+      width: 90%;
+      max-width: 500px;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12);
+      .ant-input {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>