quguang_front_wzysg_HZ/src/components/searchContents/index.vue

<template>
  <div class="component-container searchContent">
    <!-- max-height="450" -->
    <el-table
      ref="registerPatientsListTable"
      :data="dataList"
      style="width: 100%"
      class="examine-table"
      :show-header="conCiseShow == true ? true : false"
      @="handleSelectionChange"
      @select="headleSelect"
    >
      <el-table-column v-if="projectName == 'sampleBank'" type="selection" width="55" :selectable="selectable" />
      <!-- 简洁版 -->
      <template v-if="conCiseShow == true">
        <!-- 姓名 -->
        <el-table-column :label="'姓名'" header-align="center" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.register_patient.name | f_desensitize_name }}
          </template>
        </el-table-column>
        <!-- 性别 -->
        <el-table-column :label="'性别'" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.register_patient.sex | f_sex }}
          </template>
        </el-table-column>
        <!-- 年龄 -->
        <el-table-column :label="'年龄'" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.register_patient.birthday | f_getAge }}
          </template>
        </el-table-column>
        <!-- 身份证号 -->
        <el-table-column prop="patientIdNumber" :label="'身份证号'" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.register_patient.patientIdNumber | f_desensitize_idNumber }}
          </template>
        </el-table-column>
        <!-- 电话号码 备用-->
        <!-- <el-table-column
          prop="patientPhone"
          :label="'电话号码'"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.register_patient.patientPhone }}
          </template>
        </el-table-column> -->
        <!-- 地址 备用-->
        <!-- <el-table-column
          prop="patientAddress"
          :label="'地址'"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.register_patient.patientAddress }}
          </template>
        </el-table-column> -->
        <!-- 操作 -->
        <el-table-column label="操作" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row)">查看详情
            </el-button>
          </template>
        </el-table-column>
      </template>
      <!-- 标准版 -->
      <template v-if="conCiseShow == false">
        <!-- 姓名 -->
        <el-table-column header-align="center">
          <template slot-scope="scope">
            <div class="head">
              <div class="left">
                <!-- <el-checkbox :label="id">{{ "" }}</el-checkbox> -->
                <div class="left">
                  <span>姓名：{{ scope.row.register_patient.name }}</span>
                  <span>性别：{{ scope.row.register_patient.sex }}</span>
                  <!-- <span>年龄：{{ registerPatient.patientSexAge }}</span> -->
                </div>
              </div>
              <div class="right">
                <el-link type="primary" :underline="false" @click="showDetail(scope.row)">查看详情 <i
                  class="el-icon-arrow-right el-icon--right"
                /></el-link>
              </div>
            </div>
            <div class="searchContent-text" v-html="scope.row.allHighlight" />
            <div class="exam">
              <p v-for="(item, index) in scope.row.pacs_register_examine_item" :key="index">
                <span>{{ item.examineItem }}</span>
                <span>{{ item.count + "次" }}</span>
              </p>
            </div>

            <el-row :gutter="20">
              <el-col :span="12">
                <echarts-shili :chart-data="scope.row.shili" :id-name="'shili' + scope.$index" desc="视力" />
              </el-col>
              <el-col :span="12">
                <echarts-yanya :chart-data="scope.row.yanya" :id-name="'yanya' + scope.$index" desc="眼压" />
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 底部全选反选 -->
    <checked-footer
      v-if="projectName == 'sampleBank'"
      ref="checkfooter"
      table-ref="registerPatientsListTable"
      :current-table-list="currentTableList"
      :data-list="dataList"
    >
      <div class="batch_button">
        <el-button type="primary" size="small" @click="IntoSubjectsClick">引入受试者</el-button>
      </div>
    </checked-footer>
    <!-- 详情页 -->
    <el-dialog title="360视图" class="detail-view" :visible.sync="dialogVisible" :fullscreen="true">
      <detail-view :id="detailId" ref="viewRef" :patient-id-number="patientIdNumber" />
    </el-dialog>
    <!-- 补全身份证号 -->
    <el-dialog title="收货地址" :visible.sync="dialogPatientIDVisible" @closed="closePatientId">
      <span>身份证:</span>
      <el-input v-model="patientIdNumber" placeholder="请输入内容" clearable />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPatientIDVisible=false">取 消</el-button>
        <el-button type="primary" @click="surePatientIdClick">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import echartsShili from '@/components/echarts/shili'
import echartsYanya from '@/components/echarts/yanya'
import checkedFooter from '@/components/checked-footer'
import detailView from '@/components/360View'
import checked from '@/mixins/checked'
import { confirm } from '@/utils/confirm'
export default {
  components: { echartsShili, echartsYanya, detailView, checkedFooter },
  mixins: [checked],
  inject: ['refresh'],
  props: {
    id: {
      type: String,
      default: ''
    },
    htmlText: {
      type: String,
      default: ''
    },
    projectName: {
      type: String,
      default: ''
    },
    registerPatient: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    visionData: {
      type: Array,
      default: () => []
    },
    iopData: {
      type: Array,
      default: () => []
    },
    conCiseShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogPatientIDVisible: false,
      detailId: '',
      patientIdNumber: '',
      checked: false,
      // cheackAllFooter: false,
      currentTableList: [],
      projectId: '',
      noPatientIDList: {},
      currentSelectionRow: {},
      flag: 0
    }
  },
  created() {
    this.projectId = window.SITE_CONFIG['projectId']
  },
  methods: {
    // 查看详情
    showDetail(scope) {
      this.patientIdNumber = scope.register_patient.patientIdNumber
      this.detailId = scope.id
      this.dialogVisible = true
      this.$nextTick(() => {
        // 根据id获取患者信息--中间上侧患者信息
        this.$refs.viewRef.getPatientData()
        // 获取时间轴数据--左侧时间轴
        this.$refs.viewRef.getTimeAxisData()
        // 获取视力和眼压图标的值
        this.$refs.viewRef.getShiLiAndYanYaData()
        // 获取关键指标--右侧获取筛选的具体值
        this.$refs.viewRef.getKPI()
      })
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      if (val.length === this.dataList.length) {
        this.$refs.checkfooter.cheackAllFooter = true
      } else {
        this.$refs.checkfooter.cheackAllFooter = false
      }
      this.currentTableList = val
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    headleSelect(val) {
      // 330104195404061636
      this.flag = 0
      this.currentSelectionRow = val[0]
      if (val.length > 0 && !val[0].register_patient.patientIdNumber) {
        this.noPatientIDList = val[0].register_patient
        this.dialogPatientIDVisible = true
      }
    },
    // 确定添加身份证号
    async surePatientIdClick() {
      const { data: res } = await this.$http.post('/hz_quguang/project/patient/completeIdNumber', {
        birthday: this.$options.filters['dateFilterTwo'](this.noPatientIDList.birthday),
        hospitalId: this.noPatientIDList.hospitalId,
        name: this.noPatientIDList.name,
        patientId: this.noPatientIDList.id,
        patientIdNumber: this.patientIdNumber,
        sex: this.noPatientIDList.sex
      })
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '身份证号添加成功'
        })
        this.flag = 1
        this.dialogPatientIDVisible = false
      } else {
        this.flag = 0
        this.$message.error(res.msg)
      }
    },
    // 关闭添加身份证号弹框
    closePatientId() {
      this.dialogPatientIDVisible = false
      this.flag === 0 ? this.$refs.registerPatientsListTable.toggleRowSelection(this.currentSelectionRow, false) : ''
    },
    // 引入受试者
    IntoSubjectsClick() {
      confirm('确定要引入受试者吗?').then(async() => {
        const patientInfoArr = []
        let patientInfoObj = {}
        this.currentTableList.forEach((item) => {
          patientInfoObj = {
            hospitalCode: item.register_patient.hospitalId,
            patientBirthday: item.register_patient.birthday,
            patientId: item.register_patient.id,
            patientIdNumber: item.register_patient.patientIdNumber,
            patientName: item.register_patient.name,
            patientSex: item.register_patient.sex,
            projectId: this.projectId
          }
          patientInfoArr.push(patientInfoObj)
        })
        const { data: res } = await this.$http({
          method: 'post',
          url: '/hz_quguang/project/patient',
          data: patientInfoArr
        })
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '引入成功!'
          })
          this.currentTableList.forEach(item => {
            this.dataList.forEach(iten => {
              if (item.id === iten.id) {
                item.existInProject = 1
              }
            })
          })
          this.$refs.registerPatientsListTable.clearSelection()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
    selectable(row, index) {
      if (row.existInProject === 1) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.searchContent {
  width: 100%;
  padding-bottom: 16px;
  background-color: #fff;
  margin-bottom: 16px;
  .head {
    display: flex;
    justify-content: space-between;
    .el-checkbox {
      margin-right: 16px;
    }
    .left {
      display: flex;
      span {
        font-size: 16px;
        padding-right: 55px;
        font-weight: bold;
      }
    }
  }
  .searchContent-text {
    font-size: 16px;
    margin: 16px 0;
  }
  .exam {
    display: flex;
    flex-wrap: wrap;
    p {
      display: flex;
      flex-wrap: nowrap;
      height: 32px;
      line-height: 32px;
      width: 18%;
      background-color: #eee;
      padding: 0 10px;
      margin: 6px;
      span {
        display: block;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span:nth-child(2) {
        padding-left: 14px;
        color: #0072f9;
      }
    }
  }
}

a.el-link.el-link--primary:hover {
  text-decoration: none;
}
</style>

<style lang="scss">
.searchContent .detail-view {
  .el-dialog {
    background: #000;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 10px 20px 10px;

    .el-dialog__title {
      color: #fff;
      padding: 10px;
    }

    .el-dialog__headerbtn {
      top: 5px;
      font-size: 30px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    height: calc(100vh - 60px);
    padding: 0 10px;
  }
}
</style>