vue2-client 1.15.122 → 1.15.125

package/src/base-client/components/his/XImageReport/XImageReport copy.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="image-report-info">
+    <div>
+      <template v-if="data">
+        <!-- 显示可见的标签 -->
+        <div
+          v-for="(item) in visibleItems"
+          :key="item.field"
+          :class="['description-item', { 'with-divider': item.isLine }]" >
+          <template v-if="data[item.field] !== null && data[item.field] !== undefined">
+            <!-- 子标题 -->
+            <template v-if="item.subTitle !== null && item.subTitle !== undefined">
+              <hr style="background-color: #E5E9F0;">
+              <div class="sub-title">
+                {{ item.subTitle }}
+              </div>
+            </template>
+            <div>
+              <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 v-if="item.label !== null && item.label !== undefined " class="label-text">{{ item.label }}：</span>
+              </div>
+              <div class="content-wrapper">
+                <template v-if="item.fieldType === null || item.fieldType === undefined || item.fieldType === 'text'">
+                  {{ data[item.field] }}
+                </template>
+                <template v-if="item.fieldType === 'images'">
+                  <div class="image-preview-container">
+                    <div
+                      v-for="(img, index) in data[item.field]"
+                      :key="index"
+                      class="thumbnail-item"
+                      @click="openPreview(index, data[item.field])">
+                      <img :src="img" class="thumbnail-image" alt="预览图">
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+    <!-- 图片预览组件 -->
+    <ImagePreview
+      :visible="previewVisible"
+      :img-list="previewImgList"
+      :initial-index="previewIndex"
+      @close="previewVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XImageReport',
+  data () {
+    return {
+      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
+      data: null,
+      config: null,
+      previewVisible: false, // 控制预览显示
+      previewImgList: [], // 预览图片数组
+      previewIndex: 0 // 当前预览索引
+    }
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    // 获取应该显示的标签
+    visibleItems () {
+      if (!this.config?.items) return []
+      return this.config.items
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, {})
+  },
+  methods: {
+    async getData (data, parameterData) {
+      this.data = null
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        console.log(this.config)
+        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
+        runLogic(res.logicName, parameter, 'af-his').then(result => {
+          this.data = result
+        })
+      })
+    },
+     // 打开预览
+    openPreview (field, index) {
+      this.previewImgList = this.data[field]
+      this.previewIndex = index
+      this.previewVisible = true
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue, {})
+      },
+      deep: true
+    },
+    parameter: {
+      handler (newValue, oldValue) {
+        console.log('监听事件触发:', { old: oldValue, new: newValue })
+        // 当 parameter 变化时重新获取数据
+        this.getData(this.queryParamsName, {})
+      },
+      deep: true // 深度监听对象内部变化
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-report-info {
+  background: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.descriptions-container {
+  position: relative;
+  width: 100%;
+  padding-right: 80px; /* 为按钮预留空间 */
+}
+
+/* 自适应布局样式 */
+.flex-descriptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  width: 100%;
+}
+
+.description-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  white-space: nowrap;
+  flex: 0 1 auto;
+}
+
+.sub-title {
+  font-size: large;
+}
+
+.description-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* 共用样式 */
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: v-bind('config?.style?.fontSize');
+  white-space: nowrap;
+}
+
+.label-wrapper.with-avatar {
+  gap: 8px;
+}
+
+.label-text {
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.content-wrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  font-size: v-bind('config?.style?.fontSize');
+  color: rgba(0, 0, 0, 0.85);
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-button-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  padding: 4px 8px;
+  white-space: nowrap;
+  background-color: #fff;
+}
+
+/* Ant Design 描述列表样式覆盖 */
+:deep(.ant-descriptions-row) {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+:deep(.ant-descriptions-item) {
+  padding: 0 !important;
+  display: flex !important;
+  align-items: flex-start !important;
+  flex-direction: row !important;
+  margin-right: 24px;
+  width: fit-content !important;
+  margin-bottom: 16px;
+}
+
+:deep(.ant-descriptions-item-container) {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-start !important;
+  position: relative;
+  gap: 0 !important;
+  width: 100% !important;
+}
+
+:deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.65);
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: v-bind('config?.style?.fontSize || "14px"');
+  display: inline-flex !important;
+  align-items: center !important;
+  white-space: nowrap !important;
+  min-width: v-bind('config?.style?.labelWidth || "80px"');
+  justify-content: flex-start;
+  padding-right: 2px !important;
+}
+
+:deep(.ant-descriptions-item-content) {
+  font-size: v-bind('config?.style?.fontSize || "14px"');
+  display: inline-flex !important;
+  align-items: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  margin-left: 0px !important;
+}
+
+:deep(.ant-descriptions-item-colon) {
+  position: static !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  margin-right: 2px !important;
+}
+
+:deep(.ant-descriptions-item-container:hover) {
+  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;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .content-wrapper {
+    max-width: 200px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .content-wrapper {
+    max-width: 150px;
+  }
+  .flex-descriptions {
+    gap: 4px 12px;
+  }
+}
+
+/* 添加虚线样式 */
+.with-divider {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+.with-divider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* 对于 Ant Design 描述列表的特殊处理 */
+:deep(.ant-descriptions-item.with-divider) {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+:deep(.ant-descriptions-item.with-divider::after) {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+/* 图片列表样式 */
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+.image-item {
+  width: 80px;
+  height: 80px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+.image-item:hover {
+  transform: scale(1.05);
+}
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="image-report-info">
+    <div>
+      <template v-if="data">
+        <div
+          v-for="(item) in visibleItems"
+          :key="item.field"
+          :class="['description-item', { 'with-divider': item.isLine }]"
+        >
+          <template v-if="data[item.field] !== null && data[item.field] !== undefined">
+            <!-- 子标题独占一行 -->
+            <template v-if="item.subTitle">
+              <!-- <hr style="background-color: #E5E9F0; margin: 12px 0"> -->
+              <div class="sub-title">{{ item.subTitle }}</div>
+            </template>
+
+            <!-- 标签与内容同行（自动换行） -->
+            <div class="content-row">
+              <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 }"
+                />
+              </div>
+              <div class="content-value">
+                <template v-if="item.fieldType === 'text' || !item.fieldType">
+                  <span v-if="item.label" class="label-text">{{ item.label }}：</span>  <span :style="item.style ? item.style : {}">{{ data[item.field] }}</span>
+                </template>
+                <template v-else-if="item.fieldType === 'images'">
+                  <div class="image-preview-container">
+                    <div
+                      v-for="(img, index) in data[item.field]"
+                      :key="index"
+                      class="thumbnail-item"
+                      @click="openPreview(item.field,index)"
+                    >
+                      <img :src="img" class="thumbnail-image" :style="item.style ? item.style : {}" alt="预览图">
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+    <ImagePreview
+      :visible="previewVisible"
+      :imgList="previewImgList"
+      :initialIndex="previewIndex"
+      @close="previewVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import ImagePreview from './ImagePreview.vue'
+
+export default {
+  name: 'XImageReport',
+  components: {
+    ImagePreview
+  },
+  data () {
+    return {
+      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
+      data: null,
+      config: null,
+      previewVisible: false, // 控制预览显示
+      previewImgList: [], // 预览图片数组
+      previewIndex: 0 // 当前预览索引
+    }
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    // 获取应该显示的标签
+    visibleItems () {
+      if (!this.config?.items) return []
+      return this.config.items
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, {})
+  },
+  methods: {
+    async getData (data, parameterData) {
+      this.data = null
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        console.log(this.config)
+        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
+        if (res.logicName) {
+          console.log('runlogic', res.logicName)
+          runLogic(res.logicName, parameter, 'af-his').then(result => {
+            this.data = result
+          })
+        }
+      })
+    },
+     // 打开预览
+    openPreview (field, index) {
+      this.previewImgList = this.data[field]
+      this.previewIndex = index
+      this.previewVisible = true
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue, {})
+      },
+      deep: true
+    },
+    parameter: {
+      handler (newValue, oldValue) {
+        console.log('监听事件触发:', { old: oldValue, new: newValue })
+        // 当 parameter 变化时重新获取数据
+        this.getData(this.queryParamsName, {})
+      },
+      deep: true // 深度监听对象内部变化
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-report-info {
+  background: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  width: 100%;
+}
+/* 子标题样式 */
+.sub-title {
+  font-size: 16px;
+  margin-bottom: 8px;
+  display: block; /* 确保独占一行 */
+}
+
+/* 标签与内容同行布局 */
+.content-row {
+  display: flex;
+  align-items: flex-start; /* 顶部对齐 */
+  flex-wrap: wrap; /* 允许换行 */
+  margin-bottom: 4px;
+}
+
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0; /* 防止标签被压缩 */
+}
+
+.content-value {
+  flex: 1;
+  min-width: 60%; /* 保证内容区域最小宽度 */
+  word-break: break-word; /* 长文本自动换行 */
+}
+
+/* 图片横向排列（自动换行） */
+.image-preview-container {
+  display: flex;
+  flex-wrap: wrap; /* 关键：宽度不足时自动换行 */
+  gap: 8px; /* 图片间距 */
+  margin-top: 8px;
+}
+
+.thumbnail-item {
+  flex-shrink: 0;
+}
+
+.thumbnail-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.label-text {
+  font-weight: bold;
+}
+
+</style>

package/src/base-client/components/his/XImageReport/XImageReportDemo.vue

@@ -0,0 +1,29 @@
+<template>
+  <XImageReport
+    :query-params-name="queryParamsName"
+    :parameter="parameter">
+  </XImageReport>
+</template>
+
+<script>
+
+import XImageReport from './XImageReport.vue'
+
+export default {
+  name: 'XImageReportDemo',
+  components: {
+    XImageReport
+  },
+  data () {
+    return {
+      queryParamsName: 'outpatientImageReportConfig',
+      parameter: { id: '8' }
+    }
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -25,7 +25,7 @@ export default {
   name: 'XQuestionnaire',
   props: {
     queryParamsName: {
-      type: Object,
+      type: String,
       default: null
     }
   },