peisweb/src/components/occDisease/ImageTextReport.vue

<template>
  <div style="overflow-y: auto;width:100%;height:465px;">
    <el-table :data="tableData" border height="465" row-key="id" size="small" highlight-current-row ref="imageTextReport">
      <el-table-column prop="registerCheckAsbitemName" label="检查项目" min-width="80" />
      <el-table-column prop="checkPictureUrls" label="检查项目" min-width="680">
        <template slot-scope="scope">
          <div style="overflow-x: auto;width:680px;">
            <div style="display: flex;">
              <div class="demo-image__preview" v-for="(item, index) in scope.row.checkPictureUrls" :key="item.id"
                style="display: inline-block; padding: 0 0 0 2px">
                <div style="margin-top: 5px">
                  <el-image style="width: 80px; height: 80px; border-radius: 5px" :src="item.indexOf('http') > -1
                    ? item
                    : sysConfig.apiurl + item
                    " :preview-src-list="previewSrcList(scope.row.checkPictureUrls, item)">
                  </el-image>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { arrayExistObj, getColorStr } from '@/utlis/proFunc';
export default {
  components: {},
  props: ["patientRegisterId", "tabChoosed"],
  data() {
    return {
      sysConfig: {},
      tableData: [],
    };
  },

  created() {
    this.sysConfig = JSON.parse(window.sessionStorage.getItem('sysConfig'))
  },

  //挂载完成
  mounted() {
    this.CheckDetails(this.dataTransOpts.tableS.patient_register.id);
  },

  computed: {
    ...mapState(['window', 'dict', 'dataTransOpts', 'doctorCheck', 'sumDoctorCheck']),
  },

  methods: {
    getColorStr,
    //获取结果明细
    CheckDetails(patientRegisterId) {
      if (!patientRegisterId) {
        this.tableData = []
        return
      }

      postapi('/api/app/OccupationalDisease/GetRegisterCheckPictureByPatientRegisterId', { patientRegisterId })
        .then((res) => {
          console.log("获取图文报告 CheckDetails", res.data);
          if (res.code != -1) {
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: `操作失败，原因：${err}` });
        });
    },

    // 生成 图片预览列表
    previewSrcList(oriList, curImag) {
      let srcList = []
      let image = curImag.indexOf('http') > -1 ? curImag : this.sysConfig.apiurl + curImag;
      srcList.push(image)
      let lfind = arrayExistObj(oriList, 'id', curImag.id)
      if (lfind > -1) {
        for (let i = lfind + 1; i < oriList.length; i++) {
          let e = oriList[i];
          image = e.indexOf('http') > -1 ? e : this.sysConfig.apiurl + e;
          srcList.push(image)
        }
        for (let index = 0; index < lfind; index++) {
          let e = oriList[index];
          image = e.indexOf('http') > -1 ? e : this.sysConfig.apiurl + e;
          srcList.push(image)
        }
      }
      return srcList
    },
  },

  //监听事件
  watch: {
    // 虚拟表 触发强制刷新 sumDoctor.M 合并包含：综述、建议、对比、历史等，不包含总检诊断）
    "dataTransOpts.plus.OccDisease": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log(`watch 总检--检查明细结果 newVal: ${newVal}, oldVal: ${oldVal} patientRegisterId: ${this.dataTransOpts.tableS.patient_register.id}`);
        if (newVal != oldVal) this.CheckDetails(this.dataTransOpts.tableS.patient_register.id);
      }
    },

  },
};
</script>
<style scoped>
.tdCellClass {
  padding: 0 5px;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  padding: 0;
}
</style>