vue2-client 1.14.66 → 1.14.68

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

@@ -4,18 +4,20 @@
     <a-row class="box">
       病历号&nbsp;&nbsp;<a-input v-model="vitalSignsId" style="width: 160px"></a-input>
       <a-button-group style="margin-left: 20px;">
-        <a-button v-if="showCreateButton"
-                  plain
-                  type="primary"
-                  @click="showVitalSignsModal('create')"
-                  :loading="loading"
-                  :disabled="!editorReady">创建体温单</a-button>
-        <a-button v-if="showUpdateButton"
-                  plain
-                  type="primary"
-                  @click="showVitalSignsModal('update')"
-                  :loading="loading"
-                  :disabled="!editorReady">更新体温单</a-button>
+        <a-button
+          v-if="showCreateButton"
+          plain
+          type="primary"
+          @click="showVitalSignsModal('create')"
+          :loading="loading"
+          :disabled="!editorReady">创建体温单</a-button>
+        <a-button
+          v-if="showUpdateButton"
+          plain
+          type="primary"
+          @click="showVitalSignsModal('update')"
+          :loading="loading"
+          :disabled="!editorReady">更新体温单</a-button>
       </a-button-group>
       <a-button-group v-if="showClearButton" style="margin: 0 20px;">
         <a-button plain type="primary" @click="execCommand('print')" :loading="loading" :disabled="!editorReady">打印</a-button>
@@ -337,6 +339,65 @@ async function handleSubmit (formData) {
   }
 }
 
+// 处理表单数据
+function mergeAndTransformData (records, patientInfo, id, date, operateDate) {
+  // 提取records中的数据
+  const temperatureList = records.map(record => record.temperature).join(',')
+  const sphygmusList = records.map(record => record.sphygmus).join(',')
+  const breathList = records.map(record => record.breath).join(',')
+  const heartList = records.map(record => record.heart).join(',')
+  const notesList = records.map(record => record.notes).join(',')
+  const painList = records.map(record => record.pain).join(',')
+  const data1List = records.map(record => {
+    const [systolic, diastolic] = record.data1.split('|')
+    return `${systolic}/${diastolic}`
+  }).join(',')
+  const data2List = records.map(record => record.data2).join(',')
+  const data3List = records.map(record => record.data3).join(',')
+  const data4List = records.map(record => record.data4).join(',')
+  const data5List = records.map(record => record.data5).join(',')
+  const data6List = records.map(record => record.data6).join(',')
+  const data7List = records.map(record => record.data7).join(',')
+  const tempTypeList = records.map(record => record.temptype).join(',')
+
+  // 提取patientInfo中的数据
+  const name = patientInfo.name || ''
+  const dept = patientInfo.dept || ''
+  const bed = patientInfo.bed || ''
+  const inDate = patientInfo.indate || ''
+  const diag = patientInfo.diag || ''
+
+  // 生成合并后的对象
+  const mergedData = {
+    bed: bed.toString(),
+    sphygmus: sphygmusList,
+    notes: notesList,
+    medicalNo: id, // 示例中的固定值
+    diag: diag,
+    type: 'normal', // 示例中的固定值
+    breath: breathList,
+    temperature: temperatureList,
+    id: id, // 示例中的固定值
+    tempType: tempTypeList,
+    data7: data7List,
+    pain: painList,
+    data6: data6List,
+    data5: data5List,
+    data4: data4List,
+    data3: data3List,
+    data2: data2List,
+    inDate: inDate.split(' ')[0], // 只取日期部分
+    data1: data1List,
+    dept: dept,
+    heart: heartList,
+    labels: '血压(mmHg)|入水量(ml)|出水量(ml)|大便(次)|小便(次)|身高(cm)|体重(kg)', // 示例中的固定值
+    name: name,
+    begin: date, // 只取日期部分
+    operateDate: operateDate // 只取日期部分
+  }
+  return mergedData
+}
+
 // 生命周期钩子
 onMounted(() => {
   window.addEventListener('message', (event) => {
@@ -371,7 +432,9 @@ defineExpose({
     vitalSignsId.value = id
   },
   // 创建体温单 参数：(Object) data
-  handleSubmit
+  handleSubmit,
+  // 获取表单数据
+  mergeAndTransformData
 })
 </script>
 

package/src/components/FileImageItem/FileItem.vue

@@ -1,23 +1,59 @@
 <template>
-  <div>
-    <!-- 文件 -->
-    <div v-for="file in files" :key="file.id">
-      <a class="file-item">
-        <span class="file-action" @click="preview(file.url)">
-          <a-icon type="link" />{{ file.name }}
-        </span>
-        <span class="file-action" @click="preview(file.url)">
-          <a-icon type="eye" />预览
-        </span>
-        <a v-if="downloadable" class="file-action" @click="download(file)"><a-icon type="download" />下载</a>
-      </a>
+  <div class="file-list">
+    <div class="file-grid">
+      <div v-for="file in files" :key="file.id" class="file-item">
+        <div class="file-info">
+          <div class="file-icon-wrapper" :class="getFileTypeClass(file.name)">
+            <a-icon :type="getFileIcon(file.name)" class="file-icon" />
+          </div>
+          <div class="file-content">
+            <div class="file-header">
+              <span class="file-name">{{ file.name }}</span>
+              <span class="file-type">{{ getFileType(file.name) }}</span>
+            </div>
+            <div class="file-footer">
+              <span class="file-size" v-if="file.size">{{ formatFileSize(file.size) }}</span>
+              <span class="file-time" v-if="file.upload_time">{{ file.upload_time }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="file-actions">
+          <a-tooltip title="预览文件">
+            <a-button type="link" class="action-btn preview-btn" @click="handlePreview(file.url)">
+              <a-icon type="eye" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="downloadable" title="下载文件">
+            <a-button type="link" class="action-btn download-btn" @click="download(file)">
+              <a-icon type="download" />
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
     </div>
+    <!-- 文件预览弹窗 -->
+    <a-modal
+      v-model="previewVisible"
+      :footer="null"
+      :dialog-style="{ top: '20px' }"
+      width="85%"
+      :z-index="1001"
+      title="文件预览"
+      @cancel="handlePreviewClose"
+    >
+      <file-preview :path="previewPath" />
+    </a-modal>
   </div>
 </template>
 
 <script>
+import FilePreview from '@vue2-client/components/FilePreview'
+
 export default {
   name: 'FileImageItem',
+  components: {
+    FilePreview
+  },
   props: {
     files: {
       type: Array,
@@ -29,32 +65,241 @@ export default {
       default: true
     }
   },
+  data () {
+    return {
+      previewVisible: false,
+      previewPath: ''
+    }
+  },
   methods: {
-    preview (path) {
-      this.$emit('preview', path)
+    handlePreview (path) {
+      this.previewPath = path
+      this.previewVisible = true
+    },
+    handlePreviewClose () {
+      this.previewVisible = false
+      this.previewPath = ''
     },
-    // 文件下载
     download (file) {
       const a = document.createElement('a')
       a.href = file.url
       a.download = file.name
       a.click()
+    },
+    formatFileSize (size) {
+      if (!size) return ''
+      // 如果小于1M，转换为KB显示
+      if (size < 1) {
+        const kbSize = size * 1024
+        return `${kbSize.toFixed(1)} KB`
+      }
+      // 大于等于1M，保持M为单位
+      return `${size.toFixed(1)} MB`
+    },
+    getFileType (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      const typeMap = {
+        pdf: 'PDF文档',
+        doc: 'Word文档',
+        docx: 'Word文档',
+        xls: 'Excel表格',
+        xlsx: 'Excel表格',
+        ppt: 'PPT演示',
+        pptx: 'PPT演示',
+        jpg: '图片',
+        jpeg: '图片',
+        png: '图片',
+        gif: '图片',
+        txt: '文本文件',
+        zip: '压缩文件',
+        rar: '压缩文件'
+      }
+      return typeMap[ext] || '文件'
+    },
+    getFileIcon (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      const iconMap = {
+        pdf: 'file-pdf',
+        doc: 'file-word',
+        docx: 'file-word',
+        xls: 'file-excel',
+        xlsx: 'file-excel',
+        ppt: 'file-ppt',
+        pptx: 'file-ppt',
+        jpg: 'file-image',
+        jpeg: 'file-image',
+        png: 'file-image',
+        gif: 'file-image',
+        txt: 'file-text',
+        zip: 'file-zip',
+        rar: 'file-zip'
+      }
+      return iconMap[ext] || 'file'
+    },
+    getFileTypeClass (filename) {
+      const ext = filename.split('.').pop().toLowerCase()
+      return `file-type-${ext}`
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.file-item {
-  .file-action {
-    padding: 3px 4px;
-    color: #1890ff;
+.file-list {
+  .file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 16px;
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    background: #fff;
+    border-radius: 12px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+
     &:hover {
-      background: #e6f7ff;
+      transform: translateY(-2px);
+      border-color: @primary-2;
+      background: rgba(24, 144, 255, 0.02);
+    }
+
+    .file-info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+
+      .file-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        margin-right: 16px;
+        border-radius: 12px;
+        transition: all 0.3s;
+
+        &.file-type-pdf {
+          background: linear-gradient(135deg, #ff4d4f, #ff7875);
+        }
+        &.file-type-doc, &.file-type-docx {
+          background: linear-gradient(135deg, #1890ff, #69c0ff);
+        }
+        &.file-type-xls, &.file-type-xlsx {
+          background: linear-gradient(135deg, #52c41a, #95de64);
+        }
+        &.file-type-ppt, &.file-type-pptx {
+          background: linear-gradient(135deg, #fa8c16, #ffc069);
+        }
+        &.file-type-jpg, &.file-type-jpeg, &.file-type-png, &.file-type-gif {
+          background: linear-gradient(135deg, #722ed1, #b37feb);
+        }
+        &.file-type-txt {
+          background: linear-gradient(135deg, #13c2c2, #5cdbd3);
+        }
+        &.file-type-zip, &.file-type-rar {
+          background: linear-gradient(135deg, #eb2f96, #ff85c0);
+        }
+
+        .file-icon {
+          font-size: 24px;
+          color: #fff;
+        }
+      }
+
+      .file-content {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        flex: 1;
+
+        .file-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
+
+          .file-name {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 15px;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+            width: 0;
+            flex: 1;
+          }
+
+          .file-type {
+            color: rgba(0, 0, 0, 0.45);
+            font-size: 12px;
+            padding: 2px 6px;
+            background: rgba(0, 0, 0, 0.04);
+            border-radius: 4px;
+          }
+        }
+
+        .file-footer {
+          display: flex;
+          align-items: center;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 12px;
+
+          .file-size {
+            margin-right: 12px;
+          }
+
+          .file-time {
+            position: relative;
+            padding-left: 12px;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 4px;
+              height: 4px;
+              background: rgba(0, 0, 0, 0.25);
+              border-radius: 50%;
+            }
+          }
+        }
+      }
+    }
+
+    .file-actions {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .action-btn {
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        margin-left: 8px;
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.45);
+        background: transparent;
+        transition: all 0.3s;
+
+        &:hover {
+          color: #fff;
+          background: @primary-color;
+          transform: scale(1.05);
+        }
+
+        .anticon {
+          font-size: 16px;
+        }
+      }
     }
-  }
-  .anticon {
-    margin-right: 3px;
   }
 }
 </style>

package/src/components/FileImageItem/FileItemGroup.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="file-item-group">
+    <!-- 搜索区域 -->
+    <div class="search-area">
+      <a-form-model ref="searchForm" :model="formData" layout="inline">
+        <a-form-model-item prop="dateRange">
+          <a-range-picker
+            v-model="formData.dateRange"
+            :ranges="dateRanges"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :placeholder="['开始时间', '结束时间']"
+            @change="handleDateChange"
+          />
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button type="primary" :loading="loading" @click="handleSearch">
+            <a-icon type="search" />查询
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+
+    <!-- 文件列表区域 -->
+    <template v-if="Object.keys(groupedFiles).length > 0">
+      <div class="file-list-container">
+        <a-spin :spinning="loading">
+          <template v-for="(group, date) in groupedFiles">
+            <div :key="date" class="file-group">
+              <div class="group-header">
+                <a-icon type="calendar" />
+                <span class="date-label">{{ formatDate(date) }}</span>
+                <span class="file-count">({{ group.length }}个文件)</span>
+              </div>
+              <file-item
+                  :files="group"
+                  :downloadable="downloadable"
+              />
+            </div>
+          </template>
+        </a-spin>
+      </div>
+    </template>
+    <template v-else>
+      <a-empty></a-empty>
+    </template>
+  </div>
+</template>
+
+<script>
+import FileItem from './FileItem.vue'
+
+export default {
+  name: 'FileItemGroup',
+  components: {
+    FileItem
+  },
+  props: {
+    downloadable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    const now = new Date()
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const yesterday = new Date(today)
+    yesterday.setDate(yesterday.getDate() - 1)
+    const last7Days = new Date(today)
+    last7Days.setDate(last7Days.getDate() - 6)
+    const last30Days = new Date(today)
+    last30Days.setDate(last30Days.getDate() - 29)
+
+    return {
+      loading: false,
+      formData: {
+        dateRange: []
+      },
+      files: [],
+      dateRanges: {
+        今天: [today, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        昨天: [yesterday, new Date(yesterday.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        最近7天: [last7Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)],
+        最近30天: [last30Days, new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1)]
+      }
+    }
+  },
+  mounted () {
+    this.handleSearch()
+  },
+  computed: {
+    groupedFiles () {
+      const groups = {}
+      this.files.forEach(file => {
+        const date = file.upload_time.split(' ')[0]
+        if (!groups[date]) {
+          groups[date] = []
+        }
+        groups[date].push(file)
+      })
+      // 按日期降序排序
+      return Object.fromEntries(
+        Object.entries(groups).sort(([a], [b]) => b.localeCompare(a))
+      )
+    }
+  },
+  methods: {
+    handleDateChange (dates) {
+      this.formData.dateRange = dates
+    },
+    handleSearch () {
+      this.$refs.searchForm.validate(async valid => {
+        if (valid) {
+          this.loading = true
+          let queryDate
+          if (this.formData.dateRange && this.formData.dateRange.length > 0) {
+            queryDate = this.formData.dateRange
+          } else {
+            queryDate = undefined
+          }
+          const callback = (res) => {
+            this.files = res.files
+            this.loading = false
+          }
+          const errorCallback = (e) => {
+            this.$message.error('获取文件列表失败:' + e.getMessage())
+            this.loading = false
+          }
+          this.$emit('search', queryDate, callback, errorCallback)
+        } else {
+          this.$message.error('请检查日期选择是否正确')
+        }
+      })
+    },
+    formatDate (date) {
+      const today = new Date().toISOString().split('T')[0]
+      const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+      if (date === today) {
+        return '今天'
+      } else if (date === yesterday) {
+        return '昨天'
+      }
+
+      const [year, month, day] = date.split('-')
+      return `${year}年${month}月${day}日`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.file-item-group {
+  .search-area {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  }
+
+  .file-list-container {
+    .file-group {
+      margin-bottom: 24px;
+
+      .group-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 8px 16px;
+        background: #fafafa;
+        border-radius: 6px;
+
+        .anticon {
+          margin-right: 8px;
+          color: @primary-color;
+        }
+
+        .date-label {
+          font-size: 15px;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.85);
+        }
+
+        .file-count {
+          margin-left: 8px;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/FileImageItem/ImageItem.vue

@@ -4,15 +4,32 @@
     <span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize }">
       <img :src="img.url" :alt="img.name" />
       <span class="picture-action" :style="{ width: actionSize, height: actionSize }">
-        <a-icon type="eye" class="picture-preview-icon" @click="preview(img.url)" />
+        <a-icon type="eye" class="picture-preview-icon" @click="handlePreview(img.url)" />
       </span>
     </span>
+    <!-- 图片预览弹窗 -->
+    <a-modal
+      v-model="previewVisible"
+      :footer="null"
+      :dialog-style="{ top: '20px' }"
+      width="85%"
+      :z-index="1001"
+      title="图片预览"
+      @cancel="handlePreviewClose"
+    >
+      <file-preview :path="previewPath" />
+    </a-modal>
   </div>
 </template>
 
 <script>
+import FilePreview from '@vue2-client/components/FilePreview'
+
 export default {
   name: 'ImageItem',
+  components: {
+    FilePreview
+  },
   props: {
     images: {
       type: Array,
@@ -23,6 +40,12 @@ export default {
       default: 150
     }
   },
+  data () {
+    return {
+      previewVisible: false,
+      previewPath: ''
+    }
+  },
   computed: {
     cardSize: function () {
       return this.width + 'px'
@@ -32,8 +55,13 @@ export default {
     }
   },
   methods: {
-    preview (path) {
-      this.$emit('preview', path)
+    handlePreview (path) {
+      this.previewPath = path
+      this.previewVisible = true
+    },
+    handlePreviewClose () {
+      this.previewVisible = false
+      this.previewPath = ''
     }
   }
 }
@@ -51,6 +79,7 @@ export default {
   img {
     width: 100%;
     height: 100%;
+    object-fit: cover;
   }
   .picture-action {
     position: absolute;